fred/components/curriculum/toc.css at 33a8009c5ae12ac8182a426c15d2fa07982f9d66 · mdn/fred · 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
.curriculum-content-container {
  .curriculum-layout__toc {
    .document-toc {
      padding: 0;
      margin-bottom: 2rem;

      .document-toc-heading {
        padding: 0.75em 0;

        font-size: var(--font-size-large);
        font-weight: var(--font-weight-normal);

        line-height: var(--font-line-content);
      }

      .document-toc-list {
        padding-left: 0;
        font-size: var(--font-size-normal);
        list-style: none;

        li {
          margin: 0;
        }
      }

      .document-toc-link {
        display: inline-block;

        padding: 0.25rem 0.5rem;

        color: var(--color-text-primary);

        text-decoration: none;

        border-left: 2px solid var(--color-border-primary);

        &[aria-current]:not([aria-current=""], [aria-current="false"]) {
          font-weight: var(--font-weight-bold);

          color: var(--color-text-primary);

          background-color: var(--background-toc-active);
          border-left: 2px solid var(--category-color);
          border-top-right-radius: 0.25rem;
          border-bottom-right-radius: 0.25rem;
        }
      }

      .document-toc-item-sub > .document-toc-link:not(.button) {
        padding-left: 2rem;
      }

      h2 {
        padding: 0;
        margin: 0;

        font-size: var(--font-size-normal);
        font-weight: normal;
      }

      ul {
        display: grid;

        padding: 0;
        margin: 0;

        list-style: none;

        ul {
          padding-left: 1rem;
        }
      }

      a {
        display: block;

        padding: 0.5rem;

        color: inherit;

        text-decoration: none;

        &:hover:not([aria-current="true"]) {
          color: var(--color-link-normal);
        }

        &[aria-current="true"] {
          background-color: var(--color-background-blue);
          box-shadow: -2px 0 0 var(--color-blue-50);
        }
      }

      @media (--screen-layout-no-sidebar) {
        padding: 0 1rem;
      }

      .show-toc {
        display: block;
      }
    }
  }
}