diff --git a/assets/flex-kit/flex-cell.css b/assets/flex-kit/flex-cell.css new file mode 100644 index 0000000..80b426d --- /dev/null +++ b/assets/flex-kit/flex-cell.css @@ -0,0 +1,412 @@ + +:root { + --flex-padding: 15px 15px; + --flex-line-count: 1; + --flex-col-count: 2; +} +.flex-line > *, +.flex-col > *, +.flex-line-wrap > *, +.flex-col-wrap > *, +.flex-line.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child, +.flex-col.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child, +.flex-line-wrap.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child, +.flex-col-wrap.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child +{ + padding: var(--flex-padding); + box-sizing: border-box; +} + +/* деф настрйоки для ячейки */ +.flex-line > *, +.flex-line-wrap > *, +.flex-col > *, +.flex-col-wrap > *, +.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child, +.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child +{ + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + + -ms-flex-negative: 0; + flex-shrink: 0; + + -ms-flex-preferred-size: auto; + -webkit-flex-basis: auto; + flex-basis: auto; +} + +.flex-line > .flex-line, +.flex-line > .flex-col, +.flex-line > .flex-col-wrap, +.flex-line > .flex-line-wrap, + +.flex-col > .flex-line, +.flex-col > .flex-col, +.flex-col > .flex-col-wrap, +.flex-col > .flex-line-wrap, + +.flex-line-wrap > .flex-line, +.flex-line-wrap > .flex-col, +.flex-line-wrap > .flex-col-wrap, +.flex-line-wrap > .flex-line-wrap, + +.flex-col-wrap > .flex-line, +.flex-col-wrap > .flex-col, +.flex-col-wrap > .flex-col-wrap, +.flex-col-wrap > .flex-line-wrap +{ + -ms-flex-preferred-size: 0; + -webkit-flex-basis: 0; + flex-basis: 0; +} + +/*.flex-line > .flex-line,*/ +/*.flex-line > .flex-col,*/ +/*.flex-line > .flex-col-wrap,*/ +.flex-line > .flex-line-wrap:not(.flex-cell-full-content), + +.flex-col > .flex-line:not(.flex-cell-full-content), +.flex-col > .flex-col:not(.flex-cell-full-content), + /*.flex-col > .flex-col-wrap,*/ +.flex-col > .flex-line-wrap:not(.flex-cell-full-content), + +.flex-line-wrap > .flex-line:not(.flex-cell-full-content), + /*.flex-line-wrap > .flex-col,*/ + /*.flex-line-wrap > .flex-col-wrap,*/ +.flex-line-wrap > .flex-line-wrap:not(.flex-cell-full-content), + +.flex-col-wrap > .flex-line:not(.flex-cell-full-content), + /*.flex-col-wrap > .flex-col,*/ + /*.flex-col-wrap > .flex-col-wrap,*/ +.flex-col-wrap > .flex-line-wrap:not(.flex-cell-full-content) +{ + -ms-flex-preferred-size: auto; + -webkit-flex-basis: auto; + flex-basis: auto; +} + + + +.flex-col > *, +.flex-col-wrap > *, +.flex-line > *, +.flex-line-wrap > *, +.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child, +.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child +{ + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + + max-width: 100%; +} + + + +.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > *:not(:first-child) +{ + display: none; +} + +.flex-line:not(.flex-cell) > *:empty, .flex-col:not(.flex-cell) > *:empty, .flex-cell:empty { + /*display: none !important;*/ +} + + +.flex-col, +.flex-col-wrap, +.flex-line, +.flex-line-wrap +{ + /*width: 100%;*/ + padding: 0 !important; + + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; +} + +.flex-col, .flex-col-wrap { + -webkit-align-content: flex-start; + -ms-flex-line-pack: start; + align-content: flex-start; +} +.flex-col, .flex-line, .flex-line-wrap, .flex-col-wrap { + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + + -ms-flex-negative: 0; + flex-shrink: 0; + + -ms-flex-preferred-size: auto; + -webkit-flex-basis: auto; + flex-basis: auto; +} + +.flex-col, .flex-col-wrap { + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +.flex-line, .flex-line-wrap { + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} +/* flex-wrap: nowrap */ +.flex-col, +.flex-line { + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; +} +.flex-line-wrap, .flex-col-wrap +{ + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.flex-cell +{ + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + /*-webkit-flex-direction: column;*/ + /*-ms-flex-direction: column;*/ + /*flex-direction: column;*/ + /*-webkit-flex-wrap: nowrap;*/ + /*-ms-flex-wrap: nowrap;*/ + /*flex-wrap: nowrap;*/ + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + + -ms-flex-negative: 0; + flex-shrink: 0; + + -ms-flex-preferred-size: auto; + -webkit-flex-basis: auto; + flex-basis: auto; +} + + + + + + +/* применяем к таблице: ПРОДОЛЬНОЕ выравнивание элементов в строке или колонке */ +.flex-align-start { + -webkit-justify-content: flex-start !important; + -ms-flex-pack: start !important; + justify-content: flex-start !important; +} +.flex-align-end { + -webkit-justify-content: flex-end !important; + -ms-flex-pack: end !important; + justify-content: flex-end !important; +} +.flex-align-center { + -webkit-justify-content: center !important; + -ms-flex-pack: center !important; + justify-content: center !important; +} +.flex-align-around { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; +} + +/* попереное */ +.flex-align--stretch { + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; +} +.flex-align--center { + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} + +.flex-cells-v-align--start > *{ + justify-content: start; +} +.flex-cells-v-align--end > *{ + justify-content: end; +} +.flex-cells-v-align--stretch > *{ + justify-content: stretch; +} +.flex-cells-g-align--start > *{ + align-items: start; +} +.flex-cells-g-align--end > *{ + align-items: end; +} +.flex-cells-g-align--stretch > *{ + align-items: stretch; +} + +/* применяем к ячейкам: поперечное выравнивание */ +.flex-cell-align--start { + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; +} +.flex-cell-align--end { + -webkit-align-self: flex-end; + -ms-flex-item-align: end; + align-self: flex-end; +} +.flex-cell-align--center { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; +} +.flex-cell-align--stretch { + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; +} + + +.flex-wrap +{ + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +/* применяем к ячейке определяя макс возможное заполнение*/ +.flex-cell-full-content { + -ms-flex-positive: 1; + -webkit-box-flex: 1; + flex-grow: 1; +} + +.flex-cell-fill { + -ms-flex-negative: 1; + flex-shrink: 1; + + -ms-flex-positive: 1; + -webkit-box-flex: 1; + flex-grow: 1; + flex-basis: auto; +} + +.flex-box-fill > * { + -ms-flex-negative: 1; + flex-shrink: 1; + + -ms-flex-positive: 1; + -webkit-box-flex: 1; + flex-grow: 1; + flex-basis: auto; +} + + + + +.flex-col-count { + +} + +@supports (--flex-col-count:property) { + .flex-col-count > * { + width: calc(100% / (var(--flex-col-count))); + max-width: calc(100% / (var(--flex-col-count))); + box-sizing: border-box; + } + + .flex-line-wrap.flex-col-count > *, + .flex-line.flex-col-count > * + { + -ms-flex-preferred-size: calc(100% / var(--flex-col-count)); + -webkit-flex-basis: calc(100% / var(--flex-col-count)); + flex-basis: calc(100% / var(--flex-col-count)); + box-sizing: border-box; + } +} + + +.flex-col-count.flex-col-without-frame { + +} + +.flex-line-count { + +} +@supports (--flex-line-count:property) { + .flex-col-wrap.flex-line-count > *, + .flex-col.flex-line-count > * + { + -ms-flex-preferred-size: calc(100% / (var(--flex-line-count))); + -webkit-flex-basis: calc(100% / (var(--flex-line-count))); + flex-basis: calc(100% / (var(--flex-line-count))); + box-sizing: border-box; + } +} + + +.flex-cell-aspect-auto { + flex-grow: 1000; + flex-shrink: 1; +} + + +.col-count:not(.slick-slider) { + position: relative; + margin-left: calc(var(--gap) / -2) !important; + margin-right: calc(var(--gap) / -2) !important; +} +.col-count:not(.slick-slider) > * { + width: calc(100% / var(--col-count)) !important; + max-width: calc(100% / var(--col-count)) !important; + flex-basis: calc(100% / var(--col-count)) !important; + padding-left: calc(var(--gap) / 2); + padding-right: calc(var(--gap) / 2); + padding-bottom: var(--gap); +} \ No newline at end of file diff --git a/assets/flex-kit/flex-cell.min.css b/assets/flex-kit/flex-cell.min.css new file mode 100644 index 0000000..6f07c32 --- /dev/null +++ b/assets/flex-kit/flex-cell.min.css @@ -0,0 +1 @@ +:root{--flex-padding:15px 15px;--flex-line-count:1;--flex-col-count:2}.flex-line>*,.flex-col>*,.flex-line-wrap>*,.flex-col-wrap>*,.flex-line.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child,.flex-col.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child,.flex-line-wrap.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child,.flex-col-wrap.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child{padding:var(--flex-padding);box-sizing:border-box}.flex-line>*,.flex-line-wrap>*,.flex-col>*,.flex-col-wrap>*,.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child,.flex-aspect-ratio.owl-loaded>.owl-stage-outer>.owl-stage>.owl-item>:not(.flex-cell-aspect-auto)>:first-child{flex-flow:column;flex:none;-webkit-flex-basis:auto;align-content:stretch;justify-content:center;display:flex}.flex-line>.flex-line,.flex-line>.flex-col,.flex-line>.flex-col-wrap,.flex-line>.flex-line-wrap,.flex-col>.flex-line,.flex-col>.flex-col,.flex-col>.flex-col-wrap,.flex-col>.flex-line-wrap,.flex-line-wrap>.flex-line,.flex-line-wrap>.flex-col,.flex-line-wrap>.flex-col-wrap,.flex-line-wrap>.flex-line-wrap,.flex-col-wrap>.flex-line,.flex-col-wrap>.flex-col,.flex-col-wrap>.flex-col-wrap,.flex-col-wrap>.flex-line-wrap{flex-basis:0}.flex-line>.flex-line-wrap:not(.flex-cell-full-content),.flex-col>.flex-line:not(.flex-cell-full-content),.flex-col>.flex-col:not(.flex-cell-full-content),.flex-col>.flex-line-wrap:not(.flex-cell-full-content),.flex-line-wrap>.flex-line:not(.flex-cell-full-content),.flex-line-wrap>.flex-line-wrap:not(.flex-cell-full-content),.flex-col-wrap>.flex-line:not(.flex-cell-full-content),.flex-col-wrap>.flex-line-wrap:not(.flex-cell-full-content){flex-basis:auto}.flex-col>*,.flex-col-wrap>*,.flex-line>*,.flex-line-wrap>*,.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child,.flex-aspect-ratio.owl-loaded>.owl-stage-outer>.owl-stage>.owl-item>:not(.flex-cell-aspect-auto)>:first-child{align-items:center;max-width:100%}.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:not(:first-child){display:none}.flex-col,.flex-col-wrap,.flex-line,.flex-line-wrap{align-content:stretch;justify-content:flex-start;align-items:stretch;display:flex;padding:0!important}.flex-col,.flex-col-wrap{align-content:flex-start}.flex-col,.flex-line,.flex-line-wrap,.flex-col-wrap{flex:none;-webkit-flex-basis:auto}.flex-col,.flex-col-wrap{flex-direction:column}.flex-line,.flex-line-wrap{flex-direction:row}.flex-col,.flex-line{flex-wrap:nowrap}.flex-line-wrap,.flex-col-wrap{flex-wrap:wrap}.flex-cell{flex:none;-webkit-flex-basis:auto;align-content:stretch;justify-content:center;align-items:center;display:flex}.flex-align-start{justify-content:flex-start!important}.flex-align-end{justify-content:flex-end!important}.flex-align-center{justify-content:center!important}.flex-align-around{justify-content:space-around}.flex-align--stretch{align-items:stretch}.flex-align--center{align-items:center}.flex-cells-v-align--start>*{justify-content:start}.flex-cells-v-align--end>*{justify-content:end}.flex-cells-v-align--stretch>*{justify-content:stretch}.flex-cells-g-align--start>*{align-items:start}.flex-cells-g-align--end>*{align-items:end}.flex-cells-g-align--stretch>*{align-items:stretch}.flex-cell-align--start{align-self:flex-start}.flex-cell-align--end{align-self:flex-end}.flex-cell-align--center{align-self:center}.flex-cell-align--stretch{align-self:stretch}.flex-wrap{flex-wrap:wrap}.flex-cell-full-content{flex-grow:1}.flex-cell-fill,.flex-box-fill>*{flex:auto}@supports (--flex-col-count:property){.flex-col-count>*{width:calc(100% / (var(--flex-col-count)));max-width:calc(100% / (var(--flex-col-count)));box-sizing:border-box}.flex-line-wrap.flex-col-count>*,.flex-line.flex-col-count>*{-ms-flex-preferred-size:calc(100% / var(--flex-col-count));-webkit-flex-basis:calc(100% / var(--flex-col-count));flex-basis:calc(100% / var(--flex-col-count));box-sizing:border-box}}@supports (--flex-line-count:property){.flex-col-wrap.flex-line-count>*,.flex-col.flex-line-count>*{-ms-flex-preferred-size:calc(100% / (var(--flex-line-count)));-webkit-flex-basis:calc(100% / (var(--flex-line-count)));flex-basis:calc(100% / (var(--flex-line-count)));box-sizing:border-box}}.flex-cell-aspect-auto{flex-grow:1000;flex-shrink:1}.col-count:not(.slick-slider){position:relative;margin-left:calc(var(--gap) / -2)!important;margin-right:calc(var(--gap) / -2)!important}.col-count:not(.slick-slider)>*{padding-left:calc(var(--gap) / 2);padding-right:calc(var(--gap) / 2);padding-bottom:var(--gap);width:calc(100% / var(--col-count))!important;max-width:calc(100% / var(--col-count))!important;flex-basis:calc(100% / var(--col-count))!important} \ No newline at end of file diff --git a/assets/flex-kit/flex-kit.css b/assets/flex-kit/flex-kit.css index 833a942..c10ed86 100644 --- a/assets/flex-kit/flex-kit.css +++ b/assets/flex-kit/flex-kit.css @@ -1,11 +1,13 @@ /* flex-kit.css */ * { /*outline: none;*/ - /*margin: 0;*/ - /*padding: 0;*/ } + +script, style { + display: none !important; +} + :root { - --flex-padding: 15px 15px; --gap: 10px; --gap-section: 30px; --gap-wrapper: 30px; @@ -14,8 +16,6 @@ --line-clamp-height: 1.3em; --width-wrapper: 1200px; --flex-aspect-ratio: 1; - --flex-line-count: 1; - --flex-col-count: 2; --aspect-ratio: 1; --font-ratio-height: 0.9; --font-ratio-bottom: 0.1; @@ -40,19 +40,6 @@ position: relative; margin-bottom: var(--gap-section); } -.col-count:not(.slick-slider) { - position: relative; - margin-left: calc(var(--gap) / -2) !important; - margin-right: calc(var(--gap) / -2) !important; -} -.col-count:not(.slick-slider) > * { - width: calc(100% / var(--col-count)) !important; - max-width: calc(100% / var(--col-count)) !important; - flex-basis: calc(100% / var(--col-count)) !important; - padding-left: calc(var(--gap) / 2); - padding-right: calc(var(--gap) / 2); - padding-bottom: var(--gap); -} .kit-line-clamp { line-height: var(--line-clamp-height); @@ -133,27 +120,6 @@ width: 0; flex: 1 0 0; } - -.flex-center { - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-content: stretch; - -ms-flex-line-pack: stretch; - align-content: stretch; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; -} .flex-list--static { --line-count: 1; } @@ -162,468 +128,72 @@ max-height: var(--line-height) !important; } -script, style { - display: none !important; +/* .flex-aspect-ratio */ + +.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > img +{ + height: auto; + object-fit: contain; } -.flex-line > *, -.flex-col > *, -.flex-line-wrap > *, -.flex-col-wrap > *, -.flex-line.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child, -.flex-col.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child, -.flex-line-wrap.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child, -.flex-col-wrap.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child +.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto), +.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) { - padding: var(--flex-padding); - box-sizing: border-box; + position: relative; + padding: 0; +} + +.flex-aspect-ratio:not(.owl-loaded):not(.flex-list) > *:not(.flex-cell-aspect-auto)::before, +.flex-aspect-ratio.owl-loaded:not(.flex-list) > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto)::before +{ + content: ""; + display: block; + width: 100%; + padding-bottom: calc(100% / (var(--flex-aspect-ratio))); +} + +.flex-aspect-ratio.flex-list:not(.owl-loaded) > *:not(.flex-cell-aspect-auto)::before +{ + content: ""; + display: block; + width: 100%; + padding-bottom: calc((100% / var(--col-span, 1) - 0 * var(--gap, 10px)) / var(--flex-aspect-ratio)); +} + +.flex-aspect-ratio.flex-list.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto)::before +{ + content: ""; + display: block; + width: 100%; + padding-bottom: calc(100% / (var(--flex-aspect-ratio))); +} + +.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child, +.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child +{ + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + object-fit: contain; +} +.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child > picture, +.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child > picture { + width: 100%; + height: 100%; +} +.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child > picture > img, +.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child > picture > img { + object-fit: contain; + width: 100%; + height: 100%; } .flex-list.flex-aspect-ratio:not(.owl-loaded) > * > :first-child, .flex-list-item.aspect-ratio > :first-child { - padding: 0 calc(var(--gap) / 2); -} - -/* деф настрйоки для ячейки */ -.flex-line > *, -.flex-line-wrap > *, -.flex-col > *, -.flex-col-wrap > *, -.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child, -.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child -{ - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-content: stretch; - -ms-flex-line-pack: stretch; - align-content: stretch; - - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - - -ms-flex-negative: 0; - flex-shrink: 0; - - -ms-flex-preferred-size: auto; - -webkit-flex-basis: auto; - flex-basis: auto; -} - -.flex-line > .flex-line, -.flex-line > .flex-col, -.flex-line > .flex-col-wrap, -.flex-line > .flex-line-wrap, - -.flex-col > .flex-line, -.flex-col > .flex-col, -.flex-col > .flex-col-wrap, -.flex-col > .flex-line-wrap, - -.flex-line-wrap > .flex-line, -.flex-line-wrap > .flex-col, -.flex-line-wrap > .flex-col-wrap, -.flex-line-wrap > .flex-line-wrap, - -.flex-col-wrap > .flex-line, -.flex-col-wrap > .flex-col, -.flex-col-wrap > .flex-col-wrap, -.flex-col-wrap > .flex-line-wrap -{ - -ms-flex-preferred-size: 0; - -webkit-flex-basis: 0; - flex-basis: 0; -} - -/*.flex-line > .flex-line,*/ -/*.flex-line > .flex-col,*/ -/*.flex-line > .flex-col-wrap,*/ -.flex-line > .flex-line-wrap:not(.flex-cell-full-content), - -.flex-col > .flex-line:not(.flex-cell-full-content), -.flex-col > .flex-col:not(.flex-cell-full-content), - /*.flex-col > .flex-col-wrap,*/ -.flex-col > .flex-line-wrap:not(.flex-cell-full-content), - -.flex-line-wrap > .flex-line:not(.flex-cell-full-content), - /*.flex-line-wrap > .flex-col,*/ - /*.flex-line-wrap > .flex-col-wrap,*/ -.flex-line-wrap > .flex-line-wrap:not(.flex-cell-full-content), - -.flex-col-wrap > .flex-line:not(.flex-cell-full-content), - /*.flex-col-wrap > .flex-col,*/ - /*.flex-col-wrap > .flex-col-wrap,*/ -.flex-col-wrap > .flex-line-wrap:not(.flex-cell-full-content) -{ - -ms-flex-preferred-size: auto; - -webkit-flex-basis: auto; - flex-basis: auto; -} - - - -.flex-col > *, -.flex-col-wrap > *, -.flex-line > *, -.flex-line-wrap > *, -.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child, -.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child -{ - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - - max-width: 100%; -} - - - -.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > *:not(:first-child) -{ - display: none; -} - -.flex-line:not(.flex-cell) > *:empty, .flex-col:not(.flex-cell) > *:empty, .flex-cell:empty { - /*display: none !important;*/ -} - - -.flex-col, -.flex-col-wrap, -.flex-line, -.flex-line-wrap -{ - /*width: 100%;*/ - padding: 0 !important; - - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - - -webkit-align-content: stretch; - -ms-flex-line-pack: stretch; - align-content: stretch; - - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; -} - -.flex-col, .flex-col-wrap { - -webkit-align-content: flex-start; - -ms-flex-line-pack: start; - align-content: flex-start; -} -.flex-col, .flex-line, .flex-line-wrap, .flex-col-wrap { - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - - -ms-flex-negative: 0; - flex-shrink: 0; - - -ms-flex-preferred-size: auto; - -webkit-flex-basis: auto; - flex-basis: auto; -} - -.flex-col, .flex-col-wrap { - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} -.flex-line, .flex-line-wrap { - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; -} -/* flex-wrap: nowrap */ -.flex-col, -.flex-line { - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; -} -.flex-line-wrap, .flex-col-wrap -{ - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} -.flex-cell -{ - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - /*-webkit-flex-direction: column;*/ - /*-ms-flex-direction: column;*/ - /*flex-direction: column;*/ - /*-webkit-flex-wrap: nowrap;*/ - /*-ms-flex-wrap: nowrap;*/ - /*flex-wrap: nowrap;*/ - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-content: stretch; - -ms-flex-line-pack: stretch; - align-content: stretch; - - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - - -ms-flex-negative: 0; - flex-shrink: 0; - - -ms-flex-preferred-size: auto; - -webkit-flex-basis: auto; - flex-basis: auto; -} - - - - - - -/* применяем к таблице: ПРОДОЛЬНОЕ выравнивание элементов в строке или колонке */ -.flex-align-start { - -webkit-justify-content: flex-start !important; - -ms-flex-pack: start !important; - justify-content: flex-start !important; -} -.flex-align-end { - -webkit-justify-content: flex-end !important; - -ms-flex-pack: end !important; - justify-content: flex-end !important; -} -.flex-align-center { - -webkit-justify-content: center !important; - -ms-flex-pack: center !important; - justify-content: center !important; -} -.flex-align-around { - -webkit-justify-content: space-around; - -ms-flex-pack: distribute; - justify-content: space-around; -} - -/* попереное */ -.flex-align--stretch { - -webkit-align-items: stretch; - -ms-flex-align: stretch; - align-items: stretch; -} -.flex-align--center { - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; -} - -.flex-cells-v-align--start > *{ - justify-content: start; -} -.flex-cells-v-align--end > *{ - justify-content: end; -} -.flex-cells-v-align--stretch > *{ - justify-content: stretch; -} -.flex-cells-g-align--start > *{ - align-items: start; -} -.flex-cells-g-align--end > *{ - align-items: end; -} -.flex-cells-g-align--stretch > *{ - align-items: stretch; -} - -/* применяем к ячейкам: поперечное выравнивание */ -.flex-cell-align--start { - -webkit-align-self: flex-start; - -ms-flex-item-align: start; - align-self: flex-start; -} -.flex-cell-align--end { - -webkit-align-self: flex-end; - -ms-flex-item-align: end; - align-self: flex-end; -} -.flex-cell-align--center { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; -} -.flex-cell-align--stretch { - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; -} - - -.flex-wrap -{ - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} - -/* применяем к ячейке определяя макс возможное заполнение*/ -.flex-cell-full-content { - -ms-flex-positive: 1; - -webkit-box-flex: 1; - flex-grow: 1; -} - -.flex-cell-fill { - -ms-flex-negative: 1; - flex-shrink: 1; - - -ms-flex-positive: 1; - -webkit-box-flex: 1; - flex-grow: 1; - flex-basis: auto; -} - -.flex-box-fill > * { - -ms-flex-negative: 1; - flex-shrink: 1; - - -ms-flex-positive: 1; - -webkit-box-flex: 1; - flex-grow: 1; - flex-basis: auto; -} - - -.flex-col-count { - -} - -@supports (--flex-col-count:property) { - .flex-col-count > * { - width: calc(100% / (var(--flex-col-count))); - max-width: calc(100% / (var(--flex-col-count))); - box-sizing: border-box; - } - - .flex-line-wrap.flex-col-count > *, - .flex-line.flex-col-count > * - { - -ms-flex-preferred-size: calc(100% / var(--flex-col-count)); - -webkit-flex-basis: calc(100% / var(--flex-col-count)); - flex-basis: calc(100% / var(--flex-col-count)); - box-sizing: border-box; - } -} - - -.flex-col-count.flex-col-without-frame { - -} - -.flex-line-count { - -} -@supports (--flex-line-count:property) { - .flex-col-wrap.flex-line-count > *, - .flex-col.flex-line-count > * - { - -ms-flex-preferred-size: calc(100% / (var(--flex-line-count))); - -webkit-flex-basis: calc(100% / (var(--flex-line-count))); - flex-basis: calc(100% / (var(--flex-line-count))); - box-sizing: border-box; - } -} - - -.flex-cell-aspect-auto { - flex-grow: 1000; - flex-shrink: 1; -} - -@supports (--flex-aspect-ratio:property) { - - .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > img - { - height: auto; - object-fit: contain; - } - - .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto), - .flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) - { - position: relative; - padding: 0; - } - - .flex-aspect-ratio:not(.owl-loaded):not(.flex-list) > *:not(.flex-cell-aspect-auto)::before, - .flex-aspect-ratio.owl-loaded:not(.flex-list) > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto)::before - { - content: ""; - display: block; - width: 100%; - padding-bottom: calc(100% / (var(--flex-aspect-ratio))); - } - - .flex-aspect-ratio.flex-list:not(.owl-loaded) > *:not(.flex-cell-aspect-auto)::before - { - content: ""; - display: block; - width: 100%; - padding-bottom: calc((100% / var(--col-span) - var(--gap)) / var(--flex-aspect-ratio)); - } - - .flex-aspect-ratio.flex-list.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto)::before - { - content: ""; - display: block; - width: 100%; - padding-bottom: calc(100% / (var(--flex-aspect-ratio))); - } - - .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child, - .flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child - { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - object-fit: contain; - } - .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child > picture, - .flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child > picture { - width: 100%; - height: 100%; - } - .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child > picture > img, - .flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child > picture > img { - object-fit: contain; - width: 100%; - height: 100%; - } - + padding: calc(var(--gap) / 2); } @@ -645,6 +215,7 @@ script, style { display: block; width: 100%; padding-bottom: calc(100% / (var(--aspect-ratio))); + pointer-events: none; } .aspect-ratio > :first-child { width: 100%; @@ -656,273 +227,6 @@ script, style { } } - - -/* flex-marginator */ - - -:root { - --flex-marginator: 15px; - --flex-marginator-index: 0; -} - -.flex-marginator { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - gap: var(--flex-marginator); -} - -.flex-marginator > *:empty { - display:none; -} - - -/* flex-delimiter text */ - -:root { - --flex-delimiter: ', '; - --flex-delimiter-index: 0; -} - -.flex-delimiter > *:not(:first-child):not(:empty)::before { - content: var(--flex-delimiter); - --flex-delimiter-index:1; -} - -.flex-delimiter > *:empty + *:not(:empty)::before -{ - content: ''; - --flex-delimiter-index:0; -} - -.flex-delimiter > *:not(:empty) ~ *:empty + *:not(:empty)::before -{ - content: var(--flex-delimiter); - --flex-delimiter-index:1; -} - -.flex-delimiter > *:empty { - display:none; -} - -/* flex-card */ - -.flex-card { - --aspect-ratio: calc(200 / 300); - --gap-inner: 10px; -} -.flex-card:hover .flex-card__content { - box-shadow: 0 0 27px 0 rgba(0, 0, 0, 0.1); -} -.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);*/ -} -.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%); -} - - /* picture - icon */ .kit-icon picture, .kit-icon img, diff --git a/assets/flex-kit/flex-kit.min.css b/assets/flex-kit/flex-kit.min.css index 130cd36..442096e 100644 --- a/assets/flex-kit/flex-kit.min.css +++ b/assets/flex-kit/flex-kit.min.css @@ -1 +1 @@ -:root{--flex-padding:15px 15px;--gap:10px;--gap-section:30px;--gap-wrapper:30px;--col-span:1;--line-clamp:3;--line-clamp-height:1.3em;--width-wrapper:1200px;--flex-aspect-ratio:1;--flex-line-count:1;--flex-col-count:2;--aspect-ratio:1;--font-ratio-height:0.9;--font-ratio-bottom:0.1}.kit-wrapper{margin-left:auto;margin-right:auto;width:var(--width-wrapper);max-width:100%;padding:0 var(--gap-wrapper)}.kit-section,.kit-sections,.kit-wrapper{box-sizing:border-box;position:relative}.kit-sections{padding-top:var(--gap-section)}.kit-section{margin-bottom:var(--gap-section)}.col-count:not(.slick-slider){position:relative;margin-left:calc(var(--gap)/-2)!important;margin-right:calc(var(--gap)/-2)!important}.col-count:not(.slick-slider)>*{width:calc(100%/var(--col-count))!important;max-width:calc(100%/var(--col-count))!important;flex-basis:calc(100%/var(--col-count))!important;padding-left:calc(var(--gap)/2);padding-right:calc(var(--gap)/2);padding-bottom:var(--gap)}.kit-line-clamp{line-height:var(--line-clamp-height);max-height:calc(var(--line-clamp-height)*var(--line-clamp));display:inline-block;word-wrap:break-word;overflow:hidden;text-overflow:-o-ellipsis-lastline;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp);display:-webkit-box;word-break:break-word;white-space:normal}.flex-list{box-sizing:border-box;position:relative;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;--col-span:1;--col-count:4;--gap-row:var(--gap);--flex-list-width:calc(100%)}.flex-list:not(.owl-loaded){margin:calc(var(--gap-row)/-2) calc(var(--gap)/-2)!important}.flex-list-item:after,.flex-list-item:before,.flex-list:after,.flex-list:before{content:""}.flex-list:not(.owl-loaded,.slick-slider)>*{position:relative;padding:calc(var(--gap-row)/2) calc(var(--gap)/2)}.flex-list-item{--col-width:calc(100% / var(--col-count) * var(--col-span));--line-height:calc(100% / var(--line-count) * var(--line-span, 1));box-sizing:border-box}.flex-list>.flex-list-item{width:var(--col-width)!important;max-width:var(--col-width)!important;flex-basis:var(--col-width)!important}.flex-list-item-delimiter{height:0;width:0;flex:1 0 0}.flex-center{display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.flex-list--static{--line-count:1}.flex-list--static .flex-list-item{height:var(--line-height)!important;max-height:var(--line-height)!important}script,style{display:none!important}.flex-col-wrap.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child,.flex-col-wrap>*,.flex-col.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child,.flex-col>*,.flex-line-wrap.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child,.flex-line-wrap>*,.flex-line.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child,.flex-line>*{padding:var(--flex-padding);box-sizing:border-box}.flex-list-item.aspect-ratio>:first-child,.flex-list.flex-aspect-ratio:not(.owl-loaded)>*>:first-child{padding:0 calc(var(--gap)/2)}.flex-aspect-ratio.owl-loaded>.owl-stage-outer>.owl-stage>.owl-item>:not(.flex-cell-aspect-auto)>:first-child,.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child,.flex-col-wrap>*,.flex-col>*,.flex-line-wrap>*,.flex-line>*{display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:auto;-webkit-flex-basis:auto;flex-basis:auto}.flex-col-wrap>.flex-col,.flex-col-wrap>.flex-col-wrap,.flex-col-wrap>.flex-line,.flex-col-wrap>.flex-line-wrap,.flex-col>.flex-col,.flex-col>.flex-col-wrap,.flex-col>.flex-line,.flex-col>.flex-line-wrap,.flex-line-wrap>.flex-col,.flex-line-wrap>.flex-col-wrap,.flex-line-wrap>.flex-line,.flex-line-wrap>.flex-line-wrap,.flex-line>.flex-col,.flex-line>.flex-col-wrap,.flex-line>.flex-line,.flex-line>.flex-line-wrap{-ms-flex-preferred-size:0;-webkit-flex-basis:0;flex-basis:0}.flex-col-wrap>.flex-line-wrap:not(.flex-cell-full-content),.flex-col-wrap>.flex-line:not(.flex-cell-full-content),.flex-col>.flex-col:not(.flex-cell-full-content),.flex-col>.flex-line-wrap:not(.flex-cell-full-content),.flex-col>.flex-line:not(.flex-cell-full-content),.flex-line-wrap>.flex-line-wrap:not(.flex-cell-full-content),.flex-line-wrap>.flex-line:not(.flex-cell-full-content),.flex-line>.flex-line-wrap:not(.flex-cell-full-content){-ms-flex-preferred-size:auto;-webkit-flex-basis:auto;flex-basis:auto}.flex-aspect-ratio.owl-loaded>.owl-stage-outer>.owl-stage>.owl-item>:not(.flex-cell-aspect-auto)>:first-child,.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child,.flex-col-wrap>*,.flex-col>*,.flex-line-wrap>*,.flex-line>*{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;max-width:100%}.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:not(:first-child){display:none}.flex-col,.flex-col-wrap,.flex-line,.flex-line-wrap{padding:0!important;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.flex-line,.flex-line-wrap{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch}.flex-col,.flex-col-wrap{-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}.flex-col,.flex-col-wrap,.flex-line,.flex-line-wrap{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:auto;-webkit-flex-basis:auto;flex-basis:auto}.flex-col,.flex-col-wrap{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-line,.flex-line-wrap{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.flex-col,.flex-line{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.flex-col-wrap,.flex-line-wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-cell{display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:auto;-webkit-flex-basis:auto;flex-basis:auto}.flex-align-start{-webkit-justify-content:flex-start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.flex-align-end{-webkit-justify-content:flex-end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.flex-align-center{-webkit-justify-content:center!important;-ms-flex-pack:center!important;justify-content:center!important}.flex-align-around{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.flex-align--stretch{-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.flex-align--center{-webkit-align-items:center;-ms-flex-align:center;align-items:center}.flex-cells-v-align--start>*{justify-content:start}.flex-cells-v-align--end>*{justify-content:end}.flex-cells-v-align--stretch>*{justify-content:stretch}.flex-cells-g-align--start>*{align-items:start}.flex-cells-g-align--end>*{align-items:end}.flex-cells-g-align--stretch>*{align-items:stretch}.flex-cell-align--start{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.flex-cell-align--end{-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}.flex-cell-align--center{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flex-cell-align--stretch{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch}.flex-wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-box-fill>*,.flex-cell-fill,.flex-cell-full-content{-ms-flex-positive:1;-webkit-box-flex:1;flex-grow:1}.flex-box-fill>*,.flex-cell-fill{-ms-flex-negative:1;flex-shrink:1;flex-basis:auto}@supports (--flex-col-count:property){.flex-col-count>*{width:calc(100%/(var(--flex-col-count)));max-width:calc(100%/(var(--flex-col-count)));box-sizing:border-box}.flex-line-wrap.flex-col-count>*,.flex-line.flex-col-count>*{-ms-flex-preferred-size:calc(100%/var(--flex-col-count));-webkit-flex-basis:calc(100%/var(--flex-col-count));flex-basis:calc(100%/var(--flex-col-count));box-sizing:border-box}}@supports (--flex-line-count:property){.flex-col-wrap.flex-line-count>*,.flex-col.flex-line-count>*{-ms-flex-preferred-size:calc(100%/(var(--flex-line-count)));-webkit-flex-basis:calc(100%/(var(--flex-line-count)));flex-basis:calc(100%/(var(--flex-line-count)));box-sizing:border-box}}.flex-cell-aspect-auto{flex-grow:1000;flex-shrink:1}@supports (--flex-aspect-ratio:property){.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>img{height:auto;object-fit:contain}.flex-aspect-ratio.owl-loaded>.owl-stage-outer>.owl-stage>.owl-item>:not(.flex-cell-aspect-auto),.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto){position:relative;padding:0}.flex-aspect-ratio.flex-list.owl-loaded>.owl-stage-outer>.owl-stage>.owl-item>:not(.flex-cell-aspect-auto)::before,.flex-aspect-ratio.owl-loaded:not(.flex-list)>.owl-stage-outer>.owl-stage>.owl-item>:not(.flex-cell-aspect-auto)::before,.flex-aspect-ratio:not(.owl-loaded):not(.flex-list)>:not(.flex-cell-aspect-auto)::before{content:"";display:block;width:100%;padding-bottom:calc(100%/(var(--flex-aspect-ratio)))}.flex-aspect-ratio.flex-list:not(.owl-loaded)>:not(.flex-cell-aspect-auto)::before{content:"";display:block;width:100%;padding-bottom:calc((100%/var(--col-span) - var(--gap))/var(--flex-aspect-ratio))}.flex-aspect-ratio.owl-loaded>.owl-stage-outer>.owl-stage>.owl-item>:not(.flex-cell-aspect-auto)>:first-child,.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child{position:absolute;top:0;left:0;height:100%;width:100%;object-fit:contain}.flex-aspect-ratio.owl-loaded>.owl-stage-outer>.owl-stage>.owl-item>:not(.flex-cell-aspect-auto)>:first-child>picture,.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child>picture{width:100%;height:100%}.flex-aspect-ratio.owl-loaded>.owl-stage-outer>.owl-stage>.owl-item>:not(.flex-cell-aspect-auto)>:first-child>picture>img,.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child>picture>img{object-fit:contain;width:100%;height:100%}}@supports (--aspect-ratio:0){.aspect-ratio{position:relative;width:100%}.aspect-ratio>img{height:auto;object-fit:contain}.aspect-ratio::before{content:"";display:block;width:100%;padding-bottom:calc(100%/(var(--aspect-ratio)))}.aspect-ratio>:first-child{width:100%;position:absolute;top:0;left:0;height:100%;object-fit:contain}}:root{--flex-marginator:15px;--flex-marginator-index:0}.flex-marginator{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:var(--flex-marginator)}.flex-card__body>:empty,.flex-card__hover>:empty,.flex-delimiter>:empty,.flex-marginator>:empty{display:none}:root{--flex-delimiter:', ';--flex-delimiter-index:0}.flex-delimiter>:not(:first-child):not(:empty)::before{content:var(--flex-delimiter);--flex-delimiter-index:1}.flex-delimiter>:empty+:not(:empty)::before{content:"";--flex-delimiter-index:0}.flex-delimiter>:not(:empty)~:empty+:not(:empty)::before{content:var(--flex-delimiter);--flex-delimiter-index:1}.flex-card{--aspect-ratio:calc(200 / 300);--gap-inner:10px}.flex-card:hover .flex-card__content{box-shadow:0 0 27px 0 rgba(0,0,0,.1)}.flex-card__border,.flex-card__content{width:100%;height:100%;border-style:solid}.flex-card__content{position:relative;display:flex;flex-direction:column;justify-content:stretch;border-width:0;border-color:#e9e9e9;overflow:hidden;transition:.3s;background-color:var(--kit-color-content)}.flex-card__border{position:absolute;left:0;top:0;border-width:1px;border-color:transparent;display:block;pointer-events:none}.flex-card__body:after,.flex-card__body:before,.flex-card__content: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__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-card__picture.aspect-ratio{flex-basis:50%;flex-grow:0;flex-shrink:1;height:0%;--aspect-ratio:1}.flex-card__picture.aspect-ratio{flex-basis:auto;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}.flex-card-list--list .flex-card.aspect-ratio>.flex-card__section,.flex-card__manager,.flex-card__props,.flex-card__text{position:relative}.flex-card__flex-delimiter{flex:1 10 0;display:block!important;margin:0!important;padding:0!important;background:0 0}.flex-card__ticket{position:absolute;top:var(--gap-inner);left:var(--gap-inner)}.flex-card-list--list{--col-count:1}.flex-card-list--list .flex-card.aspect-ratio:before,.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: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}.flex-list--ticket{--col-count:1;--gap:3px;--line-clamp:1;--line-clamp-height:1em;font-size:.7em;flex-direction:column;align-items:flex-start}.flex-list--ticket>.flex-list-item{--col-width:auto}.ticket-item{padding:calc(2*.1em) calc(6*.1em);background-color:#f2f2f2}.kit-icon img,.kit-icon picture,.kit-icon svg,.kit-picture img,.kit-picture picture,.kit-picture svg{width:100%;height:100%;max-width:100%;max-height:100%;display:block;fill:currentColor;transition:inherit;object-fit:contain;object-position:center}.kit-icon-line,.kit-picture-line{display:inline-block;margin-bottom:calc(-1em*var(--font-ratio-bottom, 0.2))}.kit-icon-line img,.kit-icon-line picture,.kit-icon-line svg,.kit-picture-line img,.kit-picture-line picture,.kit-picture-line svg{height:calc(1em*var(--font-ratio-height, 1));width:auto;max-width:100%;max-height:100%;vertical-align:baseline;display:block;fill:currentColor;transition:inherit;object-fit:contain;object-position:center;margin:auto} \ No newline at end of file +script,style{display:none!important}:root{--gap:10px;--gap-section:30px;--gap-wrapper:30px;--col-span:1;--line-clamp:3;--line-clamp-height:1.3em;--width-wrapper:1200px;--flex-aspect-ratio:1;--aspect-ratio:1;--font-ratio-height:.9;--font-ratio-bottom:.1}.kit-wrapper{box-sizing:border-box;width:var(--width-wrapper);max-width:100%;padding:0 var(--gap-wrapper);margin-left:auto;margin-right:auto;position:relative}.kit-sections{box-sizing:border-box;padding-top:var(--gap-section);position:relative}.kit-section{box-sizing:border-box;margin-bottom:var(--gap-section);position:relative}.kit-line-clamp{line-height:var(--line-clamp-height);max-height:calc(var(--line-clamp-height) * var(--line-clamp));word-wrap:break-word;text-overflow:-o-ellipsis-lastline;text-overflow:ellipsis;-webkit-line-clamp:var(--line-clamp);word-break:break-word;white-space:normal;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.flex-list{box-sizing:border-box;--col-span:1;--col-count:4;--gap-row:var(--gap);--flex-list-width:calc(100%);flex-flow:wrap;align-content:flex-start;justify-content:flex-start;align-items:stretch;display:flex;position:relative}.flex-list:not(.owl-loaded){margin-left:calc(var(--gap) / -2)!important;margin-right:calc(var(--gap) / -2)!important;margin-top:calc(var(--gap-row) / -2)!important;margin-bottom:calc(var(--gap-row) / -2)!important}.flex-list:before,.flex-list:after{content:""}.flex-list:not(:is(.owl-loaded,.slick-slider))>*{padding-left:calc(var(--gap) / 2);padding-right:calc(var(--gap) / 2);padding-top:calc(var(--gap-row) / 2);padding-bottom:calc(var(--gap-row) / 2);position:relative}.flex-list-item{--col-width:calc(100% / var(--col-count) * var(--col-span));--line-height:calc(100% / var(--line-count) * var(--line-span,1));box-sizing:border-box}.flex-list>.flex-list-item{width:var(--col-width)!important;max-width:var(--col-width)!important;flex-basis:var(--col-width)!important}.flex-list-item:before,.flex-list-item:after{content:""}.flex-list-item-delimiter{flex:1 0 0;width:0;height:0}.flex-list--static{--line-count:1}.flex-list--static .flex-list-item{height:var(--line-height)!important;max-height:var(--line-height)!important}.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>img{object-fit:contain;height:auto}.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto),.flex-aspect-ratio.owl-loaded>.owl-stage-outer>.owl-stage>.owl-item>:not(.flex-cell-aspect-auto){padding:0;position:relative}.flex-aspect-ratio:not(.owl-loaded):not(.flex-list)>:not(.flex-cell-aspect-auto):before,.flex-aspect-ratio.owl-loaded:not(.flex-list)>.owl-stage-outer>.owl-stage>.owl-item>:not(.flex-cell-aspect-auto):before{content:"";width:100%;padding-bottom:calc(100% / (var(--flex-aspect-ratio)));display:block}.flex-aspect-ratio.flex-list:not(.owl-loaded)>:not(.flex-cell-aspect-auto):before{content:"";width:100%;padding-bottom:calc((100% / var(--col-span,1) - 0 * var(--gap,10px)) / var(--flex-aspect-ratio));display:block}.flex-aspect-ratio.flex-list.owl-loaded>.owl-stage-outer>.owl-stage>.owl-item>:not(.flex-cell-aspect-auto):before{content:"";width:100%;padding-bottom:calc(100% / (var(--flex-aspect-ratio)));display:block}.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child,.flex-aspect-ratio.owl-loaded>.owl-stage-outer>.owl-stage>.owl-item>:not(.flex-cell-aspect-auto)>:first-child{object-fit:contain;width:100%;height:100%;position:absolute;top:0;left:0}.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child>picture,.flex-aspect-ratio.owl-loaded>.owl-stage-outer>.owl-stage>.owl-item>:not(.flex-cell-aspect-auto)>:first-child>picture{width:100%;height:100%}.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child>picture>img,.flex-aspect-ratio.owl-loaded>.owl-stage-outer>.owl-stage>.owl-item>:not(.flex-cell-aspect-auto)>:first-child>picture>img{object-fit:contain;width:100%;height:100%}.flex-list.flex-aspect-ratio:not(.owl-loaded)>*>:first-child,.flex-list-item.aspect-ratio>:first-child{padding:calc(var(--gap) / 2)}@supports (--aspect-ratio:0){.aspect-ratio{width:100%;position:relative}.aspect-ratio>img{object-fit:contain;height:auto}.aspect-ratio:before{content:"";width:100%;padding-bottom:calc(100% / (var(--aspect-ratio)));pointer-events:none;display:block}.aspect-ratio>:first-child{object-fit:contain;width:100%;height:100%;position:absolute;top:0;left:0}}.kit-icon picture,.kit-icon img,.kit-icon svg,.kit-picture picture,.kit-picture img,.kit-picture svg{fill:currentColor;object-fit:contain;object-position:center;width:100%;max-width:100%;height:100%;max-height:100%;transition:inherit;display:block}.kit-picture-line,.kit-icon-line{margin-bottom:calc(-1em * var(--font-ratio-bottom,.2));display:inline-block}.kit-picture-line svg,.kit-picture-line picture,.kit-picture-line img,.kit-icon-line svg,.kit-icon-line picture,.kit-icon-line img{height:calc(1em * var(--font-ratio-height,1));vertical-align:baseline;fill:currentColor;object-fit:contain;object-position:center;width:auto;max-width:100%;max-height:100%;margin:auto;transition:inherit;display:block} \ No newline at end of file diff --git a/assets/flex-kit/flex-other.css b/assets/flex-kit/flex-other.css new file mode 100644 index 0000000..86326bf --- /dev/null +++ b/assets/flex-kit/flex-other.css @@ -0,0 +1,29 @@ + + +/* flex-delimiter text */ + +:root { + --flex-delimiter: ', '; + --flex-delimiter-index: 0; +} + +.flex-delimiter > *:not(:first-child):not(:empty)::before { + content: var(--flex-delimiter); + --flex-delimiter-index:1; +} + +.flex-delimiter > *:empty + *:not(:empty)::before +{ + content: ''; + --flex-delimiter-index:0; +} + +.flex-delimiter > *:not(:empty) ~ *:empty + *:not(:empty)::before +{ + content: var(--flex-delimiter); + --flex-delimiter-index:1; +} + +.flex-delimiter > *:empty { + display:none; +} \ No newline at end of file diff --git a/assets/flex-kit/flex-other.min.css b/assets/flex-kit/flex-other.min.css new file mode 100644 index 0000000..72f1fa6 --- /dev/null +++ b/assets/flex-kit/flex-other.min.css @@ -0,0 +1 @@ +:root{--flex-delimiter:", ";--flex-delimiter-index:0}.flex-delimiter>:not(:first-child):not(:empty):before{content:var(--flex-delimiter);--flex-delimiter-index:1}.flex-delimiter>:empty+:not(:empty):before{content:"";--flex-delimiter-index:0}.flex-delimiter>:not(:empty)~:empty+:not(:empty):before{content:var(--flex-delimiter);--flex-delimiter-index:1}.flex-delimiter>:empty{display:none} \ No newline at end of file diff --git a/assets/flex-kit/item/flex-item.css b/assets/flex-kit/item/flex-item.css new file mode 100644 index 0000000..0ae00d5 --- /dev/null +++ b/assets/flex-kit/item/flex-item.css @@ -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%); +} diff --git a/assets/flex-kit/item/flex-item.min.css b/assets/flex-kit/item/flex-item.min.css new file mode 100644 index 0000000..70389d0 --- /dev/null +++ b/assets/flex-kit/item/flex-item.min.css @@ -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} \ No newline at end of file diff --git a/templates/card/block.php b/templates/card/block.php index 3bb8150..b22d632 100644 --- a/templates/card/block.php +++ b/templates/card/block.php @@ -5,7 +5,7 @@ ?> -
+
diff --git a/tests/card/block.php b/tests/card/block.php index bdcf1be..7b12804 100644 --- a/tests/card/block.php +++ b/tests/card/block.php @@ -1,5 +1,6 @@ - + service()->assets()->setPlugins([ 'kit:config', 'kit:flex-kit', + 'kit:flex-kit/item', 'kit:core', 'kit:bsCore', 'kit:collapse', @@ -15,6 +17,7 @@ if(\Bitrix\Main\Loader::includeModule('wt.core')) { 'kit:theme', ])->render(); } +Asset::getInstance()->addString(''); $APPLICATION->ShowHead(); ?> @@ -24,6 +27,7 @@ $APPLICATION->ShowHead(); } .card-flex-list--block { --col-count: 5; + --gap: 0px; } @media (max-width: 1200px) { .card-flex-list--block { @@ -34,6 +38,9 @@ $APPLICATION->ShowHead(); .card-flex-list--block { --col-count: 4; } + .card-flex-list--block .flex-list-item { + --col-span: 1 !important; + } } @media (max-width: 800px) { .card-flex-list--block { @@ -45,26 +52,34 @@ $APPLICATION->ShowHead(); --col-count: 2; } } + @media (max-width: 320px) { + .card-flex-list--block { + --col-count: 1; + } + } .section-product-list .flex-card { --kit-color-content: #FFF; --aspect-ratio: calc(200 / 250); + --aspect-ratio: 1; } .section-product-list .flex-card__picture { flex-grow: 1; } + .flex-card__picture img { + object-fit: cover; + } .flex-card__hover { - text-align: center; color: grey; font-size: 0.8em; } 1, 'name' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit Ab accusamus aliquid, consequuntur corporis ducimus', 'hover' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit Ab accusamus aliquid, consequuntur corporis ducimus', - 'picture' => '', + 'picture' => '', 'text_preview' => 'asdas asdas dasdasd', 'tickets' => [ [ @@ -86,15 +101,39 @@ $items = array_fill(0, 40, [

Каталог

-
+ +
-
+ foreach($items as $i =>$item) { + $colSpan = match ($i){ + 0, 3 => 2, + 1, 7 => 3, + 14 => 5, + default => 1, + }?> +
service()->templater()->get('kit:card/block', $item); ?>
+ +
+ $item) { + $colSpan = match ($i){ + 0, 3 => 2, + 1, 7 => 3, + 14 => 5, + default => 1, + }?> +
+
'; + ?> +
+ +
\ No newline at end of file