opensense-docs/themes/opnsense/sass/_theme_layout.sass

.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,.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
    height: $base-font-size * 2
    display: inline-block
    line-height: $base-font-size * 2
    padding: 0 $gutter
    margin-bottom: 0
    display: block
    font-weight: bold
    text-transform: uppercase
    font-size: 80%
    color: $menu-dark
    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
    span.toctree-expand
      display: block
      float: left
      margin-left: -1.2em
      @extend .fa
      @extend .fa-plus-square-o
      font-size: .8em
      line-height: 1.6em
      color: darken($menu-link-medium, 20%)

  // 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
    border-bottom: solid 1px darken($menu-vertical-background-color, 20%)
    border-top: solid 1px darken($menu-vertical-background-color, 20%)
    padding-left: $gutter -4px
    +font-smooth
    &:hover
      background: $menu-vertical-background-color
      span.toctree-expand
        color: $menu-link-medium
    span.toctree-expand
      @extend .fa
      @extend .fa-minus-square-o
      display: block
      font-size: .8em
      line-height: 1.6em
      color: darken($menu-link-medium, 30%)

  // This is the on state for pages beyond second level
  li.toctree-l1.current li.toctree-l2, li.toctree-l2.current li.toctree-l3
    > ul
      display: none
    &.current > ul
      display: block
  li.toctree-l2
    &.current
      > a
        background: darken($menu-vertical-background-color, 20%)
        padding: $gutter / 4 $gutter * 1.5
      li.toctree-l3 > a
        display: block
        background: darken($menu-vertical-background-color, 20%)
        padding: $gutter / 4 $gutter * 2.5
    a:hover span.toctree-expand
      color: $menu-link-medium
    span.toctree-expand
      color: darken($menu-vertical-background-color, 35%)
  li.toctree-l3
    font-size: .9em
    &.current
      > a
        background: darken($menu-vertical-background-color, 25%)
        padding: $gutter / 4 $gutter * 2.5
      li.toctree-l4 > a
        display: block
        background: darken($menu-vertical-background-color, 25%)
        padding: $gutter / 4 $gutter * 3.5
        border-top: none
        border-bottom: none
    a:hover span.toctree-expand
      color: $menu-link-medium
    span.toctree-expand
      color: darken($menu-vertical-background-color, 40%)
  li.toctree-l4
    font-size: .9em

  li.current ul
    display: block
  li ul
    margin-bottom: 0
    display: none
  .local-toc
    li ul
      display: block
  li ul li a
    margin-bottom: 0
    color: $menu-link-light
    font-weight: normal
  a
    display: inline-block
    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
      span.toctree-expand
        color: $menu-link-light
    &:active
      background-color: $menu-logo-color
      cursor: pointer
      color: $menu-link-active
      span.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
  padding: $gutter / 2
  display: block
  color: $nav-search-color
  margin-bottom: $gutter / 2
  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
    +font-smooth
    &:hover
      background: rgba(255,255,255,.1)
    img.logo
      display: block  // display on its own line all the time
      margin: 0 auto
      height: auto  // undo badge styling above
      width: 160px
      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,.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 .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: left repeat-y $section-background-color
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxOERBMTRGRDBFMUUxMUUzODUwMkJCOThDMEVFNURFMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxOERBMTRGRTBFMUUxMUUzODUwMkJCOThDMEVFNURFMCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjE4REExNEZCMEUxRTExRTM4NTAyQkI5OEMwRUU1REUwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE4REExNEZDMEUxRTExRTM4NTAyQkI5OEMwRUU1REUwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+EwrlwAAAAA5JREFUeNpiMDU0BAgwAAE2AJgB9BnaAAAAAElFTkSuQmCC)
  background-size: $nav-desktop-width 1px

.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%
  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
    +font-smooth
  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: 800px
  margin: auto

.wy-body-mask
  position: fixed
  width: 100%
  height: 100%
  background: rgba(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%


+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($desktop-wider)
  .wy-nav-content-wrap
    background: rgba(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