ten-design-vue
Version:
ten-vue
49 lines (46 loc) • 1.24 kB
text/less
@import "../vars.less";
@import "../mixins/index.less";
.ten-collapse {
background: @collapse-bg;
&-item {
color: #000;
font-size: @font-size;
&__head {
position: relative;
margin-left: @collapse-margin-left;
padding-left: @collapse-icon-right + @collapse-icon-width;
font-size: @text-level-1-size;
line-height: @text-level-1-line;
padding-top: @collapse-title-padding-ver;
padding-bottom: @collapse-title-padding-ver;
color: @text-color;
border-bottom: @border-main-2;
cursor: pointer;
&-icon {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
transition: transform .2s;
color: @icon-color;
font-size: @collapse-icon-width;
}
}
&__content {
background: @collapse-item-bg;
line-height: @text-level-1-line;
&-item {
margin-left: @collapse-margin-left;
padding: @collapse-item-padding;
margin-left: @collapse-margin-left;
border-bottom: @border-main-2;
color: @text-color-lighter-1;
}
}
&--active &__head {
&-icon {
transform: translateY(-50%) rotate(90deg);
}
}
}
}