Css Zero Showcase

Previews

No matching results.

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
<button type="button" class="btn" popovertarget="dropdown" aria-haspopup="true">
  Notifications
</button>
<div popover id="dropdown" class="popover popover--block-end-start" style="--popover-size: 14rem;" role="menu" aria-label="Menu">
  <div class="menu" data-controller="menu">
    <div class="menu__group" role="group" aria-labelledby="notification_preferences">
      <div class="menu__header" id="notification_preferences">Notification Preferences</div>
      <div class="btn menu__item">
        <span class="icon icon--mail" aria-hidden="true"></span>
        <label class="flex-item-grow text-sm" for="email_notifications">Email</label>
        <input type="checkbox" name="email_notifications" id="email_notifications" value="1" class="input" data-menu-target="item" role="menuitemcheckbox" checked="checked" />
      </div>
      <div class="btn menu__item">
        <span class="icon icon--message-square" aria-hidden="true"></span>
        <label class="flex-item-grow text-sm" for="sms_notifications">SMS</label>
        <input type="checkbox" name="sms_notifications" id="sms_notifications" value="1" class="input" data-menu-target="item" role="menuitemcheckbox" />
      </div>
      <div class="btn menu__item">
        <span class="icon icon--bell" aria-hidden="true"></span>
        <label class="flex-item-grow text-sm" for="push_notifications">Push</label>
        <input type="checkbox" name="push_notifications" id="push_notifications" value="1" class="input" data-menu-target="item" role="menuitemcheckbox" checked="checked" />
      </div>
    </div>
  </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
<button type="button" class="btn" popovertarget="dropdown" aria-haspopup="true">
  Notifications
</button>
<div popover id="dropdown" class="popover popover--block-end-start" style="--popover-size: 14rem;" role="menu" aria-label="Menu">
  <div class="menu" data-controller="menu">
    <div class="menu__group" role="group" aria-labelledby="notification_preferences">
      <div class="menu__header" id="notification_preferences">Notification Preferences</div>
      <div class="btn menu__item">
        <span class="icon icon--mail" aria-hidden="true"></span>
        <%= label_tag :email_notifications, "Email", class: "flex-item-grow text-sm" %>
        <%= check_box_tag :email_notifications, "1", true, class: "input", data: { menu_target: "item" }, role: "menuitemcheckbox" %>
      </div>
      <div class="btn menu__item">
        <span class="icon icon--message-square" aria-hidden="true"></span>
        <%= label_tag :sms_notifications, "SMS", class: "flex-item-grow text-sm" %>
        <%= check_box_tag :sms_notifications, "1", false, class: "input", data: { menu_target: "item" }, role: "menuitemcheckbox" %>
      </div>
      <div class="btn menu__item">
        <span class="icon icon--bell" aria-hidden="true"></span>
        <%= label_tag :push_notifications, "Push", class: "flex-item-grow text-sm" %>
        <%= check_box_tag :push_notifications, "1", true, class: "input", data: { menu_target: "item" }, role: "menuitemcheckbox" %>
      </div>
    </div>
  </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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.menu {
  background-color: var(--color-surface);
  display: flex;
  flex-direction: column;
  padding: var(--size-1);
  row-gap: var(--size-1);
}
.menu__header {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: var(--size-1) var(--size-1_5);
}
.menu__group {
  display: flex;
  flex-direction: column;
  row-gap: 1px;
}
.menu__separator {
  margin-inline: -0.25rem;
}
.menu__item {
  --btn-border-color: transparent;
  --btn-box-shadow: none;
  --btn-font-weight: var(--font-normal);
  --btn-justify-content: start;
  --btn-outline-size: 0;
  --btn-padding: var(--size-1) var(--size-1_5);
  --btn-radius: var(--rounded-md);
  &:focus-visible {
    --btn-background: var(--color-border-light);
  }
}
.menu__item-key {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  margin-inline-start: 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
import { Controller } from "@hotwired/stimulus"
import { rovingIndex } from "https://esm.sh/roving-ux@1.0.5?standalone"
export default class extends Controller {
  static targets = [ "item" ]
  #observer
  initialize() {
    this.#observer = new IntersectionObserver(this.#reset.bind(this))
  }
  connect() {
    this.#observer.observe(this.element)
  }
  disconnect() {
    this.#observer.disconnect()
  }
  #reset([ entry ]) {
    entry.isIntersecting && this.#start()
  }
  #start() {
    this.#rovingIndex()
    this.#focus()
  }
  #rovingIndex() {
    rovingIndex({ element: this.element, target: "[data-menu-target='item']" })
  }
  #focus() {
    this.itemTargets[0].focus()
  }
}

No notes provided.