patternfly-org/packages/documentation-framework/components/tableOfContents/tableOfContents.css at main · patternfly/patternfly-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
.ws-toc {
  align-self: flex-start;
  position: sticky;
  width: calc(100% + var(--pf-v6-c-page__main-section--PaddingInlineStart) + var(--pf-v6-c-page__main-section--PaddingInlineEnd));
  background-color: var(--pf-t--global--background--color--sticky--default);
  z-index: 201;
  margin-block-start: calc(var(--pf-v6-c-page__main-section--PaddingTop) * -1);
  margin-block-end: var(--pf-t--global--spacer--md);
  margin-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) * -1);
  margin-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) * -2);
  padding-block-start: var(--pf-t--global--spacer--sm);
  padding-block-end: var(--pf-t--global--spacer--sm);
  padding-inline-start: var(--pf-t--global--spacer--md);
  padding-inline-end: 0;
  box-shadow: var(--pf-t--global--box-shadow--lg--bottom);
}

.ws-toc.pf-m-expanded {
  box-shadow: var(--pf-t--global--box-shadow--sm--bottom)
}

.ws-toc .pf-v6-c-jump-links__toggle button {
  background-color: var(--pf-t--global--background--color--secondary--default);
}

/* Mobile jumplinks */
@media (max-width: 1449px) {
  .ws-toc.pf-m-expanded .pf-v6-c-jump-links__main {
    max-height: 65vh;
    overflow-y:auto;
  }

  .ws-toc .pf-v6-c-jump-links__header {
    position: sticky;
    top: 0;
    z-index: 2;
  }
}

.ws-toc .pf-v6-c-jump-links__main {
  scrollbar-width: none;
}

/* Hide TOC scrollbar Chrome, Safari & Opera */
.ws-toc .pf-v6-c-jump-links__main::-webkit-scrollbar {
  display: none;
}

@media (min-width: 1450px) {
  .ws-toc {
    min-width: 270px;
    max-width: 320px;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    /* Hide TOC scrollbar IE, Edge & Firefox */
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 0 0 0 var(--pf-t--global--spacer--2xl);
    background: none;
    margin: 0;
    order: 1;
    flex: 1 1 320px;
  }

  .ws-toc,
  .ws-toc.pf-m-expanded {
    box-shadow: none;
  }
}

.ws-toc-item .pf-m-link {
  text-wrap: wrap;
  text-align: left;
}

@media (min-width: 1450px) {
  .ws-toc .pf-v6-c-jump-links__main {
    margin-bottom: var(--jump-links-main-margin-bottom);
  }
}