nodejs.org/packages/ui-components/src/Common/BaseButton/index.module.css at d5a24673049d29f14b0efc193f46fcd8f1f40cdc · 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
@reference "../../styles/index.css";

.button {
  @apply relative
    inline-flex
    items-center
    justify-center
    gap-2
    px-4.5
    py-2.5
    text-center
    font-semibold;

  svg {
    @apply size-5;
  }

  &[aria-disabled='true'] {
    @apply cursor-not-allowed;
  }

  &.small {
    @apply px-3
      py-2
      text-sm;
  }

  &.neutral {
    @apply rounded-sm
      bg-neutral-900
      text-white
      dark:text-neutral-200;

    &:hover:not([aria-disabled='true']) {
      @apply bg-neutral-800;
    }

    &[aria-disabled='true'] {
      @apply bg-neutral-900
        opacity-50;
    }

    &:focus {
      @apply bg-neutral-800;
    }
  }

  &.primary {
    @apply rounded-sm
      border
      border-green-600
      bg-green-600
      text-white
      shadow-xs;

    &:hover:not([aria-disabled='true']) {
      @apply border-green-700
        bg-green-700
        text-white;
    }

    &:focus {
      @apply border-green-700
        bg-green-700;
    }

    &[aria-disabled='true'] {
      @apply bg-green-600
        opacity-50;
    }
  }

  &.secondary {
    @apply rounded-lg
      border
      border-neutral-200
      text-neutral-800
      dark:border-neutral-900
      dark:text-neutral-200;

    &:hover:not([aria-disabled='true']) {
      @apply bg-neutral-200
        text-neutral-800
        dark:bg-neutral-900
        dark:text-neutral-200;
    }

    &[aria-disabled='true'] {
      @apply bg-transparent
        opacity-50;
    }

    &:focus {
      @apply bg-neutral-100
        text-neutral-800
        dark:bg-neutral-900
        dark:text-neutral-200;
    }
  }

  &.special {
    @apply before:bg-gradient-glow-backdrop
      rounded-lg
      border
      border-green-600/30
      bg-green-600/10
      text-white
      shadow-xs
      before:absolute
      before:top-0
      before:right-0
      before:left-0
      before:-z-10
      before:mx-auto
      before:h-full
      before:w-full
      before:opacity-30
      before:content-['']
      after:absolute
      after:-top-px
      after:right-0
      after:left-0
      after:mx-auto
      after:h-px
      after:w-2/5
      after:bg-linear-to-r
      after:from-green-600/0
      after:via-green-600
      after:to-green-600/0
      after:content-[''];

    &[aria-disabled='true'] {
      @apply opacity-50;
    }

    &:hover:not([aria-disabled='true']) {
      @apply bg-green-600/20;
    }

    &:focus {
      @apply bg-green-600/20;
    }
  }

  &.warning {
    @apply border-warning-600
      bg-warning-600
      rounded-sm
      border
      text-white
      shadow-xs;

    &:hover:not([aria-disabled='true']) {
      @apply border-warning-700
        bg-warning-700
        text-white;
    }

    &:focus {
      @apply border-warning-700
        bg-warning-700;
    }

    &[aria-disabled='true'] {
      @apply bg-warning-600
        opacity-50;
    }
  }

  &.info {
    @apply border-info-600
      bg-info-600
      rounded-sm
      border
      text-white
      shadow-xs;

    &:hover:not([aria-disabled='true']) {
      @apply border-info-700
        bg-info-700
        text-white;
    }

    &:focus {
      @apply border-info-700
        bg-info-700;
    }

    &[aria-disabled='true'] {
      @apply bg-info-600
        opacity-50;
    }
  }
}