vexip-ui/css/collapse.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-collapse-vars{--vxp-collapse-header-color:inherit;--vxp-collapse-header-color-hover:var(--vxp-color-primary-base);--vxp-collapse-header-color-disabled:var(--vxp-content-color-disabled);--vxp-collapse-header-bg-color:transparent;--vxp-collapse-header-bg-color-card:var(--vxp-fill-color-background);--vxp-collapse-header-v-padding:8px;--vxp-collapse-header-h-padding:16px;--vxp-collapse-arrow-color:var(--vxp-content-color-secondary);--vxp-collapse-arrow-color-hover:var(--vxp-color-primary-base);--vxp-collapse-arrow-color-disabled:var(--vxp-content-color-humble);--vxp-collapse-content-color-disabled:var(--vxp-content-color-disabled);--vxp-collapse-content-v-padding:10px;--vxp-collapse-content-h-padding:16px;--vxp-collapse-d-color:var(--vxp-border-color-light-2);--vxp-collapse-divider:var(--vxp-border-shape) var(--vxp-collapse-d-color);--vxp-collapse-b-color:var(--vxp-border-color-base);--vxp-collapse-border:var(--vxp-border-shape) var(--vxp-collapse-b-color);--vxp-collapse-radius:var(--vxp-radius-base)}.vxp-collapse{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);display:flex;flex-direction:column;padding:0;margin:0;border-top:var(--vxp-collapse-divider)}.vxp-collapse,.vxp-collapse *,.vxp-collapse ::after,.vxp-collapse ::before{box-sizing:border-box}.vxp-collapse--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-collapse--inherit{color:inherit}.vxp-collapse__panel{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);padding:0;margin:0;list-style:none;border-top:var(--vxp-collapse-divider);border-bottom:var(--vxp-collapse-divider)}.vxp-collapse__panel,.vxp-collapse__panel *,.vxp-collapse__panel ::after,.vxp-collapse__panel ::before{box-sizing:border-box}.vxp-collapse__panel--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-collapse__panel--inherit{color:inherit}.vxp-collapse__panel--card .vxp-collapse__header{border-radius:var(--vxp-collapse-radius)}.vxp-collapse__panel--card .vxp-collapse__content{padding:var(--vxp-collapse-content-v-padding) var(--vxp-collapse-content-h-padding);border-radius:0 0 var(--vxp-collapse-radius) var(--vxp-collapse-radius)}.vxp-collapse__panel--expanded.vxp-collapse__panel--card .vxp-collapse__header{border-bottom-color:var(--vxp-collapse-d-color);border-radius:var(--vxp-collapse-radius) var(--vxp-collapse-radius) 0 0}.vxp-collapse__panel--ghost{border:0}.vxp-collapse .vxp-collapse__panel{border-top:0}.vxp-collapse__arrow{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;margin:0;color:var(--vxp-collapse-arrow-color);transition:var(--vxp-transition-color),var(--vxp-transition-transform);transform:translate(-50%,-50%)}html.rtl .vxp-collapse__arrow,html[dir=rtl] .vxp-collapse__arrow{transform:translate(50%,-50%)}.vxp-collapse__header{position:relative;display:flex;align-items:center;width:100%;padding:var(--vxp-collapse-header-v-padding) var(--vxp-collapse-header-h-padding);line-height:inherit;color:var(--vxp-collapse-header-color);cursor:pointer;background-color:var(--vxp-collapse-header-bg-color);border:0;outline:0;transition:var(--vxp-transition-color)}.vxp-collapse__header:focus,.vxp-collapse__header:hover{color:var(--vxp-collapse-header-color-hover)}.vxp-collapse__header:focus .vxp-collapse__arrow,.vxp-collapse__header:hover .vxp-collapse__arrow{color:var(--vxp-collapse-arrow-color-hover)}.vxp-collapse--arrow-left .vxp-collapse__header,.vxp-collapse__panel--arrow-left .vxp-collapse__header{padding-inline-start:calc(var(--vxp-collapse-header-h-padding) + 20px)}.vxp-collapse--arrow-left .vxp-collapse__arrow,.vxp-collapse__panel--arrow-left .vxp-collapse__arrow{inset-inline-start:var(--vxp-collapse-header-h-padding)}.vxp-collapse--arrow-right .vxp-collapse__header,.vxp-collapse__panel--arrow-right .vxp-collapse__header{padding-inline-end:calc(var(--vxp-collapse-header-h-padding) + 20px)}.vxp-collapse--arrow-right .vxp-collapse__arrow,.vxp-collapse__panel--arrow-right .vxp-collapse__arrow{inset-inline-start:calc(100% - var(--vxp-collapse-header-h-padding))}.vxp-collapse--arrow-none .vxp-collapse__arrow,.vxp-collapse__panel--arrow-none .vxp-collapse__arrow{display:none}.vxp-collapse__panel--expanded .vxp-collapse__arrow{transform:translate(-50%,-50%) rotate(90deg)}html.rtl .vxp-collapse__panel--expanded .vxp-collapse__arrow,html[dir=rtl] .vxp-collapse__panel--expanded .vxp-collapse__arrow{transform:translate(50%,-50%) rotate(90deg)}.vxp-collapse__panel--disabled .vxp-collapse__header{cursor:not-allowed}.vxp-collapse__panel--disabled .vxp-collapse__header,.vxp-collapse__panel--disabled .vxp-collapse__header:focus,.vxp-collapse__panel--disabled .vxp-collapse__header:hover{color:var(--vxp-collapse-header-color-disabled)}.vxp-collapse__panel--disabled .vxp-collapse__header .vxp-collapse__arrow,.vxp-collapse__panel--disabled .vxp-collapse__header:focus .vxp-collapse__arrow,.vxp-collapse__panel--disabled .vxp-collapse__header:hover .vxp-collapse__arrow{color:var(--vxp-collapse-arrow-color-disabled)}.vxp-collapse__body{padding:0 14px}.vxp-collapse__content{display:flex;flex-direction:column;padding:var(--vxp-collapse-content-v-padding) var(--vxp-collapse-content-h-padding)}.vxp-collapse__icon{display:inline-flex;align-items:center;justify-content:center;margin-inline-end:4px}.vxp-collapse__panel--disabled .vxp-collapse__content{color:var(--vxp-collapse-content-color-disabled)}.vxp-collapse--card,.vxp-collapse__panel--card{border:var(--vxp-collapse-border);border-radius:var(--vxp-collapse-radius)}.vxp-collapse--card .vxp-collapse__header,.vxp-collapse__panel--card .vxp-collapse__header{background-color:var(--vxp-collapse-header-bg-color-card);border-bottom:var(--vxp-border-shape) transparent}.vxp-collapse--card .vxp-collapse__panel{border-color:var(--vxp-collapse-d-color)}.vxp-collapse--card .vxp-collapse__panel:first-child .vxp-collapse__header{border-radius:var(--vxp-collapse-radius) var(--vxp-collapse-radius) 0 0}.vxp-collapse--card .vxp-collapse__panel:last-child{border-bottom:0}.vxp-collapse--card .vxp-collapse__panel:last-child .vxp-collapse__header{border-radius:0 0 var(--vxp-collapse-radius) var(--vxp-collapse-radius)}.vxp-collapse--card .vxp-collapse__panel--expanded .vxp-collapse__header{border-bottom-color:var(--vxp-collapse-d-color)}.vxp-collapse--card .vxp-collapse__panel--expanded .vxp-collapse__content{border-radius:0 0 var(--vxp-collapse-radius) var(--vxp-collapse-radius)}.vxp-collapse--card .vxp-collapse__panel--expanded:last-child .vxp-collapse__header{border-radius:0}.vxp-collapse--ghost,.vxp-collapse--ghost .vxp-collapse__panel{border:0}