doc.less

// mixins
.chapter-accent(@color; @pale) {
  .chapter-heading {
    color: @color;

    .icon {
      .opacity(.8);
    }
  }

  .card {
    &.choosed {
      border-color: @pale;
      border-color: fade(@color, 60%);
      box-shadow: 0 1px 6px fade(@color, 30%);

      &:before {
        background-color: @color;
      }
    }
  }

  .card-heading {
    > .icon {
      color: @color;
      border-color: @pale;

      &:hover {
        cursor: pointer;
      }
    }

    &.hover {
      background-color: @pale;

      > .icon {
        background-color: @color;
        border-color: @color;
        color: #fff;

        &:before {
          color: #fff;
        }
      }
    }

    &:hover {
      > h5 > .name {
        color: @color;
      }
    }

    > h5 > .name:hover {
      cursor: pointer;
    }

    > .btn-toggle {
      background-color: @pale;
      color: @color;

      &:hover {
        color: @pale;
        background-color: @color;
        cursor: pointer;
      }
    }
  }

  .card-content {
    > ul {
      > li {
        &:before {
          background-color: @pale;
        }

        &:hover {
          &:before {
            background-color: @color;
          }

          &:after {
            border-color: @color;
          }
        }

        > a[href^='#search/']:before {
          background-color: @pale;
          color: @color;
        }

        &.active > a, > a:hover {
          background-color: @pale;
        }
      }
    }
  }

  .color-accent {
    color: @color;
  }

  .card-content > ul > li > a[target="_blank"]:after,
  .card[data-target="external"] > .card-heading > h5 > a:after {
    display: inline-block;
    display: none\0;
    margin-left: 5px;
    .icon-zenicon();
    content: @icon-external-link;
    .opacity(0);
    .scale(.5);
    left: -10px;
    position: relative;
    .transition-fast(transform; opacity; left);
  }

  .card-content > ul > li > a[target="_blank"]:hover:after,
  .card[data-target="external"] > .card-heading.hover > h5 > a:after {
    left: 0;
    .opacity(1);
    .scale(1);
  }
}

.page-accent(@color; @pale) {
  .path-zui-36 {
    &:before, &:after {
      border-color: @color;
    }

    .path-1, .path-2, .path-1:before, .path-1:after, .path-2:before {
      background-color: @color;
    }
  }

  #header {
    background-color: @color;
    // background-color: fade(darken(@color, 10%), 90%);
  }

  #pageHeader {
    background-color: @pale;

    > .wrapper > .icon {
      background-color: @color;
      color: #fff;
    }
  }

  #pageContent {
    > section {
      > header:before {
        background-color: @pale;
      }

      &.hover {
        > header {
          &:before {
            background-color: @color;
          }
          &:after {
            border-color: @color;
          }

          > h3 {
            color: @color;
          }
        }

        &:before {
          border-color: @color;
        }
      }
    }
  }

  #pageTogger {
    &:hover {
      border-color: @color;

      &:before, &:after {
        background-color: @color;
      }
    }
  }
}

.icon-10x {
  font-size: 140px;
}

@animation-speed-quickly: .1s;
.transition-quickly(){
  .transition(all @animation-speed-quickly @animation-type);
}
.transition-quickly(@target)
{
  .transition(@target @animation-speed-quickly @animation-type);
}
.transition-quickly(@target1; @target2)
{
  .transition(~"@{target1} @{animation-speed-quickly} @{animation-type}, @{target2} @{animation-speed-quickly} @{animation-type}");
}
.transition-quickly(@target1; @target2; @target3)
{
  .transition(~"@{target1} @{animation-speed-quickly} @{animation-type}, @{target2} @{animation-speed-quickly} @{animation-type}, @{target3} @{animation-speed-quickly} @{animation-type}");
}
.transition-quickly(@target1; @target2; @target3; @target4)
{
  .transition(~"@{target1} @{animation-speed-quickly} @{animation-type}, @{target2} @{animation-speed-quickly} @{animation-type}, @{target3} @{animation-speed-quickly} @{animation-type}, @{target4} @{animation-speed-quickly} @{animation-type}");
}
.transition-quickly(@target1; @target2; @target3; @target4; @target5; @target6)
{
  .transition(~"@{target1} @{animation-speed-quickly} @{animation-type}, @{target2} @{animation-speed-quickly} @{animation-type}, @{target3} @{animation-speed-quickly} @{animation-type}, @{target4} @{animation-speed-quickly} @{animation-type}, @{target5} @{animation-speed-quickly} @{animation-type}, @{target6} @{animation-speed-quickly} @{animation-type}");
}

@media (min-width: 992px) {
  .col-md-d5 {width: 20%;}
}

.slide-in-up-100 {
  position: relative;
  top: 100px;

  &.in {
    top: 0
  }
}

