Compare

Source

• Compare.css
• Compare.js

Example CSS

@import "winduum/src/components/compare/default.css" layer(utilities);

/* Example customization */
@layer utilities {
  .x-compare {
    --x-compare-clip-path: polygon(0% 0, 40% 0, 40% 100%, 0 100%);
    --x-compare-position: 40%;
  }
}

Winduum CSS Code

winduum/src/components/compare/default.css

.x-compare {
  --x-compare-position: 50%;
  --x-compare-clip-path: polygon(0% 0, var(--x-compare-position) 0%, var(--x-compare-position) 100%, 0 100%);

  display: grid;
  overflow: hidden;
  border-radius: inherit;

  > *, &::before {
    position: relative;
    pointer-events: none;
    grid-area: 1/1;
    z-index: 1;
  }

  &::before {
    background-color: var(--color-accent);
    inset-inline-start: var(--x-compare-position);
    inline-size: 1px;
    content: "";
  }

  > .x-button {
    inset-inline-start: var(--x-compare-position);
    margin-inline-start: calc(var(--x-button-inline-size) / 2 * -1);
    margin-block: auto;
  }

  > .x-image {
    display: grid;
    z-index: 0;

    > :where(*):not(:only-child) {
      object-fit: cover;
      object-position: left;
      grid-area: 1/1;

      &:first-child {
        clip-path: var(--x-compare-clip-path);
        position: relative;
      }
    }
  }

  > :where(input) {
    pointer-events: auto;
    cursor: grab;
    opacity: 0%;

    &:active ~ .x-button {
      --x-button-background-color-mix: var(--x-button-active-background-color-mix, var(--color-dark));
      --x-button-background-color-opacity: var(--x-button-active-background-color-opacity, 80%);
    }

    &:focus-visible ~ .x-button {
      --x-button-outline-color: var(--x-button-focus-outline-color, var(--color-accent));
      --x-button-outline-offset: var(--x-button-focus-outline-offset, 2px);
      --x-button-outline-color-opacity: var(--x-button-focus-outline-opacity, 50%);
    }

    &:active {
      cursor: grabbing;
    }
  }
}

Stimulus Actions