nodejs.org/packages/ui-components/src/Common/Search/Modal/index.module.css at 0cd429e388d4a6a3a637ee018e66d6846709cbee · 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
@reference "../../../styles/index.css";

.searchboxContainer {
  @apply grow;

  * {
    @apply antialiased;
  }
}

.searchButton {
  @apply flex
    min-h-10
    w-full
    grow
    cursor-pointer
    items-center
    justify-between
    gap-1
    rounded-xl
    border
    border-neutral-300
    bg-white
    p-1.5
    text-neutral-900
    hover:bg-neutral-100
    motion-safe:transition-colors
    dark:border-neutral-900
    dark:bg-neutral-950
    dark:text-neutral-200;

  &:hover {
    @apply bg-neutral-100
      motion-safe:transition-colors
      motion-safe:duration-300
      dark:bg-neutral-900;

    .searchButtonShortcut {
      @apply bg-neutral-200
        dark:bg-neutral-800;
    }
  }
}

.searchButtonContent {
  @apply relative
    flex
    flex-nowrap
    items-center
    gap-2
    pl-1
    text-sm;

  svg {
    @apply size-4;
  }
}

.searchButtonShortcut {
  @apply hidden
    rounded-md
    bg-neutral-300
    px-2
    py-1
    text-sm
    text-neutral-800
    md:inline
    dark:bg-neutral-900
    dark:text-neutral-400;
}

.modalWrapper {
  @apply fixed
    top-0
    left-0
    z-50
    mx-auto
    my-0
    flex
    size-full
    items-start
    justify-center
    bg-white/70
    lg:pt-[5vh]
    dark:bg-zinc-950/70;
}

.modalInner {
  @apply fixed
    top-0
    bottom-0
    mx-auto
    my-0
    flex
    h-full
    max-w-none
    bg-white
    lg:top-auto
    lg:bottom-auto
    lg:h-auto
    lg:max-w-3xl
    lg:min-w-lg
    lg:bg-neutral-100
    dark:bg-zinc-950
    lg:dark:bg-neutral-950;

  > section {
    @apply lg:min-w-lg;
  }
}

.modalContent {
  @apply flex
    h-full
    w-screen
    flex-col
    border-neutral-200
    lg:h-auto
    lg:max-h-[70vh]
    lg:w-auto
    lg:rounded-xl
    lg:border
    dark:border-neutral-900;
}

.modalCloseButton {
  @apply absolute
    top-2
    right-4
    z-10
    cursor-pointer
    bg-white
    px-2
    text-2xl
    text-neutral-950
    md:hidden
    dark:bg-black
    dark:text-neutral-200;
}