.slide-in-right-50 {
  position: relative;
  left: 50px;

  &.in {
    left: 0
  }
}

.grow-up-in-height {
  &.show {
    height: 0;
    overflow: hidden;

    &.in {
      height: auto;
    }
  }
}

.margin-zero {
  margin: 0!important;
}

// examples
@-webkit-keyframes glow
{
    0% {
        -webkit-box-shadow: 0 0 12px rgba(71,164,71, 0.1);
        border-color: rgba(71, 164, 71, 0.9);
    }
    100% {
        -webkit-box-shadow: 0 0 18px rgba(26,128,26, 0.8),0 0 12px rgba(71,164,71, 0.5);
        border-color: rgba(26, 128, 26, 1.0);
    }
}
.example
{
  position: relative;
  padding: 20px;
  margin: 0 0 15px;
  border-style: solid;
  border: 1px solid #ddd;
  outline: none;
  transition:all 0.3s;
}
.example:focus
{
  box-shadow:0px 1px 15px rgba(0,0,0,0.5);
  -webkit-animation-name: glow;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out
}
.example.no-padding
{
  padding: 0;
}
.example > *:last-child
{
  margin-bottom: 0;
}
.example + pre, pre + pre
{
  margin: -15px 0 15px;
  padding: 10px 20px;
  border-radius: 0;
  border: 1px solid #DDD;
  border-top: none;
}
pre
{
  border-radius: 0;
}

a.avatar
{
  display: block;
  width: 40px;
  height: 40px;
  text-align: center;
  background-color: #e5e5e5;
  border-radius: 4px;
  margin-top: 5px!important;
  color:#aaa!important;
  font-size: 30px;
  line-height: 40px;
}

body > .tooltip {z-index: 9999}

a.avatar > i {font-size: 28px}

a.avatar:hover {text-decoration: none}

.loader {
  color: @color-gray;
  .transition-normal();
  text-align: center;
  padding: 0;
  .opacity(0);
  height: 0;
  overflow: hidden;
  .scale(.5);

  > .icon {
    font-size: 42px;
    display: block;
    height: 50px;
    width: 50px;
    line-height: 50px;
    margin: 0 auto;
  }

  &.loading {
    padding: 80px 0;
    .opacity(1);
    height: auto;
    .scale(1);

    > .error-text {
      display: none;
    }
  }

  &.with-error {
    > .icon-spin {
      -moz-animation: none;
      -o-animation: none;
      -webkit-animation: none;
      animation: none;

      &:before {
        content: @icon-exclamation-sign;
      }
    }

    > .error-text {
      display: inline;
    }

    > .loading-text {
      display: none;
    }
  }
}

.template {
  display: none
}

.path-zui-36 {
  display: inline-block;
  background-color: #fff;
  border-radius: 18px;
  height: 36px;
  width: 36px;
  position: relative;
  overflow: hidden;

  &:before, &:after {
    content: ' ';
    display: block;
    position: absolute;
    border: 2px solid @color-primary;
    left: 11px;
    width: 14px;
    height: 4px;
  }
  &:before {
    top: 9px;
    border-bottom: none;
  }

  &:after {
    top: 23px;
    border-top: none;
  }
  .path-1, .path-2, .path-1:before, .path-1:after, .path-2:before {
    display: block;
    content: ' ';
    position: absolute;
    width: 2px;
    height: 2px;
    background-color: @color-primary;
  }
  .path-1 {
    left: 15px;
    top: 19px;
  }
  .path-1:before, .path-2:before {
    left: -2px;
    top: 2px;
  }
  .path-1:after {
    left: 2px;
    top: -2px;
  }
  .path-2 {
    left: 21px;
    top: 13px;
  }
}

.path-btn {
  border-radius: 0;

  &:focus, &:active {
    outline: none;
    background: none;
  }

  &:before, &:after, > .path-1, > .path-1:before, > .path-1:after {
    .transition-fast();
    position: absolute;
    content: ' ';
    display: block;
    height: 2px;
    width: 10px;
    border: 2px solid @color-gray;
    left: 19px;
    top: 18px;
  }

  &:after {
    top: 26px;
  }

  > .path-1 {
    top: 22px;
    left: 23px;
  }

  > .path-1:before, > .path-1:after {
    left: -4px;
    top: -2px;
    width: 6px;
  }

  > .path-1:after {
    top: 2px;
  }

  &:hover {
    background-color: @color-gray-lighter;
    background-color: rgba(0, 0, 0, 0.1);

    &:before, &:after, > .path-1, > .path-1:before, > .path-1:after {
      border-color: @color-fore;
      .rotate(180deg);
    }

    &:before {
      top: 26px;
    }

    &:after {
      top: 18px;
    }

    > .path-1 {
      left: 15px;
    }

    > .path-1:before {
      top: 2px;
      left: -4px;
    }

    > .path-1:after {
      top: -2px;
      left: -4px;
    }
  }

  &.path-close-btn {
    &:before, &:after, > .path-1, > .path-1:before, > .path-1:after {
      border-top: 0;
      border-bottom: 0;
    }

    > .path-1 {
      border-right: 0;
    }
  }
}

