jiaqingjiayi-xiaochengxu/甲情_甲意/miniprogram/node_modules/antd-mini/less/Popover/index.less

150 lines
2.9 KiB
Plaintext
Raw Normal View History

2024-11-10 07:01:22 +00:00
@import (reference) './variable.less';
@import '../style/mixins/hairline.less';
@popoverPrefix: ant-popover;
.@{popoverPrefix} {
position: relative;
2024-12-01 11:56:54 +00:00
&-children {
z-index: 999;
}
2024-11-10 07:01:22 +00:00
&-mask {
2024-12-01 11:56:54 +00:00
z-index: 998;
2024-11-10 07:01:22 +00:00
background: none;
}
&-content {
position: absolute;
min-width: 64 * @rpx;
max-width: calc(100vw - 48 * @rpx);
z-index: 999;
}
&-inner {
position: relative;
border-radius: 16 * @rpx;
overflow: hidden;
font-size: 30 * @rpx;
background-color: @COLOR_BACKGROUND_POPOVER;
color: @COLOR_WHITE_DEFAULT;
padding: 16 * @rpx 24 * @rpx;
width: max-content;
}
&-arrow {
position: absolute;
width: 0;
height: 0;
2024-12-01 11:56:54 +00:00
border-left: 18 * @rpx solid transparent;
border-right: 18 * @rpx solid transparent;
border-bottom: 18 * @rpx solid @COLOR_BACKGROUND_POPOVER;
2024-11-10 07:01:22 +00:00
}
2024-12-01 11:56:54 +00:00
2024-11-10 07:01:22 +00:00
&-top {
transform: translate(-50%, -100%);
2024-12-01 11:56:54 +00:00
&-arrow {
bottom: 2 * @rpx;
transform: translate(-50%, 100%) rotate(180deg);
left: 50%;
}
2024-11-10 07:01:22 +00:00
}
2024-12-01 11:56:54 +00:00
&-bottom {
transform: translate(-50%, 100%);
&-arrow {
top: 2 * @rpx;
transform: translate(-50%, -100%) rotate(0deg);
left: 50%;
}
2024-11-10 07:01:22 +00:00
}
2024-12-01 11:56:54 +00:00
&-left {
transform: translate(-100%, -50%);
&-arrow {
right: 2 * @rpx;
transform: translate(75%, -50%) rotate(90deg);
top: 50%;
}
2024-11-10 07:01:22 +00:00
}
2024-12-01 11:56:54 +00:00
2024-11-10 07:01:22 +00:00
&-right {
transform: translate(100%, -50%);
2024-12-01 11:56:54 +00:00
&-arrow {
left: 2 * @rpx;
transform: translate(-75%, -50%) rotate(-90deg);
top: 50%;
}
2024-11-10 07:01:22 +00:00
}
2024-12-01 11:56:54 +00:00
&-top-left {
transform: translate(0, -100%);
&-arrow {
bottom: 2 * @rpx;
transform: translate(0, 100%) rotate(180deg);
left: 24 * @rpx;
}
2024-11-10 07:01:22 +00:00
}
2024-12-01 11:56:54 +00:00
&-top-right {
transform: translate(0, -100%);
&-arrow {
bottom: 2 * @rpx;
transform: translate(0, 100%) rotate(180deg);
right: 24 * @rpx;
}
2024-11-10 07:01:22 +00:00
}
2024-12-01 11:56:54 +00:00
2024-11-10 07:01:22 +00:00
&-bottom-left {
2024-12-01 11:56:54 +00:00
transform: translate(0, 100%);
&-arrow {
top: 2 * @rpx;
transform: translate(0, -100%) rotate(0deg);
left: 24 * @rpx;
}
2024-11-10 07:01:22 +00:00
}
2024-12-01 11:56:54 +00:00
&-bottom-right {
transform: translate(0, 100%);
&-arrow {
top: 2 * @rpx;
transform: translate(0, -100%) rotate(0deg);
right: 24 * @rpx;
}
2024-11-10 07:01:22 +00:00
}
2024-12-01 11:56:54 +00:00
2024-11-10 07:01:22 +00:00
&-left-top {
2024-12-01 11:56:54 +00:00
transform: translate(-100%, 0);
&-arrow {
right: 2 * @rpx;
transform: translate(75%, 0) rotate(90deg);
top: 24 * @rpx;
}
2024-11-10 07:01:22 +00:00
}
2024-12-01 11:56:54 +00:00
2024-11-10 07:01:22 +00:00
&-left-bottom {
2024-12-01 11:56:54 +00:00
transform: translate(-100%, 0);
&-arrow {
right: 2 * @rpx;
transform: translate(75%, 0) rotate(90deg);
bottom: 24 * @rpx;
}
2024-11-10 07:01:22 +00:00
}
2024-12-01 11:56:54 +00:00
&-right-top {
transform: translate(100%, 0);
&-arrow {
left: 2 * @rpx;
transform: translate(-75%, 0) rotate(-90deg);
top: 24 * @rpx;
}
2024-11-10 07:01:22 +00:00
}
2024-12-01 11:56:54 +00:00
&-right-bottom {
transform: translate(100%, 0);
&-arrow {
left: 2 * @rpx;
transform: translate(-75%, 0) rotate(-90deg);
bottom: 24 * @rpx;
}
2024-11-10 07:01:22 +00:00
}
}