Responsiveness and grid alingments on new collections carousel block.
This commit is contained in:
parent
9887ca884d
commit
e6903d37fa
|
@ -202,7 +202,7 @@
|
||||||
.wp-block-tainacan-carousel-collections-list .tainacan-carousel {
|
.wp-block-tainacan-carousel-collections-list .tainacan-carousel {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: calc(100% + 50px);
|
width: calc(100% + 50px);
|
||||||
left: -50px; }
|
left: -25px; }
|
||||||
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container {
|
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container {
|
||||||
margin: 0 50px; }
|
margin: 0 50px; }
|
||||||
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a > span,
|
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a > span,
|
||||||
|
@ -213,27 +213,29 @@
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 1.2rem; }
|
line-height: 1.2rem; }
|
||||||
|
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a > img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto; }
|
||||||
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a:hover {
|
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a:hover {
|
||||||
text-decoration: none; }
|
text-decoration: none; }
|
||||||
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
|
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid a {
|
||||||
width: calc(20% - 32px);
|
width: 100%;
|
||||||
min-width: calc(20% - 32px); }
|
display: block; }
|
||||||
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid a {
|
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid .collection-items-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 33% 33% 33%;
|
||||||
|
grid-template-rows: 50% 50%;
|
||||||
|
width: 100%; }
|
||||||
|
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid .collection-items-grid img:first-of-type {
|
||||||
|
grid-column-start: 1;
|
||||||
|
grid-column-end: span 2;
|
||||||
|
grid-row-start: 1;
|
||||||
|
grid-row-end: span 2; }
|
||||||
|
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid .collection-items-grid img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block; }
|
height: auto;
|
||||||
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid .collection-items-grid {
|
padding: 2px;
|
||||||
display: grid;
|
margin-bottom: 0px; }
|
||||||
grid-template-columns: 33% 33% 33%;
|
|
||||||
grid-template-rows: 50% 50%;
|
|
||||||
width: 100%; }
|
|
||||||
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid .collection-items-grid img:first-of-type {
|
|
||||||
grid-column-start: 1;
|
|
||||||
grid-column-end: span 2;
|
|
||||||
grid-row-start: 1;
|
|
||||||
grid-row-end: span 2; }
|
|
||||||
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid .collection-items-grid img {
|
|
||||||
padding: 2px;
|
|
||||||
margin-bottom: 0px; }
|
|
||||||
.wp-block-tainacan-carousel-collections-list .preview-warning {
|
.wp-block-tainacan-carousel-collections-list .preview-warning {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
|
@ -242,8 +244,8 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 4px auto; }
|
margin: 4px auto; }
|
||||||
.wp-block-tainacan-carousel-collections-list .swiper-button-prev, .wp-block-tainacan-carousel-collections-list .swiper-button-next {
|
.wp-block-tainacan-carousel-collections-list .swiper-button-prev, .wp-block-tainacan-carousel-collections-list .swiper-button-next {
|
||||||
top: initial;
|
top: calc(50% - 42px);
|
||||||
bottom: calc(50% + 10px);
|
bottom: initial;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
width: 42px;
|
width: 42px;
|
||||||
|
@ -285,11 +287,11 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 16px;
|
margin: 16px;
|
||||||
width: calc(14.286% - 32px);
|
width: calc(16.666% - 32px);
|
||||||
min-width: calc(14.286% - 32px); }
|
min-width: calc(16.666% - 32px); }
|
||||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
|
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
|
||||||
width: calc(20% - 32px);
|
width: calc(25% - 16px);
|
||||||
min-width: calc(20% - 32px); }
|
min-width: calc(25% - 16px); }
|
||||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item a {
|
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item a {
|
||||||
color: #454647;
|
color: #454647;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -341,52 +343,22 @@
|
||||||
margin-bottom: 0px; }
|
margin-bottom: 0px; }
|
||||||
@media only screen and (max-width: 1686px) {
|
@media only screen and (max-width: 1686px) {
|
||||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
|
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
|
||||||
width: calc(16.666% - 32px);
|
width: calc(20% - 32px);
|
||||||
min-width: calc(16.666% - 32px); }
|
min-width: calc(20% - 32px); } }
|
||||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
|
|
||||||
width: calc(25% - 32px);
|
|
||||||
min-width: calc(25% - 32px); }
|
|
||||||
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
|
|
||||||
width: calc(25% - 32px);
|
|
||||||
min-width: calc(25% - 32px); } }
|
|
||||||
@media only screen and (max-width: 1452px) {
|
@media only screen and (max-width: 1452px) {
|
||||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
|
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
|
||||||
width: calc(20% - 32px);
|
width: calc(25% - 32px);
|
||||||
min-width: calc(20% - 32px); }
|
min-width: calc(25% - 32px); } }
|
||||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
|
|
||||||
width: calc(33.333% - 32px);
|
|
||||||
min-width: calc(33.333% - 32px); }
|
|
||||||
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
|
|
||||||
width: calc(33.333% - 32px);
|
|
||||||
min-width: calc(33.333% - 32px); } }
|
|
||||||
@media only screen and (max-width: 1118px) {
|
@media only screen and (max-width: 1118px) {
|
||||||
.wp-block-tainacan-carousel-collections-list ul.collections-edit li.collection-list-item {
|
.wp-block-tainacan-carousel-collections-list ul.collections-edit li.collection-list-item {
|
||||||
width: calc(25% - 32px);
|
width: calc(33.333% - 32px);
|
||||||
min-width: calc(25% - 32px); }
|
min-width: calc(33.333% - 32px); } }
|
||||||
.wp-block-tainacan-carousel-collections-list ul.collections-edit li.collection-list-item.collection-list-item-grid {
|
|
||||||
width: calc(50% - 32px);
|
|
||||||
min-width: calc(50% - 32px); }
|
|
||||||
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
|
|
||||||
width: calc(50% - 32px);
|
|
||||||
min-width: calc(50% - 32px); } }
|
|
||||||
@media only screen and (max-width: 854px) {
|
@media only screen and (max-width: 854px) {
|
||||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
|
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
|
||||||
width: calc(33.333% - 32px);
|
width: calc(50% - 32px);
|
||||||
min-width: calc(33.333% - 32px); }
|
min-width: calc(50% - 32px); } }
|
||||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
|
|
||||||
width: calc(100% - 32px);
|
|
||||||
min-width: calc(100% - 32px); }
|
|
||||||
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
|
|
||||||
width: calc(100% - 32px);
|
|
||||||
min-width: calc(100% - 32px); } }
|
|
||||||
@media only screen and (max-width: 584px) {
|
@media only screen and (max-width: 584px) {
|
||||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
|
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
|
||||||
width: calc(50% - 32px);
|
|
||||||
min-width: calc(50% - 32px); }
|
|
||||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
|
|
||||||
width: calc(100% - 32px);
|
|
||||||
min-width: calc(100% - 32px); }
|
|
||||||
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
|
|
||||||
width: calc(100% - 32px);
|
width: calc(100% - 32px);
|
||||||
min-width: calc(100% - 32px); } }
|
min-width: calc(100% - 32px); } }
|
||||||
|
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -274,7 +274,7 @@
|
||||||
.wp-block-tainacan-carousel-items-list .tainacan-carousel {
|
.wp-block-tainacan-carousel-items-list .tainacan-carousel {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: calc(100% + 50px);
|
width: calc(100% + 50px);
|
||||||
left: -50px; }
|
left: -25px; }
|
||||||
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container {
|
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container {
|
||||||
margin: 0 50px; }
|
margin: 0 50px; }
|
||||||
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a > span,
|
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a > span,
|
||||||
|
@ -285,6 +285,9 @@
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 1.2rem; }
|
line-height: 1.2rem; }
|
||||||
|
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a > img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto; }
|
||||||
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a:hover {
|
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a:hover {
|
||||||
text-decoration: none; }
|
text-decoration: none; }
|
||||||
.wp-block-tainacan-carousel-items-list .preview-warning {
|
.wp-block-tainacan-carousel-items-list .preview-warning {
|
||||||
|
@ -295,8 +298,8 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 4px auto; }
|
margin: 4px auto; }
|
||||||
.wp-block-tainacan-carousel-items-list .swiper-button-prev, .wp-block-tainacan-carousel-items-list .swiper-button-next {
|
.wp-block-tainacan-carousel-items-list .swiper-button-prev, .wp-block-tainacan-carousel-items-list .swiper-button-next {
|
||||||
top: initial;
|
top: calc(50% - 42px);
|
||||||
bottom: calc(50% + 10px);
|
bottom: initial;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
width: 42px;
|
width: 42px;
|
||||||
|
@ -338,8 +341,8 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 16px;
|
margin: 16px;
|
||||||
width: calc(14.286% - 32px);
|
width: calc(16.666% - 32px);
|
||||||
min-width: calc(14.286% - 32px); }
|
min-width: calc(16.666% - 32px); }
|
||||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item a {
|
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item a {
|
||||||
color: #454647;
|
color: #454647;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -378,24 +381,24 @@
|
||||||
background-color: white !important;
|
background-color: white !important;
|
||||||
border: 1px solid #cbcbcb !important; }
|
border: 1px solid #cbcbcb !important; }
|
||||||
@media only screen and (max-width: 1686px) {
|
@media only screen and (max-width: 1686px) {
|
||||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
|
|
||||||
width: calc(16.666% - 32px);
|
|
||||||
min-width: calc(16.666% - 32px); } }
|
|
||||||
@media only screen and (max-width: 1452px) {
|
|
||||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
|
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
|
||||||
width: calc(20% - 32px);
|
width: calc(20% - 32px);
|
||||||
min-width: calc(20% - 32px); } }
|
min-width: calc(20% - 32px); } }
|
||||||
@media only screen and (max-width: 1118px) {
|
@media only screen and (max-width: 1452px) {
|
||||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
|
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
|
||||||
width: calc(25% - 32px);
|
width: calc(25% - 32px);
|
||||||
min-width: calc(25% - 32px); } }
|
min-width: calc(25% - 32px); } }
|
||||||
@media only screen and (max-width: 854px) {
|
@media only screen and (max-width: 1118px) {
|
||||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
|
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
|
||||||
width: calc(33.333% - 32px);
|
width: calc(33.333% - 32px);
|
||||||
min-width: calc(33.333% - 32px); } }
|
min-width: calc(33.333% - 32px); } }
|
||||||
@media only screen and (max-width: 584px) {
|
@media only screen and (max-width: 854px) {
|
||||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
|
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
|
||||||
width: calc(50% - 32px);
|
width: calc(50% - 32px);
|
||||||
min-width: calc(50% - 32px); } }
|
min-width: calc(50% - 32px); } }
|
||||||
|
@media only screen and (max-width: 584px) {
|
||||||
|
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
|
||||||
|
width: calc(100% - 32px);
|
||||||
|
min-width: calc(100% - 32px); } }
|
||||||
|
|
||||||
/*# sourceMappingURL=tainacan-gutenberg-block-carousel-items-list.css.map */
|
/*# sourceMappingURL=tainacan-gutenberg-block-carousel-items-list.css.map */
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -190,20 +190,20 @@ export default {
|
||||||
preventInteractionOnTransition: true,
|
preventInteractionOnTransition: true,
|
||||||
allowClick: true,
|
allowClick: true,
|
||||||
allowTouchMove: true,
|
allowTouchMove: true,
|
||||||
slidesPerView: 7,
|
slidesPerView: this.showCollectionThumbnail ? 6 : 5,
|
||||||
slidesPerGroup: 1,
|
slidesPerGroup: 1,
|
||||||
spaceBetween: 32,
|
spaceBetween: this.showCollectionThumbnail ? 32 : 16,
|
||||||
slideToClickedSlide: true,
|
slideToClickedSlide: true,
|
||||||
navigation: {
|
navigation: {
|
||||||
nextEl: '.swiper-button-next',
|
nextEl: '.swiper-button-next',
|
||||||
prevEl: '.swiper-button-prev',
|
prevEl: '.swiper-button-prev',
|
||||||
},
|
},
|
||||||
breakpoints: {
|
breakpoints: {
|
||||||
498: { slidesPerView: 2 },
|
498: { slidesPerView: this.showCollectionThumbnail ? 1 : 1 },
|
||||||
768: { slidesPerView: 3 },
|
768: { slidesPerView: this.showCollectionThumbnail ? 2 : 1 },
|
||||||
1024: { slidesPerView: 4 },
|
1024: { slidesPerView: this.showCollectionThumbnail ? 3 : 2 },
|
||||||
1366: { slidesPerView: 5 },
|
1366: { slidesPerView: this.showCollectionThumbnail ? 4 : 3 },
|
||||||
1600: { slidesPerView: 6 },
|
1600: { slidesPerView: this.showCollectionThumbnail ? 5 : 4 },
|
||||||
},
|
},
|
||||||
autoplay: this.autoPlay ? { delay: this.autoPlaySpeed*1000 } : false,
|
autoplay: this.autoPlay ? { delay: this.autoPlaySpeed*1000 } : false,
|
||||||
loop: this.loopSlides
|
loop: this.loopSlides
|
||||||
|
|
|
@ -48,7 +48,7 @@
|
||||||
.tainacan-carousel {
|
.tainacan-carousel {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: calc(100% + 50px);
|
width: calc(100% + 50px);
|
||||||
left: -50px;
|
left: -25px;
|
||||||
|
|
||||||
.swiper-container {
|
.swiper-container {
|
||||||
margin: 0 50px;
|
margin: 0 50px;
|
||||||
|
@ -62,13 +62,16 @@
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 1.2rem;
|
line-height: 1.2rem;
|
||||||
}
|
}
|
||||||
|
a>img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
a:hover {
|
a:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper-slide.collection-list-item-grid {
|
.swiper-slide.collection-list-item-grid {
|
||||||
width: calc(20% - 32px);
|
|
||||||
min-width: calc(20% - 32px);
|
|
||||||
a {
|
a {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -87,6 +90,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
}
|
}
|
||||||
|
@ -106,8 +111,8 @@
|
||||||
|
|
||||||
// Next and previous buttons
|
// Next and previous buttons
|
||||||
.swiper-button-prev, .swiper-button-next {
|
.swiper-button-prev, .swiper-button-next {
|
||||||
top: initial;
|
top: calc(50% - 42px);
|
||||||
bottom: calc(50% + 10px);
|
bottom: initial;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
width: 42px;
|
width: 42px;
|
||||||
|
@ -158,12 +163,12 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 16px;
|
margin: 16px;
|
||||||
width: calc(14.286% - 32px);
|
width: calc(16.666% - 32px);
|
||||||
min-width: calc(14.286% - 32px);
|
min-width: calc(16.666% - 32px);
|
||||||
|
|
||||||
&.collection-list-item-grid {
|
&.collection-list-item-grid {
|
||||||
width: calc(20% - 32px);
|
width: calc(25% - 16px);
|
||||||
min-width: calc(20% - 32px);
|
min-width: calc(25% - 16px);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
@ -237,79 +242,34 @@
|
||||||
@media only screen and (max-width: 1686px) {
|
@media only screen and (max-width: 1686px) {
|
||||||
|
|
||||||
ul.collections-list-edit li.collection-list-item {
|
ul.collections-list-edit li.collection-list-item {
|
||||||
width: calc(16.666% - 32px);
|
width: calc(20% - 32px);
|
||||||
min-width: calc(16.666% - 32px);
|
min-width: calc(20% - 32px);
|
||||||
|
|
||||||
&.collection-list-item-grid {
|
|
||||||
width: calc(25% - 32px);
|
|
||||||
min-width: calc(25% - 32px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
|
|
||||||
width: calc(25% - 32px);
|
|
||||||
min-width: calc(25% - 32px);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media only screen and (max-width: 1452px) {
|
@media only screen and (max-width: 1452px) {
|
||||||
|
|
||||||
ul.collections-list-edit li.collection-list-item {
|
ul.collections-list-edit li.collection-list-item {
|
||||||
width: calc(20% - 32px);
|
width: calc(25% - 32px);
|
||||||
min-width: calc(20% - 32px);
|
min-width: calc(25% - 32px);
|
||||||
|
|
||||||
&.collection-list-item-grid {
|
|
||||||
width: calc(33.333% - 32px);
|
|
||||||
min-width: calc(33.333% - 32px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
|
|
||||||
width: calc(33.333% - 32px);
|
|
||||||
min-width: calc(33.333% - 32px);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media only screen and (max-width: 1118px) {
|
@media only screen and (max-width: 1118px) {
|
||||||
|
|
||||||
ul.collections-edit li.collection-list-item {
|
ul.collections-edit li.collection-list-item {
|
||||||
width: calc(25% - 32px);
|
width: calc(33.333% - 32px);
|
||||||
min-width: calc(25% - 32px);
|
min-width: calc(33.333% - 32px);
|
||||||
|
|
||||||
&.collection-list-item-grid {
|
|
||||||
width: calc(50% - 32px);
|
|
||||||
min-width: calc(50% - 32px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
|
|
||||||
width: calc(50% - 32px);
|
|
||||||
min-width: calc(50% - 32px);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media only screen and (max-width: 854px) {
|
@media only screen and (max-width: 854px) {
|
||||||
|
|
||||||
ul.collections-list-edit li.collection-list-item {
|
ul.collections-list-edit li.collection-list-item {
|
||||||
width: calc(33.333% - 32px);
|
width: calc(50% - 32px);
|
||||||
min-width: calc(33.333% - 32px);
|
min-width: calc(50% - 32px);
|
||||||
|
|
||||||
&.collection-list-item-grid {
|
|
||||||
width: calc(100% - 32px);
|
|
||||||
min-width: calc(100% - 32px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
|
|
||||||
width: calc(100% - 32px);
|
|
||||||
min-width: calc(100% - 32px);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media only screen and (max-width: 584px) {
|
@media only screen and (max-width: 584px) {
|
||||||
|
|
||||||
ul.collections-list-edit li.collection-list-item {
|
ul.collections-list-edit li.collection-list-item {
|
||||||
width: calc(50% - 32px);
|
|
||||||
min-width: calc(50% - 32px);
|
|
||||||
|
|
||||||
&.collection-list-item-grid {
|
|
||||||
width: calc(100% - 32px);
|
|
||||||
min-width: calc(100% - 32px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
|
|
||||||
width: calc(100% - 32px);
|
width: calc(100% - 32px);
|
||||||
min-width: calc(100% - 32px);
|
min-width: calc(100% - 32px);
|
||||||
}
|
}
|
||||||
|
|
|
@ -511,7 +511,7 @@ registerBlockType('tainacan/carousel-collections-list', {
|
||||||
max-collections-number={ maxCollectionsNumber }
|
max-collections-number={ maxCollectionsNumber }
|
||||||
tainacan-api-root={ tainacan_plugin.root }
|
tainacan-api-root={ tainacan_plugin.root }
|
||||||
tainacan-base-url={ tainacan_plugin.base_url }
|
tainacan-base-url={ tainacan_plugin.base_url }
|
||||||
showCollectionThumbnail={ '' + showCollectionThumbnail }
|
show-collection-thumbnail={ '' + showCollectionThumbnail }
|
||||||
id={ 'wp-block-tainacan-carousel-collections-list_' + blockId }>
|
id={ 'wp-block-tainacan-carousel-collections-list_' + blockId }>
|
||||||
{ content }
|
{ content }
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -192,7 +192,7 @@ export default {
|
||||||
preventInteractionOnTransition: true,
|
preventInteractionOnTransition: true,
|
||||||
allowClick: true,
|
allowClick: true,
|
||||||
allowTouchMove: true,
|
allowTouchMove: true,
|
||||||
slidesPerView: 7,
|
slidesPerView: 6,
|
||||||
slidesPerGroup: 1,
|
slidesPerGroup: 1,
|
||||||
spaceBetween: 32,
|
spaceBetween: 32,
|
||||||
slideToClickedSlide: true,
|
slideToClickedSlide: true,
|
||||||
|
@ -201,11 +201,11 @@ export default {
|
||||||
prevEl: '.swiper-button-prev',
|
prevEl: '.swiper-button-prev',
|
||||||
},
|
},
|
||||||
breakpoints: {
|
breakpoints: {
|
||||||
498: { slidesPerView: 2 },
|
498: { slidesPerView: 1 },
|
||||||
768: { slidesPerView: 3 },
|
768: { slidesPerView: 2 },
|
||||||
1024: { slidesPerView: 4 },
|
1024: { slidesPerView: 3 },
|
||||||
1366: { slidesPerView: 5 },
|
1366: { slidesPerView: 4 },
|
||||||
1600: { slidesPerView: 6 },
|
1600: { slidesPerView: 5 },
|
||||||
},
|
},
|
||||||
autoplay: this.autoPlay ? { delay: this.autoPlaySpeed*1000 } : false,
|
autoplay: this.autoPlay ? { delay: this.autoPlaySpeed*1000 } : false,
|
||||||
loop: this.loopSlides
|
loop: this.loopSlides
|
||||||
|
|
|
@ -140,7 +140,7 @@
|
||||||
.tainacan-carousel {
|
.tainacan-carousel {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: calc(100% + 50px);
|
width: calc(100% + 50px);
|
||||||
left: -50px;
|
left: -25px;
|
||||||
|
|
||||||
.swiper-container {
|
.swiper-container {
|
||||||
margin: 0 50px;
|
margin: 0 50px;
|
||||||
|
@ -154,6 +154,10 @@
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 1.2rem;
|
line-height: 1.2rem;
|
||||||
}
|
}
|
||||||
|
a>img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
a:hover {
|
a:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
@ -171,8 +175,8 @@
|
||||||
|
|
||||||
// Next and previous buttons
|
// Next and previous buttons
|
||||||
.swiper-button-prev, .swiper-button-next {
|
.swiper-button-prev, .swiper-button-next {
|
||||||
top: initial;
|
top: calc(50% - 42px);
|
||||||
bottom: calc(50% + 10px);
|
bottom: initial;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
width: 42px;
|
width: 42px;
|
||||||
|
@ -223,8 +227,8 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 16px;
|
margin: 16px;
|
||||||
width: calc(14.286% - 32px);
|
width: calc(16.666% - 32px);
|
||||||
min-width: calc(14.286% - 32px);
|
min-width: calc(16.666% - 32px);
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #454647;
|
color: #454647;
|
||||||
|
@ -278,38 +282,38 @@
|
||||||
}
|
}
|
||||||
@media only screen and (max-width: 1686px) {
|
@media only screen and (max-width: 1686px) {
|
||||||
|
|
||||||
ul.items-list-edit li.item-list-item {
|
|
||||||
width: calc(16.666% - 32px);
|
|
||||||
min-width: calc(16.666% - 32px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (max-width: 1452px) {
|
|
||||||
|
|
||||||
ul.items-list-edit li.item-list-item {
|
ul.items-list-edit li.item-list-item {
|
||||||
width: calc(20% - 32px);
|
width: calc(20% - 32px);
|
||||||
min-width: calc(20% - 32px);
|
min-width: calc(20% - 32px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media only screen and (max-width: 1118px) {
|
@media only screen and (max-width: 1452px) {
|
||||||
|
|
||||||
ul.items-list-edit li.item-list-item {
|
ul.items-list-edit li.item-list-item {
|
||||||
width: calc(25% - 32px);
|
width: calc(25% - 32px);
|
||||||
min-width: calc(25% - 32px);
|
min-width: calc(25% - 32px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media only screen and (max-width: 854px) {
|
@media only screen and (max-width: 1118px) {
|
||||||
|
|
||||||
ul.items-list-edit li.item-list-item {
|
ul.items-list-edit li.item-list-item {
|
||||||
width: calc(33.333% - 32px);
|
width: calc(33.333% - 32px);
|
||||||
min-width: calc(33.333% - 32px);
|
min-width: calc(33.333% - 32px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media only screen and (max-width: 584px) {
|
@media only screen and (max-width: 854px) {
|
||||||
|
|
||||||
ul.items-list-edit li.item-list-item {
|
ul.items-list-edit li.item-list-item {
|
||||||
width: calc(50% - 32px);
|
width: calc(50% - 32px);
|
||||||
min-width: calc(50% - 32px);
|
min-width: calc(50% - 32px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media only screen and (max-width: 584px) {
|
||||||
|
|
||||||
|
ul.items-list-edit li.item-list-item {
|
||||||
|
width: calc(100% - 32px);
|
||||||
|
min-width: calc(100% - 32px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue