Css Zero Showcase
x
1
2
3
4
5
6
7
8
9
10
11
12
13
<main class="centered-layout">
  <div class="relative pb-1" data-controller="popover" data-popover-flip-class="popover--flip" data-action="mouseenter->popover#show mouseleave->popover#close">
    <a href="" class="font-medium underline" data-popover-target="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="dialog">
      @rails
    </a>
    <dialog class="popover" style="outline: 0;" data-popover-target="menu">
      <div class="flex flex-col gap-half p-4">
        <h1 class="text-lg font-semibold leading-none">Ruby on Rails</h1>
        <p class="text-sm text-subtle">The webframework that changed the world.</p>
      </div>
    </dialog>
  </div>
</main>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<main class="centered-layout">
  <div class="relative pb-1" data-controller="popover" data-popover-flip-class="popover--flip" data-action="mouseenter->popover#show mouseleave->popover#close">
    <a href="" class="font-medium underline" data-popover-target="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="dialog">
      @rails
    </a>
    <dialog class="popover" style="outline: 0;" data-popover-target="menu">
      <div class="flex flex-col gap-half p-4">
        <h1 class="text-lg font-semibold leading-none">Ruby on Rails</h1>
        <p class="text-sm text-subtle">The webframework that changed the world.</p>
      </div>
    </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()
  }
}

No notes provided.