_components.scss

//
.content {
  .card:not(:last-child) {
    margin-bottom: 1em;
  }

  kbd {
    @extend .tag;
    @extend .is-dark;
  }
}

/* Font Awesome 5 mixin. Can be included in any rule that should render Font Awesome icons. */
@mixin font-awesome {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
// TODO: move to an earlier file?

/* */
h1, h2, h3, h4, h5, h6 {
  .heading-anchor {
    visibility: hidden;
    vertical-align: middle;
    margin-left: 0.5em;
    font-size: 0.8rem;

    &::before {
      @include font-awesome;
      content: "\f0c1";
    }
  }

  &:hover .heading-anchor {
    visibility: visible;
  }
}

.docstring {
  @extend .card;
  margin-bottom: 1em;

  > header {
    @extend .card-header;

    // background-color: $background;

    // Same as .card-header-title, sans font-weight:
    // align-items: center;
    color: $card-header-color;
    display: flex;
    flex-grow: 1;
    padding: $card-header-padding;
    // padding: $card-header-padding $card-content-padding;
  }

  > section {
    @extend .card-content;
    border-bottom: 1px solid $border;
    &:last-child {
      border-bottom: none;
    }

    // TODO: FIX!
    footer {
      margin-top: 0.5rem;
      text-align: right;
      // float: right;
      // position: relative;
      // right: 0.7*$card-content-padding;
      // top: 0.7*$card-content-padding;
      // visibility: hidden;
      > a {
        @extend .tag;
        @extend .is-light;
        @extend .is-size-7;
      }
    }
    &:hover > footer {
      visibility: visible;
    }
  }
}

#main {
  @include tablet {
    padding: 0 1rem;
    padding-left: 1.3rem;
  }
  // We need to
  > * {
    max-width: $documenter-max-width;
  }

  @include mobile {
    > .content, > footer {
      padding: 0 1rem;
    }
  }
}

// #navbar is the top bar of the page that contains the breadcrumb,
// the "Edit on GitHub" link and the sidebar burger (when on mobile).
#navbar {
  background-color: $body-background-color;
  border-bottom: 1px solid $border;
  z-index: 2;

  min-height: 4rem;
  margin-bottom: 1rem;

  display: flex;
  .breadcrumb {
    flex-grow: 1;
  }

  .right {
    display: flex;
    > * {
      display: inline-block;
    }
    .edit-page {
      white-space: nowrap;
      margin: auto 0;
      .edit-page-text {
        @extend .is-hidden-mobile;
        padding: 0;
      }
    }
    .sidebar-button {
      @extend .is-hidden-tablet;
      font-size: 1.5rem;
      margin: auto 0 auto 1rem;
    }
  }
  > * {
    margin: auto 0;
  }

  @include mobile {
    // background-color: $background;
    // box-shadow: 0.2rem 0rem 0.4rem #bbb;
    position: sticky;
    top: 0;
    padding: 0 1rem;

    /* For Headroom.js */
    transition-property: top, box-shadow;
    -webkit-transition-property: top, box-shadow; /* Safari */
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s; /* Safari */
    &.headroom--not-top {
      box-shadow: $shadow-size 0rem $shadow-blur $shadow;
      transition-duration: 0.7s;
      -webkit-transition-duration: 0.7s; /* Safari */
    }
    &.headroom--unpinned.headroom--not-top.headroom--not-bottom {
      top: -4.5rem;
      transition-duration: 0.7s;
      -webkit-transition-duration: 0.7s; /* Safari */
    }
  }
}