.path-max-btn {
  &:before, &:after, > .path-1, > .path-1:before, > .path-1:after {
    height: 6px;
    width: 6px;
    left: 12px;
    top: 18px;
  }

  &:before {
    border-right: 0;
    border-bottom: 0;
  }

  &:after {
    left: 16px;
    border-left: 0;
    border-bottom: 0;
  }

  > .path-1 {
    top: 22px;
    border-right: 0;
    border-top: 0;
  }

  > .path-1:before{
    border-top: 0;
    border-left: 0;
    top: 0px;
    left: 2px;
  }

  > .path-1:after {
    width: 10px;
    height: 10px;
    left: -2px;
    top: -4px;
  }

  &:hover {
    &:before, &:after, > .path-1:before, > .path-1 {
      .rotate(0deg);
    }

    &:before {
      top: 16px;
      left: 10px;
    }

    &:after {
      top: 16px;
      left: 18px;
    }

    > .path-1 {
      top: 24px;
      left: 10px;
    }

    > .path-1:before {
      top: 0px;
      left: 6px;
    }

    > .path-1:after {
      width: 4px;
      height: 4px;
      top: -3px;
      left: 3px;
    }
  }
}

body {
  .transition-fast(background);
}

#header {
  background-color: @color-primary;
  color: #fff;
  margin-bottom: 20px;
  padding-top: 80px;

  small {
    .opacity(.65);
  }
}

#navDownloadLink {
  .transition-fast(opacity);
  .opacity(0);
}

#navbar {

  > .container {position: relative;}

  .transition-normal(padding-top);

  padding: 20px 0;
  border-bottom: none;

  &.navbar-inverse {
    background: none;

    .navbar-toggle {
      border: none;
      border-radius: 0;
    }
  }

  .navbar-nav > li > a {
    &:hover, &:focus {
      background-color: rgba(0,0,0,.2);
    }

    line-height: 20px;
    height: 40px;
    border-radius: 4px;

    > .icon {
      font-size: 18px;
    }
  }

  .navbar-brand {
    position: relative;
    padding-left: 58px;
  }

  .path-zui-36 {
    position: absolute;
    top: 0;
    left: 10px;
  }

  .navbar-collapse {
    &.in, &.collapsing {
      #navDownloadLink {
        .opacity(1);
      }

      background-color: #fff;
      margin-top: 10px;
      border: none;
      width: 150px;
      float: right;
      .box-shadow(0 6px 12px rgba(0,0,0,.175));
      position: relative;
      overflow: visible;

      &:before {
        content: ' ';
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        top: -20px;
        right: 20px;
        border-width: 10px;
        border-style: dashed dashed solid dashed;
        border-color: transparent transparent #fff transparent;
      }

      .navbar-nav > li > a {
        color: @color-fore;
        .opacity(0);
      }
    }

    &.in .navbar-nav > li > a {
      .opacity(1);
    }
  }
}

#compactTogger {
  display: none;
}

#heading {
  text-align: center;
  position: relative;
  overflow: hidden;

  > h1 {
    font-size: 48px;
    font-weight: normal;
    margin-top: 0;
  }

  > p {
    .opacity(.65);
  }
}

#download {

  > .btn-primary {
    border-color: #e5e5e5;
    border-color: rgba(255, 255, 255, .65);
    margin-bottom: 15px;
  }

  padding-top: 20px;
  text-align: center;
}

#search {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 20px;
}

#searchForm {
  position: relative;

  > .icon {
    position: absolute;
    left: 14px;
    top: 14px;
    .opacity(.65);
    display: block;
    width: 16px;
    text-align: center;
    height: 16px;
    color: #fff;
  }
}
#searchInput {
  // .transition-quickly();
  background: none;
  border-radius: 21px;
  padding-left: 40px;
  border: 1px solid #e5e5e5;
  border-color: rgba(255, 255, 255, .6);
  color: #fff;

  .placeholder(#e5e5e5);
  .placeholder(rgba(255, 255, 255, .5));

  &:focus {
    border-color: #fff;
    background-color: rgba(255, 255, 255, .1);

    @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(rgba(0,0,0,.275), 20%);
    .box-shadow(@shadow);
  }
}
#searchHelpBtn {
  position: absolute;
  right: 4px;
  top: 4px;
  text-align: center;
  border-radius: 20px;
  width: 35px;
  height: 35px;
  line-height: 39px;
  padding: 0;
  color: #fff;
  .opacity(.65);
  outline: none;

  &:hover, &:active, &:focus {
    background-color: #808080;
    background-color: rgba(0,0,0,.5);
  }

  > .icon {
    font-size: 18px;
  }
}

