.app-sort-bar{
  padding: 6px 8px;
  .ivu-row-flex.page-sort-bar{
    width: 100%;
    height: 30px;
    position: relative;
    .ivu-col{
        border-radius: 2px;
      user-select: none;
      text-align: center;
      margin: 0px 16px;
      display: flex;
      align-items: flex-end;
      padding-bottom: 4px;
      background-color: var(--item-background-color-bright);
      border: 1px solid var(--item-font-color-bright);
      margin-left: -1px;
      .sort-field-text{
        margin-left: 7px;
      }
      .caret-wrapper{
        width: 15px;
        display: inline-block;
        position: relative;
        top: 4px;
        padding-bottom: 2px;
        .ivu-icon{
          display: block;
          line-height: 0.5;
          color: var(--item-font-color-light);
        }
      }
    }
    // 悬浮样式
    .ivu-col:hover{
      border:1px solid var(--item-font-color-hover);
        position:relative;
        z-index:2;
        .sort-field-text{
          color: var(--item-font-color-light);
        }
    }
    // 选中样式
    .sort-ascending, .sort-descending{
        border:1px solid var(--item-font-color-hover);
        position:relative;
        z-index:2;
      .sort-field-text{
          color:var(--item-font-color-hover);
          font-weight: 800;
      }
    }
    .sort-ascending .caret-wrapper .ivu-icon.ivu-icon-md-arrow-dropup,
    .sort-descending .caret-wrapper .ivu-icon.ivu-icon-md-arrow-dropdown{
      color: #57A3FD;
    }
      
    .issort {
      position: absolute;
      cursor: pointer;
      top: 4px;
      right: 10px;
    }
  }
}
.slide-in(@x-begin,@x-end,@c-begin,@c-end,@name){
  @keyframes @name{
    from {
      transform: translateX(@x-begin);
      background-color: @c-begin;
    }
    to {
      transform: translateX(@x-end);
      background-color: @c-end;
    }
  }
}
.slide-in(1670px,0px,#fff,#EEF2F5,fadein);
.animation(@animation-name,@animation-duration,@animation-timing-function,@animation-delay,@play-state){
  animation: @arguments;
};
.open-bar {
  .animation(fadein,0.7s,linear,0s,forwards);
};