nodejs.org/packages/ui-components/src/Containers/NavBar/index.module.css at 0293ad9e47f432e69852af2ee62cb819309db1cf · 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
@reference "../../styles/index.css";

.container {
  @apply border-neutral-200
    bg-white
    lg:flex
    lg:h-16
    lg:flex-row
    lg:items-center
    lg:gap-8
    lg:border-b
    lg:px-8
    dark:border-neutral-900
    dark:bg-neutral-950;
}

.nodeIconAndMobileItemsToggler {
  @apply flex
    h-16
    shrink-0
    items-center
    border-b
    border-neutral-200
    px-4
    lg:flex
    lg:h-full
    lg:items-center
    lg:border-0
    lg:px-0
    dark:border-neutral-900;
}

.sidebarItemToggler {
  @apply absolute
    right-4
    -z-10
    -translate-y-[200%]
    appearance-none
    opacity-0;
}

.nodeIconWrapper {
  @apply h-[30px]
    flex-1;
}

.navInteractionIcon,
.sidebarItemToggler {
  @apply size-6;
}

.sidebarItemTogglerLabel {
  @apply block
    cursor-pointer
    lg:hidden;
}

.main {
  @apply flex-1
    flex-col
    justify-between
    gap-4
    lg:flex
    lg:flex-row
    lg:items-center;
}

.navItems {
  @apply flex
    flex-col
    gap-0
    border-b
    border-neutral-200
    p-4
    lg:flex-1
    lg:flex-row
    lg:gap-1
    lg:border-0
    lg:p-0
    dark:border-neutral-900;
}

.actionsWrapper {
  @apply flex
    flex-row
    flex-wrap
    items-center
    justify-between
    gap-2
    border-b
    border-neutral-200
    p-4
    sm:flex-nowrap
    lg:basis-96
    lg:border-0
    lg:p-0
    dark:border-neutral-900;
}

span.searchButtonSkeleton {
  @apply my-px
    mr-2
    flex-grow
    rounded-xl;

  &:empty {
    @apply h-10;
  }
}

span.themeToggleSkeleton {
  @apply size-9
    rounded-md
    py-4;
}

.ghIconWrapper {
  @apply size-9
    rounded-md
    p-2;

  svg {
    @apply fill-neutral-700
      dark:fill-neutral-300;
  }

  &:hover {
    @apply bg-neutral-100
      dark:bg-neutral-900;
  }
}