UNPKG

ten-design-vue

Version:

ten-vue

224 lines (195 loc) 4.25 kB
@import '../vars.less'; @import '../transition.less'; .ten-popup { position: absolute; z-index: 10001; top: -1000px; box-shadow: @shadow-level-2; background: #fff; padding: @popup-padding; overflow: hidden; border-radius: @popup-border-radius-default; } // 气泡 .ten-popup--type-bubble { background: none; box-shadow: none; overflow: visible; // padding: 16px; & > div { position: relative; z-index: 1; padding: 16px; color: @text-color-lighter-1; background: #fff; box-shadow: @shadow-level-2; // border: @tooltip-border; border-radius: @tooltip-border-radius-default; } &::after { display: block; content: ''; position: absolute; z-index: @tooltip-arrow-zindex; border-color: #fff; border-top: @tooltip-arrow-border; border-right: @tooltip-arrow-border; // box-shadow: @tooltip-arrow-shadow; width: 16px; height: 16px; // transform: rotate(45deg); background-color: #fff; // border: none!important; } // arrow &[class*='--p-top-'] { padding-bottom: 16px; &::after { bottom: 8px; } } &[class*='--p-bottom-'] { padding-top: 16px; &::after { top: 8px; } } &[class*='--p-left-'] { padding-right: 16px; &::after { right: 8px; } } &[class*='--p-right-'] { padding-left: 16px; &::after { left: 8px; } } &[class*='--p-top-left'] { &::after { left: 24px; transform: rotate(135deg); } } &[class*='--p-top-center'] { &::after { left: 50%; transform: translateX(-50%) rotate(135deg); } } &[class*='--p-top-right'] { &::after { right: 24px; transform: translateX(-50%) rotate(135deg); } } &[class*='--p-left-top'] { &::after { top: 24px; transform: rotate(45deg); } } &[class*='--p-left-center'] { &::after { top: 50%; transform: translateY(-50%) rotate(45deg); } } &[class*='--p-left-bottom'] { &::after { bottom: 24px; transform: rotate(45deg); } } &[class*='--p-right-top'] { &::after { top: 24px; transform: rotate(-135deg); } } &[class*='--p-right-center'] { &::after { top: 50%; transform: translateY(-50%) rotate(-135deg); } } &[class*='--p-right-bottom'] { &::after { bottom: 24px; transform: rotate(-135deg); } } &[class*='--p-bottom-left'] { &::after { left: 16px; transform: rotate(-45deg); } } &[class*='--p-bottom-center'] { &::after { left: 50%; transform: translateX(-50%) rotate(-45deg); } } &[class*='--p-bottom-right'] { &::after { right: 16px; transform: translateX(-50%) rotate(-45deg); } } } // animation @popup-flow: ten-flow-in__popup; .@{popup-flow}-enter, .@{popup-flow}-exiting, .@{popup-flow}-leave-to { opacity: 0; } .@{popup-flow}-enter-to, .@{popup-flow}-entering, .@{popup-flow}-leave { opacity: 1; transform: none; } .@{popup-flow}-enter-active { transition: @flowin-transition; } .@{popup-flow}-leave-active { transition: @flowin-transition; } [class*='ten-popup--p'] { &.@{popup-flow}-entering, &.@{popup-flow}-exit, &.@{popup-flow}-exiting { transition: @flowin-transition; } } // top .@{popup-flow}-enter[class*='ten-popup--p-top-'], .@{popup-flow}-exiting[class*='ten-popup--p-top-'], .@{popup-flow}-leave-to[class*='ten-popup--p-top-'] { transform: translateY(@transfrom-y); opacity: 0; } // left .@{popup-flow}-enter[class*='ten-popup--p-left-'], .@{popup-flow}-exiting[class*='ten-popup--p-left-'], .@{popup-flow}-leave-to[class*='ten-popup--p-left-'] { transform: translateX(@transform-x); opacity: 0; } // right .@{popup-flow}-enter[class*='ten-popup--p-right-'], .@{popup-flow}-exiting[class*='ten-popup--p-right-'], .@{popup-flow}-leave-to[class*='ten-popup--p-right-'] { transform: translateX(-@transform-x); opacity: 0; } // bottom .@{popup-flow}-enter[class*='ten-popup--p-bottom-'], .@{popup-flow}-exiting[class*='ten-popup--p-bottom-'], .@{popup-flow}-leave-to[class*='ten-popup--p-bottom-'] { transform: translateY(-@transfrom-y); opacity: 0; }