xrpl-dev-portal/styles/_top-nav.scss

/* Top navigation ----------------------------------------------------------- */
.top-nav {
  background-color: $gray-900;
  height: 80px;
  padding: 0;
  // Logo
  .navbar-brand {
    text-decoration: none;
    white-space: pre;
    -webkit-transition: opacity 0.2s ease, color 0.2s ease;
    transition: opacity 0.2s ease, color 0.2s ease;
    padding-left: 2rem;

    .logo {
      margin-left: 0;
      content: url(../img/XRPLedger_DevPortal-white.svg);
      width: 162px;
      height: 40px;
      display: block;
    }

    &:hover {
      opacity: 0.75;
    }

    @include media-breakpoint-down(md) {
      padding-left: 2rem;

      img {
        width: 120px;
      }
    }
  }
  .nav-item {
    font-weight: 600;
  }

  // Main Links ----------------------------------------------------------------
  #topnav-pages {
    @include media-breakpoint-up(lg) {
      flex-grow: 1;
    }
    .nav-link {
      color: $gray-100;
      font-size: 1rem;
      line-height: 1.25rem;
      text-decoration: none;
      font-weight: 600;
      // padding: .5rem 2rem;//TODO:checkme
    }
  }

  // Dropdowns -----------------------------------------------------------------
  // Shared styles
  .dropdown-toggle {
    position: relative;
  }
  .dropdown-menu {
    border-width: 0;

    h5 {
      font-weight: 400;
      font-size: 12px;
      color: $gray-400;
      margin-bottom: 0;
    }
    .dropdown-item {
      line-height: 1rem;
      padding: 0.75rem 0;
      white-space: normal;

      &.dropdown-hero {
        width: 100%;
        display: flex;
        padding: 1rem 2rem;

        > img {
          width: 68px;
          height: 68px;
          background-color: $gray-800;
          border-radius: $border-radius-sm;
          flex-grow: 0;
          padding: 0.75rem;
          margin-right: 2rem;
          margin-top: auto;
          margin-bottom: auto;
        }

        p {
          font-size: 14px;
          color: $gray-300;
          margin: 0;
          white-space: normal;
        }

        h4 {
          font-size: 1.25rem;
          font-weight: 600;
          margin-bottom: 0;
          line-height: 2rem;
        }

        &:hover {
          h4 {
            color: $blue-purple-400;
          }
          p {
            font-weight: 400;
          }
        }
      }

      &:last-child {
        padding-bottom: 0;
      }
      &:first-child {
        padding-top: 0;
      }
    }

    .col-for-popular-pages,
    .col-for-人気ページ {
      background-color: $gray-800;
    }

    a:hover {
      color: $blue-purple-400;
      background-color: inherit;
    }

    h5:hover {
      background-color: inherit;
    }
  }

  #topnav-search {
    flex-grow: 1;
    .input-group {
      flex-grow: 1;
      flex-wrap: nowrap; // Fix search bar splitting into two lines on iPhone 5
    }

    @include media-breakpoint-down(md) {
      .form-inline {
        padding: $nav-link-padding-y $nav-link-padding-x;
      }
    }

    .input-group-text {
      height: 40px;
    }
    .ds-input {
      height: 40px;
    }
  }

  #topnav-language {
    .dropdown-item {
      font-weight: 600;
    }
  }

  // Desktop only styles -------------------------------------------------------
  @include media-breakpoint-up(lg) {
    padding: 0 2rem;

    .navbar-brand {
      margin-left: 0;
      padding-left: 0;
    }

    .dropdown-toggle {
      &::after {
        display: none;
      }
      > span {
        border-bottom: 2px solid transparent;
      }
    }

    .dropdown .dropdown-toggle:hover > span:not(.chevron) {
      padding-bottom: 8px;
      border-bottom: 2px solid $purple;
      margin-bottom: -8px;
    }

    .dropdown-menu {
      border-radius: 0 0 $border-radius-lg $border-radius-lg;
      padding: 2.5rem;

      .dropdown-item {
        &.dropdown-hero {
          padding: 0;
        }
      }

      &.show {
        display: grid;
        gap: 40px;

        &#topnav_dd_xrp-ledger-overviewhtml {
          grid-template-columns: 180px 180px 180px;
        }

        &#topnav_dd_docshtml {
          grid-template-columns: 180px 180px 260px;
          left: -200px;
        }

        &#topnav_dd_contributehtml {
          grid-template-columns: 200px;
        }

        .dropdown-hero {
          grid-row: 1;
          grid-column: 1 / 4;
        }
        #dropdown-hero-for-documentation,
        #dropdown-hero-for-ドキュメント {
          grid-column: 1 / 3;
        }

        // "About" dropdown placement
        .col-for-xrp-ledger {
          grid-row: 1 / 3;
          grid-column: 1;
        }
        .col-for-xrp {
          grid-column: 2;
        }
        .col-for-sustainability {
          grid-column: 2;
        }
        .col-for-about {
          grid-row: 1 / 3;
          grid-column: 3;
        }

        // "Docs" dropdown placement
        .col-for-article-types {
          grid-column: 1;
          grid-row: 2;
        }
        .col-for-online-tools {
          grid-column: 1;
          grid-row: 3;

          .external-link {
            white-space: nowrap;
          }
        }
        .col-for-get-started {
          grid-column: 2;
          grid-row: 2 / 4;
        }
        .col-for-popular-pages,
        .col-for-人気ページ {
          grid-column: 3;
          grid-row: 1 / 4;
          margin: -40px -40px -40px 0;
          padding: 40px;
        }
      }

      &.smaller-dropdown {
        min-width: 180px;
        padding: 1.25rem;
      }
    }

    #topnav-pages {
      flex-grow: 0;
      @media (min-width: 992px) and (max-width: 1030px) {
        // Fix for top nav overflow in this range
        .nav-link {
          padding: $nav-link-padding-y 1.6rem; //TODO:checkme
        }
      }
    }

    #topnav-language {
      flex-grow: 0;

      hr {
        display: none;
      }

      #language_selector_header_btn {
        padding-right: 0;
      }
    }

    @include media-breakpoint-up(xl) {
      #topnav-search {
        margin-left: 4rem;
        margin-right: 0.5rem;
      }
    }
  } // End desktop styles

  // Mobile only styles --------------------------------------------------------
  @include media-breakpoint-down(md) {
    .navbar-toggler {
      border: 0;
      padding: 30px 2rem;
      font-size: 1rem;
      display: inline-block;

      .navbar-toggler-icon {
        background: none;
        height: 20px;
        width: 20px;
        position: relative;

        &::after,
        &::before,
        div {
          position: absolute;
          content: " ";
          background-color: $gray-100;
          display: block;
          width: 100%;
          height: 3px;
          transition: all 0.2s ease;
        }
        &::before {
          top: 0;
        }
        &::after {
          bottom: 0;
        }
        div {
          top: calc(50% - 1.5px);
        }
      }

      &:not(.collapsed) {
        .navbar-toggler-icon {
          &::before {
            transform: translateY(8px) rotate(135deg);
          }
          &::after {
            transform: translateY(-9px) rotate(-135deg);
          }
          div {
            transform: scale(0);
          }
        }
      }
    }

    .navbar-nav .nav-link,
    .navbar-collapse > .nav-item {
      line-height: 150%;
      background: $gray-900;

      label {
        margin-bottom: 0;
      }
    }

    .navbar-nav .nav-link {
      padding: $nav-link-padding-y $nav-link-padding-x;
    }

    .dropdown-menu {
      margin: 0;
      width: 100%;
      overflow: auto;
      transition: all 0.2s ease;
      height: 0;
      display: block;
      padding: 0;
      border-radius: 0;
      &.show {
        // 80px = height of top nav element (with x)
        // 52px = height of dropdown toggle (with <)
        height: calc(100vh - 80px - 52px);

        > :last-child {
          // On iOS Safari, clicking too close to the bottom brings up the menu,
          // so we need to give the last thing some extra space
          padding-bottom: 4rem;
        }

        &#topnav_dd_docshtml {
          display: grid;
          //grid-template-columns: 187px 187px;
          grid-template-columns: minmax(187px, 1fr) minmax(187px, 1fr);
          gap: 1px;
          left: -200px;

          .dropdown-hero {
            grid-column: 1 / 3;
            grid-row: 1;
          }

          // "Docs" dropdown placement
          .col-for-article-types {
            grid-column: 1;
            grid-row: 2;
          }
          .col-for-online-tools {
            grid-column: 1;
            grid-row: 3;
            padding-bottom: 32px;
          }
          .col-for-get-started {
            grid-column: 2;
            grid-row: 2 / 4;
            padding-bottom: 32px;
          }
          .col-for-popular-pages,
          .col-for-人気ページ {
            grid-column: 1 / 3;
            grid-row: 4;
            margin: -1px;
            padding-top: 33px;
          }
          .col-for-questions,
          .col-for-質問 {
            grid-column: 1 / 3;
            grid-row: 5;
            margin: -1px;
            padding-bottom: 32px;
          }
        }
      }

      .navcol {
        padding: 1rem 2rem;
      }
      &.smaller-dropdown {
        padding: 0 2rem;
        &.show {
          padding: 1rem 2rem;
          height: auto;
        }
      }

      .dropdown-hero:first-child {
        padding-top: 1rem;
      }
    }

    .dropdown-toggle:not(.with-caret) {
      &::before,
      &::after {
        border: 0;
        font-family: FontAwesome;
        color: $blue-purple-400;
        font-size: 0.75rem;
        transition: all 0.2s ease;
        overflow: clip;
        width: 1rem;
      }

      &::before {
        content: "\f053"; // < chevron
        display: inline-block;
        margin-bottom: -5px; // fix weird placement on Chrome
      }
      &::after {
        content: "\f054"; // > chevron
        position: absolute;
        right: 2rem;
      }
    }
    .dropdown.show .dropdown-toggle::after {
      text-indent: 5rem;
    }
    .dropdown:not(.show) .dropdown-toggle::before {
      width: 0;
      height: 0;
      text-indent: -5rem;
    }

    .dropdown-toggle.with-caret {
      &::after {
        border: 0;
      }
    }

    // Move search to top of mobile menu ---------------------------------------
    #top-main-nav {
      padding-top: 72px;
      position: relative;
      transition: padding-top 0.2s ease;

      // Hide search and other sub-menus when one sub-menu is expanded
      // (js required to add the class on the dropdown event)
      &.submenu-expanded {
        padding-top: 0;

        .dropdown:not(.show) .dropdown-toggle {
          display: none;
        }

        #topnav-search {
          // display: none;
          height: 0;
          overflow: clip;
          padding-top: 0;
          padding-bottom: 0;
        }
      }
    }
    #topnav-search {
      position: absolute;
      top: 0;
      width: 100%;
      height: 72px;
      transition: all 0.2s ease;

      .input-group {
        flex-wrap: nowrap; // Fix search bar splitting into two lines on iPhone 5
      }
    }

    #topnav-language {
      hr {
        border-top: 1px solid $gray-800;
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
        display: static;
      }
    }
  } // end mobile specific styles ----------------------------------------------

  // nav "hero" images
  #top-nav-hero-docs {
    content: url("../img/icons/docs.svg");
  }
  #top-nav-hero-contribute {
    content: url("../img/icons/contribute.svg");
  }
}

