UNPKG

@csr632/next

Version:

A configurable component library for web built on React.

1,685 lines (1,596 loc) 400 kB
/*! * @alifd/next@1.21.27 (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 */ @-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: .1; } 50% { opacity: .9; } 100% { opacity: 1; } } @keyframes expandInWithFade { 0% { opacity: 0; } 40% { opacity: .1; } 50% { opacity: .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 .3s ease-out; transition: all .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 .2s ease-out; transition: all .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; 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: #FF3000; text-align: center; white-space: nowrap; border-radius: 8px; position: absolute; width: auto; height: 16px; min-width: 8px; padding: 0 4px 0 4px; font-size: 12px; line-height: 16px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); top: -.5em; } .next-badge .next-badge-count a, .next-badge .next-badge-count a:hover { color: #FFFFFF; } .next-badge .next-badge-dot { color: #FFFFFF; background: #FF3000; text-align: center; white-space: nowrap; border-radius: 8px; position: absolute; width: 8px; height: 8px; min-width: 8px; padding: 0px; font-size: 1px; line-height: 1; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); top: -.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; padding-left: 4px; padding-right: 4px; border-radius: 3px; -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; } .next-badge-scroll-number-only span { display: block; height: 16px; line-height: 16px; font-size: 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; list-style: none; } .next-badge[dir="rtl"] .next-badge-custom { padding-right: 4px; padding-left: 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-balloon { -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; max-width: 300px; border-style: solid; border-radius: 3px; font-size: 12px; font-weight: normal; -webkit-animation-duration: 300ms; animation-duration: 300ms; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; word-wrap: break-all; word-wrap: break-word; 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; border-color: #4494F9; background-color: #E3F2FD; -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12); box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12); border-width: 1px; } .next-balloon-primary .next-balloon-close { position: absolute; top: 12px; right: 12px; font-size: 12px; cursor: pointer; color: #999999; } .next-balloon-primary .next-balloon-close .next-icon { width: 12px; height: 12px; line-height: 12px; } .next-balloon-primary .next-balloon-close .next-icon:before { width: 12px; height: 12px; font-size: 12px; line-height: 12px; } .next-balloon-primary .next-balloon-close :hover { color: #333333; } .next-balloon-primary:after { position: absolute; width: 12px; height: 12px; 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 #4494F9; background-color: #E3F2FD; z-index: -1; } .next-balloon-primary.next-balloon-top:after { top: -7px; left: calc(50% + -7px); border-right: none; border-bottom: none; -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-primary.next-balloon-right:after { top: calc(50% + -7px); right: -7px; border-left: none; border-bottom: none; -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-primary.next-balloon-bottom:after { bottom: -7px; left: calc(50% + -7px); border-top: none; border-left: none; -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-primary.next-balloon-left:after { top: calc(50% + -7px); left: -7px; border-top: none; border-right: none; -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-primary.next-balloon-left-top:after { top: 12px; left: -7px; border-top: none; border-right: none; -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-primary.next-balloon-left-bottom:after { bottom: 12px; left: -7px; border-top: none; border-right: none; -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-primary.next-balloon-right-top:after { top: 12px; right: -7px; border-bottom: none; border-left: none; -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-primary.next-balloon-right-bottom:after { right: -7px; bottom: 12px; border-bottom: none; border-left: none; -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-primary.next-balloon-top-left:after { top: -7px; left: 12px; border-right: none; border-bottom: none; -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-primary.next-balloon-top-right:after { top: -7px; right: 12px; border-right: none; border-bottom: none; -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-primary.next-balloon-bottom-left:after { bottom: -7px; left: 12px; border-top: none; border-left: none; -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-primary.next-balloon-bottom-right:after { right: 12px; bottom: -7px; border-top: none; border-left: none; -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-normal { color: #333333; border-color: #DCDEE3; background-color: #FFFFFF; -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); border-width: 1px; } .next-balloon-normal .next-balloon-close { position: absolute; top: 12px; right: 12px; font-size: 12px; cursor: pointer; color: #999999; } .next-balloon-normal .next-balloon-close .next-icon { width: 12px; height: 12px; line-height: 12px; } .next-balloon-normal .next-balloon-close .next-icon:before { width: 12px; height: 12px; font-size: 12px; line-height: 12px; } .next-balloon-normal .next-balloon-close :hover { color: #666666; } .next-balloon-normal:after { position: absolute; width: 12px; height: 12px; 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 #DCDEE3; background-color: #FFFFFF; z-index: -1; } .next-balloon-normal.next-balloon-top:after { top: -7px; left: calc(50% + -7px); border-right: none; border-bottom: none; -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-normal.next-balloon-right:after { top: calc(50% + -7px); right: -7px; border-left: none; border-bottom: none; -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-normal.next-balloon-bottom:after { bottom: -7px; left: calc(50% + -7px); border-top: none; border-left: none; -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-normal.next-balloon-left:after { top: calc(50% + -7px); left: -7px; border-top: none; border-right: none; -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-normal.next-balloon-left-top:after { top: 12px; left: -7px; border-top: none; border-right: none; -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-normal.next-balloon-left-bottom:after { bottom: 12px; left: -7px; border-top: none; border-right: none; -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-normal.next-balloon-right-top:after { top: 12px; right: -7px; border-bottom: none; border-left: none; -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-normal.next-balloon-right-bottom:after { right: -7px; bottom: 12px; border-bottom: none; border-left: none; -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-normal.next-balloon-top-left:after { top: -7px; left: 12px; border-right: none; border-bottom: none; -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-normal.next-balloon-top-right:after { top: -7px; right: 12px; border-right: none; border-bottom: none; -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-normal.next-balloon-bottom-left:after { bottom: -7px; left: 12px; border-top: none; border-left: none; -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon-normal.next-balloon-bottom-right:after { right: 12px; bottom: -7px; border-top: none; border-left: none; -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon.visible { display: block; } .next-balloon.hidden { display: none; } .next-balloon-medium { padding: 16px 16px 16px 16px; } .next-balloon-closable { padding: 16px 40px 16px 16px; } .next-balloon-tooltip { -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; max-width: 300px; border-style: solid; border-radius: 3px; font-size: 12px; font-weight: normal; z-index: 0; word-wrap: break-all; word-wrap: break-word; color: #333333; border-color: #DCDEE3; background-color: #F2F3F7; -webkit-box-shadow: none; box-shadow: none; border-width: 1px; /* size */ } .next-balloon-tooltip *, .next-balloon-tooltip *:before, .next-balloon-tooltip *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } .next-balloon-tooltip:after { position: absolute; width: 12px; height: 12px; 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 #DCDEE3; background-color: #F2F3F7; z-index: -1; } .next-balloon-tooltip-top:after { top: -7px; left: calc(50% + -7px); border-right: none; border-bottom: none; } .next-balloon-tooltip-right:after { top: calc(50% + -7px); right: -7px; border-left: none; border-bottom: none; } .next-balloon-tooltip-bottom:after { bottom: -7px; left: calc(50% + -7px); border-top: none; border-left: none; } .next-balloon-tooltip-left:after { top: calc(50% + -7px); left: -7px; border-top: none; border-right: none; } .next-balloon-tooltip-left-top:after { top: 12px; left: -7px; border-top: none; border-right: none; } .next-balloon-tooltip-left-bottom:after { bottom: 12px; left: -7px; border-top: none; border-right: none; } .next-balloon-tooltip-right-top:after { top: 12px; right: -7px; border-bottom: none; border-left: none; } .next-balloon-tooltip-right-bottom:after { right: -7px; bottom: 12px; border-bottom: none; border-left: none; } .next-balloon-tooltip-top-left:after { top: -7px; left: 12px; border-right: none; border-bottom: none; } .next-balloon-tooltip-top-right:after { top: -7px; right: 12px; border-right: none; border-bottom: none; } .next-balloon-tooltip-bottom-left:after { bottom: -7px; left: 12px; border-top: none; border-left: none; } .next-balloon-tooltip-bottom-right:after { right: 12px; bottom: -7px; border-top: none; border-left: none; } .next-balloon-tooltip.visible { display: block; } .next-balloon-tooltip.hidden { display: none; } .next-balloon-tooltip-medium { padding: 8px 8px 8px 8px; } .next-balloon[dir="rtl"] { /* 带关闭按钮的右侧padding变大 */ } .next-balloon[dir="rtl"].next-balloon-primary .next-balloon-close { left: 12px; right: auto; } .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-right:after { left: -7px; right: auto; border-right: none; border-top: none; border-left: inherit; border-bottom: inherit; -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-left:after { right: -7px; left: auto; border-left: none; border-bottom: none; border-right: inherit; border-top: inherit; -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-left-top:after { right: -7px; left: auto; border-left: none; border-bottom: none; border-top: inherit; border-right: inherit; -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-left-bottom:after { right: -7px; left: auto; border-left: none; border-bottom: none; border-top: inherit; border-right: inherit; -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-right-top:after { left: -7px; right: auto; border-right: none; border-top: none; border-bottom: inherit; border-left: inherit; -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-right-bottom:after { left: -7px; right: auto; border-right: none; border-top: none; border-bottom: inherit; border-left: inherit; -webkit-b