Css Zero Showcase

Pages

No matching results.

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
<div contents data-controller="popover" data-popover-placement-value="bottom-start">
  <button type="button" class="btn" popovertarget="popover" data-popover-target="button" data-action="popover#toggle">
    Open popover
  </button>
  <div popover class="popover" data-popover-target="menu">
    <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="dvNM9COxl1jJuhvmhUAnSHCqypt5UE0ufJ1yPYGQNUOmHasS1vA1B3rXkn7KQ4PgIF-dY5bsAKk8XlVDaJ1lpw" autocomplete="off" />
      <div class="flex flex-col">
        <h3 class="font-semibold leading-none mbe-1">Dimensions</h3>
        <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 gap">
          <label class="text-sm font-medium leading-none" style="min-inline-size: 30%;" for="width">Width</label>
          <input value="100%" class="input" autofocus="autofocus" type="text" name="width" id="width" />
        </div>
        <div class="flex items-center gap">
          <label class="text-sm font-medium leading-none" style="min-inline-size: 30%;" for="max_width">Max width</label>
          <input value="300px" class="input" type="text" name="max_width" id="max_width" />
        </div>
        <div class="flex items-center gap">
          <label class="text-sm font-medium leading-none" style="min-inline-size: 30%;" for="height">Height</label>
          <input value="25px" class="input" type="text" name="height" id="height" />
        </div>
        <div class="flex items-center gap">
          <label class="text-sm font-medium leading-none" style="min-inline-size: 30%;" for="max_height">Max height</label>
          <input value="none" class="input" type="text" name="max_height" id="max_height" />
        </div>
      </div>
    </form>
  </div>
</div>
1
2
3
4
5
6
7
8
9
<div contents data-controller="popover" data-popover-placement-value="bottom-start">
  <button type="button" class="btn" popovertarget="popover" data-popover-target="button" data-action="popover#toggle">
    Open popover
  </button>
  <div popover class="popover" data-popover-target="menu">
    <%= render "dimensions_form" %>
  </div>
</div>
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
.popover {
  background-color: var(--color-bg);
  border-radius: var(--rounded-md);
  border-width: var(--border);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  inline-size: var(--popover-size, max-content);
  /* Setup transition */
  transition-behavior: allow-discrete;
  transition-duration: var(--time-150);
  transition-property: display, overlay, opacity, transform;
  /* Exit stage to */
  opacity: 0;
  transform: var(--scale-95);
  /* On stage */
  &:popover-open {
    opacity: 1; transform: var(--scale-100);
  }
  /* Enter stage from */
  @starting-style {
    &:popover-open {
      opacity: 0; transform: var(--scale-95);
    }
  }
}
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
44
45
46
47
48
49
50
51
52
53
54
55
import { Controller } from "@hotwired/stimulus"
import { computePosition, flip, shift, offset, autoUpdate } from "https://esm.sh/@floating-ui/dom@1.7.0?standalone"
export default class extends Controller {
  static targets = [ "button", "menu" ]
  static values  = { placement: { type: String, default: "bottom" } }
  #showTimer = null
  #hideTimer = null
  initialize() {
    this.orient = this.orient.bind(this)
  }
  connect() {
    this.cleanup = autoUpdate(this.buttonTarget, this.menuTarget, this.orient)
  }
  disconnect() {
    this.cleanup()
  }
  show() {
    this.menuTarget.showPopover({ source: this.buttonTarget })
  }
  hide() {
    this.menuTarget.hidePopover()
  }
  toggle() {
    this.menuTarget.togglePopover({ source: this.buttonTarget })
  }
  debouncedShow() {
    clearTimeout(this.#hideTimer)
    this.#showTimer = setTimeout(() => this.show(), 700)
  }
  debouncedHide() {
    clearTimeout(this.#showTimer)
    this.#hideTimer = setTimeout(() => this.hide(), 300)
  }
  orient() {
    computePosition(this.buttonTarget, this.menuTarget, this.#options).then(({x, y}) => {
      this.menuTarget.style.insetInlineStart = `${x}px`
      this.menuTarget.style.insetBlockStart  = `${y}px`
    })
  }
  get #options() {
    return { placement: this.placementValue, middleware: [offset(4), flip(), shift({padding: 4})] }
  }
}

Partials

Dependencies