diff --git a/src/components/image-comparer/image-comparer.scss b/src/components/image-comparer/image-comparer.scss index 520f21bc4..a8b5d3df8 100644 --- a/src/components/image-comparer/image-comparer.scss +++ b/src/components/image-comparer/image-comparer.scss @@ -1,10 +1,11 @@ @import 'component'; /** + * @prop --divider-width: The width of the dividing line. * @prop --handle-size: The size of the compare handle. */ :host { - --divider-width: 4px; + --divider-width: 2px; --handle-size: 2.5rem; display: block; @@ -17,10 +18,12 @@ overflow: hidden; } -.image-comparer__before { +.image-comparer__before, +.image-comparer__after { pointer-events: none; - ::slotted(img) { + ::slotted(img), + ::slotted(svg) { display: block; max-width: 100% !important; height: auto; @@ -33,13 +36,6 @@ left: 0; height: 100%; width: 100%; - pointer-events: none; - - ::slotted(img) { - display: block; - max-width: 100% !important; - height: auto; - } } .image-comparer__divider { @@ -52,7 +48,11 @@ height: 100%; background-color: var(--sl-color-white); transform: translateX(calc(var(--divider-width) / -2)); - cursor: ew-resize; + cursor: grab; + + &:active { + cursor: grabbing; + } } .image-comparer__handle {