@alicloud/console-components
Version:
Alibaba Cloud React Components
2,033 lines (1,898 loc) • 1.15 MB
CSS
@charset "UTF-8";
/*!
* @alife/theme-xconsole-v4@0.11.0 (https://fusion.design)
* @alifd/next@1.22.26 (https://fusion.design)
* Copyright 2018-present Alibaba Group,
* Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE)
*/
/* 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 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(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slideInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes slideInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes slideInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slideInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
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 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.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;
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-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.86, 0, 0.07, 1);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 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.3s;
animation-duration: 0.3s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 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.3s;
animation-duration: 0.3s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 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.3s;
animation-duration: 0.3s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 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.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;
}
.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.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;
}
.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.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;
}
.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.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;
}
.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 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;
}
/**
* 尺寸 基础尺寸
* 命名能在语义的前提下简单就尽量简单, 这里可以是 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;
top: 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: #C80000;
background: var(--badge-color-bg, #C80000);
text-align: center;
white-space: nowrap;
border-radius: 16px;
border-radius: var(--badge-size-count-border-radius, 16px);
position: absolute;
width: auto;
height: 18px;
height: var(--badge-size-count-config-height, 18px);
min-width: 18px;
min-width: var(--badge-size-count-config-height, 18px);
padding: 0 4px 0 4px;
padding: 0 var(--badge-size-count-padding-lr, 4px) 0 var(--badge-size-count-padding-lr, 4px);
font-size: 12px;
font-size: var(--badge-size-count-font, 12px);
line-height: 18px;
line-height: var(--badge-size-count-config-height, 18px);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
top: -0.5em;
}
.next-badge .next-badge-count a,
.next-badge .next-badge-count a:hover {
color: #FFFFFF;
}
.next-badge .next-badge-dot {
color: #FFFFFF;
background: #C80000;
background: var(--badge-dot-color-bg, #C80000);
text-align: center;
white-space: nowrap;
border-radius: 8px;
border-radius: var(--badge-size-dot-border-radius, 8px);
position: absolute;
width: 8px;
width: var(--badge-size-dot-width, 8px);
height: 8px;
height: var(--badge-size-dot-width, 8px);
min-width: 8px;
min-width: var(--badge-size-dot-width, 8px);
padding: 0px;
font-size: 1px;
line-height: 1;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
top: -0.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;
font-size: var(--font-size-caption, 12px);
padding-left: 4px;
padding-left: var(--badge-size-custom-padding-lr, 4px);
padding-right: 4px;
padding-right: var(--badge-size-custom-padding-lr, 4px);
border-radius: 2px;
border-radius: var(--badge-size-custom-border-radius, 2px);
-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 100ms linear, -webkit-transform 100ms linear;
min-width: 8px;
min-width: var(--badge-size-dot-width, 8px);
}
.next-badge-scroll-number-only span {
display: block;
height: 18px;
height: var(--badge-size-count-config-height, 18px);
line-height: 18px;
line-height: var(--badge-size-count-config-height, 18px);
font-size: 12px;
font-size: var(--badge-size-count-font, 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: 0px;
margin-bottom: var(--badge-size-list-margin, 0px);
list-style: none;
}
.next-badge[dir=rtl] .next-badge-custom {
padding-right: 4px;
padding-right: var(--badge-size-custom-padding-lr, 4px);
padding-left: 4px;
padding-left: var(--badge-size-custom-padding-lr, 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-color: rgba(0, 0, 0, 0.45);
-webkit-transition: opacity 300ms ease;
transition: opacity 300ms ease;
opacity: 0;
}
.next-overlay-wrapper.opened .next-overlay-backdrop {
opacity: 1;
}
.next-icon[dir=rtl]::before {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
@font-face {
font-family: NextIcon;
src: url("//at.alicdn.com/t/font_1899989_lqawitevtzp.eot");
src: url("//at.alicdn.com/t/font_1899989_lqawitevtzp.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1899989_lqawitevtzp.woff2") format("woff2"), url("//at.alicdn.com/t/font_1899989_lqawitevtzp.woff") format("woff"), url("//at.alicdn.com/t/font_1899989_lqawitevtzp.ttf") format("truetype"), url("//at.alicdn.com/t/font_1899989_lqawitevtzp.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";
content: var(--icon-content-smile, "\e65f");
}
.next-icon-cry:before {
content: "\e65d";
content: var(--icon-content-cry, "\e65d");
}
.next-icon-success:before {
content: "\e60a";
content: var(--icon-content-success, "\e60a");
}
.next-icon-warning:before {
content: "\e60b";
content: var(--icon-content-warning, "\e60b");
}
.next-icon-prompt:before {
content: "\e60c";
content: var(--icon-content-prompt, "\e60c");
}
.next-icon-error:before {
content: "\e60d";
content: var(--icon-content-error, "\e60d");
}
.next-icon-help:before {
content: "\e673";
content: var(--icon-content-help, "\e673");
}
.next-icon-clock:before {
content: "\e621";
content: var(--icon-content-clock, "\e621");
}
.next-icon-success-filling:before {
content: "\e63a";
content: var(--icon-content-success-filling, "\e63a");
}
.next-icon-delete-filling:before {
content: "\e623";
content: var(--icon-content-delete-filling, "\e623");
}
.next-icon-favorites-filling:before {
content: "\e60e";
content: var(--icon-content-favorites-filling, "\e60e");
}
.next-icon-add:before {
content: "\e655";
content: var(--icon-content-add, "\e655");
}
.next-icon-minus:before {
content: "\e601";
content: var(--icon-content-minus, "\e601");
}
.next-icon-arrow-up:before {
content: "\e625";
content: var(--icon-content-arrow-up, "\e625");
}
.next-icon-arrow-down:before {
content: "\e63d";
content: var(--icon-content-arrow-down, "\e63d");
}
.next-icon-arrow-left:before {
content: "\e61d";
content: var(--icon-content-arrow-left, "\e61d");
}
.next-icon-arrow-right:before {
content: "\e619";
content: var(--icon-content-arrow-right, "\e619");
}
.next-icon-arrow-double-left:before {
content: "\e659";
content: var(--icon-content-arrow-double-left, "\e659");
}
.next-icon-arrow-double-right:before {
content: "\e65e";
content: var(--icon-content-arrow-double-right, "\e65e");
}
.next-icon-switch:before {
content: "\e6b3";
content: var(--icon-content-switch, "\e6b3");
}
.next-icon-sorting:before {
content: "\e634";
content: var(--icon-content-sorting, "\e634");
}
.next-icon-descending:before {
content: "\e61f";
content: var(--icon-content-descending, "\e61f");
}
.next-icon-ascending:before {
content: "\e61e";
content: var(--icon-content-ascending, "\e61e");
}
.next-icon-select:before {
content: "\e632";
content: var(--icon-content-select, "\e632");
}
.next-icon-semi-select:before {
content: "\e633";
content: var(--icon-content-semi-select, "\e633");
}
.next-icon-search:before {
content: "\e656";
content: var(--icon-content-search, "\e656");
}
.next-icon-close:before {
content: "\e626";
content: var(--icon-content-close, "\e626");
}
.next-icon-ellipsis:before {
content: "\e654";
content: var(--icon-content-ellipsis, "\e654");
}
.next-icon-picture:before {
content: "\e631";
content: var(--icon-content-picture, "\e631");
}
.next-icon-calendar:before {
content: "\e607";
content: var(--icon-content-calendar, "\e607");
}
.next-icon-ashbin:before {
content: "\e639";
content: var(--icon-content-ashbin, "\e639");
}
.next-icon-upload:before {
content: "\e7ee";
content: var(--icon-content-upload, "\e7ee");
}
.next-icon-download:before {
content: "\e628";
content: var(--icon-content-download, "\e628");
}
.next-icon-set:before {
content: "\e683";
content: var(--icon-content-set, "\e683");
}
.next-icon-edit:before {
content: "\e63b";
content: var(--icon-content-edit, "\e63b");
}
.next-icon-refresh:before {
content: "\e677";
content: var(--icon-content-refresh, "\e677");
}
.next-icon-filter:before {
content: "\e627";
content: var(--icon-content-filter, "\e627");
}
.next-icon-attachment:before {
content: "\e665";
content: var(--icon-content-attachment, "\e665");
}
.next-icon-account:before {
content: "\e608";
content: var(--icon-content-account, "\e608");
}
.next-icon-email:before {
content: "\e605";
content: var(--icon-content-email, "\e605");
}
.next-icon-atm:before {
content: "\e606";
content: var(--icon-content-atm, "\e606");
}
.next-icon-loading:before {
content: "\e646";
content: var(--icon-content-loading, "\e646");
-webkit-animation: loadingCircle 1s infinite linear;
animation: loadingCircle 1s infinite linear;
}
.next-icon-eye:before {
content: "\e7ed";
content: var(--icon-content-eye, "\e7ed");
}
.next-icon-copy:before {
content: "\e80a";
content: var(--icon-content-copy, "\e80a");
}
.next-icon-toggle-left:before {
content: "\e602";
content: var(--icon-content-toggle-left, "\e602");
}
.next-icon-toggle-right:before {
content: "\e60f";
content: var(--icon-content-toggle-right, "\e60f");
}
.next-icon-eye-close:before {
content: "\e610";
content: var(--icon-content-eye-close, "\e610");
}
.next-icon-unlock:before {
content: "\e7fb";
content: var(--icon-content-unlock, "\e7fb");
}
.next-icon-lock:before {
content: "\e7fc";
content: var(--icon-content-lock, "\e7fc");
}
.next-icon-exit:before {
content: "\e616";
content: var(--icon-content-exit, "\e616");
}
.next-icon-chart-bar:before {
content: "\e791";
content: var(--icon-content-chart-bar, "\e791");
}
.next-icon-chart-pie:before {
content: "\e613";
content: var(--icon-content-chart-pie, "\e613");
}
.next-icon-form:before {
content: "\e869";
content: var(--icon-content-form, "\e869");
}
.next-icon-detail:before {
content: "\e852";
content: var(--icon-content-detail, "\e852");
}
.next-icon-list:before {
content: "\e859";
content: var(--icon-content-list, "\e859");
}
.next-icon-dashboard:before {
content: "\e868";
content: var(--icon-content-dashboard, "\e868");
}
@-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-balloon {
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
max-width: 400px;
max-width: var(--balloon-size-max-width, 400px);
border-style: solid;
border-style: var(--balloon-border-style, solid);
border-radius: 2px;
border-radius: var(--balloon-corner, 2px);
font-size: 12px;
font-size: var(--balloon-content-font-size, 12px);
font-weight: normal;
font-weight: var(--balloon-content-font-weight, normal);
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
/* stylelint-disable */
word-wrap: break-all;
word-wrap: break-word;
/* stylelint-enable */
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;
color: var(--balloon-primary-color, #333333);
border-color: #C0C6CC;
border-color: var(--balloon-primary-color-border, #C0C6CC);
background-color: #FFFFFF;
background-color: var(--balloon-primary-color-bg, #FFFFFF);
-webkit-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: var(--balloon-primary-shadow, 0px 4px 8px 0px rgba(0, 0, 0, 0.16));
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.16);
box-shadow: var(--balloon-primary-shadow, 0px 4px 8px 0px rgba(0, 0, 0, 0.16));
border-width: 1px;
border-width: var(--balloon-primary-border-width, 1px);
}
.next-balloon-primary .next-balloon-close {
position: absolute;
top: 12px;
top: var(--balloon-size-close-margin-top, 12px);
right: 12px;
right: var(--balloon-size-close-margin-right, 12px);
font-size: 12px;
font-size: var(--balloon-size-close, 12px);
cursor: pointer;
color: #333333;
color: var(--balloon-primary-color-close, #333333);
}
.next-balloon-primary .next-balloon-close .next-icon {
width: 12px;
width: var(--balloon-size-close, 12px);
height: 12px;
height: var(--balloon-size-close, 12px);
line-height: 1em;
}
.next-balloon-primary .next-balloon-close .next-icon:before {
width: 12px;
width: var(--balloon-size-close, 12px);
height: 12px;
height: var(--balloon-size-close, 12px);
font-size: 12px;
font-size: var(--balloon-size-close, 12px);
line-height: 1em;
}
.next-balloon-primary .next-balloon-close :hover {
color: #333333;
color: var(--balloon-primary-color-close-hover, #333333);
}
.next-balloon-primary:after {
position: absolute;
width: 8px;
width: var(--balloon-size-arrow-size, 8px);
height: 8px;
height: var(--balloon-size-arrow-size, 8px);
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 #C0C6CC;
border: var(--balloon-primary-border-width, 1px) var(--balloon-border-style, solid) var(--balloon-primary-color-border, #C0C6CC);
background-color: #FFFFFF;
background-color: var(--balloon-primary-color-bg, #FFFFFF);
z-index: -1;
}
.next-balloon-primary.next-balloon-top:after {
top: -5px;
top: calc(0px - var(--balloon-size-arrow-size, 8px) / 2 - var(--balloon-primary-border-width, 1px));
left: calc(50% - 4px - 1px);
left: calc(50% - var(--balloon-size-arrow-size, 8px) / 2 - var(--balloon-primary-border-width, 1px));
border-right: none;
border-bottom: none;
}
.next-balloon-primary.next-balloon-right:after {
top: calc(50% - 4px - 1px);
top: calc(50% - var(--balloon-size-arrow-size, 8px) / 2 - var(--balloon-primary-border-width, 1px));
right: -5px;
right: calc(0px - var(--balloon-size-arrow-size, 8px) / 2 - var(--balloon-primary-border-width, 1px));
border-left: none;
border-bottom: none;
}
.next-balloon-primary.next-balloon-bottom:after {
bottom: -5px;
bottom: calc(0px - var(--balloon-size-arrow-size, 8px) / 2 - var(--balloon-primary-border-width, 1px));
left: calc(50% - 4px - 1px);
left: calc(50% - var(--balloon-size-arrow-size, 8px) / 2 - var(--balloon-primary-border-width, 1px));
border-top: none;
border-left: none;
}
.next-balloon-pri