@fonixtree/magic-design 0.1.58 → 0.1.61

package/es/composite-comp/bol/components/Carousel/mobile/index.less

@@ -1,84 +1,103 @@
 .m-carousel-mobile {
   position: relative;
   width: 100%;
-}
-.m-carousel-mobile .content {
-  display: flex;
-  margin: 0 auto;
-}
-.m-carousel-mobile .slider-wrap {
-  width: 100%;
-  margin: 0 auto;
-  line-height: 1;
-}
-.m-carousel-mobile .slider-wrap .slick-list {
-  padding: 0;
-}
-.m-carousel-mobile .slider-wrap .slick-list:hover {
-  padding-top: 2rem;
-  margin-top: -2rem;
-  padding-bottom: 2rem;
-  margin-bottom: -2rem;
-}
-.m-carousel-mobile .slider-wrap .slick-list .slick-track {
-  display: flex;
-  align-items: center;
-  gap: 0.24rem;
-}
-.m-carousel-mobile .slider-wrap .img-wrap .img {
-  width: fit-content;
-  height: fit-content;
-  display: block;
-  margin: 0 auto;
-}
-.m-carousel-mobile .slider-wrap .img-wrap .title {
-  display: flex;
-  justify-content: center;
-  margin-top: 0.24rem;
-}
-.m-carousel-mobile .slider-wrap .img-wrap .text {
-  display: flex;
-  justify-content: center;
-  margin-top: 0.12rem;
-}
-.m-carousel-mobile .slider-wrap .img-wrap .tags {
-  margin-top: 0.16rem;
-  margin-bottom: 0.24rem;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-.m-carousel-mobile .slider-wrap .img-wrap .tags > div {
-  margin-right: 0.16rem;
-}
-.m-carousel-mobile .slider-wrap .img-wrap .tags > div:last-child {
-  margin-right: 0;
-}
-.m-carousel-mobile .swiper-ban {
-  position: absolute;
-  width: 100%;
-  bottom: 0.12rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.m-carousel-mobile .swiper-ban .ban {
-  font-size: 0.16rem;
-  width: 1em;
-  height: 1em;
-  border-radius: 50%;
-  background: #FFF;
-  cursor: inherit;
-  margin-right: 0.2rem;
-  transition: all 0.5s;
-}
-.m-carousel-mobile .swiper-ban .ban:last-child {
-  margin-right: 0;
-}
-.m-carousel-mobile .swiper-ban .ban.active {
-  width: 2em;
-  height: 1em;
-  border-radius: 2rem;
-  opacity: 1;
-}
+
+  .content {
+    display: flex;
+    margin: 0 auto;
+  }
+
+  .slider-wrap {
+    width: 100%;
+    margin: 0 auto;
+    line-height: 1;
+
+    .slick-list {
+      // margin-left: -11px;
+      // margin-right: -11px;
+      padding: 0;
+
+      &:hover {
+        padding-top: 100px;
+        margin-top: -100px;
+        padding-bottom: 100px;
+        margin-bottom: -100px;
+      }
+
+      .slick-track {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+    }
+
+    .img-wrap {
+      .img {
+        width: fit-content;
+        height: fit-content;
+        display: block;
+        margin: 0 auto;
+      }
+
+      .title {
+        display: flex;
+        justify-content: center;
+        margin-top: 12px;
+      }
+
+      .text {
+        display: flex;
+        justify-content: center;
+        margin-top: 6px;
+      }
+
+      .tags {
+        margin-top: 8px;
+        margin-bottom: 12px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+
+        >div {
+          margin-right: 8px;
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .swiper-ban {
+    position: absolute;
+    width: 100%;
+    bottom: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .ban {
+      font-size: 8px;
+      width: 1em;
+      height: 1em;
+      border-radius: 50%;
+      background: #FFF;
+      cursor: inherit;
+      margin-right: 10px;
+      transition: all .5s;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      &.active {
+        width: 2em;
+        height: 1em;
+        border-radius: 100px;
+        opacity: 1;
+      }
+    }
+  }
+}

package/es/composite-comp/bol/components/ImageGallery/mobile/index.less

@@ -1,15 +1,22 @@
-.m-image-gallery-mobile .content .line {
-  margin-bottom: 0.24rem;
-}
-.m-image-gallery-mobile .content .line.isHorizontal {
-  display: flex;
-  justify-content: flex-start;
-}
-.m-image-gallery-mobile .content .line:last-child {
-  margin-bottom: 0;
-}
-.m-image-gallery-mobile .content .line .img-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+.m-image-gallery-mobile {
+  .content {
+    .line {
+      margin-bottom: 12px;
+
+      &.isHorizontal {
+        display: flex;
+        justify-content: flex-start;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .img-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}