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

.navItem {
  @apply inline-flex
    items-center
    gap-2
    rounded-sm
    px-3
    py-2
    motion-safe:transition-colors;

  .label {
    @apply text-base
      font-medium
      lg:text-sm;
  }

  .icon {
    @apply size-3
      text-neutral-500
      dark:text-neutral-200;
  }

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

  &.nav {
    .label {
      @apply text-neutral-900
        dark:text-white;
    }

    &.active {
      @apply bg-green-600;

      .label {
        @apply text-white;
      }

      .icon {
        @apply text-white
          opacity-50;
      }
    }
  }

  &.footer {
    .label {
      @apply text-neutral-800
        dark:text-white;
    }

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