nodejs.org/apps/site/components/Common/Button/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
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
.button {
  @apply px-4.5
    relative
    inline-flex
    items-center
    gap-2
    py-2.5
    text-center
    font-semibold;

  svg {
    @apply size-5;
  }

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

  &.neutral {
    @apply rounded
      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
      border
      border-green-600
      bg-green-600
      text-white
      shadow-sm;

    &: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
      text-neutral-800
      dark:text-neutral-200;

    &:hover:not([aria-disabled='true']) {
      @apply bg-neutral-100
        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 rounded-lg
      border
      border-green-600/30
      bg-green-600/10
      text-white
      shadow-sm;

    &::before {
      @apply bg-gradient-glow-backdrop
        absolute
        left-0
        right-0
        top-0
        -z-10
        mx-auto
        h-full
        w-full
        opacity-30
        content-[''];
    }

    &::after {
      @apply absolute
        -top-px
        left-0
        right-0
        mx-auto
        h-px
        w-2/5
        bg-gradient-to-r
        from-green-600/0
        via-green-600
        to-green-600/0
        content-[''];
    }

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

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

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