UNPKG

@alifd/next

Version:

A configurable component library for web built on React.

2,059 lines (2,016 loc) 727 kB
/*! * @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);