be-a11y/examples/accessible-dropdown/style.css at main · BeAPI/be-a11y · GitHub

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
.tabs__panel {
    @apply overflow-visible;
}

.dropdown {
    @apply relative mb-1;
}

.dropdown button {
    @apply relative border border-slate-200 dark:border-dark-border shadow-none w-full text-left rounded-none dark:text-white after:absolute after:top-3 after:right-3 after:w-5 after:h-5 after:bg-[currentColor];
}

.dropdown button::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19.202 5.698H4.798L12 18.302l7.202-12.604Z'/%3E%3C/svg%3E"); /* stylelint-disable-line function-url-quotes */
    mask-position: calc(100% - 20px) 50%;
    mask-size: 20px;
}

.dropdown button[aria-expanded="true"]::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M4.798 18.302h14.404L12 5.698 4.798 18.302Z'/%3E%3C/svg%3E"); /* stylelint-disable-line function-url-quotes */
}

.dropdown__label {
    @apply block mb-2;
}

.dropdown__list {
    @apply absolute right-0 left-0 z-10 max-h-40 overflow-auto bg-white dark:bg-dark-bg border border-slate-200 dark:border-dark rounded-none;

    top: calc(100% - 1px);
}

.dropdown li {
    @apply px-4 py-2 cursor-pointer;
}

.dropdown li[aria-selected="true"] {
    @apply bg-slate-200 dark:bg-dark-border;
}

.dropdown li:not([aria-selected="true"]):hover {
    @apply bg-slate-100 dark:bg-beapi dark:text-dark;
}

.dropdown button:not([aria-expanded="true"]) + .dropdown__list {
    @apply hidden;
}