#search.with-query-text #searchHelpBtn {
  > .icon:before {
    content: @icon-remove;
  }
}

#grid {
  // .transition-normal(opacity; background-color; margin);

  > .container {
    > .row > .col {
      &.hide {
        display: block;
        width: 0;
        .opacity(0);
        padding: 0;
      }
    }

    > .row + .row {
      padding-top: 10px;
      border-top: 1px solid @color-gray-pale;
    }
  }

  .chapter {
    margin-bottom: 30px;
  }

  .chapter-heading {
    > h4 {
      margin-bottom: 15px;

      > .name {
        cursor: pointer;

        &:after {
          .icon-zenicon();
          display: inline-block;
          display: none\0;
          margin-left: 5px;
          content: @icon-double-angle-right;
          position: relative;
          left: -10px;
          .opacity(0);
          .transition-fast(opacity; left);
        }

        &:hover:after {
          left: 0;
          .opacity(1);
        }
      }
    }
  }

  .card {
    background-color: #fff;
    .transition-quickly(border; height; transform; top; left; opcity);
    display: none;
    margin-bottom: 0;
    border-color: #fff;
    box-shadow: none;

    &.show {
      display: block;
    }

    &.choosed {
      border-color: #808080;

      &:before {
        .transition-quickly(right);
        content: 'Enter';
        display: block;
        position: absolute;
        right: -100%;
        top: 0;
        padding: 3px 8px;
        color: #fff;
      }
    }

    &[data-target="external"].choosed:before {
      content: 'Enter';
    }

    &[data-target=""].choosed:before {
      display: none;
    }

    &:hover, &.open {
      border-color: @color-gray-lighter;
    }

    &.open {
      margin-bottom: 5px;
    }
  }

  .card-heading {
    .transition-quickly(background-color);
    position: relative;
    padding: 8px 8px 8px 50px;

    > .icon {
      .transition-quickly(background-color; color);
      border: 1px solid @color-gray-pale;
      background-size: contain;
      background-position: center;
      position: absolute;
      width: 30px;
      height: 30px;
      line-height: 30px;
      border-radius: 16px;
      text-align: center;
      left: 10px;
      top: 5px;
      z-index: 10;
      font-style: normal;

      &.with-img {
        .opacity(.8);
        background-color: transparent!important;

        &:hover {
          .opacity(1);
        }
      }
    }

    > h5 {
      .transition-quickly(padding; color);
      line-height: 15px;
      font-size: 15px;
      font-weight: 500;
      margin: 0;
      padding: 5px 0;

      > a.name {
        color: @color-fore;
      }
    }

    > small {
      font-size: 12px;
      display: none;
      min-height: 18px;
      white-space: normal;
      max-height: 48px;
      position: relative;
    }

    &:hover {

      > .btn-toggle {
        right: 0;
        width: 64px;
      }
    }

    &.hover {
      background-color: @color-gray-pale;

      > .icon {
        background-color: @color-gray;
        color: #fff;
      }
    }
  }

  .card-content {
    height: 0;
    padding: 0 10px;
    .transition-quickly(padding; height);
    overflow: hidden;

    > ul {
      list-style: none;
      padding: 0;
      margin: 0;
      position: relative;

      &:before {
        .opacity(0);
        z-index: 5;
        position: absolute;
        display: block;
        content: ' ';
        left: 15px;
        top: -10px;
        bottom: 14px;
        border-left: 1px dotted @color-gray-lighter;
      }

      > li {
        position: relative;
        padding: 0;

        > a {
          color: @color-fore;
          display: block;
          padding: 5px 0 5px 40px;
          border-radius: 4px;

          > .icon {
            display: inline-block;
            width: 20px;
            text-align: center;
          }

          &:hover, &:active, &:focus {
            text-decoration: none;
          }

          &[href^='#search/']:before {
            .icon-zenicon();
            display: block;
            content: '\e603';
            background-color: @color-gray-lighter;
            border-radius: 12px;
            width: 24px;
            height: 24px;
            left: 3px;
            top: 2px;
            z-index: 100;
            color: @color-gray;
            line-height: 22px;
            text-align: center;
            position: absolute;
          }
        }

        &.active > a, > a:hover {
          background-color: @color-gray-pale;
          color: @color-fore;
        }

        &:before {
          .transition-quickly(transform; background-color);
          position: absolute;
          display: block;
          content: ' ';
          width: 8px;
          height: 8px;
          border-radius: 4px;
          background-color: @color-gray-lighter;
          left: 12px;
          top: 10px;
          z-index: 12;
        }

        &:after {
          position: absolute;
          display: block;
          content: ' ';
          border-bottom: 1px dotted @color-gray-lighter;
          width: 20px;
          left: 15px;
          top: 14px;
          z-index: 11;
        }

        &:hover, &.active {
          &:before {
            .scale(1.25);
          }
        }
      }

      &[data-view="icons"] {
        .clearfix();
        > li {
          float: left;
          &:before, &:after {display: none}

          > a {
            position: relative;
            text-indent: -999em;
            padding: 5px;
            width: 30px;
            height: 30px;
            overflow: hidden;

            &:hover {
              .scale(2);
              z-index: 1;
            }

            > .icon {
              display: block;
              position: absolute;
              text-indent: 0;
              width: 30px;
              height: 30px;
              line-height: 30px;
              top: 0;
              left: 0;
            }
          }
        }
      }

      // &[data-view="grid"] {
      //   .clearfix();
      //   > li {

      //   }
      // }
    }
  }

  .section-search {
    height: 0;
    padding: 0;

    &:before {
      content: "没有找到，请更改关键字重新检索。";
      display: block;
      position: absolute;
      padding: 0 10px;
      top: 0;
      right: 0;
      height: 30px;
      line-height: 30px;
      background-color: @color-red-pale;
      color: @color-red;
    }
  }

  .card.section-preview-show .section-search:before {display: none}

  .section-preview {
    background-color: @color-gray-pale;
    height: 0;
    padding: 0;

    &.icon-preview {
      > .icons > .icon {
        display: inline-block;
        margin: 0 15px;
      }

      > h3 {
        padding: 0 10px;
      }

      > pre {
        margin-left: 10px;
        max-width: 400px;
      }
    }
  }

  .card.open {
    .card-heading {
      > .icon:after {
        content: ' ';
        display: block;
        position: absolute;
        border-left: 1px dotted @color-gray-lighter;
        height: 999px;
        left: 18px;
        top: 36px;
      }

      > small {
        max-height: none;
      }
    }

    .card-content {
      padding: 10px;
      height: auto;
      border-top: 1px dashed @color-gray-pale;
      box-shadow: inset 0 10px 64px rgba(0, 0, 0, 0.03);

      &.section-search, &.section-preview {
        height: 0;
        padding: 0;
      }

      > ul {
        &:before {
          .opacity(1);
        }
      }
    }

    &.without-topics {
      .card-heading {
        > .icon:after {
          display: none;
        }
      }

      .card-content {
        padding: 0;
        height: 0;
        border-top: none;
      }
    }
  }

  .chapter[data-accent="blue"] {
    .chapter-accent(@color-blue; @color-blue-pale);
  }
  .chapter[data-accent="primary"] {
    .chapter-accent(@color-primary; @color-pale);
  }
  .chapter[data-accent="yellow"] {
    .chapter-accent(@color-yellow; @color-yellow-pale);
  }
  .chapter[data-accent="green"] {
    .chapter-accent(@color-green; @color-green-pale);
  }
  .chapter[data-accent="red"] {
    .chapter-accent(@color-red; @color-red-pale);
  }
  .chapter[data-accent="brown"] {
    .chapter-accent(@color-brown; @color-brown-pale);
  }
  .chapter[data-accent="purple"] {
    .chapter-accent(@color-purple; @color-purple-pale);
  }
}

