be-a11y/examples/accessible-modal/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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
.modal {
    @apply fixed top-0 right-0 bottom-0 left-0 z-[9999] grid place-content-center bg-dark/80;
}

.modal[aria-hidden="true"] {
    display: none;
}

.modal__inner {
    @apply relative w-full max-w-screen-sm p-8 bg-white dark:bg-dark-bg;
}

.modal__title {
    @apply text-center mb-8;
}

.modal__close {
    @apply absolute top-2 right-2 p-0 border-none shadow-none hover:text-beapi hover:bg-dark dark:hover:bg-beapi dark:hover:text-dark focus:text-beapi focus:bg-dark dark:focus:bg-beapi dark:focus:text-dark;
}

.modal__close svg {
    @apply fill-current;
}

.modal--mobile,
.modal--mobile .modal__inner {
    @apply block md:static bg-transparent dark:bg-none;
}

.modal--mobile .modal__inner {
    @apply transform-none max-w-none;
}

.modal--mobile .modal__close {
    @apply hidden;
}

.modal--mobile .modal__title {
    @apply text-left;
}

.form {
    @apply grid grid-cols-2 gap-4;
}

.form__w-full {
    @apply col-span-2;
}

input,
textarea {
    @apply block;
}

textarea + p {
    @apply mt-2;
}

/**
 * Styles for demo 4
 */
.modal--demo-4 {
    @apply transition-all duration-300;
}

.modal--demo-4[aria-hidden="true"] {
    @apply grid;
}

.modal--demo-4 .modal__inner {
    @apply transition-all duration-300 translate-y-0;
}

.modal--demo-4.modal--hidden {
    @apply opacity-0 touch-none pointer-events-none;
}

.modal--demo-4.modal--hidden .modal__inner {
    @apply opacity-0 translate-y-64;
}