nodejs.org/packages/ui-components/src/Containers/NavBar/index.module.css at f4e9cb32d63e2022e73cda5663843d52ded847da · 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
    xl:h-16
    xl:border-b
    xl:px-8
    dark:border-neutral-900
    dark:bg-neutral-950;

  .innerContainer {
    @apply max-w-10xl
      xl:mx-auto
      xl:flex
      xl:h-16
      xl:flex-row
      xl:items-center
      xl:gap-8;

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

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

      .sidebarItemTogglerLabel {
        @apply block
          cursor-pointer
          appearance-none
          border-0
          bg-transparent
          p-0
          xl:hidden;

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

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

    .navItems {
      @apply flex
        flex-col
        gap-0
        border-b
        border-neutral-200
        p-4
        xl:flex-1
        xl:flex-row
        xl:gap-1
        xl:border-0
        xl: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
        xl:basis-96
        xl:border-0
        xl:p-0
        dark:border-neutral-900;

      span.searchButtonSkeleton {
        @apply my-px
          mr-2
          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;
        }
      }
    }
  }
}