path: root/src/sass/_theme_layout.sass

// Set uniform (but not relative) base font size
html
  font-size: $base-font-size

.wy-affix
  position: fixed
  top: $gutter

.wy-menu
  a:hover
    text-decoration: none

.wy-menu-horiz
  +clearfix
  ul, li
    display: inline-block
  li:hover
    background: rgba(255, 255, 255, 0.1)
  li
    &.divide-left
      border-left: solid 1px hsl(0, 0%, 25%)
    &.divide-right
      border-right: solid 1px hsl(0, 0%, 25%)
  a
    height: $base-font-size * 2
    display: inline-block
    line-height: $base-font-size * 2
    padding: 0 $base-font-size

.wy-menu-vertical
  width: $nav-desktop-width

  header, p.caption
    color: $nav-caption
    height: $base-font-size * 2
    line-height: $base-font-size * 2
    padding: 0 $gutter
    margin: ($base-line-height / 2) 0 0 0
    display: block
    font-weight: bold
    text-transform: uppercase
    font-size: 85%
    white-space: nowrap

  ul
    margin-bottom: 0
  li
    &.divide-top
      border-top: solid 1px hsl(0, 0%, 25%)
    &.divide-bottom
      border-bottom: solid 1px hsl(0, 0%, 25%)
    &.current
      background: darken($menu-vertical-background-color, 10%)
      a
        color: $menu-link-medium
        border-right: solid 1px darken($menu-vertical-background-color, 20%)
        padding: ($gutter / 4) ($gutter * 1.5)
        &:hover
          background: darken($menu-vertical-background-color, 15%)
    code
      border: none
      background: inherit
      color: inherit
      padding-left: 0
      padding-right: 0
    // Expand links
    button.toctree-expand
      display: block
      float: left
      margin-left: -1.2em
      @extend .fa
      @extend .fa-plus-square-o
      line-height: 18px
      color: darken($menu-link-medium, 20%)
      border: none
      background: none
      padding: 0

  // On state for the first level
  li.on a, li.current > a
    color: $menu-link-color
    padding: ($gutter / 4) $gutter
    font-weight: bold
    position: relative
    background: $menu-vertical-background-color
    border: none
    padding-left: $gutter -4px
    &:hover
      background: $menu-vertical-background-color
      button.toctree-expand
        color: $menu-link-medium
    button.toctree-expand
      @extend .fa
      @extend .fa-minus-square-o
      display: block
      line-height: 18px
      color: darken($menu-link-medium, 30%)

  li.toctree-l1.current > a
    border-bottom: solid 1px darken($menu-vertical-background-color, 20%)
    border-top: solid 1px darken($menu-vertical-background-color, 20%)

  // This is the on state for pages beyond second level

  %hide_show_toctree_ul
    > ul
      display: none
    &.current > ul
      display: block

  %shrink_toctree_element
    font-size: 0.9em

  %toctree_link_color
    color: $menu-link-color

  %toctree_hover_link_color
    color: $menu-link-medium

  %display_current_toctree_element
    display: block

  @for $toc_level from 1 through 10
    .toctree-l#{$toc_level}.current .toctree-l#{$toc_level + 1}
      @extend %hide_show_toctree_ul

    @if $toc_level > 1
      li.toctree-l#{$toc_level}
        a
          @extend %toctree_link_color
        &.current
          > a
            padding: ($gutter / 4) ($gutter * ($toc_level - 1 + 0.5))

          li.toctree-l#{$toc_level + 1}  > a
            @extend %display_current_toctree_element
            padding: ($gutter / 4) ($gutter * ($toc_level + 0.5))
            padding-right: $gutter
        a:hover button.toctree-expand
          @extend %toctree_hover_link_color
    @if $toc_level > 2 and $toc_level < 5
      li.toctree-l#{$toc_level}
        @extend %shrink_toctree_element

  li.toctree-l2
    &.current
      > a
        background: darken($menu-vertical-background-color, 20%)
      li.toctree-l3 > a
        background: darken($menu-vertical-background-color, 20%)
    button.toctree-expand
      color: darken($menu-vertical-background-color, 35%)
  li.toctree-l3
    &.current
      > a
        background: darken($menu-vertical-background-color, 25%)
      li.toctree-l4 > a
        background: darken($menu-vertical-background-color, 25%)
    button.toctree-expand
      color: darken($menu-vertical-background-color, 40%)

  li.current ul
    display: block
  li ul
    margin-bottom: 0
    display: none
  li ul li a
    margin-bottom: 0
    color: $menu-link-light
    font-weight: normal
  a
    line-height: 18px
    padding: ($gutter / 4) $gutter
    display: block
    position: relative
    font-size: 90%
    color: $menu-link-light
    &:hover
      background-color: lighten($menu-background-color, 10%)
      cursor: pointer
      button.toctree-expand
        color: $menu-link-light
    &:active
      background-color: $menu-logo-color
      cursor: pointer
      color: $menu-link-active
      button.toctree-expand
        color: $menu-link-active

