@fonixtree/magic-design 0.0.119 → 0.0.121

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

@@ -1,233 +1,292 @@
 .image-text-mobile {
-  padding: 2.267vw 0;
-}
-.image-text-mobile .headline {
-  margin-bottom: 1.067vw;
-}
-.image-text-mobile .subtitle {
-  margin-bottom: 4.8vw;
-}
-.image-text-mobile .group-wrap .one-card .card-btn-wrap .card-first-btn,
-.image-text-mobile .group-wrap .one-card .card-btn-wrap .card-second-btn {
-  width: fit-content;
-}
-.image-text-mobile .btn-wrap {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-}
-.image-text-mobile .btn-wrap .first-btn {
-  margin-top: 4.8vw;
-}
-.image-text-mobile .btn-wrap .second-btn {
-  margin-top: 4.8vw;
-  margin-left: 1.6vw;
-}
-.normal1 .group-wrap {
-  padding: 0 2vw;
-  width: 100%;
-}
-.normal1 .group-wrap .one-card {
-  display: flex;
-  align-items: stretch;
-  padding: 2.4vw;
-  margin-bottom: 1.067vw;
-}
-.normal1 .group-wrap .one-card:last-of-type {
-  margin-bottom: 0;
-}
-.normal1 .group-wrap .one-card .card-image-wrap {
-  flex-shrink: 0;
-  margin-right: 1.6vw;
-}
-.normal1 .group-wrap .one-card .card-content-wrap {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.normal1 .group-wrap .one-card .card-content-wrap .card-title {
-  margin-bottom: 0.8vw;
-  text-align: left !important;
-}
-.normal1 .group-wrap .one-card .card-content-wrap .card-text {
-  margin-bottom: 1.6vw;
-  text-align: left !important;
-}
-.normal1 .group-wrap .one-card .card-content-wrap .card-btn-wrap {
-  display: flex;
-}
-.normal1 .group-wrap .one-card .card-content-wrap .card-btn-wrap .card-second-btn {
-  margin-left: 1.6vw;
-}
-.normal2 .group-wrap {
-  width: 100%;
-  padding: 0 2vw;
-}
-.normal2 .group-wrap .one-card {
-  width: 100%;
-  padding: 2.667vw 2.133vw;
-  margin-bottom: 4.8vw;
-}
-.normal2 .group-wrap .one-card:last-of-type {
-  margin-bottom: 0;
-}
-.normal2 .group-wrap .one-card .card-image-wrap .card-image {
-  width: fit-content;
-  margin: 0 auto;
-}
-.normal2 .group-wrap .one-card .card-content-wrap .card-title {
-  margin-bottom: 1.067vw;
-}
-.normal2 .group-wrap .one-card .card-content-wrap .card-text {
-  margin-bottom: 2.133vw;
-}
-.normal2 .group-wrap .one-card .card-content-wrap .card-btn-wrap {
-  display: flex;
-}
-.normal2 .group-wrap .one-card .card-content-wrap .card-btn-wrap .card-second-btn {
-  margin-left: 1.6vw;
-}
-.normal3 .group-wrap {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  padding: 0 2vw;
-}
-.normal3 .group-wrap .one-card {
-  display: flex;
-  flex-direction: column;
-}
-.normal3 .group-wrap .one-card .card-image-wrap {
-  width: 100%;
-}
-.normal3 .group-wrap .one-card .card-image-wrap .card-image {
-  width: fit-content;
-  margin: 0 auto 0.933vw;
-}
-.normal3 .group-wrap .one-card .card-title {
-  margin-bottom: 0.533vw;
-}
-.normal3 .group-wrap .one-card .card-text {
-  margin-bottom: 0.933vw;
-}
-.normal3 .group-wrap .one-card .card-btn-wrap {
-  display: flex;
-  flex-direction: column;
-}
-.normal3 .group-wrap .one-card .card-first-btn,
-.normal3 .group-wrap .one-card .card-second-btn {
-  margin-bottom: 1.067vw;
-}
-.normal3 .group-wrap .card-margin-bottom {
-  margin-bottom: 1.333vw;
-}
-.outsideM .group-wrap {
-  padding: 0 2vw;
-  width: 100%;
-}
-.outsideM .group-wrap .one-card {
-  margin-top: 4.667vw;
-  position: relative;
-  padding: 4vw 1.333vw 2.667vw 4.8vw;
-}
-.outsideM .group-wrap .one-card .card-image-wrap {
-  position: absolute;
-  left: 2.4vw;
-  top: 0;
-  transform: translateY(-50%);
-}
-.outsideM .group-wrap .one-card .card-content-wrap .card-title {
-  margin-bottom: 0.533vw;
-  text-align: left !important;
-}
-.outsideM .group-wrap .one-card .card-content-wrap .card-text {
-  margin-bottom: 1.6vw;
-  text-align: left !important;
-}
-.outsideM .group-wrap .one-card .card-content-wrap .card-btn-wrap {
-  display: flex;
-}
-.outsideM .group-wrap .one-card .card-content-wrap .card-btn-wrap .card-second-btn {
-  margin-left: 1.6vw;
-}
-.centerM .group-wrap {
-  position: relative;
-  width: 100%;
-}
-.centerM .group-wrap::before {
-  content: '';
-  position: absolute;
-  width: 1px;
-  height: 100%;
-  border-right: 1px dashed #D2D9E5;
-  left: 50%;
-  transform: translateX(-50%);
-}
-.centerM .group-wrap .one-card {
-  width: calc((100% - 1px)/2);
-  position: relative;
-  padding: 0 1.867vw 2.133vw;
-}
-.centerM .group-wrap .one-card::before {
-  content: '';
-  position: absolute;
-  border-radius: 50%;
-  background: #2F54EB;
-  width: 1.333vw;
-  height: 1.333vw;
-  z-index: 10;
-  border: 0.267vw solid #CCE3FF;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n-1) {
-  left: 0;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n-1)::before {
-  right: -0.667vw;
-  top: 0.667vw;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap .card-title,
-.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap .card-text {
-  text-align: right !important;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap .image-subtext-wrap {
-  flex-direction: row-reverse;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap .image-subtext-wrap .card-image-wrap {
-  margin-left: 1.067vw;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap .card-btn-wrap {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n) {
-  left: 50%;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n)::before {
-  left: -0.667vw;
-  top: 0.667vw;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n) .card-content-wrap .card-title,
-.centerM .group-wrap .one-card:nth-of-type(2n) .card-content-wrap .card-text {
-  text-align: left !important;
-}
-.centerM .group-wrap .one-card:nth-of-type(2n) .card-content-wrap .image-subtext-wrap .card-image-wrap {
-  margin-right: 1.067vw;
-}
-.centerM .group-wrap .one-card .card-content-wrap .card-title {
-  margin-bottom: 1.333vw;
-}
-.centerM .group-wrap .one-card .card-content-wrap .image-subtext-wrap {
-  display: flex;
-  margin-bottom: 2.667vw;
-  align-items: center;
-}
-.centerM .group-wrap .one-card .card-content-wrap .card-btn-wrap .card-second-btn {
-  margin-top: 1.6vw;
-}
+  // display: flex;
+  // flex-direction: column;
+  padding: 17px 0;
+  .headline {
+    margin-bottom: 8px;
+  }
+  .subtitle {
+    margin-bottom: 36px;
+  }
+  .group-wrap .one-card .card-btn-wrap {
+    .card-first-btn, .card-second-btn {
+      width: fit-content;
+    }
+  }
+
+  .btn-wrap {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+
+    .first-btn {
+      margin-top: 36px;
+    }
+    .second-btn {
+      margin-top: 36px;
+      margin-left: 12px;
+    }
+  }
+}
+.normal1 {
+  .group-wrap {
+    padding: 0 15px;
+    width: 100%;
+    .one-card {
+      display: flex;
+      align-items: stretch;
+      padding: 18px;
+      margin-bottom: 8px;
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+      .card-image-wrap {
+        flex-shrink: 0;
+        margin-right: 12px;
+      }
+      .card-content-wrap {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .card-title {
+          margin-bottom: 6px;
+          text-align: left !important;
+        }
+        .card-text {
+          margin-bottom: 12px;
+          text-align: left !important;
+        }
+        .card-btn-wrap {
+          display: flex;
+          .card-second-btn {
+            margin-left: 12px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.normal2 {
+  .group-wrap {
+    width: 100%;
+    padding: 0 15px;
+    .one-card {
+      width: 100%;
+      padding: 20px 16px;
+      margin-bottom: 36px;
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+      .card-image-wrap {
+        .card-image {
+          width: fit-content;
+          margin: 0 auto;
+        }
+      }
+      .card-content-wrap {
+        .card-title {
+          margin-bottom: 8px;
+        }
+        .card-text {
+          margin-bottom: 16px;
+        }
+        .card-btn-wrap {
+          display: flex;
+          .card-second-btn {
+            margin-left: 12px;
+          }
+        }
+      }
+    }
+  }
+}
+.normal3 {
+  .group-wrap {
+    display: flex;
+    // margin-bottom: 36px;
+    // margin-top: 36px;
+    flex-wrap: wrap;
+    width: 100%;
+    padding: 0 15px;
+
+    .one-card {
+      display: flex;
+      flex-direction: column;
+      .card-image-wrap {
+        width: 100%;
+        .card-image {
+          // max-height: 107px;
+          width: fit-content;
+          margin: 0 auto 7px;
+        }
+      }
+
+      .card-title {
+        margin-bottom: 4px;
+      }
+
+      .card-text {
+        margin-bottom: 7px;
+      }
+      .card-btn-wrap {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .card-first-btn, .card-second-btn {
+        margin-bottom: 8px;
+      }
+    }
+    .card-margin-bottom {
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.outsideM {
+  .group-wrap {
+    padding: 0 15px;
+    width: 100%;
+    .one-card {
+      margin-top: 35px;
+      position: relative;
+      padding: 30px 10px 20px 36px;
+      .card-image-wrap  {
+        position: absolute;
+        left: 18px;
+        top: 0;
+        transform: translateY(-50%);
+      }
+      .card-content-wrap {
+        .card-title {
+          margin-bottom: 4px;
+          text-align: left !important;
+        }
+        .card-text {
+          margin-bottom: 12px;
+          text-align: left !important;
+        }
+        .card-btn-wrap {
+          display: flex;
+          .card-second-btn {
+            margin-left: 12px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.centerM {
+  .group-wrap {
+    position: relative;
+    width: 100%;
+    &::before {
+      content: '';
+      position: absolute;
+      width: 1px;
+      height: 100%;
+      border-right: 1px dashed #D2D9E5;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    .one-card {
+      width: calc((100% - 1px)/2);
+      position: relative;
+      padding: 0 14px 16px;
+      &::before {
+        content: '';
+        position: absolute;
+        border-radius: 50%;
+        background: #2F54EB;
+        width: 10px;
+        height: 10px;
+        z-index: 10;
+        border: 2px solid #CCE3FF;
+      }
+      // &::before {
+      //   opacity: 0.2;
+      //   width: 10px;
+      //   height: 10px;
+      // }
+      &:nth-of-type(2n-1) {
+        left: 0;
+        &::before {
+          right: -5px;
+          top: 5px;
+        }
+        // &::after {
+        //   right: -3px;
+        //   top: 7px;
+        // }
+        .card-content-wrap {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
+          .card-title, .card-text {
+            text-align: right !important;
+          }
+          .image-subtext-wrap {
+            flex-direction: row-reverse;
+            .card-image-wrap {
+              margin-left: 8px;
+            }
+            // .card-text {
+            //   .m-meta-text {
+            //     text-align: right !important;
+            //   }
+            // }
+          }
+          .card-btn-wrap {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+          }
+        }
+      }
+      &:nth-of-type(2n) {
+        left: 50%;
+        &::before {
+          left: -5px;
+          top: 5px;
+        }
+        // &::after {
+        //   left: -3px;
+        //   top: 7px;
+        // }
+        .card-content-wrap {
+          .card-title, .card-text {
+            text-align: left !important;
+          }
+          .image-subtext-wrap {
+            .card-image-wrap {
+              margin-right: 8px;
+            }
+            // .card-text {
+            //   .m-meta-text {
+            //     text-align: left !important;
+            //   }
+            // }
+          }
+        }
+      }
+      .card-content-wrap {
+        .card-title {
+          margin-bottom: 10px;
+        }
+        .image-subtext-wrap {
+          display: flex;
+          margin-bottom: 20px;
+          align-items: center;
+        }
+        .card-btn-wrap {
+          .card-second-btn {
+            margin-top: 12px;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,25 +1,29 @@
 .video-layout1-wrap {
   display: flex;
   flex-direction: column;
-}
-.video-layout1-wrap .video-item-wrap {
-  height: 28.267vw;
-  position: relative;
-  margin-bottom: 1.333vw;
-}
-.video-layout1-wrap .video-item-wrap:last-child {
-  margin-bottom: 0;
-}
-.video-layout1-wrap .video-item-wrap .play-btn {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 8.667vw;
-  height: 8.667vw;
-  z-index: 1;
-}
-.video-layout1-wrap .video-item-wrap .play-btn img {
-  width: 100%;
-  height: 100%;
-}
+
+  .video-item-wrap {
+    height: 212px;
+    position: relative;
+    margin-bottom: 10px;
+
+    &:last-child{
+      margin-bottom: 0;
+    }
+
+    .play-btn {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 65px;
+      height: 65px;
+      z-index: 1;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}

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

@@ -2,40 +2,47 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  padding-bottom: 2.133vw;
-}
-.video-layout2-wrap .slider-wrap {
-  width: 100%;
-  overflow: hidden;
-}
-.video-layout2-wrap .slider-wrap .slider-list-wrap {
-  display: flex;
-  transform: translateX(-100%);
-  transition: all 0.3s linear;
-}
-.video-layout2-wrap .slider-wrap .slider-list-wrap.noAnimation {
-  animation: none;
-}
-.video-layout2-wrap .slider-wrap .video-item-wrap {
-  height: 28.267vw;
-  position: relative;
-  margin-bottom: 1.333vw;
-  width: 100%;
-  flex-shrink: 0;
-}
-.video-layout2-wrap .slider-wrap .video-item-wrap:last-child {
-  margin-bottom: 0;
-}
-.video-layout2-wrap .slider-wrap .video-item-wrap .play-btn {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 8.667vw;
-  height: 8.667vw;
-  z-index: 1;
-}
-.video-layout2-wrap .slider-wrap .video-item-wrap .play-btn img {
-  width: 100%;
-  height: 100%;
-}
+  padding-bottom: 16px;
+
+  .slider-wrap {
+    width: 100%;
+    overflow: hidden;
+
+    .slider-list-wrap {
+      display: flex;
+      transform: translateX(-100%);
+      transition: all .3s linear;
+
+      &.noAnimation {
+        animation: none;
+      }
+    }
+
+    .video-item-wrap {
+      height: 212px;
+      position: relative;
+      margin-bottom: 10px;
+      width: 100%;
+      flex-shrink: 0;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .play-btn {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 65px;
+        height: 65px;
+        z-index: 1;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}