// Fix so anchors don't jump under the fixed header ----------------------------
.main h1:before,
.main h2:before,
.main h3:before,
.main h4:before,
.main h5:before,
.main h6:before,
#main_content_wrapper:before,
.interactive-block:before {
  display: block;
  content: " ";
  margin-top: -80px;
  height: 80px;
  visibility: hidden;
}

// Fix so links aren't unclickable underneath the header anchor-fix
a {
  z-index: 1;
}

// Animated chevron (e.g. for language dropdown) -------------------------------

.chevron {
  position: relative;
  display: inline-block;
  width: 0.75rem;
  height: 0.5625rem;

  span {
    position: absolute;
    top: 0.25rem;
    display: inline-block;
    width: 0.5rem;
    height: 0.15rem;
    background-color: $blue-purple-400;
    transition: all 0.2s ease;
    border: none;
  }
  &:not(.expander) span {
    &:first-of-type {
      left: 0;
      transform: rotate(45deg);
    }
    &:last-of-type {
      right: 0;
      transform: rotate(-45deg);
    }
  }

  &.active {
    span:first-of-type {
      transform: rotate(-45deg);
    }
    span:first-of-type {
      transform: rotate(45deg);
    }
  }
}

.dropdown.show .chevron,
.expander:not(.collapsed) .chevron {
  span:first-of-type {
    transform: rotate(-45deg);
  }
  span:last-of-type {
    transform: rotate(45deg);
  }
}

// Theme toggler
.custom-theme-toggle {
  .custom-control-label {
    padding: 1rem;
    cursor: pointer;
  }
  .custom-control-label::before,
  .custom-control-input:checked ~ .custom-control-label::before {
    position: static;
    display: inline-block;
    content: " ";
    cursor: pointer;
    border: 0;
    background-image: url("../img/sun-moon.svg");
    background-size: 3rem;
    background-color: transparent;
    transform-origin: center;
    margin-left: -0.5rem;
    margin-right: 0.5rem;
    transition: transform 0.4s ease, background-position 0.4s ease;
    // Default: dark mode, show moon
    transform: rotate(15deg);
    background-position: top left;
  }
  .custom-control-label::after {
    display: none;
  }
}

// Fix dropdown box-shadows on mobile (language selector's shadow overlaps the
// rest of the menu, so it's offset more with a negative spread)
@include media-breakpoint-down(md) {
  .navbar-collapse,
  .dropdown-menu {
    box-shadow: 0px 25px 40px -20px $black;
  }
}