w-ui/packages/accordion/index.less

A Vue.js 2.0 UI Toolkit for mobile

.wui-accordion {
    background-color: #fff;

  .w-accordion-title {
    min-height: 1rem;
    display: flex;
    align-items: center;
    position: relative;
    user-select: none;
    padding: 0 .24rem;
    overflow: hidden;
    border-bottom: 1px #f5f5f5 solid;
    align-items: center;

    > span {
      display: block;
      flex: 1;
      font-size: .28rem;
      color: #444;
    }
    > i {
      overflow: hidden;
      position: relative;
      width: 16px;
      height: 16px;

      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 4px;
        width: 0;
        height: 0;
        border-top: 8px solid #d0d0d0;
        border-bottom: 8px solid transparent;
        border-right: 8px solid transparent;
        border-left: 8px solid transparent;
        display: block;
        transition: transform 0.4s linear;
        transform: rotate(0deg);
        transform-origin: 50% 50%;
        z-index: 1;
      }
  
      &:after {
        content: '';
        position: absolute;
        left: 0px;
        top: 2px;
        width: 0;
        height: 0;
        border-top: 8px solid #fff;
        border-bottom: 8px solid transparent;
        border-right: 8px solid transparent;
        border-left: 8px solid transparent;
        display: block;
        transition: transform 0.4s linear;
        transform: rotate(0deg);
        transform-origin: 50% 50%;
        z-index: 2;
      }
  
      &.accordion-rotated:before {
        top: -4px;
        transform: rotate(-180deg);
      }
      &.accordion-rotated:after {
        transform: rotate(-180deg);
        top: -2px;
      }
    }
  }

  .w-accordion-content {
    position: relative;
    overflow: hidden;
    transition: height .2s linear;
  }
}