@fonixtree/magic-design 2.0.216 → 2.0.221

package/lib/meta-comp/components/Button/index.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+require("./index.less");
+
 var _editable = _interopRequireDefault(require("./editable"));
 
 var _coreUtil = require("../../../utils/coreUtil");

package/lib/meta-comp/components/Button/index.less

@@ -0,0 +1,28 @@
+.m-meta-button {
+  transition: all 0.25s;
+
+  .btnContent {
+    width: 100%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    &.horizontal {
+      flex-direction: row;
+    }
+
+    img {
+      height: 20px;
+
+      &.ml {
+        margin-left: 5px;
+      }
+
+      &.mr {
+        margin-right: 5px;
+      }
+    }
+  }
+}

package/lib/meta-comp/components/Image/index.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+require("./index.less");
+
 var _h5DefRectImg = _interopRequireDefault(require("./image/h5DefRectImg.png"));
 
 var _defaultImg = _interopRequireDefault(require("./image/default-img.png"));

package/lib/meta-comp/components/Image/index.less

@@ -0,0 +1,32 @@
+.m-meta-image {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+
+  // overflow: hidden;
+  &>img {
+    width: 100%;
+    height: 100%;
+    // object-fit: contain;
+    transition: all .2s linear;
+    vertical-align: initial;
+    max-width: 100%;
+    object-fit: contain;
+  }
+
+  &.backgroundImg {
+    &>img {
+      // object-fit: cover;
+      // width: auto;
+      max-width: none;
+    }
+  }
+
+  &.cover {
+    &>img {
+      object-fit: cover;
+    }
+  }
+}

package/lib/meta-comp/components/Text/index.js

@@ -33,6 +33,8 @@ var _commonUtil = require("../../../utils/commonUtil");
 
 var _mobx = require("../../../mobx");
 
+require("./index.less");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

package/lib/meta-comp/components/Text/index.less

@@ -0,0 +1,112 @@
+.editor-shadow {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0);
+  z-index: 2;
+}
+
+.quill-text-content-wrap {
+  position: relative;
+  z-index: 3;
+
+  .ql-font-Montserrat {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+  }
+
+  .ql-font-MontserratBold {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 600;
+  }
+
+  .ql-font-OpenSans {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+  }
+
+  .ql-font-OpenSansBold {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 600;
+  }
+
+  .ql-align-center {
+    text-align: center;
+  }
+
+  .ql-align-right {
+    text-align: right;
+  }
+}
+
+.ql-clipboard {
+  left: -100000px;
+  height: 1px;
+  overflow-y: hidden;
+  position: absolute;
+  top: 50%;
+}
+
+.m-meta-text {
+  display: block;
+
+  &.cursor {
+    cursor: pointer;
+  }
+
+  ol,
+  ul,
+  dl,
+  p {
+    margin-bottom: 0;
+  }
+
+
+
+  .select-container {
+    position: relative;
+
+    .close-wrap {
+      user-select: none;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border: 1px dashed rgb(204, 204, 204);
+
+      .magic-box-iconfont {
+        position: absolute;
+        top: 0;
+        right: 0;
+        font-size: 21px;
+        transform: translate(50%, -50%);
+        color: rgb(255, 255, 255);
+        text-shadow: 1px 1px 4px #000;
+
+        &:hover {
+          color: rgb(244, 104, 104);
+          cursor: pointer;
+        }
+      }
+    }
+
+    // &.selected {
+    //   .close-wrap {
+    //     display: inline;
+    //   }
+    // }
+  }
+}
+
+.one_row .m-meta-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/lib/meta-comp/config-panels/ButtonConfig/BorderRadiusInput/index.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+require("./index.less");
+
 var _antd = require("antd4");
 
 var _common = require("../../../../common");

package/lib/meta-comp/config-panels/ButtonConfig/BorderRadiusInput/index.less

