<commit_before>/*
 * FILE: _sidenav.scss
======================================================================== */

/*doc
---
title: Nav - Side Nav Default
name: nav-side_nav_default
category: basics
---
```html_example
<a class="sidenav-title" data-behavior="SubMenuMobile">
  Doc Index
</a>
<div class="nav-content">
  <ul class="menu">
    <li class="menu-item js-menu-item">
      <div class="menu-title js-menu-title">
        Side Nav Title 1
      </div>
      <div class="menu-content js-menu-content" aria-hidden="true">
        <ul>
          <li class="menu-link">
            <a href="#">
              Item
            </a>
          </li>
          <li class="menu-link">
            <a href="#">
              Item
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="menu-item js-menu-item">
      <div class="menu-title js-menu-title">
        Side Nav Title 2
      </div>
      <div class="menu-content js-menu-content" aria-hidden="true">
        <ul>
          <li class="menu-link">
            <a href="#">
              Item
            </a>
          </li>
          <li class="menu-link">
            <a href="#">
              Item
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="menu-item js-menu-item">
      <div class="menu-title js-menu-title">
        Side Nav Item 3
      </div>
      <div class="menu-content js-menu-content" aria-hidden="true">
        <div class="menu-subtitle">
          Side Nav Subtitle
        </div>
        <ul>
          <li class="menu-link">
            <a href="#">
              Item
            </a>
          </li>
          <li class="menu-link">
            <a href="#">
              Item
            </a>
          </li>
        </ul>
        <div class="menu-subtitle">
          Side Nav Subtitle
        </div>
        <ul>
          <li class="menu-link">
            <a href="#">
              Item
            </a>
          </li>
          <li class="menu-link">
            <a href="#">
              Item
            </a>
          </li>
          <li class="menu-link">
            <a href="#">
              Item
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>
```
*/