#sidebar {
  @extend .dashboard-panel;

  color: $sidebar-color;
  background-color: $sidebar-background;
  border-right: 1px solid $border;
  padding: 0;

  position: absolute;
  left: -$sidebar-width;
  width: $sidebar-width;
  flex: 0 0 $sidebar-width;
  z-index: 5;

  transition: left 0.3s;

  &.visible {
    left: 0;
    box-shadow: 2*$shadow-size 0rem 2*$shadow-blur $shadow;
    @include tablet {
      box-shadow: none;
    }
  }
  @include tablet {
    left: 0;
    position: relative;
  }

  #pagetitle {
    @extend .is-size-4;
    // @include font-size($sidebar-title-font-size);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    font-weight: $weight-bold;
    /* The padding works around the problem that when you set overflow: hidden, part
     * of the <h1> gets hidden away.
     */
    padding: 0.5rem 0;

    #pagetitle-overflow-box {
      max-width: $sidebar-title-width;
      transition: all 0.3s;
    }
  }

  #sidebar-menu {
    @extend .is-scrollable;

    font-size: $size-normal;

    > li > .tocitem {
      padding-left: $sidebar-menu-padding;
    }
    ul > li > .tocitem {
      padding-left: 2*$sidebar-menu-padding;
    }
    ul ul > li > .tocitem {
      padding-left: 3*$sidebar-menu-padding;
    }
    ul ul ul li > .tocitem {
      padding-left: 4*$sidebar-menu-padding;
    }

    .tocitem {
      display: block;
      padding-top: 0.4em;
      padding-bottom: 0.4em;

      &, &:hover {
        color: $sidebar-color;
      }
    }

    a.tocitem:hover {
      background-color: $sidebar-menu-hover-background;
      // color: $sidebar-menu-hover-color;
    }

    .tocitem.is-active {
      border-top: 1px solid $sidebar-menu-border;
      &, &:hover {
        background-color: $sidebar-menu-active-background;
        color: $sidebar-menu-active-color;
        font-weight: $sidebar-menu-active-font-weight;
      }
    }

    ul.internal {
      background-color: $sidebar-menu-internal-background;
      border-top: 1px solid $sidebar-menu-internal-border;
      border-bottom: 1px solid $sidebar-menu-internal-border;
      & .tocitem:hover {
        background-color: $sidebar-menu-internal-hover-background;
      }
    }

    /* Setting up a nicer theme style for the scrollbar */
    overflow-y: auto;
    -webkit-overflow-scroll: touch;
    &::-webkit-scrollbar {
        width: .3rem;
        background: none;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 5px 0px 0px 5px;
        background: $sidebar-scrollbar-color;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: $sidebar-scrollbar-color-hover;
    }
  }

  #version-selector {
    @extend .select;
    @extend .is-rounded;
    @extend .is-small;
    > select {
      width: 0.4 * $sidebar-width;
      text-align: center;
      text-align-last: center;
    }
  }

  #search-form {
    > input {
      @extend .input;
      @extend .is-rounded;
      @extend .is-small;
      width: 0.8 * $sidebar-width;
    }
    margin: auto;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
}

// .ui-mask {
//   transition: opacity 0.3s;
//   opacity: 0;
//   // display: none;
//   background-color: black;
//
//   visibility: hidden;
//   position: absolute;
//   min-width: 100vw;
//   min-height: 100vh;
//   z-index: 4;
//
//   &.visible {
//     opacity: 0.3;
//     // display: block;
//     visibility: visible;
//   }
// }

// Bulma always adds a vertical scrollbar to the whole page. But since we're using the
// dashboard with the panes being scrollable individually, we need to explicitly remove the
// scrollbars from the html element.
html {
  overflow-x: hidden;
  overflow-y: hidden;
}

// There appears to be a rendering bug in Chrome, where elements with `position: absolute` in
// an overflow container affect whether the outer container is overflowing / needs
// scrollbars.
//
// In this particular case, KaTeX applies `position: absolute` on the the MathML
// accessibility span. This breaks the dashboard layout of the equation is somewhere far
// down in the container.
//
// Moving all of these accessbility "pixels" to the top-right seems to take care of the
// issue. An alternative is also to use `position: fixed`, which does not cause the outer
// container to scroll.
.katex .katex-mathml {
  top: 0;
  right: 0;
}