ten-design-vue
Version:
ten-vue
224 lines (195 loc) • 4.25 kB
text/less
@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;
}