@zat-design/sisyphus-react 3.14.0-beta.1 → 4.0.0-beta.10

package/lib/ProTreeModal/style/index.less

@@ -1,8 +1,6 @@
-@root-entry-name: 'default';
-@import (reference) '~antd/es/style/themes/index.less';
 
 .pro-tree-modal-container .@{ant-prefix}-modal-content .@{ant-prefix}-modal-body {
-  max-height: 498px;
+  max-height: 498px !important;
 }
 
 .pro-tree-modal {
@@ -26,8 +24,16 @@
     flex-direction: row;
     height: 482px;
     margin-bottom: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1));
+    .checked-container {
+      .@{ant-prefix}-btn {
+        &:active {
+          background: transparent;
+        }
+      }
+    }
 
     .@{ant-prefix}-tree-checkbox {
+      align-self: flex-start;
       margin-top: 2px;
     }
 
@@ -238,6 +244,9 @@
 }
 
 .pro-transfer-right {
+  .@{ant-prefix}-checkbox {
+    align-items: flex-start;
+  }
   .checked-item {
     margin: var(--zaui-space-size-sm, 8px) 0;
     &.dragable {

package/lib/ProUpload/components/ButtonRender.js

@@ -5,13 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-require("antd/es/upload/style");
-var _upload = _interopRequireDefault(require("antd/es/upload"));
-require("antd/es/button/style");
-var _button = _interopRequireDefault(require("antd/es/button"));
 var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _antd = require("antd");
 var _core = require("@dnd-kit/core");
 var _sortable = require("@dnd-kit/sortable");
 var _icons = require("@ant-design/icons");
@@ -89,10 +86,10 @@ var ButtonRender = props => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sortable.SortableContext, {
         items: fileList.map(i => i.uid),
         strategy: _sortable.rectSortingStrategy,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_upload.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, buttonUploadProps), {}, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Upload, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, buttonUploadProps), {}, {
           children: !isView && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "pro-upload-button-inner",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, buttonProps), {}, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Button, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, buttonProps), {}, {
               disabled: disabled || isView,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloudUploadOutlined, {}), buttonText]
             })), afterRender ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -105,7 +102,7 @@ var ButtonRender = props => {
       })
     }), extraTipText && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "upload-tip-txt",
-      children: extraTipText
+      children: typeof extraTipText === 'function' ? extraTipText() : extraTipText
     })]
   });
 };

package/lib/ProUpload/components/DragRender.js

@@ -6,9 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-require("antd/es/upload/style");
-var _upload = _interopRequireDefault(require("antd/es/upload"));
 var _react = require("react");
+var _antd = require("antd");
 var _core = require("@dnd-kit/core");
 var _sortable = require("@dnd-kit/sortable");
 var _icons = require("@ant-design/icons");
@@ -16,7 +15,7 @@ var _FileItem = require("./FileItem");
 var _DraggableUploadListItem = require("./DraggableUploadListItem");
 var _locale = _interopRequireDefault(require("../../locale"));
 var _jsxRuntime = require("react/jsx-runtime");
