docs/src/css/sidebar.scss - master - alt3rmann/graphql-engine

docs/src/css/sidebar.scss
156 строк3 KB
Rob Dominguez
docs: backport hotfix for nested sidebar rules
24 июл 2023, 16:44
24 июл 2023, 16:44f2454b9
// For the index restructure, this selector recreates the top-level padding / height for all sidenav elements
[class~='menu__link'] {
  padding-right: 0;
  height: 30px;
  div {
    display: flex;
  }
}

.theme-doc-sidebar-container {
  background-color: var(--color-gray-4);
  .menu {
    padding: 0.5rem 0.5rem 0.5rem 0.8rem;
  }
}

.theme-doc-sidebar-menu {
  font-size: 14px;
  font-weight: var(--ifm-font-weight-normal);

  .menu__link {
    .menu__link--active,
    &.menu__link--active {
      font-weight: var(--ifm-font-weight-bold);
    }
  }
}

.menu__list-item--collapsed {
  .menu__list-item-collapsible {
    &::before {
      transform: rotate(0deg) !important;
      transition: all var(--ifm-transition-fast) ease-in-out;
    }
  }
}

.theme-doc-sidebar-menu {
  .theme-doc-sidebar-item-category {
    .theme-doc-sidebar-item-link {
      margin-top: 2px;

      .menu__link {
        //border-left: 0.1rem solid var(--color-gray-16);
        border-radius: 0 0.25rem 0.25rem 0;
      }

      .menu__link--active {
        //border-left: 0.1rem solid var(--color-gray-82);
      }
    }
  }

  .theme-doc-sidebar-item-link-level-1.menu__list-item,
  .theme-doc-sidebar-item-link-level-2.menu__list-item {
    display: flex;
    align-items: center;

    &::before {
      content: '';
      display: inline-block;
      //background: url("/icons/dot-light.svg") no-repeat;
      //width: 1rem;
      //height: 1rem;
      //transform: scale(0.7);
    }

    .menu__link {
      border-left: none;
      justify-content: flex-start;
    }
  }

  .menu__list-item {
    // margin-top: 0;
    .menu__caret {
      display: flex;
      align-items: center;
      justify-content: center;
      //position: absolute;
      top: 0px;
      left: 0px;
      padding: 0 0;
    }

    .menu__caret::before,
    .menu__link--sublist::after {
      min-width: 1.5rem;
      width: 1.5rem;
      height: 1.5rem;
      background: url('/icons/chevron-top.svg') no-repeat;
      background-position: center center;
      min-height: 29.5px;
    }

    .menu__list-item-collapsible {
      &::before {
        height: auto;
        background-position: center center;
        transform: rotate(90deg);
        transition: all 0.3s ease-in-out;
      }

      .menu__link--active {
        background: var(--ifm-menu-color-background-active) !important;
      }
    }
  }
}

.theme-doc-sidebar-item-category-level-1 {
  margin-top: 1px !important;
}

.sidebar_heading {
  font-size: 0.9rem !important;
  font-weight: 500;
  margin-bottom: 0 !important;
  margin-top: 12px !important;
}

.theme-doc-sidebar-item-link {
  font-size: 14px !important;
}

/* Dark Mode Styles */

html[data-theme='dark'] {
  .theme-doc-sidebar-container {
    background-color: var(--color-gray-86);

    button[class*='collapseSidebarButton_'],
    div[class*='collapsedDocSidebar_'] {
      &::before {
        background: url('/icons/collapse-arrow-left-light.svg') no-repeat;
      }

      &:hover {
        background-color: var(--color-gray-82);
      }
    }
  }

  .theme-doc-sidebar-menu {
    .theme-doc-sidebar-item-link-level-1.menu__list-item,
    .theme-doc-sidebar-item-link-level-2.menu__list-item {
      &::before {
        background: url('/icons/dot.svg') no-repeat;
      }

      .menu__link {
        border-left: none;
      }
    }
  }
}