nodejs.org/packages/ui-components/src/Containers/NavBar/index.module.css at b02d9c5b6baace02a6c589e08c1ae67ba7bc5938 · 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
@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;
  }
}

.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;
  }
}