@@ -0,0 +1,81 @@
+.m-border-radius-input {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .input {
+    height: 48px;
+    width: 83%;
+    background: #FFFFFF;
+    border: 1px solid #D2D9E5;
+    border-radius: 8px;
+    padding: 8px 16px;
+    align-items: center;
+
+    .value {
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      color: #232F46;
+      margin-left: 10px;
+    }
+  }
+
+  .m-icon-corner {
+    cursor: pointer;
+    display: inline-block;
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+    padding: 2px;
+    background-color: transparent;
+
+    &.active {
+      background-color: #ddd;
+    }
+  }
+}
+
+.m-border-radius-dropdown {
+
+  .cylon-dropdown-menu {
+    display: flex;
+    flex-wrap: wrap;
+
+    .cylon-dropdown-menu-item-active {
+      background-color: transparent;
+      color: #232F46 !important;
+    }
+
+    li {
+      width: 50%;
+
+      .cylon-dropdown-menu-title-content {
+        display: flex;
+
+        .border-radius-rotate2 {
+          transform: rotate(90deg);
+        }
+
+        .border-radius-rotate3 {
+          transform: rotate(270deg);
+        }
+
+        .border-radius-rotate4 {
+          transform: rotate(180deg);
+        }
+
+        input {
+          width: 80%;
+          outline: none;
+          border: 1px solid #D2D9E5;
+          padding: 4px 8px;
+          border-radius: 8px;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+
+}

package/lib/meta-comp/config-panels/ButtonConfig/index.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _antd = require("antd4");
 
+require("./index.less");
+
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
 var _BorderRadiusInput = _interopRequireDefault(require("./BorderRadiusInput"));

package/lib/meta-comp/config-panels/ButtonConfig/index.less

@@ -0,0 +1,4 @@
+.m-button-config {
+  padding: 0 12px;
+  background-color: #F5F6F7;
+}

package/lib/meta-comp/config-panels/ImageConfig/AreaConfigModal/index.js

@@ -13,6 +13,8 @@ var _antd = require("antd4");
 
 var _common = require("../../../../common");
 
+require("./index.less");
+
 var _locale = require("../../../../locale");
 
 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/lib/meta-comp/config-panels/ImageConfig/AreaConfigModal/index.less

@@ -0,0 +1,26 @@
+
+.body_wrap {
+  display: flex;
+
+  .area_config_wrap {
+    margin-left: 23px;
+    width: 259px;
+    max-height: 480px;
+    padding-right: 10px;
+    .list_wrap {
+      height: calc(100% - 30px);
+      overflow: auto;
+      .add_item {
+        margin-top: 18px;
+      }
+    }
+
+    .btn_wrap {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      color: #2F54EB;
+      margin-top: 10px;
+    }
+  }
+}

package/lib/meta-comp/config-panels/ImageConfig/HotAreaConfig/index.js

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+require("./index.less");
+
 var _antd = require("antd4");
 
 var _coreUtil = require("../../../../utils/coreUtil");

package/lib/meta-comp/config-panels/ImageConfig/HotAreaConfig/index.less

@@ -0,0 +1,17 @@
+
+.hot_area_wrap {
+  border-bottom: 1px dashed #D2D9E5;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  .area_wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 14px;
+    color: #232F46;
+  }
+}
+

package/lib/meta-comp/config-panels/ImageConfig/index.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _antd = require("antd4");
 
+require("./index.less");
+
 var _uuid = require("uuid");
 
 var _HotAreaConfig = _interopRequireDefault(require("./HotAreaConfig"));

package/lib/meta-comp/config-panels/ImageConfig/index.less

@@ -0,0 +1,16 @@
+.m-image-config {
+  padding: 0 12px 1px;
+  background-color: #F5F6F7;
+
+  // .hoverSelect {
+  //   .cylon-select-selector {
+  //     border: 1px solid #D2D9E5;
+  //     border-radius: 8px;
+  //     padding: 0 16px;
+  //     height: auto;
+  //     font-family: 'Open Sans';
+  //     line-height: 48px;
+  //     color: #232F46;
+  //   }
+  // }
+}

package/lib/meta-comp/config-panels/PlayIconConfig/index.js

@@ -11,6 +11,8 @@ var _antd = require("antd4");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+require("./index.less");
+
 var _PlaySvg = _interopRequireDefault(require("./PlaySvg"));
 
 var _BaseConfig = _interopRequireDefault(require("../BaseConfig"));

package/lib/meta-comp/config-panels/PlayIconConfig/index.less

@@ -0,0 +1,39 @@
+.play-config {
+  padding: 12px;
+  background-color: #F5F6F7;
+  border-radius: 6px;
+  .icon-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    .icon-item-wrap {
+      margin-right: 12px;
+      border-radius: 4px;
+      background-color: #D2D9E5;
+      padding: 4px;
+      line-height: 1;
+      border: 1px solid transparent;
+      min-height: 34px;
+      .selected-icon {
+        display: none;
+      }
+    }
+    .icon-selected-wrap {
+      border-color: #00AC5A;
+      position: relative;
+      .selected-icon {
+        position: absolute;
+        display: block;
+        top: -7px;
+        right: -7px;
+        background-color: #00AC5A;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}

package/lib/meta-comp/config-panels/TextConfig/TextEditModal/index.js

@@ -9,8 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactQuill = _interopRequireDefault(require("react-quill"));
 
+require("react-quill/dist/quill.snow.css");
+
 var _antd = require("antd4");
 
+require("./index.less");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {

package/lib/meta-comp/config-panels/TextConfig/TextEditModal/index.less

@@ -0,0 +1,25 @@
+.text-label-content {
+  background-color: #f5f6f7;
+
+  .label-wrap {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .label-item {
+      padding: 5px 11px;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 5px;
+      background-color: #fff;
+      margin: 8px;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #f6f6f7;
+      }
+    }
+  }
+}

package/lib/meta-comp/config-panels/TextConfig/TextLabel/index.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _coreUtil = require("../../../../utils/coreUtil");
 
+require("./index.less");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {

package/lib/meta-comp/config-panels/TextConfig/TextLabel/index.less

@@ -0,0 +1,25 @@
+.text-label-content {
+  background-color: #f5f6f7;
+
+  .label-wrap {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .label-item {
+      padding: 5px 11px;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 5px;
+      background-color: #fff;
+      margin: 8px;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #f6f6f7;
+      }
+    }
+  }
+}

package/lib/meta-comp/config-panels/TextConfig/UnderlineSelect/index.js

@@ -9,6 +9,8 @@ var _antd = require("antd4");
 
 var _react = _interopRequireDefault(require("react"));
 
+require("./index.less");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

package/lib/meta-comp/config-panels/TextConfig/UnderlineSelect/index.less

@@ -0,0 +1,26 @@
+.underline-select-wrap {
+  .line-config {
+    text-decoration-line: line-through;
+    text-decoration-color: #000;
+    font-size: 14px;
+    font-weight: 600;
+
+    &.line-solid {
+      text-decoration-style: solid;
+    }
+
+    &.dashed-line {
+      text-decoration-style: dashed;
+    }
+
+    &.double-line {
+      text-decoration-style: double;
+    }
+
+    &.wavy-line {
+      text-decoration-style: wavy;
+    }
+  }
+
+
+}

package/lib/meta-comp/config-panels/TextConfig/index.js

@@ -29,6 +29,8 @@ var _constants = require("../../../constants");
 
 var _BaseConfig = _interopRequireDefault(require("../BaseConfig"));
 
+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/lib/meta-comp/config-panels/TextConfig/index.less

@@ -0,0 +1,56 @@
+.m-text-config {
+  display: flex;
+  flex-direction: column;
+  padding: 0 12px;
+  padding-top: 12px;
+  background-color: #F5F6F7;
+  border-radius: 6px;
+
+  .text-input {
+    margin-top: 20px;
+    margin-bottom: 0;
+    padding-bottom: 24px;
+    border-color: #EDF0F4 !important;
+  }
+
+  .edit-input {
+    width: 100%;
+    height: 36px;
+    line-height: 36px;
+    padding: 0 11px;
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 14px;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    white-space: nowrap;
+    overflow-x: auto;
+
+    &:hover {
+      border-color: #40a9ff;
+      border-right-width: 1px;
+    }
+
+    &:focus {
+      border-color: #40a9ff;
+      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+      border-right-width: 1px;
+      outline: 0;
+    }
+  }
+
+  .edit-text-btn {
+    margin: 8px auto;
+    padding: 6px 16px;
+    background-color: #2e54eb;
+    color: #fff;
+    font-size: 14px;
+    border-radius: 8px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #0837f4;
+    }
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "2.0.216",
+  "version": "2.0.221",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",

package/es/assets/less/button.css

@@ -1,36 +0,0 @@
-.cylon-btn {
-  height: 0.72rem !important;
-  border-radius: 0.08rem !important;
-}
-.cylon-btn.cylon-btn-sm {
-  height: 0.64rem !important;
-}
-.cylon-btn.cylon-btn-primary {
-  background-color: #2F54EB !important;
-  border-color: #2F54EB !important;
-}
-.cylon-btn.cylon-btn-primary:hover {
-  background-color: #1D39C4 !important;
-  border-color: #1D39C4 !important;
-}
-.cylon-btn.cylon-btn-default:hover {
-  border-color: #1D39C4 !important;
-  color: #1D39C4 !important;
-}
-.cylon-btn.cylon-btn-light {
-  border: none;
-  background-color: #E9F0FF;
-  color: #2F54EB;
-}
-.cylon-btn.cylon-btn-light:hover {
-  background-color: #D6E4FF;
-  color: #2F54EB;
-}
-.cylon-btn[disabled],
-.cylon-btn[disabled]:hover,
-.cylon-btn[disabled]:focus,
-.cylon-btn[disabled]:active {
-  color: rgba(0, 0, 0, 0.25) !important;
-  border-color: #d9d9d9 !important;
-  background: #f5f5f5 !important;
-}