sphinx-book-theme/src/sphinx_book_theme/assets/styles/sections/_sidebars-toggle.scss at d3655ab4e7977a1f2c4283515643f8f96ffb2c0e · executablebooks/sphinx-book-theme · 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
/**************************************************
* Rules that are specific to toggling the sidebar *
**************************************************/
input.sidebar-toggle {
  display: none;
  position: absolute;
}

input#__navigation {
  // On wide screens, checking will hide everything
  @media (min-width: $breakpoint-md) {
    &:checked {
      & ~ .container-xl #site-navigation {
        visibility: hidden;
        opacity: 0;
        margin-left: -$leftbar-width-wide;
      }

      // When we hide the sidebar on widescreen, add some padding to content
      & ~ .container-xl #main-content {
        padding-left: 7rem;
        padding-right: 4rem;

        // At full-width, there is no margin so add some extra padding
        &.full-width {
          padding-left: 4rem;
          padding-right: 4rem;
          margin: auto;
          // Set the maximum width to an L container in bootstrap
          // ref: https://getbootstrap.com/docs/5.0/layout/containers/
          max-width: 960px;
        }
      }
    }
  }

  // On narrow screens, *unchecking* will hide everything, so it's hidden by default
  @media (max-width: $breakpoint-md) {
    &:not(:checked) ~ .container-xl #site-navigation {
      visibility: hidden;
      opacity: 0;
      margin-left: -$leftbar-width-mobile;
    }
  }
}

input#__page-toc {
  // On narrow screens, it's hidden by default
  @media (max-width: $breakpoint-md) {
    &:not(:checked) ~ .container-xl .bd-toc {
      visibility: hidden;
      opacity: 0;
      margin-right: -$leftbar-width-mobile;
    }
  }
}

// **** Utility functions ****
// Label at the top of the page
label.overlay {
  &.overlay-navbar {
    background-color: rgba(0, 0, 0, 0.54);
  }
  height: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: width 0ms, height 0ms, opacity $animation-time ease-out;
  width: 0;
}

// On narrow screens, we use this overlay to close the sidebar
@media (max-width: $breakpoint-md) {
  input:checked + label.overlay {
    &.overlay-navbar {
      z-index: $zindex-offcanvas - 1; // This puts it just below the primary sidebar
    }

    &.overlay-pagetoc {
      z-index: $zindex-sticky - 1; // This puts it just below the header
    }
    height: 100%;
    opacity: 1;
    width: 100%;
  }
}