.wy-side-nav-search
  display: block
  width: $nav-desktop-width
  padding: $gutter / 2
  margin-bottom: $gutter / 2
  z-index: $z-index-popover
  background-color: $nav-search-background-color
  text-align: center
  color: $nav-search-color
  input[type=text]
    width: 100%
    border-radius: 50px
    padding: 6px 12px
    border-color: darken($link-color, 5%)
  img
    display: block
    margin: auto auto ($gutter / 2) auto
    height: 45px
    width: 45px
    background-color: $menu-logo-color
    padding: 5px
    border-radius: 100%
  > a, .wy-dropdown > a
    color: $nav-search-color
    font-size: 100%
    font-weight: bold
    display: inline-block
    padding: ($base-line-height / 6) ($base-line-height / 4)
    margin-bottom: $gutter / 2
    max-width: 100%
    &:hover
      background: rgba(255, 255, 255, 0.1)
    img.logo
      display: block  // display on its own line all the time
      margin: 0 auto
      height: auto  // undo badge styling above
      width: auto
      border-radius: 0
      max-width: 100%  // shrink on mobile, if appropriate
      background: rgba(0, 0, 0, 0)  // make hover background of parent show up properly
    &.icon
      img.logo
        margin-top: 0.85em  // space it away from the title text
  > div.version
    margin-top: -1 * $gutter / 4
    margin-bottom: $gutter / 2
    font-weight: normal
    color: rgba(255, 255, 255, 0.3)

.wy-nav .wy-menu-vertical
  header
    color: $link-color
  a
    color: $text-light
    &:hover
      background-color: $link-color
      color: $white

[data-menu-wrap]
  +transition(all 0.2s ease-in)
  position: absolute
  opacity: 1
  width: 100%
  opacity: 0
  &.move-center
    left: 0
    right: auto
    opacity: 1
  &.move-left
    right: auto
    left: -100%
    opacity: 0
  &.move-right
    right: -100%
    left: auto
    opacity: 0

.wy-body-for-nav
  background: $section-background-color

.wy-grid-for-nav
  position: absolute
  width: 100%
  height: 100%

.wy-nav-side
  position: fixed
  top: 0
  bottom: 0
  left: 0
  padding-bottom: 2em
  width: $nav-desktop-width
  overflow-x: hidden
  overflow-y: hidden
  min-height: 100%
  color: $menu-medium
  background: $nav-background-color
  z-index: $z-index-popover

.wy-side-scroll
  width: $nav-desktop-width + 20px
  position: relative
  overflow-x: hidden
  overflow-y: scroll
  height: 100%

.wy-nav-top
  display: none
  background: $link-color
  color: $white
  padding: ($gutter / 4) ($gutter / 2)
  position: relative
  line-height: 50px
  text-align: center
  font-size: 100%
  +clearfix
  a
    color: $white
    font-weight: bold
  img
    margin-right: $base-line-height / 2
    height: 45px
    width: 45px
    background-color: $menu-logo-color
    padding: 5px
    border-radius: 100%
  i
    font-size: 30px
    float: left
    cursor: pointer
    padding-top: inherit

.wy-nav-content-wrap
  margin-left: $nav-desktop-width
  background: $section-background-color
  min-height: 100%

.wy-nav-content
  padding: $gutter ($gutter * 2)
  height: 100%
  max-width: $nav-content-width
  margin: auto

.wy-body-mask
  position: fixed
  width: 100%
  height: 100%
  background: rgba(0, 0, 0, 0.2)
  display: none
  z-index: $z-index-modal - 1
  &.on
    display: block
footer
  color: $footer-color
  p
    margin-bottom: $base-line-height / 2
  span.commit code
    padding: 0px
    font-family: $code-font-family
    font-size: 1em
    background: none
    border: none
    color: $footer-color

.rst-footer-buttons
  &:before, &:after
    width: 100%
  +clearfix

.rst-breadcrumbs-buttons
  margin-top: 12px
  +clearfix

#search-results
  .search li
    margin-bottom: $base-line-height
    border-bottom: solid 1px $table_border_color
    padding-bottom: $base-line-height
  .search li:first-child
    border-top: solid 1px $table_border_color
    padding-top: $base-line-height
  .search li a
    font-size: 120%
    margin-bottom: $base-line-height / 2
    display: inline-block
  .context
    color: $text-medium
    font-size: 90%

.genindextable li > ul
  margin-left: $base-line-height

+media($tablet)
  .wy-body-for-nav
    background: $section-background-color
  .wy-nav-top
    display: block
  .wy-nav-side
    @if $nav-desktop-position == left
      left: -$nav-desktop-width
    @else
      right: -$nav-desktop-width
    &.shift
      width: 85%
      left: 0
  .wy-side-scroll
    width: auto
  .wy-side-nav-search
    width: auto
  .wy-menu.wy-menu-vertical
    width: auto
  .wy-nav-content-wrap
    margin-left: 0
    .wy-nav-content
      padding: $gutter
    &.shift
      position: fixed
      min-width: 100%
      left: 85%
      top: 0
      height: 100%
      overflow: hidden

@media screen and (min-width: $nav-media-query)
  .wy-nav-content-wrap
    background: rgba(0, 0, 0, 0.05)
  .wy-nav-content
    margin: 0
    background: $section-background-color

@media print
  .rst-versions, footer, .wy-nav-side
    display: none
  .wy-nav-content-wrap
    margin-left: 0