mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-06 12:17:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(popover): arrow position

Browse Source
This commit is contained in:
07akioni 2021-01-09 00:55:18 +08:00
parent daa609582d
commit cf61464da6
1 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/popover/src/styles/index.cssr.js
View File

@ -67,8 +67,8 @@ export default c([
transition: background-color .3s var(--bezier);
position: absolute;
display: block;
width: calc(var(--arrow-height) * 1.5);
height: calc(var(--arrow-height) * 1.5);
width: calc(var(--arrow-height) * 1.414);
height: calc(var(--arrow-height) * 1.414);
box-shadow: 0 0 8px 0 rgba(0, 0, 0, .12);
transform: rotate(45deg);
background-color: var(--color);
@ -80,55 +80,55 @@ export default c([
})
]),
placementStyle('top-start', `
top: calc(-1 * var(--arrow-height));
top: calc(-0.707 * var(--arrow-height));
left: var(--arrow-offset);
`),
placementStyle('top', `
top: calc(-1 * var(--arrow-height));
transform: translateX(calc(-1 * var(--arrow-height))) rotate(45deg);
top: calc(-0.707 * var(--arrow-height));
transform: translateX(calc(-0.707 * var(--arrow-height))) rotate(45deg);
left: 50%;
`),
placementStyle('top-end', `
top: calc(-1 * var(--arrow-height));
top: calc(-0.707 * var(--arrow-height));
right: var(--arrow-offset);
`),
placementStyle('bottom-start', `
bottom: calc(-1 * var(--arrow-height));
bottom: calc(-0.707 * var(--arrow-height));
left: var(--arrow-offset);
`),
placementStyle('bottom', `
bottom: calc(-1 * var(--arrow-height));
transform: translateX(calc(-1 * var(--arrow-height))) rotate(45deg);
bottom: calc(-0.707 * var(--arrow-height));
transform: translateX(calc(-0.707 * var(--arrow-height))) rotate(45deg);
left: 50%;
`),
placementStyle('bottom-end', `
bottom: calc(-1 * var(--arrow-height));
bottom: calc(-0.707 * var(--arrow-height));
right: var(--arrow-offset);
`),
placementStyle('left-start', `
left: calc(-1 * var(--arrow-height));
left: calc(-0.707 * var(--arrow-height));
top: var(--arrow-offset-vertical);
`),
placementStyle('left', `
left: calc(-1 * var(--arrow-height));
transform: translateY(calc(-1 * var(--arrow-height))) rotate(45deg);
left: calc(-0.707 * var(--arrow-height));
transform: translateY(calc(-0.707 * var(--arrow-height))) rotate(45deg);
top: 50%;
`),
placementStyle('left-end', `
left: calc(-1 * var(--arrow-height));
left: calc(-0.707 * var(--arrow-height));
bottom: var(--arrow-offset-vertical);
`),
placementStyle('right-start', `
right: calc(-1 * var(--arrow-height));
right: calc(-0.707 * var(--arrow-height));
top: var(--arrow-offset-vertical);
`),
placementStyle('right', `
right: calc(-1 * var(--arrow-height));
transform: translateY(calc(-1 * var(--arrow-height))) rotate(45deg);
right: calc(-0.707 * var(--arrow-height));
transform: translateY(calc(-0.707 * var(--arrow-height))) rotate(45deg);
top: 50%;
`),
placementStyle('right-end', `
right: calc(-1 * var(--arrow-height));
right: calc(-0.707 * var(--arrow-height));
bottom: var(--arrow-offset-vertical);
`)
])