|
9 | 9 | @plugin "tailwindcss-primeui"; |
10 | 10 | @custom-variant dark (&:where(.tum-apply-dark-mode, .tum-apply-dark-mode *)); //dark mode configuration |
11 | 11 |
|
12 | | -/* Visual reset for native <button> elements used purely as clickable containers |
13 | | - (cards, list rows, icon triggers). Strips default chrome so they inherit |
14 | | - surrounding typography and layout, while keeping their accessibility benefits. |
15 | | -
|
16 | | - Declared in the components layer on purpose. Unlayered rules outrank every layered |
17 | | - one no matter their specificity, so leaving this outside a layer would let the reset |
18 | | - beat the Tailwind utilities on the same element and silently drop their background, |
19 | | - padding and colour. The components layer sits before utilities, so utilities win. */ |
| 12 | +/* For native <button> elements used purely as clickable containers (cards, list rows, |
| 13 | + icon triggers). Only covers what Tailwind's preflight leaves behind: buttons come out |
| 14 | + centred and, since v4, with a default cursor. Background, border, padding, margin, font |
| 15 | + and colour are already reset there, so repeating them here only creates something that |
| 16 | + can fight the utilities on the same element. |
| 17 | +
|
| 18 | + Kept in the components layer for that same reason. Unlayered rules outrank every layered |
| 19 | + one whatever their specificity, so declaring this outside a layer would let it beat the |
| 20 | + utilities instead. Components sits before utilities, so utilities win. */ |
20 | 21 | @layer components { |
21 | 22 | .btn-bare { |
22 | | - appearance: none; |
23 | | - background: transparent; |
24 | | - border: 0; |
25 | | - padding: 0; |
26 | | - margin: 0; |
27 | | - font: inherit; |
28 | | - color: inherit; |
29 | 23 | text-align: inherit; |
30 | 24 | cursor: pointer; |
31 | 25 | } |
|
0 commit comments