The Node.js® Website
keii.dev
1.wrapper {
2 @apply flex
3 w-fit
4 items-center
5 rounded-full
6 border
7 py-1
8 pl-1
9 pr-2.5
10 text-sm
11 font-medium;
12
13 .icon {
14 @apply size-4;
15 }
16
17 .badge {
18 @apply mr-2
19 rounded-full
20 border
21 px-2.5
22 py-0.5
23 text-white;
24 }
25
26 .message {
27 @apply mr-1;
28 }
29
30 &.default {
31 @apply border-green-200
32 bg-green-100
33 dark:border-green-700
34 dark:bg-neutral-900;
35
36 .icon {
37 @apply text-green-500
38 dark:text-green-300;
39 }
40
41 .badge {
42 @apply border-green-200
43 bg-green-600
44 dark:border-green-600;
45 }
46
47 .message {
48 @apply text-green-700
49 dark:text-green-300;
50 }
51 }
52
53 &.error {
54 @apply border-danger-200
55 bg-danger-100
56 dark:border-danger-700
57 dark:bg-neutral-900;
58
59 .icon {
60 @apply text-danger-500
61 dark:text-danger-300;
62 }
63
64 .badge {
65 @apply border-danger-200
66 bg-danger-600
67 dark:border-danger-600;
68 }
69
70 .message {
71 @apply text-danger-700
72 dark:text-danger-300;
73 }
74 }
75
76 &.warning {
77 @apply border-warning-200
78 bg-warning-100
79 dark:border-warning-700
80 dark:bg-neutral-900;
81
82 .icon {
83 @apply text-warning-500
84 dark:text-warning-300;
85 }
86
87 .badge {
88 @apply border-warning-200
89 bg-warning-600
90 dark:border-warning-600;
91 }
92
93 .message {
94 @apply text-warning-700
95 dark:text-warning-300;
96 }
97 }
98}