@opentiny/vue-theme/collapse-item/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-collapse-item{--tv-CollapseItem-text-color:var(--tv-color-text, #191919);--tv-CollapseItem-bg-color:var(--tv-color-bg-3, #ffffff);--tv-CollapseItem-icon-color:var(--tv-color-icon, #808080);--tv-CollapseItem-disabled-text-color:var(--tv-color-icon-disabled, #c2c2c2);--tv-CollapseItem-header-bg-color:var(--tv-color-bg-3, #ffffff);--tv-CollapseItem-disabled-header-bg-color:var(--tv-color-bg-disabled, #f0f0f0);--tv-CollapseItem-header-font-size:var(--tv-font-size-default, 14px);--tv-CollapseItem-arrow-hover-text-color:var(--tv-color-icon-hover, #191919);--tv-CollapseItem-icon-size:var(--tv-icon-size, 16px);--tv-CollapseItem-header-border-color:var(--tv-color-border-divider, #f0f0f0);--tv-CollapseItem-content-font-size:var(--tv-font-size-default, 14px);--tv-CollapseItem-title-right-text-color:var(--tv-color-text-link, #1476ff);--tv-CollapseItem-title-right-icon-color:var(--tv-color-icon-link, #1476ff);background-color:var(--tv-CollapseItem-bg-color);color:var(--tv-CollapseItem-text-color);border-top:1px solid var(--tv-CollapseItem-header-border-color)}.tiny-collapse-item__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:40px;background-color:var(--tv-CollapseItem-header-bg-color);font-size:var(--tv-CollapseItem-header-font-size);outline:0;cursor:pointer;-webkit-transition:border-bottom-color .3s;transition:border-bottom-color .3s;padding:12px 20px}.tiny-collapse-item__header .tiny-collapse-item__word-overflow{white-space:nowrap;overflow:hidden;line-height:1.5;text-overflow:ellipsis;display:inline-block;cursor:pointer}.tiny-collapse-item__header .tiny-collapse-item__arrow{margin-right:12px;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.tiny-collapse-item__header .tiny-collapse-item__arrow svg{width:var(--tv-CollapseItem-icon-size);height:var(--tv-CollapseItem-icon-size);fill:var(--tv-CollapseItem-icon-color)}.tiny-collapse-item__header .tiny-collapse-item__title__right{margin-left:auto;color:var(--tv-CollapseItem-title-right-text-color);fill:var(--tv-CollapseItem-title-right-icon-color)}.tiny-collapse-item__header .tiny-collapse-item__title__right:hover{text-decoration:underline}.tiny-collapse-item__header.is-active .tiny-collapse-item__arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.tiny-collapse-item.is-disabled .tiny-collapse-item__header{color:var(--tv-CollapseItem-disabled-text-color);background-color:var(--tv-CollapseItem-disabled-header-bg-color);cursor:not-allowed}.tiny-collapse-item.is-disabled .tiny-collapse-item__arrow svg{fill:var(--tv-CollapseItem-disabled-text-color)}.tiny-collapse-item.is-disabled .tiny-collapse-item__word-overflow{cursor:not-allowed}.tiny-collapse-item:not(.is-disabled) .tiny-collapse-item__arrow:hover svg{fill:var(--tv-CollapseItem-arrow-hover-text-color)}.tiny-collapse-item__wrap{will-change:height;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.tiny-collapse-item__content{padding:24px 20px;font-size:var(--tv-CollapseItem-content-font-size);line-height:1.5;border-top:1px solid var(--tv-CollapseItem-header-border-color)}