.sidenav-title {
  border: 0;
  color: $color-text;
  display: block;
  padding: 1em;
  text-align: center;
  text-transform: uppercase;
  @media (min-width: $bp-wide) {
    display: none;
  }
}
.sidenav-title:after {
  @extend .fa;
  content: $fa-var-angle-down;
  padding-left: 1.5em;
}
.sidenav-title:hover,
.active .sidenav-title {
  @include contrasted($color-accent-bright);
    cursor: pointer;
}
.active .sidenav-title:after {
  content: $fa-var-angle-up;
}
// ~SIDE NAVIGATION
.nav-container {
  background: $gray5;
  @media (min-width: $bp-wide) {
    padding: 1.9em 0 1.9em 1em;
  }
}
.nav-content {
  height: 0;
  opacity: 0;
  @include transition(all 0.2s linear);
  overflow: hidden;
  padding-left: 1em;
  @media (min-width: $bp-wide) {
    height: auto;
    display: block;
    opacity: 1;
    padding-left: 0;
  }
  @media (min-width: $bp-widest) {
    padding-left: 0.875em;
  }
}
.active .nav-content {
  border-top: 1px solid #ededed;
  height: auto;
  opacity: 1;
  padding-bottom: 1.9em; // Allows nav to be hidden in mobile view.
  padding-top: 1em;
}
.nav-content ul,
.nav-content ol {
  clear: both;
  display: block;
  margin: 0.5em 0;
  padding: 0;
}
.nav-content li {
  display: block;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

// navigation links
.nav-content a {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border-width: 1px 0 1px 1px;
  border-style: solid;
  border-color: transparent;
  color: $gray2;
  font-size: 0.9rem; // Custom font-size
  display: block;
  float: left;
  padding: .75em 30px .75em 1em;
  text-decoration: none;
  width: 100%;
}
.nav-content a:hover,
.nav-content a:focus,
.nav-content a:active {
  border-color: #EEE;
  background-color: #fff;
  color: $color-text;
}
.nav-content .active,
.nav-content .active:hover {
  background-color: #fff;
  color: $color-accent-bright;
  border-color: #EEE;
  border-width: 1px 0 3px 1px;
  border-style: solid;
  border-bottom-color: $gray4;
  @extend %h-bold;<commit_msg>Update sidenav selected topic styling for redesign<commit_after>/*
 * FILE: _sidenav.scss
======================================================================== */

/*doc
---
title: Nav - Side Nav Default
name: nav-side_nav_default
category: basics
---
```html_example
<a class="sidenav-title" data-behavior="SubMenuMobile">
  Doc Index
</a>
<div class="nav-content">
  <ul class="menu">
    <li class="menu-item js-menu-item">
      <div class="menu-title js-menu-title">
        Side Nav Title 1
      </div>
      <div class="menu-content js-menu-content" aria-hidden="true">
        <ul>
          <li class="menu-link">
            <a href="#">
              Item
            </a>
          </li>
          <li class="menu-link">
            <a href="#">
              Item
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="menu-item js-menu-item">
      <div class="menu-title js-menu-title">
        Side Nav Title 2
      </div>
      <div class="menu-content js-menu-content" aria-hidden="true">
        <ul>
          <li class="menu-link">
            <a href="#">
              Item
            </a>
          </li>
          <li class="menu-link">
            <a href="#">
              Item
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="menu-item js-menu-item">
      <div class="menu-title js-menu-title">
        Side Nav Item 3
      </div>
      <div class="menu-content js-menu-content" aria-hidden="true">
        <div class="menu-subtitle">
          Side Nav Subtitle
        </div>
        <ul>
          <li class="menu-link">
            <a href="#">
              Item
            </a>
          </li>
          <li class="menu-link">
            <a href="#">
              Item
            </a>
          </li>
        </ul>
        <div class="menu-subtitle">
          Side Nav Subtitle
        </div>
        <ul>
          <li class="menu-link">
            <a href="#">
              Item
            </a>
          </li>
          <li class="menu-link">
            <a href="#">
              Item
            </a>
          </li>
          <li class="menu-link">
            <a href="#">
              Item
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>
```
*/

.sidenav-title {
  border: 0;
  color: $color-text;
  display: block;
  padding: 1em;
  text-align: center;
  text-transform: uppercase;
  @media (min-width: $bp-wide) {
    display: none;
  }
}
.sidenav-title:after {
  @extend .fa;
  content: $fa-var-angle-down;
  padding-left: 1.5em;
}
.sidenav-title:hover,
.active .sidenav-title {
  @include contrasted($color-accent-bright);
    cursor: pointer;
}
.active .sidenav-title:after {
  content: $fa-var-angle-up;
}
// ~SIDE NAVIGATION
.nav-container {
  background: $gray5;
  @media (min-width: $bp-wide) {
    padding: 1.9em 0 1.9em 1em;
  }
}
.nav-content {
  height: 0;
  opacity: 0;
  @include transition(all 0.2s linear);
  overflow: hidden;
  padding-left: 1em;
  @media (min-width: $bp-wide) {
    height: auto;
    display: block;
    opacity: 1;
    padding-left: 0;
  }
  @media (min-width: $bp-widest) {
    padding-left: 0.875em;
  }
}
.active .nav-content {
  border-top: 1px solid #ededed;
  height: auto;
  opacity: 1;
  padding-bottom: 1.9em; // Allows nav to be hidden in mobile view.
  padding-top: 1em;
}
.nav-content ul,
.nav-content ol {
  clear: both;
  display: block;
  margin: 0.5em 0;
  padding: 0;
}
.nav-content li {
  display: block;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

// navigation links
.nav-content a {
  border-width: 1px 0 1px 1px;
  border-style: solid;
  border-color: transparent;
  color: $gray2;
  font-size: 0.9rem; // Custom font-size
  display: block;
  float: left;
  padding: .75em 30px .75em 1em;
  text-decoration: none;
  width: 100%;
}
.nav-content a:hover,
.nav-content a:focus,
.nav-content a:active {
  border-color: #EEE;
  background-color: #fff;
  color: $color-text;
}
.nav-content .active,
.nav-content .active:hover {
  background-color: transparentize($color-accent-bright, 0.96);
  border-color: #EEE;
  border-style: solid;
  color: $gray1;
  border-bottom-color: $gray4;
  @extend %h-bold;
{'fraction_non_alphanumeric': 0.17733003416990692, 'fraction_numerical': 0.013903617297042536, 'mean_word_length': 1.8115269956939384, 'pattern_counts': {'":': 0, '<': 147, '<?xml version=': 0, '>': 147, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1557300', 'n_tokens_mistral': 3058, 'n_tokens_neox': 2920, 'n_words': 701}