doc/src/theme/DocPage/styles.module.css

/* stylelint-disable selector-pseudo-class-no-unknown */

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

:root {
  --doc-sidebar-width: 300px;
  --doc-sidebar-hidden-width: 30px;
}

:global(.docs-wrapper) {
  display: flex;
}

.docPage,
.docMainContainer {
  display: flex;
  width: 100%;
}

.docSidebarContainer {
  display: none;
}

@media (min-width: 997px) {
  .docMainContainer {
    flex-grow: 1;
    max-width: calc(100% - var(--doc-sidebar-width));
  }

  .docMainContainerEnhanced {
    max-width: calc(100% - var(--doc-sidebar-hidden-width));
  }

  .docSidebarContainer {
    display: block;
    width: var(--doc-sidebar-width);
    margin-top: calc(-1 * var(--ifm-navbar-height));
    border-right: 1px solid var(--ifm-toc-border-color);
    will-change: width;
    transition: width var(--ifm-transition-fast) ease;
    clip-path: inset(0);
  }

  .docSidebarContainerHidden {
    width: var(--doc-sidebar-hidden-width);
    cursor: pointer;
  }

  .collapsedDocSidebar {
    position: sticky;
    top: 0;
    height: 100%;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--ifm-transition-fast) ease;
  }

  .collapsedDocSidebar:hover,
  .collapsedDocSidebar:focus {
    background-color: var(--ifm-color-emphasis-200);
  }

  .expandSidebarButtonIcon {
    transform: rotate(0);
  }

  html[dir="rtl"] .expandSidebarButtonIcon {
    transform: rotate(180deg);
  }

  html[data-theme="dark"] .collapsedDocSidebar:hover,
  html[data-theme="dark"] .collapsedDocSidebar:focus {
    background-color: var(--collapse-button-bg-color-dark);
  }

  .docItemWrapperEnhanced {
    max-width: calc(var(--ifm-container-width) + var(--doc-sidebar-width)) !important;
  }
}