nodejs.org/packages/ui-components/src/Common/BaseButton/index.module.css at 95a9ce2c152fe6a1b88dde31d68c81f0ab85d542 · 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
@reference "../../styles/index.css";

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

  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 shadow-xs
      rounded-sm
      border
      border-green-600
      bg-green-600
      text-white;

    &: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
      shadow-xs
      rounded-lg
      border
      border-green-600/30
      bg-green-600/10
      text-white
      before:absolute
      before:left-0
      before:right-0
      before:top-0
      before:-z-10
      before:mx-auto
      before:h-full
      before:w-full
      before:opacity-30
      before:content-['']
      after:absolute
      after:-top-px
      after:left-0
      after:right-0
      after:mx-auto
      after:h-px
      after:w-2/5
      after:bg-gradient-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;
    }
  }
}