147 lines
3.9 KiB
SCSS
147 lines
3.9 KiB
SCSS
$wpj-slider-squareitem-width: 400px !default;
|
|
|
|
$wpj-controls-position: absolute !default;
|
|
$wpj-controls-justify-content: space-between !default;
|
|
$wpj-controls-top: 50% !default;
|
|
$wpj-controls-right: 0 !default;
|
|
$wpj-controls-left: 0 !default;
|
|
$wpj-controls-bottom: 0 !default;
|
|
$wpj-controls-transform: translateY(-50%) !default;
|
|
$wpj-controls-margin: 25px 0 0 0 !default;
|
|
$wpj-controls-border-radius: $border-radius-base !default;
|
|
$wpj-controls-box-shadow: unset !default;
|
|
$wpj-controls-btn-size: unset !default;
|
|
$wpj-controls-btn-style: "btn-primary" !default;
|
|
$wpj-controls-btn-prev-left: 0 !default;
|
|
$wpj-controls-btn-next-right: 0 !default;
|
|
|
|
.wpj-slider-wrapper {
|
|
position: relative;
|
|
overflow: hidden;
|
|
container-type: inline-size;
|
|
|
|
.wpj-slider-controls {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 0;
|
|
justify-content: $wpj-controls-justify-content;
|
|
position: $wpj-controls-position;
|
|
top: $wpj-controls-top;
|
|
left: $wpj-controls-left;
|
|
right: $wpj-controls-right;
|
|
bottom: $wpj-controls-bottom;
|
|
z-index: 1;
|
|
|
|
button {
|
|
@include set-btn-style($wpj-controls-btn-style);
|
|
|
|
position: absolute;
|
|
border-radius: $wpj-controls-border-radius;
|
|
margin: $wpj-controls-margin;
|
|
width: $wpj-controls-btn-size;
|
|
height: $wpj-controls-btn-size;
|
|
box-shadow: $wpj-controls-box-shadow;
|
|
transform: $wpj-controls-transform;
|
|
|
|
&:first-child {
|
|
left: $wpj-controls-btn-prev-left;
|
|
}
|
|
|
|
&:last-child {
|
|
right: $wpj-controls-btn-next-right;
|
|
}
|
|
|
|
&.disabled {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
svg {
|
|
fill: currentColor;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wpj-slider-carousel {
|
|
&,
|
|
> .wpj-b-row {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
width: 100%;
|
|
gap: $blocek-gutter;
|
|
transition: transform $transition-speed;
|
|
}
|
|
|
|
> div:first-child:last-child {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.#{component("EditableContent:Recommender", "class")},
|
|
.#{component("BlocekProducts", "class")} {
|
|
container-type: unset;
|
|
|
|
.products {
|
|
flex-wrap: nowrap;
|
|
|
|
.#{component("ProductList:SquareItem", "class")} {
|
|
flex-basis: calc($wpj-slider-squareitem-width * .65);
|
|
max-width: calc($wpj-slider-squareitem-width * .65);
|
|
|
|
@container (inline-size > 500px) {
|
|
@include container-query-selector("&") {
|
|
flex-basis: calc($wpj-slider-squareitem-width * .85);
|
|
max-width: calc($wpj-slider-squareitem-width * .85);
|
|
}
|
|
}
|
|
|
|
@container (inline-size > 810px) {
|
|
@include container-query-selector("&") {
|
|
flex-basis: $wpj-slider-squareitem-width;
|
|
max-width: $wpj-slider-squareitem-width;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.w-gallery {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.w-gallery [data-blocek-col],
|
|
.wpj-b-row > [data-blocek-col],
|
|
> [data-blocek-col] {
|
|
flex-basis: calc($wpj-slider-squareitem-width * .65);
|
|
max-width: calc($wpj-slider-squareitem-width * .65);
|
|
min-width: calc($wpj-slider-squareitem-width * .65);
|
|
|
|
@container (inline-size > 500px) {
|
|
@include container-query-selector("&") {
|
|
flex-basis: calc($wpj-slider-squareitem-width * .85);
|
|
max-width: calc($wpj-slider-squareitem-width * .85);
|
|
min-width: calc($wpj-slider-squareitem-width * .85);
|
|
}
|
|
}
|
|
|
|
@container (inline-size > 810px) {
|
|
@include container-query-selector("&") {
|
|
flex-basis: $wpj-slider-squareitem-width;
|
|
max-width: $wpj-slider-squareitem-width;
|
|
min-width: $wpj-slider-squareitem-width;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.wpj-blocek.wpj-blocek-active {
|
|
.wpj-slider-carousel {
|
|
overflow-x: scroll;
|
|
|
|
.w-image-btn {
|
|
min-width: 200px;
|
|
min-height: 200px;
|
|
}
|
|
}
|
|
}
|