mirror of
https://bitbucket.org/bellord13/kit.git
synced 2026-11-13 10:56:12 +03:00
1 line
3.5 KiB
CSS
1 line
3.5 KiB
CSS
.flex-card{--aspect-ratio:calc(200 / 300);--gap-inner:10px;position:relative}.flex-card:hover .flex-card__content{box-shadow:0 0 27px rgba(0,0,0,.1)}.flex-card__section{width:100%;height:100%;position:absolute;top:0;left:0}.flex-card:before{content:"";width:100%;padding-bottom:calc((100% - var(--gap,0) * (var(--col-span,1) - 1)) / (var(--aspect-ratio)) / var(--col-span,1));pointer-events:none;display:block}.flex-card__content{background-color:var(--kit-color-content);border:0 solid #e9e9e9;flex-direction:column;justify-content:stretch;width:100%;height:100%;transition:all .3s;display:flex;position:relative;overflow:hidden}.aspect-ratio.flex-card__body-shell:before{padding-bottom:calc((100% - var(--gap,0) * (var(--col-span,1) - 1)) / (var(--aspect-ratio)) / var(--col-span,1))}.flex-card__border{pointer-events:none;border:1px solid transparent;width:100%;height:100%;display:block;position:absolute;top:0;left:0}.flex-card__content:after,.flex-card__body:before,.flex-card__body:after{content:"";flex-basis:calc(var(--gap-inner) / 2);flex-grow:0;flex-shrink:0;display:block}.flex-card__content>:not(.flex-card__border):empty{display:none}.flex-card__header{width:100%}.flex-card__top{width:100%;position:absolute;top:0;left:0}.flex-card__bottom{width:100%;position:absolute;bottom:0;left:0}.flex-card__body{flex-direction:column;flex:1 0 100%;justify-content:stretch;align-items:stretch;height:100%;display:flex}.flex-card__body>*,.flex-card__hover{margin:calc(var(--gap-inner) / 2) var(--gap-inner)}.flex-card__body>:empty,.flex-card__hover>:empty{display:none}.flex-card__footer{position:relative}.flex-card__hover{opacity:0;visibility:hidden;position:relative}.flex-card:hover .flex-card__content{z-index:100;height:auto}.flex-card:hover .flex-card__content>.flex-card__hover{opacity:1;visibility:visible;margin-top:calc(-1 * var(--gap-inner) / 2)}.flex-card__picture{--aspect-ratio:1;flex:0 50%;height:0%}.flex-card__picture.aspect-ratio{--aspect-ratio:1;flex:0 auto;height:auto}.flex-card__picture .kit-picture{background-position:50%;background-repeat:no-repeat;background-size:contain;background-origin:content-box;width:100%;height:100%;position:relative}.flex-card__name,.flex-card__title{--line-clamp:2;--line-clamp-height:1.1em;flex-shrink:0}.flex-card__props,.flex-card__text,.flex-card__manager{position:relative}.flex-card__flex-delimiter{background:0 0;flex:1 10 0;margin:0!important;padding:0!important;display:block!important}.flex-card__ticket{top:var(--gap-inner);left:var(--gap-inner);position:absolute}.flex-card-list--list{--col-count:1}.flex-card-list--list .flex-card.aspect-ratio:before{padding-bottom:unset;padding-bottom:unset}.flex-card-list--list .flex-card.aspect-ratio>.flex-card__section{position:relative}.flex-card-list--list .flex-card__body-shell.aspect-ratio:before{padding-bottom:unset}.flex-card-list--list .flex-card__body{flex-direction:row;position:relative}.flex-card-list--list .flex-card__body>.flex-card__picture{flex-shrink:0;flex-basis:50px;height:auto;position:relative}.flex-card-list--list .flex-card__body>.flex-card__picture:before{content:"";width:100%;padding-bottom:calc(100% / (var(--aspect-ratio)));display:block}.flex-card-list--list .flex-card__body>.flex-card__picture>.kit-picture{object-fit:contain;width:100%;height:100%;position:absolute;top:0;left:0}.flex-list--ticket{--col-count:1;--gap:3px;--line-clamp:1;--line-clamp-height:1em;flex-direction:column;align-items:flex-start;font-size:.7em}.flex-list--ticket>.flex-list-item{--col-width:auto}.ticket-item{background-color:#f2f2f2;padding:.2em .6em} |