Browse Source

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

master
Andrew Kingston 5 years ago
parent
commit
c97852d0ff
  1. 12
      packages/client/src/components/preview/Indicator.svelte

12
packages/client/src/components/preview/Indicator.svelte

@ -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;
}
.indicator.withText {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
} }
.indicator.flipped { .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;
} }

Loading…
Cancel
Save