Css Zero Showcase
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<main class="centered-layout">
  <div class="relative" data-controller="popover" data-popover-flip-class="popover--flip">
    <button class="btn" data-popover-target="button" data-action="popover#toggle" aria-haspopup="dialog" aria-expanded="false" aria-controls="dialog">
      Open popover
    </button>
    <dialog id="dialog" class="popover popover--start" data-popover-target="menu" data-action="click@document->popover#closeOnClickOutside">
      <form class="flex flex-col gap p-4" action="/lookbook/home/index" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="OlNbPoErgAigxE0FfSj22fzmDSg0-ov80y86y8vKGpF2aG2IuSlTK1HoeczvKtTSqt7OdmxltLWWRulX20SMpg" autocomplete="off" />
        <div class="flex flex-col gap-half">
          <h4 class="font-medium leading-none">Dimensions</h4>
          <p class="text-sm text-subtle">Set the dimensions for the layer.</p>
        </div>
        <div class="flex flex-col gap-half">
          <div class="flex items-center leading-none gap">
            <label class="text-sm font-medium" style="min-inline-size: 30%;" for="width">Width</label>
            <input value="100%" class="input pi-3 leading-none" type="text" name="width" id="width" />
          </div>
          <div class="flex items-center leading-none gap">
            <label class="text-sm font-medium" style="min-inline-size: 30%;" for="max_width">Max width</label>
            <input value="300px" class="input pi-3 leading-none" type="text" name="max_width" id="max_width" />
          </div>
          <div class="flex items-center leading-none gap">
            <label class="text-sm font-medium" style="min-inline-size: 30%;" for="height">Height</label>
            <input value="25px" class="input pi-3 leading-none" type="text" name="height" id="height" />
          </div>
          <div class="flex items-center leading-none gap">
            <label class="text-sm font-medium" style="min-inline-size: 30%;" for="max_height">Max height</label>
            <input value="none" class="input pi-3 leading-none" type="text" name="max_height" id="max_height" />
          </div>
        </div>
      </form>
    </dialog>
  </div>
</main>
1
2
3
4
5
6
7
8
9
10
11
<main class="centered-layout">
  <div class="relative" data-controller="popover" data-popover-flip-class="popover--flip">
    <button class="btn" data-popover-target="button" data-action="popover#toggle" aria-haspopup="dialog" aria-expanded="false" aria-controls="dialog">
      Open popover
    </button>
    <dialog id="dialog" class="popover popover--start" data-popover-target="menu" data-action="click@document->popover#closeOnClickOutside">
      <%= render "dimensions_form" %>
    </dialog>
  </div>
</main>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.popover {
  background-color: var(--color-bg);
  border-radius: var(--rounded-md);
  border-width: var(--border);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  margin-block: var(--size-1);
  inline-size: var(--popover-size, max-content);
  inset-inline-start: var(--popover-position, 0);
  /* Setup animation */
  opacity: 0;
  transform: var(--scale-95);
  transition-behavior: allow-discrete;
  transition-duration: var(--time-150);
  transition-property: display, overlay, opacity, transform;
  /* In animation */
  &[open] {
    opacity: 1; transform: var(--scale-100);
  }
  /* Out animation */
  @starting-style {
    &[open] {
      opacity: 0; transform: var(--scale-95);
    }
  }
}
.popover--flip {
  inset-block-end: 100%;
}
.popover--start {
  --popover-position: 0;
}
.popover--end {
  --popover-position: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import { Controller } from "@hotwired/stimulus"
const BOTTOM_THRESHOLD = 0
export default class extends Controller {
  static targets = [ "button", "menu" ]
  static classes = [ "flip" ]
  show() {
    this.menuTarget.show()
    this.#updateExpanded()
    this.#orient()
  }
  close() {
    this.menuTarget.close()
    this.#updateExpanded()
  }
  toggle() {
    this.menuTarget.open ? this.close() : this.show()
  }
  closeOnClickOutside({ target }) {
    !this.element.contains(target) && this.close()
  }
  #orient() {
    this.menuTarget.classList.toggle(this.flipClass, this.#distanceToBottom < BOTTOM_THRESHOLD)
  }
  #updateExpanded() {
    this.buttonTarget.ariaExpanded = this.menuTarget.open
  }
  get #distanceToBottom() {
    return window.innerHeight - this.#boundingClientRect.bottom
  }
  get #boundingClientRect() {
    return this.menuTarget.getBoundingClientRect()
  }
}

Partials