bellord/kit
1
0
Fork 0
mirror of https://bitbucket.org/bellord13/kit.git synced 2026-11-13 19:06:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
Bellord
2026-08-14 10:00:42 +03:00
parent b72235e7a0
commit 954b9dcdbb
10 changed files with 790 additions and 769 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/flex-kit/item/flex-item.css
+234
View File
@@ -0,0 +1,234 @@
/* flex-card */
.flex-card {
--aspect-ratio: calc(200 / 300);
--gap-inner: 10px;
position: relative;
}
.flex-card:hover .flex-card__content {
box-shadow: 0 0 27px 0 rgba(0, 0, 0, 0.1);
}
.flex-card__section {
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 100%;
}
.flex-card::before {
content: "";
display: block;
width: 100%;
padding-bottom: calc((100% - var(--gap, 0) * (var(--col-span, 1) - 1)) / (var(--aspect-ratio)) / var(--col-span, 1));
pointer-events: none;
}
.flex-card__content {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: stretch;
border-width: 0;
border-style: solid;
border-color: #e9e9e9;
/*border-radius: 3px;*/
overflow: hidden;
transition: 0.3s;
background-color: var(--kit-color-content);
/*padding-bottom: calc(var(--gap-inner) / 2);*/
/*padding-top: calc(var(--gap-inner) / 2);*/
}
.aspect-ratio.flex-card__body-shell:before {
/*padding-bottom: calc((100% / var(--col-span, 1) - var(--gap, 0)) / (var(--aspect-ratio)));*/
padding-bottom: calc((100% - var(--gap, 0) * (var(--col-span, 1) - 1)) / (var(--aspect-ratio)) / var(--col-span, 1));
}
.flex-card__border {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-width: 1px;
border-style: solid;
border-color: transparent;
display: block;
pointer-events: none;
}
.flex-card__content:after,
.flex-card__body:before,
.flex-card__body:after {
content: '';
display: block;
flex-basis: calc(var(--gap-inner) / 2);
flex-grow: 0;
flex-shrink: 0;
}
.flex-card__content > *:not(.flex-card__border):empty {
display: none;
}
.flex-card__header {
width: 100%;
}
.flex-card__top {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.flex-card__bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.flex-card__body {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
height: 100%;
flex: 1 0 100%;
}
.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 {
position: relative;
opacity: 0;
visibility: hidden;
}
.flex-card:hover .flex-card__content {
height: auto;
z-index: 100;
}
.flex-card:hover .flex-card__content > .flex-card__hover {
opacity: 1;
visibility: visible;
margin-top: calc(-1 * var(--gap-inner) / 2);
}
.flex-card__picture {
flex-basis: 50%;
flex-grow: 0;
flex-shrink: 1;
height: 0%;
--aspect-ratio: 1;
}
.flex-card__picture.aspect-ratio {
--aspect-ratio: 1;
flex-basis: auto;
flex-grow: 0;
flex-shrink: 1;
height: auto;
}
.flex-card__picture .kit-picture {
position: relative;
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-origin: content-box;
}
.flex-card__name, .flex-card__title {
--line-clamp: 2;
--line-clamp-height: 1.1em;
flex-shrink: 0; /* todo test */
}
.flex-card__props {
position: relative;
}
.flex-card__text {
position: relative;
}
.flex-card__manager {
position: relative;
}
.flex-card__flex-delimiter {
flex: 1 10 0;
display: block !important;
margin: 0 !important;
padding: 0 !important;
background: transparent;
}
.flex-card__ticket {
position: absolute;
top: var(--gap-inner);
left: var(--gap-inner);
}
/* flex-card-list--list */
.flex-card-list--list {
--col-count: 1;
}
.flex-card-list--list .flex-card.aspect-ratio:before {
padding-bottom: unset;
}
.flex-card-list--list .flex-card.aspect-ratio:before {
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 {
position: relative;
flex-direction: row;
}
.flex-card-list--list .flex-card__body > .flex-card__picture {
flex-basis: 12%;
flex-shrink: 0;
height: auto;
position: relative;
}
.flex-card-list--list .flex-card__body > .flex-card__picture {
flex-basis: 50px;
flex-shrink: 0;
height: auto;
position: relative;
}
.flex-card-list--list .flex-card__body > .flex-card__picture:before {
content: "";
display: block;
width: 100%;
padding-bottom: calc(100% / (var(--aspect-ratio)));
}
.flex-card-list--list .flex-card__body > .flex-card__picture > .kit-picture {
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 100%;
object-fit: contain;
}
/* ticket */
.flex-list--ticket {
--col-count: 1;
--gap: 3px;
--line-clamp: 1;
--line-clamp-height: 1em;
font-size: 0.7em;
flex-direction: column;
align-items: flex-start;
}
.flex-list--ticket > .flex-list-item {
--col-width: auto;
}
.ticket-item {
padding: calc(2 * 0.1em) calc(6 * 0.1em);
background-color: hsl(0, 0%, 95%);
}
assets/flex-kit/item/flex-item.min.css
Vendored
+1
View File
@@ -0,0 +1 @@
.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}