@fonixtree/magic-design 2.0.216 → 2.0.221

package/es/common/Button/index.less

@@ -0,0 +1,72 @@
+.common_btn_wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  padding: 12px 24px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-family: 'Open Sans';
+  font-weight: 600;
+  font-size: 16px;
+
+  &.default {
+    background: #F5F6F7;
+    color: #232F46;
+    &:hover {
+      background-color: #EDF0F4;
+    }
+  }
+  
+  &.primary {
+    background-color: #2F54EB;
+    color: #FFFFFF;
+    &:hover {
+      background-color: #1D39C4;
+    }
+  }
+  
+  &.light {
+    background-color: #E9F0FF;
+    color: #2F54EB;
+    &:hover {
+      background-color: #D6E4FF;
+    }
+  }
+  
+  &.icon_btn {
+    background-color: #F5F6F7;
+    color: #232F46;
+    padding: 14px;
+    &:hover {
+      background-color: #EDF0F4;
+    }
+  }
+  
+  &.text {
+    color: #2F54EB;
+    font-weight: 400;
+  }
+  
+  &.disabled {
+    background-color: #EDF0F4;
+    color: #8493AF;
+    cursor:not-allowed;
+    &:hover {
+      background-color: #EDF0F4 !important;
+    }
+  }
+  
+  &.large {
+    height: 56px;
+  }
+
+  &.small {
+    height: 40px;
+    padding: 9px 18px;
+  }
+}
+
+.common_btn_wrap + .common_btn_wrap {
+  margin-left: 12px;
+}

package/es/common/ButtonIconLayout/index.js

@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _locale = require("../../locale");
 
