konnosDashboard
hit-area.css144 lines · main
1@utility hit-area-debug {
2 position: relative;
3 &::before {
4 content: '';
5 position: absolute;
6 top: var(--hit-area-t, 0px);
7 right: var(--hit-area-r, 0px);
8 bottom: var(--hit-area-b, 0px);
9 left: var(--hit-area-l, 0px);
10 pointer-events: inherit;
11 @apply border border-dashed border-blue-500 bg-blue-500/10;
12 }
13 &:hover::before {
14 @apply border border-dashed border-green-500 bg-green-500/10;
15 }
16}
17
18@utility hit-area {
19 position: relative;
20 &::before {
21 content: '';
22 position: absolute;
23 top: var(--hit-area-t, 0px);
24 right: var(--hit-area-r, 0px);
25 bottom: var(--hit-area-b, 0px);
26 left: var(--hit-area-l, 0px);
27 pointer-events: inherit;
28 }
29}
30
31@utility hit-area-* {
32 position: relative;
33 --hit-area-t: --spacing(--value(number) * -1);
34 --hit-area-t: calc(--value([*]) * -1);
35 --hit-area-b: --spacing(--value(number) * -1);
36 --hit-area-b: calc(--value([*]) * -1);
37 --hit-area-l: --spacing(--value(number) * -1);
38 --hit-area-l: calc(--value([*]) * -1);
39 --hit-area-r: --spacing(--value(number) * -1);
40 --hit-area-r: calc(--value([*]) * -1);
41 &::before {
42 content: '';
43 position: absolute;
44 top: var(--hit-area-t, 0px);
45 right: var(--hit-area-r, 0px);
46 bottom: var(--hit-area-b, 0px);
47 left: var(--hit-area-l, 0px);
48 pointer-events: inherit;
49 }
50}
51
52@utility hit-area-l-* {
53 position: relative;
54 --hit-area-l: --spacing(--value(number) * -1);
55 --hit-area-l: calc(--value([*]) * -1);
56 &::before {
57 content: '';
58 position: absolute;
59 top: var(--hit-area-t, 0px);
60 right: var(--hit-area-r, 0px);
61 bottom: var(--hit-area-b, 0px);
62 left: var(--hit-area-l, 0px);
63 pointer-events: inherit;
64 }
65}
66
67@utility hit-area-r-* {
68 position: relative;
69 --hit-area-r: --spacing(--value(number) * -1);
70 --hit-area-r: calc(--value([*]) * -1);
71 &::before {
72 content: '';
73 position: absolute;
74 top: var(--hit-area-t, 0px);
75 right: var(--hit-area-r, 0px);
76 bottom: var(--hit-area-b, 0px);
77 left: var(--hit-area-l, 0px);
78 pointer-events: inherit;
79 }
80}
81
82@utility hit-area-t-* {
83 position: relative;
84 --hit-area-t: --spacing(--value(number) * -1);
85 --hit-area-t: calc(--value([*]) * -1);
86 &::before {
87 content: '';
88 position: absolute;
89 top: var(--hit-area-t, 0px);
90 right: var(--hit-area-r, 0px);
91 bottom: var(--hit-area-b, 0px);
92 left: var(--hit-area-l, 0px);
93 pointer-events: inherit;
94 }
95}
96
97@utility hit-area-b-* {
98 position: relative;
99 --hit-area-b: --spacing(--value(number) * -1);
100 --hit-area-b: calc(--value([*]) * -1);
101 &::before {
102 content: '';
103 position: absolute;
104 top: var(--hit-area-t, 0px);
105 right: var(--hit-area-r, 0px);
106 bottom: var(--hit-area-b, 0px);
107 left: var(--hit-area-l, 0px);
108 pointer-events: inherit;
109 }
110}
111
112@utility hit-area-x-* {
113 position: relative;
114 --hit-area-l: --spacing(--value(number) * -1);
115 --hit-area-l: calc(--value([*]) * -1);
116 --hit-area-r: --spacing(--value(number) * -1);
117 --hit-area-r: calc(--value([*]) * -1);
118 &::before {
119 content: '';
120 position: absolute;
121 top: var(--hit-area-t, 0px);
122 right: var(--hit-area-r, 0px);
123 bottom: var(--hit-area-b, 0px);
124 left: var(--hit-area-l, 0px);
125 pointer-events: inherit;
126 }
127}
128
129@utility hit-area-y-* {
130 position: relative;
131 --hit-area-t: --spacing(--value(number) * -1);
132 --hit-area-t: calc(--value([*]) * -1);
133 --hit-area-b: --spacing(--value(number) * -1);
134 --hit-area-b: calc(--value([*]) * -1);
135 &::before {
136 content: '';
137 position: absolute;
138 top: var(--hit-area-t, 0px);
139 right: var(--hit-area-r, 0px);
140 bottom: var(--hit-area-b, 0px);
141 left: var(--hit-area-l, 0px);
142 pointer-events: inherit;
143 }
144}