@alifd/next
Version:
A configurable component library for web built on React.
2,059 lines (2,016 loc) • 727 kB
CSS
/*!
* @alifd/next@1.25.36 (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 */
.next-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
top: 0;
margin: -1px;
}
@-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 fadeInDownSmall {
0% {
opacity: 0;
-webkit-transform: translateY(-8px);
-ms-transform: translateY(-8px);
transform: translateY(-8px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInDownSmall {
0% {
opacity: 0;
-webkit-transform: translateY(-8px);
-ms-transform: translateY(-8px);
transform: translateY(-8px);
}
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(24px);
-ms-transform: translateY(24px);
transform: translateY(24px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(24px);
-ms-transform: translateY(24px);
transform: translateY(24px);
}
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(-24px);
-ms-transform: translateY(-24px);
transform: translateY(-24px);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-24px);
-ms-transform: translateY(-24px);
transform: translateY(-24px);
}
}
@-webkit-keyframes fadeOutUpSmall {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-8px);
-ms-transform: translateY(-8px);
transform: translateY(-8px);
}
}
@keyframes fadeOutUpSmall {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-8px);
-ms-transform: translateY(-8px);
transform: translateY(-8px);
}
}
@-webkit-keyframes slideOutDown {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
}
@keyframes slideOutDown {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
}
@-webkit-keyframes slideOutLeft {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
@keyframes slideOutLeft {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
@-webkit-keyframes slideOutRight {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
}
@keyframes slideOutRight {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
}
@-webkit-keyframes slideOutUp {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
@keyframes slideOutUp {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
@-webkit-keyframes slideInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slideInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes slideInRight {
0% {
opacity: 0;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideInRight {
0% {
opacity: 0;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes slideInUp {
0% {
opacity: 0;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slideInUp {
0% {
opacity: 0;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@-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 zoomInBig {
0% {
opacity: 0;
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
@keyframes zoomInBig {
0% {
opacity: 0;
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes zoomOutBig {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}
@keyframes zoomOutBig {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}
@-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: 0.1;
}
50% {
opacity: 0.9;
}
100% {
opacity: 1;
}
}
@keyframes expandInWithFade {
0% {
opacity: 0;
}
40% {
opacity: 0.1;
}
50% {
opacity: 0.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.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 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: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 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.35s;
animation-duration: 0.35s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-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: 250ms;
animation-duration: 250ms;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-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: 250ms;
animation-duration: 250ms;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-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: 250ms;
animation-duration: 250ms;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-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: 250ms;
animation-duration: 250ms;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-duration: 0.35s;
animation-duration: 0.35s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-duration: 0.35s;
animation-duration: 0.35s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-duration: 0.35s;
animation-duration: 0.35s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-duration: 0.35s;
animation-duration: 0.35s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
-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.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight;
-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.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
-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.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown;
-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.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-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.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-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;
}
.fadeInDownSmall {
-webkit-animation-name: fadeInDownSmall;
animation-name: fadeInDownSmall;
-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;
}
.fadeOutUpSmall {
-webkit-animation-name: fadeOutUpSmall;
animation-name: fadeOutUpSmall;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-duration: 250ms;
animation-duration: 250ms;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.zoomInBig {
-webkit-animation-name: zoomInBig;
animation-name: zoomInBig;
-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, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.zoomOutBig {
-webkit-animation-name: zoomOutBig;
animation-name: zoomOutBig;
-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, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0, 0, 0.2, 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.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 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 0.3s ease-out;
transition: all 0.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 0.2s ease-out;
transition: all 0.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-icon[dir=rtl]::before {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
@font-face {
font-family: NextIcon;
src: url("//at.alicdn.com/t/font_515771_xjdbujl2iu.eot");
src: url("//at.alicdn.com/t/font_515771_xjdbujl2iu.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_515771_xjdbujl2iu.woff2") format("woff2"), url("//at.alicdn.com/t/font_515771_xjdbujl2iu.woff") format("woff"), url("//at.alicdn.com/t/font_515771_xjdbujl2iu.ttf") format("truetype"), url("//at.alicdn.com/t/font_515771_xjdbujl2iu.svg#NextIcon") format("svg");
font-display: swap;
}
.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;
}
.next-icon-eye:before {
content: "\E611";
}
.next-icon-copy:before {
content: "\E60F";
}
.next-icon-toggle-left:before {
content: "\E602";
}
.next-icon-toggle-right:before {
content: "\E603";
}
.next-icon-eye-close:before {
content: "\E600";
}
.next-icon-unlock:before {
content: "\E615";
}
.next-icon-lock:before {
content: "\E617";
}
.next-icon-exit:before {
content: "\E616";
}
.next-icon-chart-bar:before {
content: "\E612";
}
.next-icon-chart-pie:before {
content: "\E613";
}
.next-icon-form:before {
content: "\E7FB";
}
.next-icon-detail:before {
content: "\E7F8";
}
.next-icon-list:before {
content: "\E7F9";
}
.next-icon-dashboard:before {
content: "\E7FA";
}
@-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, .next-icon.next-xxs .next-icon-remote {
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, .next-icon.next-xs .next-icon-remote {
width: 12px;
font-size: 12px;
line-height: inherit;
}
.next-icon.next-small:before, .next-icon.next-small .next-icon-remote {
width: 16px;
font-size: 16px;
line-height: inherit;
}
.next-icon.next-medium:before, .next-icon.next-medium .next-icon-remote {
width: 20px;
font-size: 20px;
line-height: inherit;
}
.next-icon.next-large:before, .next-icon.next-large .next-icon-remote {
width: 24px;
font-size: 24px;
line-height: inherit;
}
.next-icon.next-xl:before, .next-icon.next-xl .next-icon-remote {
width: 32px;
font-size: 32px;
line-height: inherit;
}
.next-icon.next-xxl:before, .next-icon.next-xxl .next-icon-remote {
width: 48px;
font-size: 48px;
line-height: inherit;
}
.next-icon.next-xxxl:before, .next-icon.next-xxxl .next-icon-remote {
width: 64px;
font-size: 64px;
line-height: inherit;
}
.next-icon.next-inherit:before, .next-icon.next-inherit .next-icon-remote {
width: inherit;
font-size: inherit;
line-height: inherit;
}
.next-icon.next-inherit .next-icon-remote,
.next-icon .next-icon-remote {
width: 1em;
height: 1em;
vertical-align: middle;
fill: currentColor;
}
.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-color: rgba(0, 0, 0, 0.2);
-webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
}
.next-overlay-wrapper.opened .next-overlay-backdrop {
opacity: 1;
}
.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: 0.7;
-webkit-filter: blur(1px);
filter: blur(1px);
/* stylelint-disable */
filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false)";
/* IE6~IE9 */
/* stylelint-enable */
position: relative;
pointer-events: none;
}
.next-loading-masker {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
opacity: 0.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: 0.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: 0.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: 0.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);