UNPKG

@alicloud/console-components

Version:
2,033 lines (1,898 loc) 1.15 MB
@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