body.input-query-focus {
  #grid .card.choosed:before {
    right: 0;
  }
}

body.query-enabled {
  #grid > .container > .row + .row {
    padding-top: 0;
    border-top: none;
  }

  &[data-query='icons'] {
    #section-control-icons {
      .card-heading > .icon:before {content: @icon-search}
    }

    #grid .card.open {
      &.section-preview-show .card-content.section-preview, .card-content.section-search {
        height: auto;
        padding: 10px;
      }

      &.section-preview-show .section-preview.icon-preview {
        padding: 20px 10px 10px;
      }
    }
  }
}

@media (min-width: 768px) {
  body.query-enabled {
    #grid {
      &[data-show-col='1'] {
        > .container > .row > .col {
          float: none;
          // min-width: 780px;
          width: 100%;
          margin: 0 auto;

          &.hide {
            width: 0;
          }
        }
      }
    }
  }
}

@media (min-width: 992px) {
  body.query-enabled {
    #grid {
      &[data-show-col='1'] {
        > .container > .row > .col {
          float: none;
          max-width: 780px;
          margin: 0 auto;

          &.hide {
            width: 0;
          }
        }
      }
      &[data-show-col='2'] {
        > .container > .row > .col {
          width: 50%;

          &.hide {
            width: 0;
          }
        }
      }
      &[data-show-col='3'] {
        > .container > .row > .col {
          width: 33.333333333333%;

          &.hide {
            width: 0;
          }
        }
      }
      &[data-show-col='4'] {
        > .container > .row > .col {
          width: 25%;

          &.hide {
            width: 0;
          }
        }
      }
    }
  }
}

