@import '../../styles/base/var.css';

@c docs {
  .ivu-menu:after,
  .ivu-menu-item-group-title {
    display: none;
  }

  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active,
  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover,
  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active,
  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover {
    border-bottom: none;
    color: inherit;
  }

  .ivu-menu-horizontal .ivu-menu-item, .ivu-menu-horizontal .ivu-menu-submenu {
    transition: none;
  }

  .ivu-menu-horizontal .ivu-menu-submenu .ivu-select-dropdown .ivu-menu-item-selected {
    background: inherit;
  }

  .ivu-menu-horizontal .ivu-menu-submenu .ivu-select-dropdown .ivu-menu-item-selected:hover {
    background: #f3f3f3;
  }

  .docs-content {
    padding: 20px 40px;
  }

  .ivu-affix {
    .em-docs__nav {
      margin-top: 0;
    }
  }

  .is-fixed {
    margin-top: 62px;
  }

  .markdown-body:last-child {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .markdown-body h1:target,
  .markdown-body h2:target,
  .markdown-body h3:target,
  .markdown-body h4:target {
    padding-top: 152px;
  }

  .is-changelog h1:target,
  .is-changelog h2:target,
  .is-changelog h3:target,
  .is-changelog h4:target {
    padding-top: 92px;
  }

  @d content {
    margin: 20px auto;
    border: 1px solid #eee;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 3px #eee;

    ul, ol {
      list-style: inherit;
    }

    img {
      box-shadow: 0 0 20px rgba(0,0,0,.2);
      border-radius: 4px;
      margin: 10px 0;
    }

    th {
      background: #f7f7f7;
    }

    td, th {
      text-align: left!important;
    }
  }

  @d nav {
    list-style: none!important;
    background: #f8f8f8;
    border-bottom: 1px solid #eaecef;
    box-sizing: content-box;
    padding: 0 20px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }

  .qq-qun img {
    width: 300px;
  }

  p.warning, p.tip {
    padding: 12px 24px 12px 20px;
    margin: 2em 0;
    border-left: 4px solid;
    background-color: #f8f8f8;
    position: relative;
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
    &:before {
      content: "!";
      position: absolute;
      top: 14px;
      left: -12px;
      color: #fff;
      width: 20px;
      height: 20px;
      border-radius: 100%;
      text-align: center;
      line-height: 20px;
      font-weight: bold;
      font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    }
  }

  p.warning {
    border-left-color: #f66;
    &:before {
      background-color: #f66;
    }
  }

  p.tip {
    border-left-color: #3c763d;
    &:before {
      background-color: #3c763d;
    }
  }
}
