Fix border radius rounding on hover and selection indicators in builder preview

This commit is contained in:
Andrew Kingston 2021-12-09 17:22:46 +00:00
parent 3f1d3328e2
commit e7899d7f22
1 changed files with 7 additions and 7 deletions

View File

@ -24,6 +24,7 @@
class:flipped class:flipped
class:line class:line
style="top: {top}px; left: {left}px; width: {width}px; height: {height}px; --color: {color}; --zIndex: {zIndex};" style="top: {top}px; left: {left}px; width: {width}px; height: {height}px; --color: {color}; --zIndex: {zIndex};"
class:withText={!!text}
> >
{#if text} {#if text}
<div class="text" class:flipped class:line class:right={alignRight}> <div class="text" class:flipped class:line class:right={alignRight}>
@ -39,12 +40,12 @@
z-index: var(--zIndex); z-index: var(--zIndex);
border: 2px solid var(--color); border: 2px solid var(--color);
pointer-events: none; pointer-events: none;
border-top-right-radius: 4px; border-radius: 4px;
border-top-left-radius: 0;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
} }
.indicator.flipped { .indicator.withText {
border-top-left-radius: 0;
}
.indicator.withText.flipped {
border-top-left-radius: 4px; border-top-left-radius: 4px;
} }
.indicator.line { .indicator.line {
@ -74,8 +75,7 @@
border-radius: 4px; border-radius: 4px;
} }
.text.flipped { .text.flipped {
border-top-left-radius: 4px; border-radius: 4px;
border-bottom-left-radius: 4px;
transform: translateY(0%); transform: translateY(0%);
top: -2px; top: -2px;
} }