#pageContainer {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 1035;
  top: 60px;

  > .container {
    padding: 0;
  }
}
#page {
  border-radius: 4px;
  position: relative;
  background-color: fade(#fff, 80%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25), 0 120px 220px @color-gray-pale;

  &.with-shadow #pageHeader {
    .box-shadow(0 2px 6px 0 rgba(0,0,0,.2));
  }
}
#pageHeader {
  border-radius: 4px 4px 0 0;
  background-color: #fafafa;
  position: relative;
  padding: 0;
  height: 90px;
  .opacity(0);
  .transition-fast(opacity);

  > .container {
    position: relative;
    padding: 15px 20px 20px 76px;

    > .icon {
      position: absolute;
      width: 36px;
      height: 36px;
      line-height: 36px;
      border-radius: 18px;
      text-align: center;
      left: 20px;
      top: 25px;
      z-index: 10;
      font-style: normal;
      color: @color-gray;
      background-color: @color-gray-lighter;
    }

    > h2 {
      padding: 10px 0;
      line-height: 16px;
      font-size: 20px;
      margin: 0;

      > a.name {
        color: @color-fore;

        &:hover {
          text-decoration: none;
          color: @color-fore;
          cursor: normal;
        }
      }
    }
  }

  > .path-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
    height: 48px;
  }

  > .path-max-btn {
    right: 48px;
    width: 36px;
  }
}
#pageBody {
  padding: 20px 0;
  position: absolute;
  top: 110px;
  bottom: 0;
  width: 100%;
  overflow-y: auto;
}
#pageAttrs {
  padding: 0 0 10px 34px;
  // background-color: @color-gray-pale;
  margin: 0 0 20px 29px;
  border-bottom: 4px double @color-gray-pale;

  > .badge {
    float: left;
    background-color: @color-gray-pale;
    margin-right: 10px;
    padding: 6px 10px;
    min-width: 40px;
    text-align: center;
    border-radius: 3px;
    .opacity(.8);
    line-height: 20px;
    .transition-fast();

    &.pull-right {
      margin-right: 0;
      margin-left: 10px;
    }

    &:hover {
      .opacity(1);
      background-color: @color-gray-lighter;
      text-decoration: none;
    }

    &.badge-zui {
      background-color: @color-pale;
      color: @color-primary;

      &:hover {
        background-color: darken(@color-pale, 5%);
      }
    }
    &.badge-lite {
      background-color: @color-blue-pale;
      color: @color-blue;

      &:hover, &:active, &:focus {
        background-color: darken(@color-blue-pale, 5%);
      }
    }
    &.badge-lib {
      background-color: @color-green-pale;
      color: @color-green;

      &:hover {
        background-color: darken(@color-green-pale, 5%);
      }
    }
    &.badge-party {
      background-color: @color-red-pale;
      color: @color-red;

      &:hover {
        background-color: darken(@color-red-pale, 5%);
      }
    }
    &.badge-custom {
      background-color: @color-brown-pale;
      color: @color-brown;

      &:hover {
        background-color: darken(@color-brown-pale, 5%);
      }
    }
  }
}
#pageContent {
  padding-left: 56px;
  position: relative;

  &:before {
    position: absolute;
    content: ' ';
    display: block;
    border-left: 1px dotted @color-gray-lighter;
    left: 28px;
    top: -250px;
    bottom: 0;
  }

  // > section > article, > section > header, > article {
  //   padding-left: 10px;
  //   padding-right: 10px;
  // }

  > section {
    position: relative;

    &:before {
      position: absolute;
      content: ' ';
      display: block;
      border-left: 1px dotted transparent;
      left: -28px;
      top: 28px;
      bottom: -25px;
    }

    &:last-child:before {
      bottom: 0;
    }

    > header {
      position: relative;
      padding-top: 20px;
      padding-bottom: 10px;

      > h3 {
        margin: 0;
        display: inline-block;
        cursor: pointer;

        &:before, &:after {
          position: absolute;
          content: ' ';
          left: -28px;
          top: 25px;
          .transition-fast(background-color);
        }

        &:before {
          display: none;
          width: 1px;
          height: 7px;
        }

        &:after {
          width: 7px;
          height: 1px;
          top: 28px;
          left: -31px;
        }
      }

      &:before {
        position: absolute;
        content: ' ';
        display: block;
        left: -33px;
        top: 23px;
        width: 11px;
        height: 11px;
        background-color: @color-gray-light;
        border-radius: 5px;
        .transition-fast(background-color);
      }

      &:after {
        position: absolute;
        content: ' ';
        display: block;
        width: 20px;
        border-bottom: 1px dotted @color-gray-lighter;
        left: -22px;
        top: 28px;
      }
    }

    &.hover {
      > header {
        h3 {
          &:before, &:after {
            background-color: #fff;
          }
        }
      }

      &.collapsed > header > h3:before {
        display: block;
      }
    }

    > article {
      height: auto;
      .transition-fast(opacity; height);
    }

    &.collapsed {
      &:before {
        display: none;
      }

      > article {
        height: 0;
        .opacity(0);
        overflow: hidden;
      }
    }
  }

  > article > .alert, > section > article > .alert {
    border: none;
    border-radius: 0;

    code {
      background-color: rgba(255,255,255,.2);
      border-color: rgba(0,0,0,.1);
    }
  }
}
#pageTogger {
  position: absolute;
  bottom: -36px;
  left: 29px;
  width: 19px;
  height: 19px;
  padding: 0;
  border-radius: 10px;
  background-color: #fff;
  color: @color-gray-light;
  z-index: 10;
  border: 1px solid @color-gray-lighter;
  outline: none;

  &:before, &:after {
    .transition-normal(background-color);
    position: absolute;
    display: block;
    content: ' ';
    left: 4px;
    top: 4px;
    background-color: @color-gray-light;
  }

  &:before {
    height: 9px;
    width: 1px;
    left: 8px;
    display: none;
  }

  &:after {
    width: 9px;
    top: 8px;
    height: 1px;
  }
}
#page.page-collapsed {
  #pageTogger:before {
    display: block;
  }
}
#page.loading {
  #pageTogger {display: none}
  #pageContent {.opacity(0);}
}