-var Dragger = _upload.default.Dragger;
+var Dragger = _antd.Upload.Dragger;
 var DragRender = props => {
   var _locale$ProUpload3, _locale$ProUpload4, _locale$ProUpload5, _locale$ProUpload6;
   var isView = props.isView,

package/lib/ProUpload/components/FileItem.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { UploadFile } from 'antd/es/upload/interface';
-import '../style/fileItem.less';
 /**
  * @description: b 转成 Kb
  * @param {*} num

package/lib/ProUpload/components/FileItem.js

@@ -5,13 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getFileIcon = exports.getFileExt = exports.bToKb = exports.FileItem = exports.DragSingleFileItem = void 0;
-require("antd/es/progress/style");
-var _progress = _interopRequireDefault(require("antd/es/progress"));
-require("antd/es/popconfirm/style");
-var _popconfirm = _interopRequireDefault(require("antd/es/popconfirm"));
-require("antd/es/button/style");
-var _button = _interopRequireDefault(require("antd/es/button"));
 var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
 var _reactSvg = require("react-svg");
 var _iconPDF = _interopRequireDefault(require("../style/icon-PDF.png"));
 var _iconTXT = _interopRequireDefault(require("../style/icon-TXT.png"));
@@ -21,7 +16,6 @@ var _iconWord = _interopRequireDefault(require("../style/icon-word.png"));
 var _look = _interopRequireDefault(require("../../assets/look.svg"));
 var _delete = _interopRequireDefault(require("../../assets/delete.svg"));
 var _download = _interopRequireDefault(require("../../assets/download.svg"));
-require("../style/fileItem.less");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @description: b 转成 Kb
@@ -52,7 +46,9 @@ exports.getFileExt = getFileExt;
 var getFileIcon = fileExt => {
   if (['.PDF'].includes(fileExt.toLocaleUpperCase())) return _iconPDF.default;
   if (['.TXT', '.JSON'].includes(fileExt.toLocaleUpperCase())) return _iconTXT.default;
-  if (['.PNG', '.JPG', '.JPEG', '.GIF', '.BMP', '.JPE'].includes(fileExt.toLocaleUpperCase())) return _iconPic.default;
+  if (['.PNG', '.JPG', '.JPEG', '.GIF', '.BMP', '.JPE'].includes(fileExt.toLocaleUpperCase())) {
+    return _iconPic.default;
+  }
   if (['.DOC', '.DOCX'].includes(fileExt.toLocaleUpperCase())) return _iconWord.default;
   if (['.XLS', '.XLSX'].includes(fileExt.toLocaleUpperCase())) return _iconExcel.default;
   return _iconTXT.default;
@@ -112,7 +108,7 @@ var FileItem = props => {
         className: "file-actions-wrap",
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "file-actions",
-          children: [_isShowDownloadIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+          children: [_isShowDownloadIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
             type: "link",
             className: "file-action-item",
             onClick: _onDownload,
@@ -121,7 +117,7 @@ var FileItem = props => {
               wrapper: "span",
               src: _download.default
             })
-          }), _showPreViewIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+          }), _showPreViewIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
             type: "link",
             className: "file-action-item",
             onClick: _onPreview,
@@ -131,12 +127,12 @@ var FileItem = props => {
               color: "#006aff",
               src: _look.default
             })
-          }), _showRemoveIcon && !disabled && (isConfirmDelete ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_popconfirm.default, {
+          }), _showRemoveIcon && !disabled && (isConfirmDelete ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Popconfirm, {
             title: "\u786E\u5B9A\u5220\u9664?",
             onConfirm: _onRemove,
             okText: "\u786E\u8BA4",
             cancelText: "\u53D6\u6D88",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
               type: "link",
               className: "file-action-item",
               disabled: disabled,
@@ -146,7 +142,7 @@ var FileItem = props => {
                 src: _delete.default
               })
             })
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
             type: "link",
             className: "file-action-item",
             disabled: disabled,
@@ -161,10 +157,9 @@ var FileItem = props => {
       })]
     }), file.status === 'uploading' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "file-progress",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_progress.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Progress, {
         percent: Math.ceil(file.percent),
-        size: "small",
-        strokeWidth: 2
+        size: 2
       })
     })]
   });
@@ -210,7 +205,7 @@ var DragSingleFileItem = props => {
         className: "file-actions-wrap",
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "file-actions",
-          children: [_showPreViewIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+          children: [_showPreViewIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
             type: "link",
             className: "file-action-item",
             onClick: _onPreview,
@@ -219,7 +214,7 @@ var DragSingleFileItem = props => {
               wrapper: "span",
               src: _look.default
             })
-          }), _isShowDownloadIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+          }), _isShowDownloadIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
             type: "link",
             className: "file-action-item",
             onClick: _onDownload,
@@ -233,10 +228,9 @@ var DragSingleFileItem = props => {
       })]
     }), file.status === 'uploading' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "file-progress",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_progress.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Progress, {
         percent: Math.ceil(file.percent),
-        size: "small",
-        strokeWidth: 2
+        size: 2
       })
     })]
   });

package/lib/ProUpload/components/ImageRender.js

@@ -5,20 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-require("antd/es/space/style");
-var _space = _interopRequireDefault(require("antd/es/space"));
-require("antd/es/modal/style");
-var _modal = _interopRequireDefault(require("antd/es/modal"));
-require("antd/es/upload/style");
-var _upload = _interopRequireDefault(require("antd/es/upload"));
 var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-require("antd/es/button/style");
-var _button = _interopRequireDefault(require("antd/es/button"));
-require("antd/es/progress/style");
-var _progress = _interopRequireDefault(require("antd/es/progress"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _antd = require("antd");
 var _react = require("react");
 var _core = require("@dnd-kit/core");
 var _sortable = require("@dnd-kit/sortable");
@@ -122,7 +113,7 @@ var ImageRender = props => {
           className: `file-item-image ${file.status === 'error' ? 'actions-wrap-error' : ''}`,
           children: [file.status === 'uploading' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "image-uploading",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_progress.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Progress, {
               size: "small",
               percent: Math.ceil(file.percent)
             })
@@ -137,7 +128,7 @@ var ImageRender = props => {
               className: "actions-wrap ",
               children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                 className: "action-top",
-                children: [_showPreview && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+                children: [_showPreview && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
                   type: "link",
                   className: "action-item",
                   onClick: () => {
@@ -149,7 +140,7 @@ var ImageRender = props => {
                     src: _look.default
                   }),
                   children: _locale.default === null || _locale.default === void 0 || (_locale$ProUpload = _locale.default.ProUpload) === null || _locale$ProUpload === void 0 ? void 0 : _locale$ProUpload.view
-                }), _isShowDownload && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+                }), _isShowDownload && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
                   type: "link",
                   disabled: isView || disabled,
                   className: "action-item",
@@ -165,7 +156,7 @@ var ImageRender = props => {
                 })]
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                 className: "action-button",
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
                   type: "link",
                   disabled: isView || disabled,
                   className: "action-item",
@@ -219,7 +210,7 @@ var ImageRender = props => {
       });
     }
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_space.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
     direction: "vertical",
     size: 8,
     className: "pro-upload-image",
@@ -231,7 +222,7 @@ var ImageRender = props => {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sortable.SortableContext, {
           items: fileList.map(i => i.uid),
           strategy: _sortable.rectSortingStrategy,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_upload.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, imageUploadProps), {}, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Upload, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, imageUploadProps), {}, {
             children: fileList.length < maxCount && !isView && (centerRender ? (0, _lodash.isFunction)(centerRender) ? centerRender() : centerRender : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               className: `pro-upload-image-inner ${disabled ? 'pro-upload-image-disabled' : ''} `,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PlusOutlined, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -255,7 +246,7 @@ var ImageRender = props => {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "pro-upload-image-footer",
       children: footerRender()
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_modal.default, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Modal, {
       title: previewImg === null || previewImg === void 0 ? void 0 : previewImg.name,
       width: "600",
       style: {

package/lib/ProUpload/index.js

@@ -6,12 +6,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-require("antd/es/message/style");
-var _message2 = _interopRequireDefault(require("antd/es/message"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
 var _lodash = require("lodash");
 var _core = require("@dnd-kit/core");
 var _sortable = require("@dnd-kit/sortable");
@@ -180,12 +179,12 @@ var ProUpload = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   var handleBeforeUpload = (file, fileList) => {
     if (!(0, _uitls.validateFileExt)(extExt, file)) {
       var _locale$ProUpload2;
-      _message2.default.error(`${_locale.default === null || _locale.default === void 0 || (_locale$ProUpload2 = _locale.default.ProUpload) === null || _locale$ProUpload2 === void 0 ? void 0 : _locale$ProUpload2.errorInfoExt}【${extExt.join('、')}】`);
+      _antd.message.error(`${_locale.default === null || _locale.default === void 0 || (_locale$ProUpload2 = _locale.default.ProUpload) === null || _locale$ProUpload2 === void 0 ? void 0 : _locale$ProUpload2.errorInfoExt}【${extExt.join('、')}】`);
       return false;
     }
     if (!(0, _uitls.validateSize)(size, file)) {
       var _locale$ProUpload3;
-      _message2.default.error(`${_locale.default === null || _locale.default === void 0 || (_locale$ProUpload3 = _locale.default.ProUpload) === null || _locale$ProUpload3 === void 0 ? void 0 : _locale$ProUpload3.errorInfoSize}${size}M`);
+      _antd.message.error(`${_locale.default === null || _locale.default === void 0 || (_locale$ProUpload3 = _locale.default.ProUpload) === null || _locale$ProUpload3 === void 0 ? void 0 : _locale$ProUpload3.errorInfoSize}${size}M`);
       return false;
     }
     if (beforeUpload) {

package/lib/ProUpload/style/index.less

@@ -1,5 +1,3 @@
-@root-entry-name: 'default';
-@import (reference) '~antd/es/style/themes/index.less';
 
 .pro-upload {
   // display: inline-flex;
@@ -154,10 +152,11 @@
     position: relative;
     display: inline-flex;
 
-    .@{ant-prefix}-upload-list-picture-card-container,
-    .@{ant-prefix}-upload-select-picture-card {
-      width: 126px;
-      height: 126px;
+    .@{ant-prefix}-upload-list-picture-card {
+      .@{ant-prefix}-upload-list-item-container , .@{ant-prefix}-upload-select {
+        width: 126px !important;
+        height: 126px !important;
+      }
     }
 
     .image-example {
@@ -233,10 +232,15 @@
           color: #fff;
           font-size: var(--zaui-font-size-sm, 12px);
           opacity: 0.8;
+          color: #fff!important;
+          align-self: center;
+          &:hover {
+            color: #fff!important;
+          }
 
           .action-icon {
-            margin-right: 10px;
-            transform: translate(0, 3px);
+            margin-right: 4px;
+            vertical-align: sub;
           }
 
           &:hover {
@@ -246,7 +250,10 @@
 
         .action-button {
           .action-item {
-            color: var(--zaui-danger, #ff005f);
+            color: var(--zaui-danger, #ff005f) !important;
+            &:hover {
+              color: var(--zaui-danger, #ff005f) !important;
+            }
           }
         }
       }
@@ -269,9 +276,6 @@
       display: inline-flex;
     }
 
-    .pro-upload-image-footer {
-      margin-top: -8px;
-    }
   }
 
   .file-actions {
@@ -301,6 +305,161 @@
       }
     }
   }
+
+  .@{ant-prefix}-upload-disabled{
+    .file-action-box{
+      .file-name, .file-del{
+        color: #ccc;
+        cursor: not-allowed !important;
+      }
+    }
+  }
+
+  .filelist-item-wrapper {
+    .file-info-box {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 30px;
+      margin-top: var(--zaui-space-size-sm, 8px);
+      color: var(--zaui-text, #343434);
+      font-size: var(--zaui-font-size-sm, 12px);
+      line-height: 16px;
+      &:hover {
+        background: #F8F9FA;
+        border-radius: var(--zaui-border-radius, 8px);
+        color: var(--zaui-brand);
+        .file-actions-wrap {
+          .file-actions{
+            display: flex;
+            .file-action-item{
+              color: var(--zaui-brand);
+            }
+          }
+        }
+      }
+      &.file-box-error {
+        color: var(--zaui-danger);
+
+        .file-actions-wrap {
+          .file-actions{
+            display: flex;
+            .file-action-item{
+              color: var(--zaui-danger);
+            }
+          }
+        }
+
+      }
+
+      .file-type-icon {
+        display: block;
+        width: 18px;
+        height: 23px;
+        margin-left: 6px;
+        overflow: hidden;
+        position: absolute;
+      }
+      .file-name {
+        display: box;
+        padding-left: var(--zaui-space-size-lg, 32px);
+        overflow: hidden;
+        line-clamp: 1;
+        box-orient: vertical;
+        word-break: break-all;
+      }
+      .file-name.file-name-pf0 {
+        padding-left: 0;
+      }
+
+
+      .file-actions-wrap {
+        width: 100px;
+        margin-left: auto;
+        .file-actions {
+          display: none;
+          justify-content: right;
+
+          transition: all 1s;
+
+          .file-action-item {
+            margin-left: var(--zaui-space-size-sm, 8px);
+            padding: 0;
+            cursor: pointer;
+            color: var(--zaui-brand);
+          }
+        }
+      }
+    }
+  }
+
+  // 单个文件拖拽控件
+  .drag-Single-item-wrapper {
+    .file-info-box {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 30px;
+      margin-top: var(--zaui-space-size-sm, 8px);
+      color: var(--zaui-text, #343434);
+
+      font-size: var(--zaui-font-size-sm, 12px);
+      line-height: 16px;
+      justify-content: center;
+      &:hover {
+        background: #F8F9FA;
+        border-radius: var(--zaui-border-radius, 8px);
+      }
+      &:hover,&.file-box-error {
+        .file-actions-wrap {
+          .file-actions{
+            display: flex;
+          }
+        }
+
+      }
+
+      .file-type-icon {
+        display: block;
+        width: 18px;
+        height: 23px;
+        margin-left: 6px;
+        overflow: hidden;
+        position: absolute;
+      }
+      .file-name {
+        display: box;
+        padding-left: var(--zaui-space-size-sm, 8px);
+        overflow: hidden;
+        line-clamp: 1;
+        box-orient: vertical;
+        word-break: keep-all;
+      }
+      .file-name.file-name-pf0 {
+        padding-left: 0;
+      }
+
+      &.file-box-error {
+        color: var(--zaui-danger, #FF005F);
+      }
+
+      .file-actions-wrap {
+        margin-left: 10px;
+        .file-actions {
+          justify-content: right;
+          transition: all 1s;
+          display: flex;
+          .file-action-item {
+            margin-left: var(--zaui-space-size-sm, 8px);
+            padding: 0;
+            cursor: pointer;
+            color: var(--zaui-brand);
+          }
+        }
+      }
+    }
+  }
+
 }
 
 .pro-upload-example {