nodejs.org/apps/site/components/Common/Badge/index.module.css at 120d42b768710d6aee8f32710b57d6f7c401f6fe · anthonyshew/nodejs.org · 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
.wrapper {
  @apply flex
    w-fit
    items-center
    rounded-full
    border
    py-1
    pl-1
    pr-2.5
    text-sm
    font-medium;

  .icon {
    @apply size-4;
  }

  .badge {
    @apply mr-2
      rounded-full
      border
      px-2.5
      py-0.5
      text-center
      text-white;
  }

  .message {
    @apply mr-1;
  }

  &.default {
    @apply border-green-200
      bg-green-100
      dark:border-green-700
      dark:bg-neutral-900;

    .icon {
      @apply text-green-500
        dark:text-green-300;
    }

    .badge {
      @apply border-green-200
        bg-green-600
        dark:border-green-600;
    }

    .message {
      @apply text-green-700
        dark:text-green-300;
    }
  }

  &.error {
    @apply border-danger-200
      bg-danger-100
      dark:border-danger-700
      dark:bg-neutral-900;

    .icon {
      @apply text-danger-500
        dark:text-danger-300;
    }

    .badge {
      @apply border-danger-200
        bg-danger-600
        dark:border-danger-600;
    }

    .message {
      @apply text-danger-700
        dark:text-danger-300;
    }
  }

  &.warning {
    @apply border-warning-200
      bg-warning-100
      dark:border-warning-700
      dark:bg-neutral-900;

    .icon {
      @apply text-warning-500
        dark:text-warning-300;
    }

    .badge {
      @apply border-warning-200
        bg-warning-600
        dark:border-warning-600;
    }

    .message {
      @apply text-warning-700
        dark:text-warning-300;
    }
  }
}