nodejs.org/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css at b5ae8097eba7002d17f8f2613d809c49d32c986f · 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
@reference '../../../styles/index.css';

.item {
  @apply font-regular
    relative
    z-20
    mb-px
    flex
    w-full
    items-center
    overflow-hidden
    rounded-md
    text-sm
    text-neutral-800
    dark:text-neutral-200;

  &:hover {
    &:not(.progression) .label {
      /* @see https://github.com/nodejs/nodejs.org/blob/main/packages/ui-components/src/Containers/NavBar/NavItem/index.module.css#L24 */
      @apply rounded-sm
        bg-neutral-100
        text-neutral-900
        dark:bg-neutral-900
        dark:text-neutral-100;
    }

    .icon {
      @apply scale-110
        text-green-600
        dark:text-green-400;
    }

    .progressionIcon {
      @apply fill-green-200
        dark:fill-green-300;
    }
  }

  .label {
    @apply font-regular
      flex
      items-center
      gap-1.5
      p-2
      text-sm;
  }

  .progressionIcon {
    @apply shrink-0
      fill-neutral-200
      stroke-white
      stroke-[4]
      dark:fill-neutral-800
      dark:stroke-neutral-950;
  }

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

  &.progression {
    .label {
      @apply p-1;
    }

    &:not(.active):hover .label {
      @apply rounded-sm
        bg-neutral-100
        dark:bg-neutral-900;
    }
  }

  &.active {
    @apply text-neutral-900
      dark:text-white;

    .progressionIcon {
      @apply fill-green-500;
    }

    &:not(.progression) .label {
      @apply rounded-sm
        bg-green-600
        text-white;
    }
  }
}