+require("./index.less");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {

package/es/common/ButtonIconLayout/index.less

@@ -0,0 +1,55 @@
+.m-button-icon-layout {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  .item-wrap {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 94px;
+    min-height: 50px;
+    padding: 6px 10px;
+    box-sizing: border-box;
+    background: #FFFFFF;
+    border: 1px solid #D2D9E5;
+    border-radius: 8px;
+    margin-right: 12px;
+    margin-bottom: 12px;
+    cursor: pointer;
+
+    // &:nth-child(3) {
+    //   margin-right: 0;
+    // }
+
+    &.active {
+      border: 2px solid #2F54EB;
+      color: #232F46;
+    }
+
+    &.vertical {
+      flex-direction: column;
+
+      .el:first-child {
+        margin-right: 0;
+      }
+    }
+
+    .el:first-child {
+      margin-right: 8px;
+    }
+
+    .text {
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      color: #232F46;
+    }
+
+    img {
+      height: 20px;
+    }
+  }
+
+}

package/es/common/CardCarousel/index.js

@@ -15,6 +15,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _commonUtil = require("../../utils/commonUtil");
 
+require("./index.less");
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/es/common/CardCarousel/index.less

@@ -0,0 +1,28 @@
+.cardCarousel {
+  width: 100%;
+  margin: 0 auto;
+
+  .content {
+
+    .cardItem {
+      width: 100%;
+      border-radius: 10px;
+      background-color: #fff;
+      position: absolute;
+
+      &.active {
+        transition: transform 0.3s;
+      }
+
+    }
+  }
+
+  .btn-left,
+  .btn-right {
+    width: 120px;
+    height: 40px;
+    background-color: #fff;
+    color: #000;
+    margin: 10px;
+  }
+}

package/es/common/Carousel/index.js

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

package/es/common/Collapse/index.js

@@ -17,6 +17,8 @@ var _RcCollapse = _interopRequireWildcard(require("../RcCollapse"));
 
 var _Iconfont = _interopRequireDefault(require("../Iconfont"));
 
+require("./index.less");
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/es/common/Collapse/index.less

@@ -0,0 +1,100 @@
+.collapse_wrap {
+  .rc-collapse-extra{
+    display: flex;
+  }
+  .rc-collapse {
+    .rc-collapse-item {
+      border-bottom: 1px solid #EDF0F4;
+      .rc-collapse-header {
+        padding: 0 5px;
+        margin: 0 -5px;
+        align-items:center;
+        .rc-collapse-header-text {
+          flex-grow: 1;
+        }
+        &.rc-collapse-header-hover {
+          background: #E9F0FF;
+        }
+      }
+      .rc-collapse-content {
+        .rc-collapse-content-box {
+          padding: 0;
+        }
+      }
+    }
+    .header_wrap {
+      padding: 20px 0;
+      position: relative;
+      color: #232F46;
+      font-family: 'Open Sans';
+      font-style: normal;
+      box-sizing: content-box;
+    }
+  }
+  &.bold_divider {
+    .rc-collapse {
+      .rc-collapse-item {
+        border-bottom: 6px solid #EDF0F4;
+        border-radius: 2px;
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+  &.solid_divider{
+    .rc-collapse {
+      .rc-collapse-item {
+        border-bottom: 1px solid #EDF0F4;
+        border-radius: 0px;
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+  &.dashed_divider{
+    .rc-collapse {
+      .rc-collapse-item {
+        border-bottom: 1px dashed #D2D9E5;
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+
+  &.large_header {
+    .header_wrap {
+      font-size: 18px !important;
+      line-height: 26px !important;
+      height: 26px !important;
+      font-weight: 700 !important;
+    }
+  }
+  &.middle_header {
+    .header_wrap{
+      font-size: 16px !important;
+      line-height: 24px !important;
+      height: 24px !important;
+      font-weight: 600 !important;
+    }
+    
+  }
+  &.small_header {
+    .header_wrap {
+      font-size: 14px !important;
+      line-height: 22px !important;
+      height: 22px !important;
+      font-weight: 700 !important;
+    }
+  }
+  &.default_header {
+    .header_wrap {
+      font-size: 16px;
+      line-height: 24px;
+      height: 24px;
+      font-weight: 600;
+    }
+  }
+}

package/es/common/ColorPicker/index.js

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

package/es/common/ColorPicker/index.less

@@ -0,0 +1,26 @@
+.m-color-picker-panel {
+  z-index: 999;
+  position: absolute;
+
+  .panel-bg {
+    position: fixed;
+    z-index: 0;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .sketch-picker {
+    .flexbox-fix:last-child {
+      >div>span>div {
+        border-radius: 50px !important;
+      }
+
+      div[title="rgba(255,255,255,0)"] {
+        background: url('./imgs/no-color.png') !important;
+        background-size: 100% !important;
+      }
+    }
+  }
+}

package/es/common/ColorPickerInput/index.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+require("./index.less");
+
 var _locale = require("../../locale");
 
 var _ColorPicker = _interopRequireDefault(require("../ColorPicker"));

package/es/common/ColorPickerInput/index.less

@@ -0,0 +1,52 @@
+.m-color-picker-input {
+  position: relative;
+
+  .input-color {
+    height: 60px;
+    background: #FFFFFF;
+    border: 1px solid #D2D9E5;
+    border-radius: 8px;
+    padding: 12px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .color-icon {
+      display: inline-block;
+      width: 36px;
+      height: 36px;
+      background-color: #000;
+      border-radius: 50px;
+      border: 1px solid #EDF0F4;
+
+      &.transparent {
+        background: url('./imgs/code.png') !important;
+      }
+    }
+
+    .color-value {
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 600;
+      font-size: 16px;
+      color: #232F46;
+      margin-left: 12px;
+    }
+  }
+
+  &.dot {
+    .input-color {
+      border: none;
+      border-radius: 8px;
+
+      .color-icon {
+        border-radius: 8px;
+      }
+    }
+
+    .color-value {
+      display: none;
+    }
+  }
+
+}

package/es/common/CountDown/index.js

@@ -13,6 +13,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _commonUtil = require("../../utils/commonUtil");
 
+require("./index.less");
+
 var _Iconfont = _interopRequireDefault(require("../Iconfont"));
 
 var _coreUtil = require("../../utils/coreUtil");

package/es/common/CountDown/index.less

@@ -0,0 +1,56 @@
+.count-down-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Montserrat';
+  gap: 4px;
+
+  .num {
+    background: #CC1D20;
+    border-radius: 4px;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 12px;
+    color: #FFFFFF;
+    height: 16px;
+    line-height: 17px;
+    width: 24px;
+    text-align: center;
+  }
+
+  .pots {
+    display: none;
+  }
+
+  &.pc {
+    background-color: #F9CA1C;
+    border-radius: 20px;
+    padding: 0 12px;
+    gap: 2px;
+
+    .icon_time {
+      margin-right: 2px;
+    }
+
+    .num {
+      background: none;
+      font-style: normal;
+      font-weight: 700;
+      font-size: 20px;
+      color: #000;
+      height: 36px;
+      line-height: 38px;
+    }
+
+    .pots {
+      display: inline-block;
+      font-style: normal;
+      font-weight: 700;
+      font-size: 20px;
+      color: #000;
+      height: 36px;
+      line-height: 35px;
+      margin-left: 3px;
+    }
+  }
+}

package/es/common/CropperModal/index.js

@@ -11,6 +11,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactCropper = _interopRequireDefault(require("react-cropper"));
 
+require("cropperjs/dist/cropper.css");
+
+require("./index.less");
+
 var _locale = require("../../locale");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/es/common/CropperModal/index.less

@@ -0,0 +1,29 @@
+.cropperModalWrap {
+  background: #000;
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .btnWrap {
+    span {
+      color: #fff;
+      font-size: 18px;
+      position: absolute;
+      bottom: 10px;
+
+      &:first-child {
+        left: 12px;
+      }
+
+      &:last-child {
+        right: 12px;
+      }
+    }
+  }
+}

package/es/common/Field/index.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+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/es/common/Field/index.less

@@ -0,0 +1,46 @@
+.m-field {
+  margin-bottom: 20px;
+
+  &.topSplit {
+    border-top: 1px dashed #D2D9E5;
+    padding-top: 16px;
+  }
+
+  &.split {
+    border-bottom: 1px dashed #D2D9E5;
+    padding-bottom: 16px;
+
+    &.bold {
+      border-bottom: 8px solid #EDF0F4;
+      border-radius: 2px;
+    }
+
+    &.solid {
+      border-bottom: 1px solid #D2D9E5;
+    }
+  }
+
+  .field-item {
+    display: flex;
+    flex-direction: column;
+
+    &.horizontal {
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+
+      .field-title {
+        margin-bottom: 0;
+      }
+    }
+
+    .field-title {
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 600;
+      font-size: 16px;
+      color: #232F46;
+      margin-bottom: 12px;
+    }
+  }
+}

package/es/common/FontStyles/index.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+require("./index.less");
+
 var _ColorPicker = _interopRequireDefault(require("../ColorPicker"));
 
 var _Iconfont = _interopRequireDefault(require("../Iconfont"));

package/es/common/FontStyles/index.less

@@ -0,0 +1,62 @@
+.m-font-styles {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  .item {
+    min-width: 40px;
+    height: 40px;
+    line-height: 45px;
+    text-align: center;
+    background: #fff;
+    border-radius: 6px;
+    margin-right: 12px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    &.active {
+      background: #E9F0FF;
+    }
+
+    .text-color-line {
+      display: block;
+      width: 15px;
+      height: 3px;
+      margin-top: -1px;
+      border-radius: 50px;
+      background-color: #000;
+    }
+  }
+
+  .item-text-align {
+    flex-direction: row;
+    padding: 0 9px;
+    margin-right: 0;
+    cursor: default;
+    flex: 0 0 95px;
+
+    .item-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 22px;
+      height: 22px;
+      background-color: transparent;
+      margin-right: 5px;
+      cursor: pointer;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      &.active {
+        background: #FFFFFF;
+        box-shadow: -1px -1px 4px rgba(45, 48, 64, 0.08), 1px 1px 4px rgba(45, 48, 64, 0.08);
+        border-radius: 4px;
+      }
+    }
+  }
+}

package/es/common/GroupList/index.js

@@ -15,6 +15,8 @@ var _Iconfont = _interopRequireDefault(require("../Iconfont"));
 
 var _commonUtil = require("../../utils/commonUtil");
 
+require("./index.less");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {