@collapse-prefix-cls: ant-collapse; #arrow { .close() { .iconfont-size-under-12px(7px, 270deg); } .open() { .iconfont-size-under-12px(7px, 360deg); } } .@{collapse-prefix-cls} { background-color: #f4f4f4; border-radius: 3px; border: 1px solid #d9d9d9; & > &-item { border-top: 1px solid #d9d9d9; &:first-child { border-top: none; } > .@{collapse-prefix-cls}-header { height: 38px; line-height: 38px; padding-left: 16px; color: #666; cursor: pointer; &:before { font-family: "anticon" !important; color: #666; display: inline-block; margin-right: 8px; content:"\e60f"; #arrow > .close(); vertical-align: middle; transition: transform 0.24s ease; position: relative; top: -1px; } } } &-content { height: 0; transition-duration: .24s; transition-timing-function: @ease-out-circ; overflow: hidden; color: @text-color; padding: 0 16px; background-color: #fff; & > &-box { padding-top: 16px; padding-bottom: 16px; } } &-item:last-child { > .@{collapse-prefix-cls}-content { border-radius: 0 0 3px 3px; } } &-content-active { } & > &-item-active { > .@{collapse-prefix-cls}-header { &:before { #arrow > .open(); } } } }