UNPKG

yqcloud-ui

Version:

An enterprise-class UI design language and React-based implementation

1,945 lines (1,944 loc) 54.6 kB
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ /* stylelint-disable no-duplicate-selectors */ /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */ /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */ /* stylelint-disable at-rule-no-unknown */ @import 'https://yanqian-common.bj.bcebos.com/iconfonts/dev/iconfont.css?t=localhost:time'; @font-face { font-family: "Monospaced Number"; src: local("Tahoma"); unicode-range: U+30-39; } @font-face { font-family: "Chinese Quote"; src: local("PingFang SC"), local("SimSun"); unicode-range: U+2018, U+2019, U+201c, U+201d; } html, body { width: 100%; height: 100%; } input::-ms-clear, input::-ms-reveal { display: none; } *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @-ms-viewport { width: device-width; } article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } body { margin: 0; font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1.5; color: #04173F; background-color: #fff; } [tabindex="-1"]:focus { outline: none !important; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5em; color: #04173F; font-weight: 500; } p { margin-top: 0; margin-bottom: 1em; } abbr[title], abbr[data-original-title] { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; border-bottom: 0; } address { margin-bottom: 1em; font-style: normal; line-height: inherit; } input[type="text"], input[type="password"], input[type="number"], textarea { -webkit-appearance: none; } ol, ul, dl { margin-top: 0; margin-bottom: 1em; } ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } dt { font-weight: 500; } dd { margin-bottom: .5em; margin-left: 0; } blockquote { margin: 0 0 1em; } dfn { font-style: italic; } b, strong { font-weight: bolder; } small { font-size: 80%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } a { color: #2196f3; background-color: transparent; text-decoration: none; outline: none; cursor: pointer; -webkit-transition: color .3s; transition: color .3s; -webkit-text-decoration-skip: objects; } a:focus { text-decoration: underline; -webkit-text-decoration-skip: ink; text-decoration-skip: ink; } a:hover { color: #4db5ff; } a:active { color: #1272cc; } a:active, a:hover { outline: 0; text-decoration: none; } a[disabled] { color: rgba(0, 0, 0, 0.25); cursor: not-allowed; pointer-events: none; } pre, code, kbd, samp { font-family: Consolas, Menlo, Courier, monospace; font-size: 1em; } pre { margin-top: 0; margin-bottom: 1em; overflow: auto; } figure { margin: 0 0 1em; } img { vertical-align: middle; border-style: none; } svg:not(:root) { overflow: hidden; } a, area, button, [role="button"], input:not([type=range]), label, select, summary, textarea { -ms-touch-action: manipulation; touch-action: manipulation; } table { border-collapse: collapse; } caption { padding-top: .75em; padding-bottom: .3em; color: rgba(0, 0, 0, 0.45); text-align: left; caption-side: bottom; } th { text-align: inherit; } input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; } button, input { overflow: visible; } button, select { text-transform: none; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; } input[type="radio"], input[type="checkbox"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { -webkit-appearance: listbox; } textarea { overflow: auto; resize: vertical; } fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { display: block; width: 100%; max-width: 100%; padding: 0; margin-bottom: .5em; font-size: 1.5em; line-height: inherit; color: inherit; white-space: normal; } progress { vertical-align: baseline; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="sousuoneirong"] { outline-offset: -2px; -webkit-appearance: none; } [type="sousuoneirong"]::-webkit-search-shanchux-button, [type="sousuoneirong"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } output { display: inline-block; } summary { display: list-item; } template { display: none; } [hidden] { display: none !important; } mark { padding: .2em; background-color: #feffe6; } ::-moz-selection { background: #2196f3; color: #fff; } ::selection { background: #2196f3; color: #fff; } .clearfix { zoom: 1; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; visibility: hidden; font-size: 0; height: 0; } @font-face { font-family: 'iconfont'; src: url('https://yanqian-common.bj.bcebos.com/iconfonts/dev/iconfont.eot?t=localhost:time'); src: url('https://yanqian-common.bj.bcebos.com/iconfonts/dev/iconfont.eot?t=localhost:time') format('embedded-opentype'), url('https://yanqian-common.bj.bcebos.com/iconfonts/dev/iconfont.ttf?t=localhost:time') format('truetype'), url('https://yanqian-common.bj.bcebos.com/iconfonts/dev/iconfont.woff?t=localhost:time') format('woff'), url('https://yanqian-common.bj.bcebos.com/iconfonts/dev/iconfont.svg?t=localhost:time') format('svg'); font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon { line-height: 1; font-size: 18px; display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; vertical-align: middle; background-image: none; font-family: 'iconfont' !important; speak: none; font-style: normal; font-weight: inherit; font-variant: normal; text-transform: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon:before { line-height: 1; } .icon.lg { font-size: 20px; width: 20px; height: 20px; } .icon.sm { font-size: 16px; width: 16px; height: 16px; } .iconfont { font-size: 12px; } .fade-enter, .fade-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .fade-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .fade-enter.fade-enter-active, .fade-appear.fade-appear-active { -webkit-animation-name: antFadeIn; animation-name: antFadeIn; -webkit-animation-play-state: running; animation-play-state: running; } .fade-leave.fade-leave-active { -webkit-animation-name: antFadeOut; animation-name: antFadeOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .fade-enter, .fade-appear { opacity: 0; -webkit-animation-timing-function: linear; animation-timing-function: linear; } .fade-leave { -webkit-animation-timing-function: linear; animation-timing-function: linear; } @-webkit-keyframes antFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes antFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes antFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes antFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .move-up-enter, .move-up-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .move-up-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .move-up-enter.move-up-enter-active, .move-up-appear.move-up-appear-active { -webkit-animation-name: antMoveUpIn; animation-name: antMoveUpIn; -webkit-animation-play-state: running; animation-play-state: running; } .move-up-leave.move-up-leave-active { -webkit-animation-name: antMoveUpOut; animation-name: antMoveUpOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .move-up-enter, .move-up-appear { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } .move-up-leave { -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); } .move-down-enter, .move-down-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .move-down-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .move-down-enter.move-down-enter-active, .move-down-appear.move-down-appear-active { -webkit-animation-name: antMoveDownIn; animation-name: antMoveDownIn; -webkit-animation-play-state: running; animation-play-state: running; } .move-down-leave.move-down-leave-active { -webkit-animation-name: antMoveDownOut; animation-name: antMoveDownOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .move-down-enter, .move-down-appear { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } .move-down-leave { -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); } .move-left-enter, .move-left-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .move-left-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .move-left-enter.move-left-enter-active, .move-left-appear.move-left-appear-active { -webkit-animation-name: antMoveLeftIn; animation-name: antMoveLeftIn; -webkit-animation-play-state: running; animation-play-state: running; } .move-left-leave.move-left-leave-active { -webkit-animation-name: antMoveLeftOut; animation-name: antMoveLeftOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .move-left-enter, .move-left-appear { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } .move-left-leave { -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); } .move-right-enter, .move-right-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .move-right-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .move-right-enter.move-right-enter-active, .move-right-appear.move-right-appear-active { -webkit-animation-name: antMoveRightIn; animation-name: antMoveRightIn; -webkit-animation-play-state: running; animation-play-state: running; } .move-right-leave.move-right-leave-active { -webkit-animation-name: antMoveRightOut; animation-name: antMoveRightOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .move-right-enter, .move-right-appear { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } .move-right-leave { -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); } @-webkit-keyframes antMoveDownIn { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } @keyframes antMoveDownIn { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } @-webkit-keyframes antMoveDownOut { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } } @keyframes antMoveDownOut { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } } @-webkit-keyframes antMoveLeftIn { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } } @keyframes antMoveLeftIn { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } } @-webkit-keyframes antMoveLeftOut { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } } @keyframes antMoveLeftOut { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } } @-webkit-keyframes antMoveRightIn { 0% { opacity: 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { opacity: 1; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes antMoveRightIn { 0% { opacity: 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { opacity: 1; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes antMoveRightOut { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; } } @keyframes antMoveRightOut { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; } } @-webkit-keyframes antMoveUpIn { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } @keyframes antMoveUpIn { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } @-webkit-keyframes antMoveUpOut { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } } @keyframes antMoveUpOut { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } } @-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); } } .slide-up-enter, .slide-up-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .slide-up-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .slide-up-enter.slide-up-enter-active, .slide-up-appear.slide-up-appear-active { -webkit-animation-name: antSlideUpIn; animation-name: antSlideUpIn; -webkit-animation-play-state: running; animation-play-state: running; } .slide-up-leave.slide-up-leave-active { -webkit-animation-name: antSlideUpOut; animation-name: antSlideUpOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .slide-up-enter, .slide-up-appear { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); } .slide-up-leave { -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); } .slide-down-enter, .slide-down-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .slide-down-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .slide-down-enter.slide-down-enter-active, .slide-down-appear.slide-down-appear-active { -webkit-animation-name: antSlideDownIn; animation-name: antSlideDownIn; -webkit-animation-play-state: running; animation-play-state: running; } .slide-down-leave.slide-down-leave-active { -webkit-animation-name: antSlideDownOut; animation-name: antSlideDownOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .slide-down-enter, .slide-down-appear { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); } .slide-down-leave { -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); } .slide-left-enter, .slide-left-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .slide-left-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .slide-left-enter.slide-left-enter-active, .slide-left-appear.slide-left-appear-active { -webkit-animation-name: antSlideLeftIn; animation-name: antSlideLeftIn; -webkit-animation-play-state: running; animation-play-state: running; } .slide-left-leave.slide-left-leave-active { -webkit-animation-name: antSlideLeftOut; animation-name: antSlideLeftOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .slide-left-enter, .slide-left-appear { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); } .slide-left-leave { -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); } .slide-right-enter, .slide-right-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .slide-right-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .slide-right-enter.slide-right-enter-active, .slide-right-appear.slide-right-appear-active { -webkit-animation-name: antSlideRightIn; animation-name: antSlideRightIn; -webkit-animation-play-state: running; animation-play-state: running; } .slide-right-leave.slide-right-leave-active { -webkit-animation-name: antSlideRightOut; animation-name: antSlideRightOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .slide-right-enter, .slide-right-appear { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); } .slide-right-leave { -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-keyframes antSlideUpIn { 0% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } 100% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(1); transform: scaleY(1); } } @keyframes antSlideUpIn { 0% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } 100% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(1); transform: scaleY(1); } } @-webkit-keyframes antSlideUpOut { 0% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } } @keyframes antSlideUpOut { 0% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } } @-webkit-keyframes antSlideDownIn { 0% { opacity: 0; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } 100% { opacity: 1; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(1); transform: scaleY(1); } } @keyframes antSlideDownIn { 0% { opacity: 0; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } 100% { opacity: 1; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(1); transform: scaleY(1); } } @-webkit-keyframes antSlideDownOut { 0% { opacity: 1; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { opacity: 0; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } } @keyframes antSlideDownOut { 0% { opacity: 1; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { opacity: 0; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } } @-webkit-keyframes antSlideLeftIn { 0% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } 100% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes antSlideLeftIn { 0% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } 100% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } } @-webkit-keyframes antSlideLeftOut { 0% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } } @keyframes antSlideLeftOut { 0% { opacity: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { opacity: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } } @-webkit-keyframes antSlideRightIn { 0% { opacity: 0; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } 100% { opacity: 1; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes antSlideRightIn { 0% { opacity: 0; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } 100% { opacity: 1; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } } @-webkit-keyframes antSlideRightOut { 0% { opacity: 1; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { opacity: 0; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } } @keyframes antSlideRightOut { 0% { opacity: 1; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { opacity: 0; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); } } .swing-enter, .swing-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .swing-enter.swing-enter-active, .swing-appear.swing-appear-active { -webkit-animation-name: antSwingIn; animation-name: antSwingIn; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes antSwingIn { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 40% { -webkit-transform: translateX(10px); transform: translateX(10px); } 60% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 80% { -webkit-transform: translateX(5px); transform: translateX(5px); } } @keyframes antSwingIn { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 40% { -webkit-transform: translateX(10px); transform: translateX(10px); } 60% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 80% { -webkit-transform: translateX(5px); transform: translateX(5px); } } .zoom-enter, .zoom-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .zoom-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .zoom-enter.zoom-enter-active, .zoom-appear.zoom-appear-active { -webkit-animation-name: antZoomIn; animation-name: antZoomIn; -webkit-animation-play-state: running; animation-play-state: running; } .zoom-leave.zoom-leave-active { -webkit-animation-name: antZoomOut; animation-name: antZoomOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .zoom-enter, .zoom-appear { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } .zoom-leave { -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); } .zoom-big-enter, .zoom-big-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .zoom-big-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .zoom-big-enter.zoom-big-enter-active, .zoom-big-appear.zoom-big-appear-active { -webkit-animation-name: antZoomBigIn; animation-name: antZoomBigIn; -webkit-animation-play-state: running; animation-play-state: running; } .zoom-big-leave.zoom-big-leave-active { -webkit-animation-name: antZoomBigOut; animation-name: antZoomBigOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .zoom-big-enter, .zoom-big-appear { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } .zoom-big-leave { -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); } .zoom-big-fast-enter, .zoom-big-fast-appear { -webkit-animation-duration: 0.1s; animation-duration: 0.1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .zoom-big-fast-leave { -webkit-animation-duration: 0.1s; animation-duration: 0.1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .zoom-big-fast-enter.zoom-big-fast-enter-active, .zoom-big-fast-appear.zoom-big-fast-appear-active { -webkit-animation-name: antZoomBigIn; animation-name: antZoomBigIn; -webkit-animation-play-state: running; animation-play-state: running; } .zoom-big-fast-leave.zoom-big-fast-leave-active { -webkit-animation-name: antZoomBigOut; animation-name: antZoomBigOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .zoom-big-fast-enter, .zoom-big-fast-appear { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } .zoom-big-fast-leave { -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); } .zoom-small-slow-enter, .zoom-small-slow-appear { -webkit-animation-duration: 0.45s; animation-duration: 0.45s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .zoom-small-slow-leave { -webkit-animation-duration: 0.45s; animation-duration: 0.45s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .zoom-small-slow-enter.zoom-small-slow-enter-active, .zoom-small-slow-appear.zoom-small-slow-appear-active { -webkit-animation-name: antZoomSmallIn; animation-name: antZoomSmallIn; -webkit-animation-play-state: running; animation-play-state: running; } .zoom-small-slow-leave.zoom-small-slow-leave-active { -webkit-animation-name: antZoomSmallOut; animation-name: antZoomSmallOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .zoom-small-slow-enter, .zoom-small-slow-appear { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } .zoom-small-slow-leave { -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); } .zoom-up-enter, .zoom-up-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .zoom-up-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .zoom-up-enter.zoom-up-enter-active, .zoom-up-appear.zoom-up-appear-active { -webkit-animation-name: antZoomUpIn; animation-name: antZoomUpIn; -webkit-animation-play-state: running; animation-play-state: running; } .zoom-up-leave.zoom-up-leave-active { -webkit-animation-name: antZoomUpOut; animation-name: antZoomUpOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .zoom-up-enter, .zoom-up-appear { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } .zoom-up-leave { -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); } .zoom-down-enter, .zoom-down-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .zoom-down-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .zoom-down-enter.zoom-down-enter-active, .zoom-down-appear.zoom-down-appear-active { -webkit-animation-name: antZoomDownIn; animation-name: antZoomDownIn; -webkit-animation-play-state: running; animation-play-state: running; } .zoom-down-leave.zoom-down-leave-active { -webkit-animation-name: antZoomDownOut; animation-name: antZoomDownOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .zoom-down-enter, .zoom-down-appear { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } .zoom-down-leave { -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); } .zoom-left-enter, .zoom-left-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .zoom-left-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .zoom-left-enter.zoom-left-enter-active, .zoom-left-appear.zoom-left-appear-active { -webkit-animation-name: antZoomLeftIn; animation-name: antZoomLeftIn; -webkit-animation-play-state: running; animation-play-state: running; } .zoom-left-leave.zoom-left-leave-active { -webkit-animation-name: antZoomLeftOut; animation-name: antZoomLeftOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .zoom-left-enter, .zoom-left-appear { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } .zoom-left-leave { -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); } .zoom-right-enter, .zoom-right-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .zoom-right-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .zoom-right-enter.zoom-right-enter-active, .zoom-right-appear.zoom-right-appear-active { -webkit-animation-name: antZoomRightIn; animation-name: antZoomRightIn; -webkit-animation-play-state: running; animation-play-state: running; } .zoom-right-leave.zoom-right-leave-active { -webkit-animation-name: antZoomRightOut; animation-name: antZoomRightOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .zoom-right-enter, .zoom-right-appear { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } .zoom-right-leave { -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); } @-webkit-keyframes antZoomIn { 0% { opacity: 0; -webkit-transform: scale(0.2); transform: scale(0.2); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes antZoomIn { 0% { opacity: 0; -webkit-transform: scale(0.2); transform: scale(0.2); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes antZoomOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.2); transform: scale(0.2); } } @keyframes antZoomOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.2); transform: scale(0.2); } } @-webkit-keyframes antZoomSmallIn { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes antZoomSmallIn { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes antZoomSmallOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } } @keyframes antZoomSmallOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } } @-webkit-keyframes antZoomBigIn { 0% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes antZoomBigIn { 0% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes antZoomBigOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes antZoomBigOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } } @-webkit-keyframes antZoomUpIn { 0% { opacity: 0; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(1); transform: scale(1); } } @keyframes antZoomUpIn { 0% { opacity: 0; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes antZoomUpOut { 0% { -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes antZoomUpOut { 0% { -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(0.8); transform: scale(0.8); } } @-webkit-keyframes antZoomLeftIn { 0% { opacity: 0; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%;