github.com/phrase/openapi@v0.0.0-20240514140800-49e8a106740e/doc/rapidoc.scss

@import 'variables';

.nav-bar {
  top: 0;
  border-right: solid 1px #EFEFEF;

  > div:first-child {
    padding: 0!important;

    .m-btn.toolbar-btn {
      position: absolute;
      right: $spacing2;
      margin-top: $spacing1;
      font-size: $fontSize5;
    }
  }

  > div:nth-child(2) {
    --nav-hover-bg-color: transparent;
    flex-shrink: 0;
  }
}

#nav-bar-search {
  --nav-hover-bg-color: #{$mutedBackground};
  padding: $spacing3;
  font-size: $fontSize4;
  font-family: var(--font-regular);

  & + div {
    --title-font-size: #{$fontSize3};
    padding-top: $spacing2;
  }

  &::-webkit-input-placeholder {
    text-transform: capitalize;
    color: $colorSecondaryForeground;
  }
  &::-moz-placeholder {
    text-transform: capitalize;
    color: $colorSecondaryForeground;
  }
  &:-ms-input-placeholder {
    text-transform: capitalize;
    color: $colorSecondaryForeground;
  }
  &:-moz-placeholder {
    text-transform: capitalize;
    color: $colorSecondaryForeground;
  }
  &::placeholder {
    text-transform: capitalize;
    color: $colorSecondaryForeground;
  }
}

.nav-bar-info {
  color: $colorPrimaryForeground;
}

.nav-bar-tag {
  margin-left: $spacing5;
  color: $colorPrimaryForeground;
  display: flex;

  & + & {
    /* hides empty search results */
    margin-top: -48px;
    background: #eee;
    z-index: 1;
    position: relative;
  }

  @at-root {
    div#{&}:last-of-type {
      color: transparent;
      pointer-events: none;
    }
  }
}

div.nav-bar-path {
  margin-left: 12px;

  &.active {
    --nav-accent-color: #{$colorPrimaryBorder};
  }
}

div.nav-bar-h2 {
  &.active {
    --nav-accent-color: #{$colorPrimaryBorder};
  }
}

div.nav-bar-tag {
  &.active {
    --nav-accent-color: #{$colorPrimaryBorder};
  }
}


.nav-scroll .nav-bar-section {
  font-size: $fontSize4;
  border-left: solid $spacing2 transparent;
  border-bottom: 0;
  padding-left: $spacing4;
  color: $colorPrimaryForeground;
  filter: none;
  text-align: left;
  text-transform: lowercase;

  &:first-letter { text-transform: uppercase; }
}

.main-header {
  background: $colorAccentBackground;

  .hamburger-btn {
    --primary-color: #{$colorAccentForeground};
    position: absolute;
    right: $spacing2;
    border-color: $colorAccentBackground;
  }
}

.body .main-content {
  &::before {
    content: '';
    display: block;
    height: 50px;

    @media (min-width: 768px) {
      height: 34px;
    }
  }
}

div.tag.title {
  padding-bottom: $spacing7;
  text-transform: none;
}

.m-markdown {
  --font-size-regular: #{$fontSize4};
}

.section-gap--read-mode {
  --font-size-regular: #{$fontSize5};
  --font-size-small: #{$fontSize4};

  margin-bottom: $spacing8;
  border-top: 0!important;
  font-weight: $fontWeightLight;

  &[id=overview] {
    margin-top: -$mobileHeaderHeight;
    padding-top: $mobileHeaderHeight + $spacing8;

    @media (min-width: 768px) {
      margin-top: 0;
      padding-top: $spacing8;
    }
  }

  h2 {
    margin-top: -$mobileHeaderHeight;
    margin-bottom: $spacing7;
    padding-top: $mobileHeaderHeight + $spacing8;

    @media (min-width: 768px) {
      margin-top: $spacing8;
      padding-top: 0;
    }

    & + .mono-font.regular-font-size {
      --font-size-regular: #{$fontSize4};

      margin-bottom: $spacing5;
      border-left: solid $spacing5 $colorEmphasizedBackground;
      background: $colorEmphasizedBackground;

      & + .m-markdown {
        margin-bottom: $spacing8;
      }
    }
  }
}

table:not(.m-table) {
  border-spacing: 0;
  border-collapse: collapse;
  margin-bottom: $spacing8;
  width: 100%;
  table-layout: fixed;

  td:not(:empty) {
    border: solid 1px $colorPrimaryBorder;
    padding: 4px !important;
    line-height: 28 / 16 * 1rem; // $fontSize5 + $spacing4 in rem
  }
}

.table-responsive {
  table:not(.basic-table) {
    overflow-wrap: break-word;

    colgroup col {
      width: 25%!important;

      &:nth-child(3) {
        width: 50%!important;
      }
    }
  }
}

.basic-table__cell {
  white-space: normal!important;
}

.table-title.top-gap {
  --font-size-small: #{$fontSize5};

  margin-top: $spacing3;
  display: inline-block;
  text-transform: lowercase;
  font-weight: $fontWeightNormal;

  &:first-letter { text-transform: uppercase; }

  &.row {
    span:not(.mono-font):not(:empty) {
      padding: $spacing1 $spacing2;
      font-size: $fontSize4;
      vertical-align: top;
      background: $mutedBackground;
      border-radius: $borderRadius2;
    }
  }
}

.expanded-endpoint-body {
  margin-top: -$mobileHeaderHeight;
  border-top: solid $mobileHeaderHeight + $spacing7 transparent;

  @media (min-width: 768px) {
    margin-top: 0;
    border-top: 0;
    padding-top: $spacing7!important;
  }

  > .mono-font.regular-font-size {
    > .regular-font.upper.method-fg.bold-text + span {
      overflow-wrap: break-word;
    }
  }
}

table.m-table {
  margin-bottom: $spacing3;
}

.divider {
  --primary-color: transparent;
}

.tab-buttons {
  .tab-btn {
    border: 0!important;
    border-radius: $borderRadius2 $borderRadius2 0 0;
    padding: 0 $spacing5;
    font: inherit;
    font-size: $fontSize3;
    font-weight: $fontWeightNormal;

    &.active {
      color: #fff;
      background: #545454;
      font-weight: $fontWeightNormal;
    }
  }
}

.tab-content.m-markdown {
  .toolbar-btn {
    margin-right: $spacing3;
  }

  pre {
    margin-top: 0;
    border-radius: 0 $borderRadius2 $borderRadius2;
    background-color: $colorDarkGrey;

    code {
      color: $colorLightGrey;
    }
  }
}

.expanded-req-resp-container {
  padding-top: $spacing4;
}

.response-panel.read-mode {
  border-top: 0;
}

.collapsed-descr {
  .bold-text.upper {
    text-transform: capitalize;
  }
}

.req-res-title, .resp-headers.upper {
  display: inline-block;
  text-transform: lowercase;
  font-weight: $fontWeightNormal;

  &:first-letter { text-transform: uppercase; }
}