@cmtlyt/chlorine-ui/dist/lib/submanu/style.css

一个令人窒息的组件库？

.cl-manu-item .cl-submanu .cl-manu-item.active>.title-box,.cl-manu-item .cl-submanu .cl-manu-item:has(.active.cl-manu-item)>.title-box,.cl-manu-item.active>.title-box,.cl-manu-item:has(.active.cl-manu-item)>.title-box{color:var(--manu-active-color)}.cl-manu-item{box-sizing:border-box;padding:var(--manu-item-padding);position:relative;display:flex;align-items:center}.cl-manu-item.active::before,.cl-manu-item:has(.active.cl-manu-item)::before{box-shadow:inset 0 -2px 0 0 var(--manu-active-border-color)}.cl-manu-item::before{position:absolute;top:0;left:0;right:0;bottom:0;content:"";transition:background-color .3s,box-shadow .3s}.cl-manu-item .title-box{position:relative;z-index:1;display:flex;height:100%;align-items:center;transition:color .3s}.cl-manu-item .title-box>.cl-icon,.cl-manu-item .title-box>i{padding-right:5px;font-weight:700}.cl-manu-item .title-box .title{width:max-content;height:100%;display:flex;align-items:center;gap:5px}.cl-manu-item .title-box .title i.cl-down{transition:transform .3s}.cl-manu-item .cl-submanu{padding-top:var(--manu-child-spacing);position:absolute;bottom:0;left:0;min-width:100%;opacity:0;transform:translateY(100%) scaleY(0);transform-origin:top;transition:transform .3s,opacity .3s;background-color:var(--submanu-bgc);z-index:2}.cl-manu-item .cl-submanu .cl-submanu__content{border-radius:var(--manu-border-radius);box-shadow:0 0 10px -5px var(--main-color-block);background-color:var(--manu-bgc)}.cl-manu-item .cl-submanu .cl-manu-item.active::before,.cl-manu-item .cl-submanu .cl-manu-item:has(.active.cl-manu-item)::before,.cl-manu-item.disabled::before{box-shadow:none}.cl-manu-item:hover::before,.vertical .cl-manu-item:hover::before{background-color:var(--manu-item-hover-bgc)}.cl-manu-item .cl-submanu .cl-submanu{padding:0;padding-left:var(--manu-child-spacing);left:unset;bottom:unset;top:0;right:0;opacity:0;transform:translateX(100%) scale(0);transform-origin:left top}.cl-manu-item .cl-submanu .cl-manu-item{padding:var(--submanu-item-padding)}.cl-manu-item .cl-submanu .cl-manu-item:hover>.title-box,.cl-manu-item:hover>.title-box{color:var(--manu-item-hover-color)}.cl-manu-item .cl-submanu .cl-manu-item .title i.cl-down{transform:rotate(-90deg)}.cl-manu-item .cl-submanu .cl-manu-item:hover>.cl-submanu{opacity:1;transform:translateX(100%) scale(1)}.cl-manu-item .cl-submanu .cl-manu-item:hover>.title-box>.title i.cl-down{transform:rotate(90deg)}.cl-manu-item .cl-submanu .cl-manu-item:first-child::before{border-radius:var(--manu-border-radius) var(--manu-border-radius) 0 0}.cl-manu-item .cl-submanu .cl-manu-item:last-child::before{border-radius:0 0 var(--manu-border-radius) var(--manu-border-radius)}.cl-manu-item:hover>.cl-submanu{opacity:1;transform:translateY(100%) scaleY(1)}.cl-manu-item:hover>.title-box>.title>i.cl-down{transform:rotate(180deg)}.cl-manu-item.disabled{color:var(--manu-item-disabled-color);pointer-events:none;opacity:.5}.cl-manu-item.disabled>.title-box{color:currentColor}.vertical{--manu-active-border-color:transparent!important;flex-direction:column;width:max-content;box-shadow:1px 0 0 0 var(--manu-border-bottom-color)}.vertical .cl-manu-item{--manu-child-spacing:0;--manu-border-radius:0;height:var(--manu-v-item-height);flex-direction:column;align-items:flex-start}.vertical .cl-manu-item .title-box{height:var(--manu-v-item-height)}.vertical .cl-manu-item .title-box>.title{max-width:100vw;transition:max-width .3s}.vertical .cl-manu-item .title-box>.title>i.cl-down{transform:rotate(-90deg)}.vertical .cl-manu-item .cl-submanu{top:0;left:unset;right:0;transform:translateX(100%) scaleX(0);transform-origin:left;height:max-content}.vertical .cl-manu-item:hover>.cl-submanu{opacity:1;transform:translateX(100%) scaleX(1)}.vertical .cl-manu-item:hover>.title-box{color:var(--manu-item-hover-color)}.vertical .cl-manu-item:hover>.title-box>.title>i.cl-down{transform:rotate(90deg)}.vertical.collapse>.cl-manu-item>.title-box>i{padding:0}.vertical.collapse>.cl-manu-item>.title-box .title{width:0;overflow:hidden}