website/_sass/_details.scss

.details {
  &-links {
    &--link {
      color: #666666;
      padding: 0.5em 1em;
      margin: 0.2em;
      border-radius: 0.2em;
      border: 1px solid #cbcbcb;
      display: block;
      font-size: 1em;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      img {
        margin-right: 0.2em;
        height: 1em;
        width: 2em;
        opacity: 0.5;
      }

      .copyable {
        background-color: inherit;
        padding: 0;
        margin: 0;
        width: calc(100% - 2.2em);

        a {
          color: #666666;
        }

        &--button {
          padding: 0;
        }
      }

      &__yarn {
        display: flex;
        align-items: center;
      }
    }
  }

  &-main {
    overflow: auto;
  }

  @include media-breakpoint-up(lg) {
    &-side {
      border-left: 1px solid #cbcbcb;
    }
  }

  &-doc {
    margin: 2em;
    margin-right: 0;

    &--title {
      display: inline-block;
      color: #666;
      border-bottom: dotted 1px;
      position: relative;

      a {
        color: inherit;
        text-decoration: none;
      }

      &:before {
        content: '';
        position: absolute;
        left: -1em;
        top: 0.4em;
        width: 0.8em;
        height: 0.8em;
        background: {
          repeat: no-repeat;
          size: contain;
        }
      }

      &__readme:before {
        background-image: url('/assets/detail/ico-readme.svg');
      }

      &__changelog:before {
        background-image: url('/assets/detail/ico-changelog.svg');
      }
    }

    &--content {
      h1 {
        @extend .h4;
      }
      h2 {
        @extend .h5;
      }
      h3 {
        @extend .h6;
      }
      h4 {
        @extend .h6;
      }
      h5 {
        @extend .h6;
      }
      h6 {
        @extend .h6;
      }
      blockquote {
        @extend .blockquote;
      }
      table {
        @extend .table;
      }
    }
  }

  &-side {
    dt {
      font-weight: normal;
      align-self: flex-end;
    }

    dd {
      margin-bottom: 0;
      font-weight: bold;
    }

    dl div {
      margin-bottom: 0.5em;

      img {
        height: 1.4em;
        width: 1.4em;
        margin-right: 0.4em;
        align-self: center;
      }
    }

    h1 {
      font-size: 1.2em;
    }

    article {
      margin-bottom: 2em;
    }

    &--runkit {
      &:after {
        content: '';
        width: 1em;
        height: 1em;
        background-size: contain;
        background-image: url('/assets/detail/ico-runkit.svg');
      }
    }

    &--cdns {
      dd {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }

  &-files {
    &__list {
      list-style-type: none;
      padding-left: 0;

      // Add padding for subdirectories
      & & {
        padding-left: 1.5em;
      }

      li {
        padding: 0.2em;

        &:hover {
          background-color: #eceeef;
          border-radius: 0.2em;

          ul {
            background-color: white;
            border-radius: 0.2em;
          }
        }
      }
    }

    // File and directory names
    &__dirname,
    &__filename {
      line-height: 2em;
    }
    &__dirname::before,
    &__filename::before {
      content: '';
      display: inline-block;
      height: 22px;
      margin-right: 4px;
      width: 22px;
      vertical-align: middle;
    }
    &__dirname::before {
      background-image: url(/assets/detail/ico-folder.svg);
    }
    &__filename::before {
      background-image: url(/assets/detail/ico-file.svg);
    }

    // Expand animation for subdirectories
    &-enter {
      max-height: 0;
      opacity: 0;
      transition: all 200ms ease-in;
      &-active {
        max-height: 500px;
        opacity: 1;
      }
    }
    // Collapse animation for subdirectories
    &-leave {
      max-height: 500px;
      opacity: 1;
      transition: all 200ms ease-out;
      &-active {
        max-height: 0;
        opacity: 0;
      }
    }
  }
}

.dotted {
  border-bottom: 1px dotted #666;
  margin: 0 0.5em 5px 0.5em;
}

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