nodejs.org/packages/ui-components/src/Common/BaseCodeBox/index.module.css at d5a24673049d29f14b0efc193f46fcd8f1f40cdc · 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
@reference "../../styles/index.css";

.root {
  @apply w-full
    max-w-full
    overflow-x-hidden
    rounded-sm
    border
    border-neutral-900
    bg-neutral-950;

  .content {
    @apply m-0
      min-w-0
      p-4;

    & > code {
      @apply font-ibm-plex-mono
        font-regular
        scrollbar-thin
        grid
        max-w-full
        [grid-template-columns:minmax(0,1fr)]
        overflow-x-auto
        bg-transparent
        p-0
        text-sm
        leading-snug
        text-neutral-400
        [counter-reset:line];

      & > [class='line'] {
        @apply relative
          min-w-0
          pl-8
          [overflow-wrap:break-word];

        &:not(:empty:last-child)::before {
          @apply inline-block
            content-[''];
        }

        &:not(:empty:last-child)::after {
          @apply font-ibm-plex-mono
            absolute
            top-0
            left-0
            mr-4
            w-4.5
            text-right
            text-neutral-600
            [content:counter(line)]
            [counter-increment:line];
        }
      }

      &[class*='plain-text'] {
        @apply font-mono;
      }
    }

    &[class*='no-line-numbers'] > code > [class='line'] {
      @apply pl-0;

      &:not(:empty:last-child)::after {
        @apply content-none
          [counter-reset:none];
      }
    }
  }

  & > .footer {
    @apply flex
      items-center
      justify-between
      border-t
      border-t-neutral-900
      px-3
      py-2
      text-sm
      font-medium;

    & > .language {
      @apply text-neutral-400;
    }

    & > .action {
      @apply px-2.5
        py-1
        text-xs
        font-medium;

      > svg {
        @apply h-4
          w-4;
      }
    }
  }
}