nodejs.org/packages/ui-components/src/Common/BadgeGroup/index.module.css at 0ed8ef69f1686b1b3e7f01cac6f30c725c714b35 · nodejs/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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
@reference "../../styles/index.css";

.wrapper {
  @apply xs:w-fit
    flex
    w-full
    items-center
    rounded-full
    border
    py-1
    pl-1
    pr-2.5
    text-sm
    font-medium;

  .icon {
    @apply size-4;
  }

  .badge {
    @apply mr-2;
  }

  .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;
    }

    .message,
    .message a:not(:hover) {
      @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;
    }

    .message,
    .message a:not(:hover) {
      @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;
    }

    .message,
    .message a:not(:hover) {
      @apply text-warning-700
        dark:text-warning-300;
    }
  }

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

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

    .message,
    .message a:not(:hover) {
      @apply text-info-700
        dark:text-info-300;
    }
  }

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

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

    .message,
    .message a:not(:hover) {
      @apply text-neutral-700
        dark:text-neutral-300;
    }
  }
}