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

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

  &:not(.active):hover {
    /* Apply hover background to the full item width */
    @apply bg-neutral-100
      dark:bg-neutral-900;

    /* Ensure text colors contrast with hover background */
    .label {
      @apply text-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;
    }

    /* On hover, use full-width background on the item (set above) */
    &:not(.active):hover {
      @apply bg-neutral-100
        dark:bg-neutral-900;
    }

    /* Avoid extra pill background on the label when hovering */
    &:not(.active):hover .label {
      @apply rounded-none
        bg-transparent;
    }
  }

  &.active {
    /* Full-width active background and readable text */
    @apply bg-green-600
      text-white;

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

    /* Remove pill background on the label; keep full-width bg on the item */
    .label {
      @apply rounded-none
        bg-transparent
        text-white;
    }

    /* Preserve active background on hover */
    &:hover {
      @apply bg-green-600;
    }
  }
}