110 lines
2.5 KiB
Plaintext
110 lines
2.5 KiB
Plaintext
.placementArrow(
|
|
@arrow-size,
|
|
@border-radius-outer,
|
|
@border-radius-inner,
|
|
@bg-color: var(--antd-arrow-background-color),
|
|
@box-shadow: none
|
|
) {
|
|
// internal variables
|
|
@arrow-distance: 0px;
|
|
@arrow-offset-horizontal: 16px;
|
|
|
|
// ============================ Basic ============================
|
|
&-arrow {
|
|
position: absolute;
|
|
z-index: 1; // lift it up so the menu wouldn't cask shadow on it
|
|
display: block;
|
|
|
|
.roundedArrow(@arrow-size, @border-radius-outer, @border-radius-inner, @bg-color, @box-shadow);
|
|
|
|
&::before {
|
|
background: @bg-color;
|
|
}
|
|
}
|
|
|
|
// ========================== Placement ==========================
|
|
// Here handle the arrow position and rotate stuff
|
|
// >>>>> Top
|
|
&-placement-top > &-arrow,
|
|
&-placement-topLeft > &-arrow,
|
|
&-placement-topRight > &-arrow {
|
|
bottom: @arrow-distance;
|
|
transform: translateY(100%) rotate(180deg);
|
|
}
|
|
|
|
&-placement-top > &-arrow {
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(100%) rotate(180deg);
|
|
}
|
|
|
|
&-placement-topLeft > &-arrow {
|
|
left: @arrow-offset-horizontal;
|
|
}
|
|
|
|
&-placement-topRight > &-arrow {
|
|
right: @arrow-offset-horizontal;
|
|
}
|
|
|
|
// >>>>> Bottom
|
|
&-placement-bottom > &-arrow,
|
|
&-placement-bottomLeft > &-arrow,
|
|
&-placement-bottomRight > &-arrow {
|
|
top: @arrow-distance;
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
&-placement-bottom > &-arrow {
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-100%);
|
|
}
|
|
|
|
&-placement-bottomLeft > &-arrow {
|
|
left: @arrow-offset-horizontal;
|
|
}
|
|
|
|
&-placement-bottomRight > &-arrow {
|
|
right: @arrow-offset-horizontal;
|
|
}
|
|
|
|
// >>>>> Left
|
|
&-placement-left > &-arrow,
|
|
&-placement-leftTop > &-arrow,
|
|
&-placement-leftBottom > &-arrow {
|
|
right: @arrow-distance;
|
|
transform: translateX(100%) rotate(90deg);
|
|
}
|
|
|
|
&-placement-left > &-arrow {
|
|
top: 50%;
|
|
transform: translateY(-50%) translateX(100%) rotate(90deg);
|
|
}
|
|
|
|
&-placement-leftTop > &-arrow {
|
|
top: @arrow-offset-horizontal;
|
|
}
|
|
|
|
&-placement-leftBottom > &-arrow {
|
|
bottom: @arrow-offset-horizontal;
|
|
}
|
|
|
|
// >>>>> Right
|
|
&-placement-right > &-arrow,
|
|
&-placement-rightTop > &-arrow,
|
|
&-placement-rightBottom > &-arrow {
|
|
left: @arrow-distance;
|
|
transform: translateX(-100%) rotate(-90deg);
|
|
}
|
|
|
|
&-placement-right > &-arrow {
|
|
top: 50%;
|
|
transform: translateY(-50%) translateX(-100%) rotate(-90deg);
|
|
}
|
|
|
|
&-placement-rightTop > &-arrow {
|
|
top: @arrow-offset-horizontal;
|
|
}
|
|
|
|
&-placement-rightBottom > &-arrow {
|
|
bottom: @arrow-offset-horizontal;
|
|
}
|
|
} |