causeway-standard-theme/causeway/components/left-shell-navigation.less

@navWidth: 300px;
@overlappingWidth: 250px;
.mix-selected-list-item {
  text-decoration: none;
  background-color: @enterprise-blue;
  font-weight: bold;
}

.shell-left-navigation {
  &.page {
    &:after {
      display: none;
    }
  }
  .divider-navigation {
    top: @heading-height+  @site-menu-height;
    left: @navWidth;
    z-index: 3000;
    .handle {
      content: '';
      display: block;
      position: absolute;
      width: 17px;
      height: 25px;
      background: @white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAQCAYAAAAxtt7zAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEAGlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjajZXPbxRlGMc/u/POrAl1DqYCFlMn/gBCSrOAQRoE3e0u20Itm22LbWNitrNvd8dOZ8d3ZsuP9MRFb6D+ASpy8GDiyQR/RbgABw0kBA2xITHhUOKPEEm4GFIPs92d1jb1PT37fb/P9/k+z/tkB1Kfl33fTVow64WqVMha4xOTVuoOSZ5hE11sKtuBnykWhwDKvu+y8iTg0c8kAG7tXuN+o7OpIgMbEk8A9Upgz0LiFOiu7asQjHvAgZOhH0LqWaBTjU9MQioNdFajOAd0TkXxONCpRkv9kHIB066VK5CaB3qmYng1FkceAOgsSE8qx7ZKhaxVVPVpx5Uxuxtc/88z6zaW63UDHcHMyDFgJyRO1dRAqRl/YpfzI8CLkLjuh9kSsB0SfzRmxjLALkg+Na2OjEX85KtnaqNvApshWXHCwdEmfsabGj4e5SYvzNSPlZqc63bQPwk8D8m7NTk4FPnRqMhcHugBrbvWGGjqa0eDuZH8ss6ZWv9wpKOpd8pHi0AXaO+reul45Fm7IN1CKdLXrvphselBW/Tc4aFIU5gyyI8s42FtdCDKFftDNdrMFZPTzpHBJn/ed4tDkTdxUTVKY03OzbLKFyId8bf0xpqa+tZKOXcM6AX9MCcSZSR1ppDYeDzGokSBLBY+ijrTOLgUkHhIFE7iSWZw1uEVkahm3GZUkXgsonCw1+FEFe43OXWxRaTFPpEWB8WQOCQOiD4s8Zp4XRwWOZEWfeJgK7cYq29R5X5L510aSCxKnCB7vquxs13vrHrbsW+ce7Aiu/4fz3LZT3wCBMy0mLvj/V+b/25rW+O2uPTWrY5r8xzfaL76PX1Rv63f0+/oC22G/qu+oC/od8jg4lJFMovEwUMSxBzEe7iCS0gZl9/wqMd4KypOe+e72jf2jXMP5HvDj4Y529NG07+k/0zfTn+avpj+fdWU15yS9pH2lfa99rX2jfYjlnZZu6L9oF3VvtS+jb3V+vvRensysW4l3pqzlrhm1txmvmDmzOfMl8yhtp65xdxjDpg7zJy5rfVu8XrxXhwmcFtTXbtWxBvDw+EkEkVAGReP06v2v5ktusUeMbhqaw+Ig6Ll0sgbOSODZewy+ow9xlEj0/Zn7DByRp+xw8iv2Dp7nQ5kjBXvczdTSAJmUDjMIXEJkKE8FQL01/3TyqnWQmtvOv2KlfF9V1qDnt3bY5Vd11JOtRYGlpKBVHOy0sv4xKQV/UU/LJEAEptvtLHwDTj0F2g329hkA74IYMvLbWxnFzz9MVzabzfU3PI3M/ETBNP79ka/OrKg311aergdUh/C4w+Wlv65sLT0+DPQFuCy+y9gZXF57k4HNAAAACBjSFJNAABtmAAAc44AAPJ7AACE2gAAbpQAAOUaAAAzJwAAGReZSRx/AAAAPUlEQVR42mKMiIw+zMDAYMMAAUeYkDgMDAwMNkwMaICJgYHhCBL/KAsDA4MtugoMLYcZGBj+Q/HhQWsLYAACExB48eQafwAAAABJRU5ErkJggg==') no-repeat center center;
      top: 0;
      right: 2px;
      cursor: pointer;
      &:after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 17px 20px 0;
        border-color: transparent @white transparent transparent;
        position: absolute;
        top: 25px;
        right: 0;
      }
      &.closed {
        right: auto;
        left: 2px;
        &:before {
          content: '';
          display: block;
          width: 0;
          height: 0;
          border-color: @white transparent transparent transparent;
          position: absolute;
          top: 25px;
          left: 5px;
        }
        &:after {
          right: auto;
          left: 0;
          border-width: 20px 17px 0 0;
          border-color: @white transparent transparent transparent;
        }
      }
    }
  }
  .navigation-pane-right {
    .navigation-pane-right {
      margin-left: 0;
    }
    width: auto;
    float: none;
    margin-left: @navWidth;
  }
}

