@fonixtree/magic-design 2.0.216 → 2.0.221

package/es/common/MyModal/index.less

@@ -0,0 +1,82 @@
+.tip-modal-wrap {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+
+  .tip-background {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+
+  .tip-content {
+    border-radius: 16px 16px 0px 0px;
+    background-color: #fff;
+    padding: 0 12px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    transition: all 0.3s;
+    // transform: translateY(100%);
+
+    .content-head {
+      text-align: center;
+      color: #323233;
+      font-family: Open Sans;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+      letter-spacing: 0px;
+      position: relative;
+      padding: 10px 0;
+
+      // margin-bottom: 20px;
+      .close-icon {
+        position: absolute;
+        right: 16px;
+        top: 10px;
+      }
+    }
+
+    .content-body {
+      width: 100%;
+      margin-bottom: 5px;
+      max-height: 500px;
+      overflow-y: auto;
+
+      &>img {
+        width: 100%;
+        // max-width: 300px;
+        height: fit-content;
+      }
+    }
+
+    .close-wrap {
+      margin: 6px 2px;
+
+      .close-btn {
+        border-radius: 4px;
+        background-color: #E65427;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        text-align: center;
+        padding: 8px 0;
+        color: #fff;
+        flex: 1;
+
+        &:nth-of-type(2) {
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+
+  .scroll-animation {
+    transform: translateY(0);
+  }
+}

package/es/common/NewImg/index.js

@@ -76,7 +76,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 
-//
+// import './index.less';
 var Image =
 /** @class */
 function (_super) {

package/es/common/PopUpModal/index.js

@@ -13,6 +13,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+require("./index.less");
+
 var _coreUtil = require("../../utils/coreUtil");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/es/common/PopUpModal/index.less

@@ -0,0 +1,93 @@
+.popUpModal {
+  display: flex;
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  flex-direction: column;
+  width: 100%;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateZ(1000px);
+
+  .modal-shadow {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .5);
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: -1;
+  }
+
+  .modal-content {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    padding: 20px;
+    padding-top: 0;
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    box-shadow: 0px 4px 8px rgba(96, 97, 112, 0.16);
+    animation: all .5s linear;
+    margin-top: -80px;
+    padding-bottom: 80px;
+    border-radius: 10px 10px 0 0;
+
+    .topLineWrap {
+      text-align: center;
+      margin-bottom: 15px;
+
+      .topLine {
+        display: inline-block;
+        width: 42px;
+        height: 4px;
+        background: #e9e9e9;
+        border-radius: 2px;
+      }
+    }
+
+    .modal-title {
+      color: #000;
+      font-size: 16px;
+      font-weight: 600;
+      text-align: center;
+    }
+
+    .modal-icon-close {
+      position: absolute;
+      right: 20px;
+      top: 20px;
+    }
+
+    .modal-message {
+      margin: 20px 10px;
+      overflow-y: scroll;
+      height: calc(100% - 64px);
+      color: rgb(0, 0, 0);
+      text-align: center;
+    }
+
+    .message-max-height {
+      height: calc(100% - 114px);
+    }
+
+    .modal-btn-wrap {
+      display: flex;
+      flex-direction: column;
+
+
+      .confirm {
+        margin: 10px 0;
+      }
+    }
+  }
+}

package/es/common/ProductCardModal/index.js

@@ -15,6 +15,8 @@ var _dotIcon = _interopRequireDefault(require("./imgs/dot-icon.png"));
 
 var _Iconfont = _interopRequireDefault(require("../Iconfont"));
 
+require("./index.less");
+
 var _coreUtil = require("../../utils/coreUtil");
 
 var _commonUtil = require("../../utils/commonUtil");

package/es/common/ProductCardModal/index.less

@@ -0,0 +1,131 @@
+.productCardModalWrap {
+  background: rgba(0, 0, 0, 0.9);
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .content {
+    position: relative;
+    width: 50%;
+
+    .card {
+      transform-origin: bottom;
+      inset: 0;
+      width: 100%;
+      height: fit-content;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      cursor: pointer;
+
+      .cardLeft {
+        width: 50%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 2;
+      }
+
+      .cardRight {
+        width: 50%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 2;
+      }
+
+      .bgImg {
+        display: block;
+        width: 100%;
+        height: auto;
+        border-radius: 1.5rem;
+        -o-object-position: center;
+        object-position: center;
+        -o-object-fit: cover;
+        object-fit: cover;
+      }
+
+      .closIcon {
+        position: absolute;
+        top: 5%;
+        right: 5%;
+        cursor: pointer;
+        z-index: 3;
+      }
+
+      .dotIcon {
+        width: 28px;
+        position: absolute;
+        bottom: 25px;
+        left: 0;
+        right: 0;
+        margin: auto;
+      }
+
+      .text {
+        position: absolute;
+        top: 20%;
+        right: 10%;
+        width: 35%;
+        height: 42%;
+        overflow-y: auto;
+
+        p {
+          min-height: 1em;
+        }
+      }
+
+      .btnApply {
+        color: #fff;
+        background-color: #CE1126;
+        font-weight: 700;
+        font-size: .3rem;
+        width: fit-content;
+        padding: 10px 24px;
+        border-radius: 100px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        position: absolute;
+        bottom: 25%;
+        left: 55%;
+        z-index: 3;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .iconLeft {
+    transform: rotate(90deg);
+    cursor: pointer;
+    position: absolute;
+    left: 20%;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    align-self: center;
+  }
+
+  .iconRight {
+    transform: rotate(-90deg);
+    cursor: pointer;
+    position: absolute;
+    right: 20%;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    align-self: center;
+  }
+}

package/es/common/ProductFilterModal/components/FilterSearchModal/index.js

@@ -21,6 +21,8 @@ var _Button = _interopRequireDefault(require("../../../Button"));
 
 var _PopUpModal = _interopRequireDefault(require("../../../PopUpModal"));
 
+require("./index.less");
+
 var _notFound = _interopRequireDefault(require("./imgs/notFound.png"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/es/common/ProductFilterModal/components/FilterSearchModal/index.less

@@ -0,0 +1,144 @@
+.classificationDetailModal {
+  height: calc(80vh - 40px);
+  width: 100%;
+  background-color: #fff;
+  box-sizing: border-box;
+
+  .headerWrap {
+    height: 56px;
+    display: flex;
+    align-items: center;
+
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    text-transform: uppercase;
+    color: #333333;
+
+    .iconBack {
+      margin-right: 10px;
+    }
+
+    .headerTitle {
+      font-weight: 600;
+      font-size: 16px;
+      color: #1B1B1B;
+      width: 100%;
+      text-align: center;
+      padding-right: 20px;
+    }
+  }
+
+  .searchWrap {
+    margin-top: 20px;
+    background: #F6F6F6;
+    border-radius: 4px;
+    padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    input {
+      height: 20px;
+      flex: 1;
+      border: none;
+      outline: none;
+
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      background-color: #F6F6F6;
+    }
+  }
+
+  .contentWrap {
+    background: #ffffff;
+    height: 300px;
+    margin-top: 16px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+
+    .listWrap {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+
+      .notFoundWrap {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        text-align: center;
+        color: #333333;
+        margin: 0 auto;
+      }
+
+      :global {
+        .fxm-tag {
+          min-height: 32px;
+          height: auto;
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          border-radius: 0px;
+          font-weight: 400;
+          text-align: left;
+          margin-top: 0.16rem;
+          margin-right: 0.16rem;
+          border-radius: 4px;
+          background: #ffffff;
+          border: 1px solid #c4c4c4;
+          color: #7b7b7b;
+        }
+
+        .fxm-tag-normal::before {
+          border: none;
+        }
+
+        .fxm-tag-active {
+          color: var(--theme-color);
+          border: 1px solid var(--theme-color);
+        }
+
+        .fxm-tag-active::before {
+          border: none;
+          width: 0;
+          height: 0;
+        }
+      }
+    }
+  }
+
+  .bottomWrap {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 5;
+    background: #fff;
+    height: 78px;
+    padding: 12px;
+
+    .btn-confirm {
+      display: flex;
+      flex: 1 1;
+      height: 54px;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      border: 1px solid #FF8650;
+      background-color: #FF8650;
+      border-radius: 8px;
+      font-weight: 600;
+      font-size: 14px;
+
+      &:hover {
+        background-color: #FF8650;
+      }
+    }
+  }
+
+}

package/es/common/ProductFilterModal/index.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _locale = require("../../locale");
 
+require("./index.less");
+
 var _Tag = _interopRequireDefault(require("../Tag"));
 
 var _PopUpModal = _interopRequireDefault(require("../PopUpModal"));

package/es/common/ProductFilterModal/index.less

@@ -0,0 +1,113 @@
+.productFilterModal {
+  .productFilterWrap {
+    background: #ffffff;
+    height: 60vh;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    box-sizing: border-box;
+
+    .item {
+      margin-top: 20px;
+
+      .inputWrap {
+        margin-top: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .divider {
+          padding: 0 10px;
+          flex-shrink: 0;
+          height: 2px;
+          width: 11px;
+          background-color: #000;
+        }
+
+        input {
+          width: 45%;
+          height: 48px;
+          border: 1px solid #E4E4E4;
+          box-shadow: none;
+          padding: 12px;
+          border-radius: 4px;
+          outline: none;
+        }
+      }
+
+      .title {
+        line-height: 24px;
+        font-size: 16px;
+        font-weight: 600;
+        color: #000;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .accordionContentWrap {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        padding-bottom: 1px;
+
+        .btnMore {
+          font-weight: 600;
+          font-size: 14px;
+          color: #FF8650;
+          margin-top: 6px;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+
+  .bottomWrap {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #fff;
+    width: 100%;
+    height: 78px;
+    padding: 12px 24px;
+    display: flex;
+    gap: 20px;
+    justify-content: space-between;
+
+    .btn-reset {
+      display: flex;
+      flex: 1 1;
+      height: 54px;
+      align-items: center;
+      justify-content: center;
+      color: #FF8650;
+      border: 1px solid #FF8650;
+      background-color: #fff;
+      border-radius: 8px;
+      font-weight: 600;
+      font-size: 14px;
+
+      &:hover {
+        background-color: #fff;
+      }
+    }
+
+    .btn-confirm {
+      display: flex;
+      flex: 1 1;
+      height: 54px;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      border: 1px solid #FF8650;
+      background-color: #FF8650;
+      border-radius: 8px;
+      font-weight: 600;
+      font-size: 14px;
+
+      &:hover {
+        background-color: #FF8650;
+      }
+    }
+  }
+}

package/es/common/ProductModal/SortableImageList/index.js

@@ -13,6 +13,8 @@ var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"))
 
 var _Iconfont = _interopRequireDefault(require("../../Iconfont"));
 
+require("./index.less");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/es/common/ProductModal/SortableImageList/index.less

@@ -0,0 +1,3 @@
+.imgListWrap {
+  display: flex;
+}

package/es/common/ProductModal/index.js

@@ -19,6 +19,8 @@ var _businessUtil = require("../../utils/businessUtil");
 
 var _currencyUtil = require("../../utils/currencyUtil");
 
+require("./index.less");
+
 var _locale = require("../../locale");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }