DiscoTOC/common/common.scss

@import "common/foundation/variables";

.d-toc-regular {
  .cooked {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      &:before {
        display: block;
        content: "";
        height: 70px;
        margin-top: -70px;
        opacity: 0;
      }
    }
  }
  [data-theme-toc] {
    display: none;
  }
  .d-toc-ignore {
    font-size: $font-up-1;
    margin: 0 0 10px 0;
    font-weight: bold;
  }
  .highlighted {
    animation: fadein 1s;
  }
  .d-toc {
    transform: translate3d(0, 0, 0);
    transition: opacity 0.25s;
    ul,
    li {
      list-style: none;
      margin: 0;
      padding: 0;
      border: none;
      line-height: 30px;
    }
    .d-toc-item {
      a {
        color: $primary-high;
      }
      &.d-toc-active {
        position: relative;
        &:before {
          .ltr & {
            border-left: 1px solid $tertiary;
          }
          .rtl & {
            border-right: 1px solid $tertiary;
          }
          height: 100%;
          content: "";
          width: 1px;
          position: absolute;
          top: 0;
        }
        a {
          color: $primary;
          text-shadow: 0.1px 0.1px $primary, -0.1px -0.1px $primary;
        }
      }
    }
    .d-toc-heading {
      .ltr & {
        padding-left: 10px;
      }
      .rtl & {
        padding-right: 10px;
      }
      .d-toc-active:before {
        .ltr & {
          left: -10px;
        }
        .rtl & {
          right: -10px;
        }
      }
    }
    .d-toc-subheading {
      .ltr & {
        padding-left: 20px;
      }
      .rtl & {
        padding-right: 20px;
      }
      .d-toc-active:before {
        .ltr & {
          left: -30px;
        }
        .rtl & {
          right: -30px;
        }
      }
      .d-toc-subheading {
        .ltr & {
          padding-left: 30px;
        }
        .rtl & {
          padding-right: 30px;
        }
        .d-toc-active:before {
          .ltr & {
            left: -60px;
          }
          .rtl & {
            right: -60px;
          }
        }
        .d-toc-subheading {
          .ltr & {
            padding-left: 40px;
          }
          .rtl & {
            padding-right: 40px;
          }
          .d-toc-active:before {
            .ltr & {
              left: -70px;
            }
            .rtl & {
              right: -70px;
            }
          }
          .d-toc-subheading {
            .ltr & {
              padding-left: 50px;
            }
            .rtl & {
              padding-right: 50px;
            }
            .d-toc-active:before {
              .ltr & {
                left: -80px;
              }
              .rtl & {
                right: -80px;
              }
            }
          }
        }
      }
    }
    .d-toc-subheading li {
      font-size: 0.8em;
    }
  }
  .d-toc-anchor-link {
    font-size: initial;
    color: $primary-medium;
    .ltr & {
      margin-left: 5px;
    }
    .rtl & {
      margin-right: 5px;
    }
  }
}

// large screens
@media screen and (min-width: $large-width) {
  .d-toc-toggle {
    display: none !important;
  }
  .d-toc-close-wrapper,
  .d-toc-subheading {
    display: none;
  }
  .d-toc-post {
    .topic-body,
    .topic-avatar {
      border-top: none;
    }
    .d-toc {
      max-height: 85vh;
      padding-left: 0;
      margin-top: 50px;

      position: sticky;
      top: 75px;
      margin-bottom: 135px;
      max-width: 350px;
      overflow-y: auto;
      overflow-x: hidden;
      align-self: flex-start;
      flex: 1 1 auto;
      .ltr & {
        margin-left: -1px;
      }
      .rtl & {
        margin-right: -1px;
      }
    }
    .d-toc-article {
      display: flex;
      > .row {
        .ltr & {
          border-right: 1px solid $primary-low;
        }
        .rtl & {
          border-left: 1px solid $primary-low;
        }
      }
    }
    #topic-title {
      margin-bottom: 0;
      .title-wrapper {
        border-bottom: 1px solid $primary-low;
        padding-bottom: 0.5em;
        width: auto;
      }
    }
  }
}

// small screens
@media screen and (max-width: $large-width) {
  .d-toc-regular {
    #d-toc {
      z-index: z("header") + 1;
      background: $secondary;
      position: fixed;
      right: 0;
      top: 0;

      height: 100vh;
      width: 100vw;
      max-width: 500px;
      overflow: scroll;
      transition: transform 0.5s, opacity 0.25s;
      transform: translatex(100%);
      opacity: 0;
      .ltr & {
        margin-left: -1px;
      }
      .rtl & {
        margin-right: -1px;
      }
      &.d-toc-mobile {
        transform: translatex(0);
        opacity: 1;
      }
      .d-toc-active {
        &:before {
          .ltr & {
            margin-left: -1px;
          }
          .rtl & {
            margin-right: -1px;
          }
        }
      }
    }
    .d-toc-close-wrapper {
      height: 3em;
      background: $secondary;

      margin-bottom: 1em;
      position: sticky;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .ltr & {
        padding-right: 1em;
      }
      .rtl & {
        padding-left: 1em;
      }
    }
    .d-toc-toggle {
      position: fixed;
      bottom: 5px;

      padding: 0.5em 1em;
      background: $tertiary;
      color: $secondary;
      z-index: 3;
      .ltr & {
        right: 16px;
      }
      .rtl & {
        left: 16px;
      }
    }
    #d-toc > ul {
      .ltr & {
        margin-left: 20px;
        border-left: 1px solid $primary-low;
      }
      .rtl & {
        margin-right: 20px;
        border-right: 1px solid $primary-low;
      }
      &:last-child {
        margin-bottom: 5em;
      }
    }
  }
}

.topic .d-editor-preview [data-theme-toc] {
  background: $tertiary;
  color: $secondary;
  border-top: 2px solid $secondary;
  position: sticky;
  top: 0;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}