body.compact-mode {
  #compactTogger {
    display: inline-block;
    margin-left: 8px;
    .transition-fast(top;);
    .opacity(0);
    position: relative;
    top: -60px;
  }

  #heading {
    .transition-fast(height; opcity;);
  }

  #search {
    .transition-fast(opacity);
    .opacity(0);
    padding: 0;
    position: absolute;
    left: 180px;
    top: 12px;
    z-index: 1050;
    max-width: 500px;
    right: 150px;
  }

  #searchInput {
    border-width: 1px;
    height: 36px;
    font-size: 14px;
  }

  #searchForm {
    .opacity(0);
    .scale(.75);
  }

  #searchForm > .icon {
    top: 10px;
  }

  #searchHelpBtn {
    width: 30px;
    height: 30px;
    line-height: 34px;
    top: 3px;
    right: 3px;
  }

  #header {
    z-index: 1025;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 483px;
    .transition-fast(padding; height; background-color);
  }

  #headContainer > .container {position: relative;}

  #grid {
    .transition-fast(opacity; background-color; margin);
    margin-top: 503px;
  }

  &.compact-mode-in {
    #navbar {
      padding-top: 10px;

      .navbar-nav > li > a {
        width: 40px;
        padding: 10px;
        text-align: center;

        > span {
          display: none;
        }
      }

      .navbar-collapse {
        &.in, &.collapsing {
          .navbar-nav > li > a {
            padding: 10px 15px;
            width: auto;
            text-align: left;

            > span {
              display: inline;
            }
          }
        }
      }
    }

    #navDownloadLink {
      .opacity(1);
    }

    #compactTogger {
      .opacity(1);
      top: 0;
    }

    #header {
      height: 60px;
      padding: 0;

      &.with-shadow {
        .box-shadow(0 2px 6px 0 rgba(0,0,0,.2));
      }
    }

    #heading {
      .opacity(0);
      height: 0;
    }

    #search {
      .opacity(1);
    }

    #searchForm {
      .opacity(1);
      .scale(1);
    }

    #grid {
      margin-top: 70px;
    }
  }
}