.navigation-content-wrapper {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.navigation-pane-left {
  position: fixed;
  .font-size(12);
  font-weight: normal;
  font-family: Arial, sans-serif;
  color: @white;
  width: @navWidth;
  height: 100%;
  float: left;
  margin-top: -112px;
  padding: 90px 0 0;
  background-color: @grey;
  z-index: 3000;
  .navigation-list {
    list-style: none;
    padding-left: 0;
    margin: 0 -12px;
    li {
      a {
        display: block;
        padding: 5px 12px;
        font-weight: normal;
        text-decoration: none;
      }
      &.active, &.selected, &:hover {
        > a {
          .mix-selected-list-item;
        }
      }
    }
    .navigation-sub-list {
      list-style: none;
      margin-left: 12px;
      padding-left: 0;
    }
  }

  a {
    color: inherit;
    &:hover {
      .mix-selected-list-item;
    }
  }
  .navigation-header {
    border-bottom: 1px solid @black080;
    -webkit-box-shadow: 0 1px 0 @black050;
    -moz-box-shadow: 0 1px 0 @black050;
    box-shadow: 0 1px 0 @black050;
    padding: 11px;
    min-width: @overlappingWidth;
    overflow: hidden;
    h2 {
      .font-size(12);
      font-weight: bold;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
  }
  .navigation-content {
    min-width: @overlappingWidth;
    overflow: hidden;
    padding: 12px;
  }

  .scroll-element.scroll-x {
    display: none !important;
  }
  &.closed {
    width: 0;
    + .divider-navigation {
      left: -5px;
      .handle {
        right: auto;
        left: 2px;
        &:before {
          content: '';
          display: block;
          width: 0;
          height: 0;
          border-color: @white transparent transparent transparent;
          position: absolute;
          top: 25px;
          left: 5px;
        }
        &:after {
          right: auto;
          left: 0;
          border-width: 20px 17px 0 0;
          border-color: @white transparent transparent transparent;
        }
      }
    }
    ~ .navigation-pane-right {
      margin-left: 0;
    }
  }
}

@media @desktop {
  .shell-left-navigation {
    .navigation-content-wrapper,
    .navigation-pane-left {

    }
    .navigation-pane-right {
      margin-left: 0;
    }
    .navigation-pane-left {
      width: 100%;
      left: -100%;
      bottom: 0;
      padding-top: 100px;
      transition: left 300ms ease-in;
    }

    &.open {
      .navigation-pane-left {
        left: 0;
        transition: left 300ms ease-in;
      }
    }

    .divider-navigation {
      left: -10px;
      z-index: 3001;
      .handle {
        top: -34px;
        left: 10px;
        width: 44px;
        height: 44px;
        background-color: transparent;
        .site-menu-open & {
          display: none;
        }
        &:after {
          display: none;
        }
      }
    }
  }

}