body.page-show {
  background-color: #f1f1f1;
  overflow: hidden;

  #pageContainer {
    display: block;
    .transition-fast(top);
  }

  #page {
    overflow: hidden;
    .transition-fast(box-shadow; opacity; left; width; top; height);
    // .transition-fast();
    // transition: all 8s;
  }

  #grid {
    .opacity(.5);
  }

  #pageBody {
    .transition-normal(left; top);
    top: 190px;
    left: 100px;
  }

  &.page-show-in {

    #pageBody {
      top: 90px;
      left: 0;
    }

    #page {
      background-color: #fff;
      .opacity(1);
      left: 0!important;
      top: 0!important;
      width: 100%!important;
      max-height: none!important;
    }

    #pageHeader {
      .opacity(1);
    }
  }

  &.page-show-full {
    #page {
      border-radius: 0;
      .opacity(0);
    }

    &.page-show-in {
       #page {
         .opacity(1);
       }
    }

    #pageContainer {
      top: 0;

       > .container {
        width: 100%;
        max-width: none;
      }
    }

    #pageContent {
      // padding: 0 20px 0 70px;
      // max-width: 1160px;
      // margin: 0 auto;

      &:before {
        // left: 44px;
      }
    }

    #pageHeader {
      border-radius: 0;
    }

    #pageBody {
      // padding: 20px 0;

      &.with-scrollbar {
        padding-left: 11px;
      }
    }

    #pageAttrs {
      // margin-left: 30px;
    }

    .path-max-btn {
      &:before, &:after, > .path-1:before, > .path-1 {
        .rotate(0deg);
      }

      &:before {
        top: 16px;
        left: 10px;
      }

      &:after {
        top: 16px;
        left: 18px;
      }

      > .path-1 {
        top: 24px;
        left: 10px;
      }

      > .path-1:before {
        top: 0px;
        left: 6px;
      }

      > .path-1:after {
        width: 4px;
        height: 4px;
        top: -3px;
        left: 3px;
      }

      &:hover {
        &:before, &:after, > .path-1, > .path-1:before, > .path-1:after {
          left: 12px;
          top: 18px;
        }

        &:after {
          left: 16px;
        }

        > .path-1 {
          top: 22px;
        }

        > .path-1:before{
          top: 0px;
          left: 2px;
        }

        > .path-1:after {
          width: 10px;
          height: 10px;
          left: -2px;
          top: -4px;
        }
      }
    }
  }

  &[data-page-accent="blue"] {
    .page-accent(@color-blue; @color-blue-pale);
  }
  &[data-page-accent="primary"] {
    .page-accent(@color-primary; @color-pale);
  }
  &[data-page-accent="yellow"] {
    .page-accent(@color-yellow; @color-yellow-pale);
  }
  &[data-page-accent="green"] {
    .page-accent(@color-green; @color-green-pale);
  }
  &[data-page-accent="red"] {
    .page-accent(@color-red; @color-red-pale);
  }
  &[data-page-accent="brown"] {
    .page-accent(@color-brown; @color-brown-pale);
  }
  &[data-page-accent="purple"] {
    .page-accent(@color-purple; @color-purple-pale);
  }
}

@media (max-width: 767px) {
  #search {
    padding: 30px 10px 40px;
  }
  #pageTogger {
    bottom: -72px;
    left: 8px;
  }

  #pageAttrs {
    margin-left: 20px;
    padding-left: 0;
  }

  #pageContent {
    padding-left: 20px;
    &:before {
      left: 0;
      display: none;
    }
  }

  #pageContent > section:before {
    left: -15px;
  }

  #pageContent > section > header {
    &:before {
      left: -20px;
    }
    &:after {
      display: none;
    }

    > h3 {
      &:before {left: -15px}
      &:after {left: -18px}
    }
  }

  body.compact-mode {
    #header {
      height: 413px;
    }
    #grid {
      margin-top: 433px;
    }

    #navbar .navbar-brand {
      .zui-version, .brand-title {display: none}

      #compactTogger {margin-left: 0; left: -12px;}
    }

    #search {
      left: 70px;
      right: 60px;
    }

    #searchInput{
      .placeholder(transparent);
    }

  }

  body.page-show {
    #navbar .navbar-toggle {margin-right: 0;}
  }

  body.input-query-focus {
    #search {
      left: 10px;
      right: 10px;
    }
    
    #searchInput{
      .placeholder(#e5e5e5);
      .placeholder(rgba(255, 255, 255, .5));
    }

    #navbar .navbar-brand, #navbar .navbar-toggle {display: none}
  }
}

body.layout-classic
{
  #heading {display: none}

  #navbar {
    width: 400px;
    left: 0;
    top: 0;
    padding: 10px 0;
    margin-bottom: 0;

    .navbar-header {
      float: none;
    }

    .navbar-toggle {
      display: block;
      float: right;
      margin-right: 0;
    }

    .navbar-collapse {
      display: none!important;

      &.in, &.collapsing {
        &:before {
          right: 10px;
        }

        > .navbar-right {
          float: none!important;
        }

        display: block!important;
        width: 140px;

        > .navbar-nav > li {
          float: none;
        }
      }
    }
  }

  #search {
    padding: 0;
  }

  #header {
    position: fixed;
    left: 0;
    top: 0;
    height: 200px;
    width: 400px;
    padding-top: 60px;
  }

  #searchInput {

  }

  #grid {
    position: fixed;
    top: 100px;
    left: 0;
    bottom: 0;
    width: 400px;
  }
}

body.layout-page {
  padding-top: 60px;
  overflow-y: auto;

  #header {height: auto!important}

  #page {
    // .transition-fast();
    box-shadow: none;

    &.loading {
      #pageAttrs {display: none}
    }
  }

  #pageBody {position: relative; top: auto!important; bottom: auto!important}
}