@whitesev/pops 2.2.4 → 2.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.amd.js +96 -33
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +96 -33
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +96 -33
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +96 -33
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +96 -33
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +96 -33
- package/dist/index.umd.js.map +1 -1
- package/dist/types/src/components/panel/types/components-selectMultiple.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/panel/config.ts +17 -1
- package/src/components/panel/handlerComponents.ts +155 -34
- package/src/components/panel/index.css +79 -23
- package/src/components/panel/types/components-selectMultiple.ts +1 -1
- package/src/css/index.css +7 -8
package/dist/index.umd.js
CHANGED
|
@@ -2381,7 +2381,7 @@
|
|
|
2381
2381
|
tooltip: [],
|
|
2382
2382
|
};
|
|
2383
2383
|
|
|
2384
|
-
var indexCSS = "@charset \"utf-8\";\r\n.pops * {\r\n\t-webkit-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\t-webkit-tap-highlight-color: transparent;\r\n\t/* 代替::-webkit-scrollbar */\r\n\tscrollbar-width: thin;\r\n}\r\n.pops {\r\n\t--pops-bg-opacity: 1;\r\n\t--pops-bd-opacity: 1;\r\n\t--pops-font-size: 16px;\r\n\tinterpolate-size: allow-keywords;\r\n\t--pops-color: #000000;\r\n\t--pops-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t--pops-bd-color: rgb(235, 238, 245, var(--pops-bd-opacity));\r\n\t--pops-box-shadow-color: rgba(0, 0, 0, 0.12);\r\n\t--pops-title-color: #000000;\r\n\t--pops-title-border-color:
|
|
2384
|
+
var indexCSS = "@charset \"utf-8\";\r\n.pops * {\r\n\t-webkit-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\t-webkit-tap-highlight-color: transparent;\r\n\t/* 代替::-webkit-scrollbar */\r\n\tscrollbar-width: thin;\r\n}\r\n.pops {\r\n\t--pops-bg-opacity: 1;\r\n\t--pops-bd-opacity: 1;\r\n\t--pops-font-size: 16px;\r\n\tinterpolate-size: allow-keywords;\r\n\t--pops-color: #000000;\r\n\t--pops-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t--pops-bd-color: rgb(235, 238, 245, var(--pops-bd-opacity));\r\n\t--pops-box-shadow-color: rgba(0, 0, 0, 0.12);\r\n\t--pops-title-color: #000000;\r\n\t--pops-title-border-color: var(--pops-bd-color);\r\n\t--pops-content-color: #000000;\r\n\t--pops-bottom-btn-controls-border-color: var(--pops-bd-color);\r\n\t--pops-components-is-disabled-text-color: #a8abb2;\r\n\t--pops-components-is-disabled-bg-color: #f5f7fa;\r\n}\r\n@media (prefers-color-scheme: dark) {\r\n\t.pops {\r\n\t\t--pops-mask-bg-opacity: 0.8;\r\n\t\t--pops-color: #ffffff;\r\n\t\t--pops-bg-color: rgb(17, 17, 17, var(--pops-bg-opacity));\r\n\t\t--pops-bd-color: rgb(55, 55, 55, var(--pops-bd-opacity));\r\n\t\t--pops-box-shadow-color: rgba(81, 81, 81, 0.12);\r\n\t\t--pops-title-color: #e8e8e8;\r\n\t\t--pops-title-border-color: var(--pops-bd-color);\r\n\t\t--pops-content-color: #e5e5e5;\r\n\t\t--pops-components-is-disabled-text-color: #a8abb2;\r\n\t\t--pops-components-is-disabled-bg-color: #262727;\r\n\t}\r\n}\r\n.pops {\r\n\tcolor: var(--pops-color);\r\n\tbackground-color: var(--pops-bg-color);\r\n\tborder: 1px solid var(--pops-bd-color);\r\n\tborder-radius: 4px;\r\n\tfont-size: var(--pops-font-size);\r\n\tline-height: normal;\r\n\tbox-shadow: 0 0 12px var(--pops-box-shadow-color);\r\n\tbox-sizing: border-box;\r\n\toverflow: hidden;\r\n\ttransition: all 0.35s;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n}\r\n.pops-anim {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n.pops-anim[anim=\"\"] {\r\n\ttop: unset;\r\n\tright: unset;\r\n\tbottom: unset;\r\n\tleft: unset;\r\n\twidth: unset;\r\n\theight: unset;\r\n\ttransition: none;\r\n}\r\n/* 底部图标动画和样式 */\r\n.pops i.pops-bottom-icon[is-loading=\"true\"] {\r\n\tanimation: rotating 2s linear infinite;\r\n}\r\n.pops i.pops-bottom-icon {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n\tline-height: normal;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n\tcolor: inherit;\r\n\tfont-size: inherit;\r\n}\r\n\r\n/* 遮罩层样式 */\r\n.pops-mask {\r\n\t--pops-mask-bg-opacity: 0.4;\r\n\t--pops-mask-bg-color: rgba(0, 0, 0, var(--pops-mask-bg-opacity));\r\n}\r\n.pops-mask {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tborder: 0;\r\n\tborder-radius: 0;\r\n\tbackground-color: var(--pops-mask-bg-color);\r\n\tbox-shadow: none;\r\n\ttransition: none;\r\n}\r\n\r\n.pops-header-controls button.pops-header-control[type][data-header] {\r\n\tfloat: right;\r\n\tmargin: 0 0;\r\n\toutline: 0;\r\n\tborder: 0;\r\n\tborder-color: rgb(136, 136, 136, var(--pops-bd-opacity));\r\n\tbackground-color: transparent;\r\n\tcolor: #888;\r\n\tcursor: pointer;\r\n}\r\n.pops-header-controls button.pops-header-control[type=\"max\"],\r\n.pops-header-controls button.pops-header-control[type=\"mise\"],\r\n.pops-header-controls button.pops-header-control[type=\"min\"] {\r\n\toutline: 0 !important;\r\n\tborder: 0;\r\n\tborder-color: rgb(136, 136, 136, var(--pops-bd-opacity));\r\n\tbackground-color: transparent;\r\n\tcolor: rgb(136, 136, 136);\r\n\tcursor: pointer;\r\n\ttransition: all 0.3s ease-in-out;\r\n}\r\nbutton.pops-header-control i {\r\n\tcolor: rgb(144, 147, 153);\r\n\tfont-size: inherit;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n}\r\nbutton.pops-header-control svg {\r\n\theight: 1.25em;\r\n\twidth: 1.25em;\r\n}\r\nbutton.pops-header-control {\r\n\tright: 15px;\r\n\tpadding: 0;\r\n\tborder: none;\r\n\toutline: 0;\r\n\tbackground: 0 0;\r\n\tcursor: pointer;\r\n\tposition: unset;\r\n\tline-height: normal;\r\n}\r\nbutton.pops-header-control i:hover {\r\n\tcolor: rgb(64, 158, 255);\r\n}\r\n.pops-header-controls[data-margin] button.pops-header-control {\r\n\tmargin: 0 6px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops[type-value] .pops-header-controls {\r\n\tdisplay: flex;\r\n\tgap: 6px;\r\n}\r\n\r\n/* 代码块 <code> */\r\n.pops code {\r\n\tfont-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\r\n\tfont-size: 0.85em;\r\n\tcolor: #000;\r\n\tbackground-color: #f0f0f0;\r\n\tborder-radius: 3px;\r\n\tborder: 0;\r\n\tpadding: 0.2em 0;\r\n\twhite-space: normal;\r\n\tbackground: #f5f5f5;\r\n\ttext-wrap: wrap;\r\n\ttext-align: left;\r\n\tword-spacing: normal;\r\n\tword-break: normal;\r\n\tword-wrap: normal;\r\n\tline-height: 1.4;\r\n\t-moz-tab-size: 8;\r\n\t-o-tab-size: 8;\r\n\ttab-size: 8;\r\n\t-webkit-hyphens: none;\r\n\t-moz-hyphens: none;\r\n\t-ms-hyphens: none;\r\n\thyphens: none;\r\n\tdirection: ltr;\r\n}\r\n\r\n.pops code::before,\r\n.pops code::after {\r\n\tletter-spacing: -0.2em;\r\n\tcontent: \"\\00a0\";\r\n}\r\n\r\n/* 标题 */\r\n.pops .pops-title {\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n\tborder-bottom: 1px solid var(--pops-title-border-color);\r\n\twidth: 100%;\r\n\theight: var(--container-title-height);\r\n}\r\n/* 标题-普通文本 */\r\n.pops .pops-title p[pops] {\r\n\tcolor: var(--pops-title-color);\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n}\r\n\r\n/* 内容 */\r\n.pops .pops-content {\r\n\twidth: 100%;\r\n\t/*height: calc(\r\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n\t);*/\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tword-break: break-word;\r\n}\r\n/* 内容-普通文本 */\r\n.pops .pops-content p[pops] {\r\n\tcolor: var(--pops-content-color);\r\n\tpadding: 5px 10px;\r\n\ttext-indent: 15px;\r\n}\r\n\r\n/* 底部-按钮组 */\r\n.pops .pops-botttom-btn-controls {\r\n\tdisplay: flex;\r\n\tpadding: 10px 10px 10px 10px;\r\n\twidth: 100%;\r\n\theight: var(--container-bottom-btn-height);\r\n\tmax-height: var(--container-bottom-btn-height);\r\n\tline-height: normal;\r\n\tborder-top: 1px solid var(--pops-bottom-btn-controls-border-color);\r\n\ttext-align: right;\r\n\talign-items: center;\r\n}\r\n";
|
|
2385
2385
|
|
|
2386
2386
|
var ninePalaceGridPositionCSS = ".pops[position=\"top_left\"] {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tleft: 0;\r\n}\r\n.pops[position=\"top\"] {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tleft: 50%;\r\n\ttransform: translateX(-50%);\r\n}\r\n.pops[position=\"top_right\"] {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tright: 0;\r\n}\r\n.pops[position=\"center_left\"] {\r\n\tposition: fixed;\r\n\ttop: 50%;\r\n\tleft: 0;\r\n\ttransform: translateY(-50%);\r\n}\r\n.pops[position=\"center\"] {\r\n\tposition: fixed;\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\ttransform: translate(-50%, -50%);\r\n}\r\n.pops[position=\"center_right\"] {\r\n\tposition: fixed;\r\n\ttop: 50%;\r\n\tright: 0;\r\n\ttransform: translateY(-50%);\r\n}\r\n.pops[position=\"bottom_left\"] {\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n}\r\n.pops[position=\"bottom\"] {\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\tleft: 50%;\r\n\ttransform: translate(-50%, 0);\r\n}\r\n.pops[position=\"bottom_right\"] {\r\n\tposition: fixed;\r\n\tright: 0;\r\n\tbottom: 0;\r\n}\r\n";
|
|
2387
2387
|
|
|
@@ -2409,7 +2409,7 @@
|
|
|
2409
2409
|
|
|
2410
2410
|
var folderCSS = ".pops-folder-list {\r\n\t--folder-arrow-fill-color: #d4d7de;\r\n\t--folder-arrow-active-fill-color: #06a7ff;\r\n\t--header-breadcrumb-text-color: #06a7ff;\r\n\t--header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);\r\n\t--header-breadcrumb-all-files-first-text-color: var(\r\n\t\t--header-breadcrumb-text-color\r\n\t);\r\n\t--header-breadcrumb-all-files-last-text-color: #999999;\r\n\t--table-header-row-text-color: #818999;\r\n\t--table-body-td-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\r\n\t--table-body-th-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\r\n\t--table-body-row-text-color: #05082c;\r\n\t--table-body-row-file-name-text-color: #05082c;\r\n\t--table-body-row-hover-bd-color: rgb(245, 246, 247, var(--pops-bg-opacity));\r\n\t--table-body-row-hover-bg-color: rgb(245, 246, 247, var(--pops-bg-opacity));\r\n\t--table-body-row-file-name-hover-text-color: #06a7ff;\r\n\t--table-body-row-content-text-color: #818999;\r\n}\r\n.pops-folder-list .cursor-p {\r\n\tcursor: pointer;\r\n}\r\n.pops-folder-list a {\r\n\tbackground: 0 0;\r\n\ttext-decoration: none;\r\n\t-webkit-tap-highlight-color: transparent;\r\n\tcolor: var(--header-breadcrumb-text-color);\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n\twidth: 100%;\r\n\ttable-layout: fixed;\r\n\tborder-collapse: collapse;\r\n\tborder-spacing: 0;\r\n\tpadding: 0 20px;\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n\theight: 100%;\r\n\tbackground: 0 0;\r\n\toverflow: hidden;\r\n\tdisplay: -webkit-box;\r\n\tdisplay: -ms-flexbox;\r\n\t-ms-flex-direction: column;\r\n\t-webkit-box-orient: vertical;\r\n\t-webkit-box-direction: normal;\r\n}\r\ntable.pops-folder-list-table__body {\r\n\theight: 100%;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n}\r\n.pops-folder-list table tr {\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n.pops-folder-list-table__header-row {\r\n\theight: 50px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tcolor: var(--table-header-row-text-color);\r\n\ttext-align: left;\r\n\tfont-size: 12px;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n}\r\n.pops-folder-list-table__body-row {\r\n\theight: 50px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tcolor: var(--table-body-row-text-color);\r\n\tfont-size: 12px;\r\n}\r\n.pops-folder-list-table__body-row:hover {\r\n\tbackground-color: var(--table-body-row-hover-bg-color);\r\n\tborder-color: var(--table-body-row-hover-bd-color);\r\n\tborder: 0;\r\n\toutline: none;\r\n}\r\n.pops-folder-list table th {\r\n\tborder: 0;\r\n\tborder-bottom: 1px solid var(--table-body-th-text-color);\r\n}\r\n.pops-folder-list table td {\r\n\tborder: 0;\r\n\tborder-bottom: 1px solid var(--table-body-td-text-color);\r\n\tposition: relative;\r\n}\r\n.pops-folder-list .list-name-text {\r\n\tdisplay: inline-block;\r\n\tpadding-left: 12px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tmax-width: 176px;\r\n}\r\n.pops-folder-list-file-name > div {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n\r\n.pops-mobile-folder-list-file-name {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops-mobile-folder-list-file-name > div {\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tpadding: 6px 0px;\r\n\tflex-direction: column;\r\n}\r\n.pops-mobile-folder-list-file-name img.pops-folder-list-file-icon {\r\n\twidth: 45px;\r\n\theight: 45px;\r\n}\r\n.pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {\r\n\tpadding-left: unset;\r\n\tmax-width: 250px;\r\n\toverflow-x: hidden;\r\n\tfont-weight: 400;\r\n\tline-height: unset;\r\n\tmargin-bottom: 4px;\r\n\twhite-space: normal;\r\n\ttext-overflow: unset;\r\n}\r\n\r\n/* 修改滚动 */\r\n.pops-folder-content {\r\n\toverflow: hidden !important;\r\n}\r\n.pops-folder-content .pops-folder-list {\r\n\theight: 100%;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n}\r\n.pops-folder-content .pops-folder-list-table__body-div {\r\n\theight: 100%;\r\n\tflex: 1 auto;\r\n\toverflow: auto;\r\n\tpadding-bottom: 0;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__body-div {\r\n\theight: 100%;\r\n\tflex: 1 auto;\r\n\toverflow: auto;\r\n\tpadding-bottom: 0;\r\n}\r\n.pops-folder-content table.pops-folder-list-table__body {\r\n\toverflow: auto;\r\n}\r\n.pops-folder-content .pops-folder-list-table__header-div {\r\n\tflex: 0;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__header-div {\r\n\tdisplay: none;\r\n}\r\n\r\n.pops-folder-list .pops-folder-list-file-name-title-text {\r\n\tcolor: var(--table-body-row-file-name-text-color);\r\n}\r\n.pops-folder-list .pops-folder-list-file-name-title-text:hover {\r\n\ttext-decoration: none;\r\n\tcolor: var(--table-body-row-file-name-hover-text-color);\r\n}\r\n.pops-folder-list .text-ellip {\r\n\toverflow: hidden;\r\n\twhite-space: nowrap;\r\n\ttext-overflow: ellipsis;\r\n}\r\n.pops-folder-list .content {\r\n\tcolor: var(--table-body-row-content-text-color);\r\n\tposition: relative;\r\n\twidth: 100%;\r\n\ttext-align: left;\r\n}\r\n.pops-folder-list .inline-block-v-middle {\r\n\tdisplay: inline-block;\r\n\tvertical-align: middle;\r\n}\r\n.pops-folder-list .flex-a-i-center {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops-folder-list .u-file-icon {\r\n\tdisplay: inline-block;\r\n\tvertical-align: middle;\r\n}\r\n.pops-folder-list .u-file-icon--list {\r\n\twidth: 32px;\r\n\theight: 32px;\r\n}\r\n.pops-folder-list .pops-folder-list-file-icon {\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tposition: relative;\r\n\tvertical-align: middle;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-primary {\r\n\tflex: 1;\r\n\tdisplay: -webkit-box;\r\n\tdisplay: -webkit-flex;\r\n\tdisplay: -ms-flexbox;\r\n\tdisplay: flex;\r\n\t-webkit-box-align: center;\r\n\t-webkit-align-items: center;\r\n\t-ms-flex-align: center;\r\n\talign-items: center;\r\n\t-webkit-box-orient: horizontal;\r\n\t-webkit-box-direction: normal;\r\n\t-webkit-flex-direction: row;\r\n\t-ms-flex-direction: row;\r\n\tflex-direction: row;\r\n\tmin-height: 17px;\r\n\tflex-wrap: wrap;\r\n}\r\n.pops-folder-list .pops-folder-list-table__sort {\r\n\tdisplay: inline-flex;\r\n\tmargin-left: 4px;\r\n\tflex-direction: column;\r\n}\r\n\r\n.pops-folder-list .pops-folder-icon-arrow {\r\n\twidth: 10px;\r\n\theight: 10px;\r\n\tfill: var(--folder-arrow-fill-color);\r\n}\r\n.pops-folder-list .pops-folder-icon-active {\r\n\tfill: var(--folder-arrow-active-fill-color);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb {\r\n\tpadding: 4px 20px;\r\n\t-webkit-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n\tdisplay: -webkit-box;\r\n\tdisplay: -webkit-flex;\r\n\tdisplay: -ms-flexbox;\r\n\tdisplay: flex;\r\n\t-webkit-box-align: center;\r\n\t-webkit-align-items: center;\r\n\t-ms-flex-align: center;\r\n\talign-items: center;\r\n\t-webkit-box-orient: horizontal;\r\n\t-webkit-box-direction: normal;\r\n\t-webkit-flex-direction: row;\r\n\t-ms-flex-direction: row;\r\n\tflex-direction: row;\r\n\t-webkit-box-pack: start;\r\n\t-webkit-justify-content: start;\r\n\t-ms-flex-pack: start;\r\n\tjustify-content: flex-start;\r\n\tmin-height: 35px;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles {\r\n\tfont-size: 12px;\r\n\tcolor: var(--header-breadcrumb-all-files-text-color);\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tfont-weight: 700;\r\n\tdisplay: inline-block;\r\n\tmax-width: 140px;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tword-wrap: normal;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a {\r\n\tcolor: var(--header-breadcrumb-all-files-last-text-color);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a {\r\n\tfont-size: 14px;\r\n\tcolor: var(--header-breadcrumb-all-files-first-text-color);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow {\r\n\twidth: 16px;\r\n\theight: 16px;\r\n}\r\n.pops-folder-list .iconArrow {\r\n\tbackground: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=)\r\n\t\t55% 50%/6px 9px no-repeat;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n\t.pops[type-value=\"folder\"] {\r\n\t\t--pops-title-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n\t\t--pops-bottom-btn-controls-border-color: rgb(\r\n\t\t\t73,\r\n\t\t\t83,\r\n\t\t\t102,\r\n\t\t\tvar(--pops-bg-opacity)\r\n\t\t);\r\n\t}\r\n\t.pops-folder-list {\r\n\t\t--header-breadcrumb-text-color: #06a7ff;\r\n\t\t--header-breadcrumb-all-files-text-color: var(\r\n\t\t\t--header-breadcrumb-text-color\r\n\t\t);\r\n\t\t--header-breadcrumb-all-files-first-text-color: var(\r\n\t\t\t--header-breadcrumb-text-color\r\n\t\t);\r\n\t\t--header-breadcrumb-all-files-last-text-color: #818999;\r\n\t\t--table-body-row-text-color: #f7f8fa;\r\n\t\t--table-body-td-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n\t\t--table-body-th-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n\t\t--table-body-td-text-color: #495366;\r\n\t\t--table-body-row-hover-bd-color: #1f2022;\r\n\t\t--table-body-row-hover-bg-color: #1f2022;\r\n\t\t--table-body-row-file-name-text-color: #f7f8fa;\r\n\t}\r\n}\r\n";
|
|
2411
2411
|
|
|
2412
|
-
var panelCSS = ".pops[type-value=\"panel\"] {\r\n\t--pops-bg-color: #f2f2f2;\r\n\t--pops-color: #333333;\r\n\t--panel-title-bg-color: #ffffff;\r\n\r\n\t--panel-aside-bg-color: #ffffff;\r\n\t--panel-aside-hover-color: rgb(64, 158, 255);\r\n\t--panel-aside-hover-bg-color: rgba(64, 158, 255, 0.1);\r\n\r\n\t--pops-panel-forms-margin-top-bottom: 10px;\r\n\t--pops-panel-forms-margin-left-right: 20px;\r\n\t--pops-panel-forms-header-icon-size: calc(\r\n\t\tvar(--pops-panel-forms-container-li-padding-left-right) + 1px\r\n\t);\r\n\t--pops-panel-forms-header-padding-top-bottom: 15px;\r\n\t--pops-panel-forms-header-padding-left-right: 10px;\r\n\t--pops-panel-forms-container-item-left-text-gap: 6px;\r\n\t--pops-panel-forms-container-item-left-desc-text-size: 0.8em;\r\n\t--pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n\t--pops-panel-forms-container-item-bg-color: #ffffff;\r\n\t--pops-panel-forms-container-item-title-color: #333;\r\n\t--pops-panel-forms-container-item-border-radius: 6px;\r\n\t--pops-panel-forms-container-item-margin-top-bottom: 10px;\r\n\t--pops-panel-forms-container-item-margin-left-right: var(\r\n\t\t--pops-panel-forms-margin-left-right\r\n\t);\r\n\t--pops-panel-forms-container-li-border-color: rgb(\r\n\t\t229,\r\n\t\t229,\r\n\t\t229,\r\n\t\tvar(--pops-bd-opacity)\r\n\t);\r\n\t--pops-panel-forms-container-li-padding-top-bottom: 12px;\r\n\t--pops-panel-forms-container-li-padding-left-right: 16px;\r\n}\r\n.pops[type-value=\"panel\"] {\r\n\tcolor: var(--pops-color);\r\n\tbackground: var(--pops-bg-color);\r\n}\r\n.pops[type-value] .pops-panel-title {\r\n\tbackground: var(--panel-title-bg-color);\r\n}\r\n\r\n/* ↓panel的CSS↓ */\r\naside.pops-panel-aside {\r\n\tbox-sizing: border-box;\r\n\tflex-shrink: 0;\r\n\tmax-width: 200px;\r\n\tmin-width: 100px;\r\n\theight: 100%;\r\n\tbackground: var(--panel-aside-bg-color);\r\n\tborder-right: 1px solid var(--panel-aside-bg-color);\r\n\tfont-size: 0.9em;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tjustify-content: space-between;\r\n}\r\naside.pops-panel-aside {\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n}\r\naside.pops-panel-aside .pops-panel-aside-top-container {\r\n\toverflow: auto;\r\n}\r\n.pops-panel-content {\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tflex-basis: auto;\r\n\tbox-sizing: border-box;\r\n\tmin-width: 0;\r\n\tbottom: 0 !important;\r\n}\r\nsection.pops-panel-container {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul,\r\nsection.pops-panel-container .pops-panel-deepMenu-container-header-ul {\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\tflex: 0 auto;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul li,\r\nsection.pops-panel-container\r\n\t.pops-panel-container-header-ul\r\n\tli.pops-panel-container-header-title-text {\r\n\tdisplay: flex;\r\n\tjustify-content: flex-start !important;\r\n\tmargin: 0px !important;\r\n\tpadding: var(--pops-panel-forms-header-padding-top-bottom)\r\n\t\tcalc(\r\n\t\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\t\tvar(--pops-panel-forms-container-li-padding-left-right)\r\n\t\t);\r\n\ttext-align: left;\r\n}\r\nsection.pops-panel-container ul.pops-panel-container-main-ul {\r\n\toverflow: auto;\r\n\t/*flex: 1;*/\r\n}\r\naside.pops-panel-aside ul li {\r\n\tmargin: 6px 8px;\r\n\tborder-radius: 4px;\r\n\tpadding: 6px 10px;\r\n\tcursor: default;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: flex-start;\r\n}\r\naside.pops-panel-aside .pops-is-visited,\r\naside.pops-panel-aside ul li:not(.pops-panel-disabled-aside-hover-css):hover {\r\n\tcolor: var(--panel-aside-hover-color);\r\n\tbackground: var(--panel-aside-hover-bg-color);\r\n}\r\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\r\n\tdisplay: flex;\r\n\tjustify-content: space-between;\r\n\talign-items: center;\r\n\tmargin: var(--pops-panel-forms-margin-top-bottom)\r\n\t\tcalc(\r\n\t\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\t\tvar(--pops-panel-forms-margin-left-right)\r\n\t\t);\r\n\tgap: 10px;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\r\n\tmargin: 10px;\r\n\tmargin-left: calc(\r\n\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\tvar(--pops-panel-forms-container-li-padding-left-right)\r\n\t);\r\n\tfont-size: 0.9em;\r\n\ttext-align: left;\r\n\tcolor: var(--pops-panel-forms-container-item-title-color);\r\n}\r\nsection.pops-panel-container li.pops-panel-forms-container-item {\r\n\tdisplay: block;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-container-item\r\n\tul.pops-panel-forms-container-item-formlist {\r\n\tborder-radius: var(--pops-panel-forms-container-item-border-radius);\r\n\tbackground: var(--pops-panel-forms-container-item-bg-color);\r\n\tmargin: var(--pops-panel-forms-container-item-margin-top-bottom)\r\n\t\tvar(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-container-item\r\n\tul.pops-panel-forms-container-item-formlist\r\n\tli {\r\n\tdisplay: flex;\r\n\tjustify-content: space-between;\r\n\talign-items: center;\r\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px;\r\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right);\r\n\tborder-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\r\n\ttext-align: left;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-container-item\r\n\tul\r\n\tli.pops-panel-deepMenu-nav-item {\r\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom)\r\n\t\tvar(--pops-panel-forms-container-li-padding-left-right);\r\n\tmargin: 0px;\r\n\tborder-bottom: 0;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-container-item\r\n\tul.pops-panel-forms-container-item-formlist\r\n\tli:last-child {\r\n\tborder: 0;\r\n}\r\n/* 左侧的文字 */\r\nsection.pops-panel-container .pops-panel-item-left-text {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tgap: var(--pops-panel-forms-container-item-left-text-gap);\r\n}\r\n\r\n/* 左侧的主文字 */\r\n/*section.pops-panel-container .pops-panel-item-left-main-text {\r\n\t\r\n}*/\r\n/* 左侧的描述文字 */\r\nsection.pops-panel-container .pops-panel-item-left-desc-text {\r\n\tfont-size: var(--pops-panel-forms-container-item-left-desc-text-size);\r\n\tcolor: var(--pops-panel-forms-container-item-left-desc-text-color);\r\n}\r\n\r\n/* 折叠面板 */\r\n\r\nsection.pops-panel-container .pops-panel-forms-fold {\r\n\tborder-radius: var(--pops-panel-forms-container-item-border-radius);\r\n\tbackground: var(--pops-panel-forms-container-item-bg-color);\r\n\tmargin: var(--pops-panel-forms-margin-top-bottom)\r\n\t\tvar(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\t.pops-panel-forms-fold-container {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tfill: #6c6c6c;\r\n\tjustify-content: space-between;\r\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\r\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold[data-fold-enable]\r\n\t.pops-panel-forms-fold-container-icon {\r\n\ttransform: rotate(90deg);\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\t.pops-panel-forms-fold-container-icon {\r\n\twidth: 15px;\r\n\theight: 15px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\ttransform: rotate(-90deg);\r\n\ttransition: transform 0.3s;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold[data-fold-enable]\r\n\t.pops-panel-forms-container-item-formlist {\r\n\theight: 0;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\t.pops-panel-forms-container-item-formlist {\r\n\ttransition: height 0.3s;\r\n\toverflow: hidden;\r\n\tborder-radius: unset;\r\n\tbackground: unset;\r\n\tmargin: 0;\r\n\theight: auto;\r\n\theight: calc-size(auto, size);\r\n}\r\n/* 折叠面板 */\r\n\r\n/* 姑且认为小于600px的屏幕为移动端 */\r\n@media (max-width: 600px) {\r\n\t/* 兼容移动端CSS */\r\n\t.pops[type-value=\"panel\"] {\r\n\t\t--pops-panel-forms-margin-left-right: 10px;\r\n\t}\r\n\t.pops[type-value=\"panel\"] {\r\n\t\twidth: 92%;\r\n\t\twidth: 92vw;\r\n\t\twidth: 92dvw;\r\n\t}\r\n\t.pops[type-value=\"panel\"] .pops-panel-content aside.pops-panel-aside {\r\n\t\tmax-width: 20%;\r\n\t\tmin-width: auto;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-forms-container-item\r\n\t\t> div {\r\n\t\ttext-align: left;\r\n\t\t--pops-panel-forms-margin-left-right: 0px;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-forms-container-item\r\n\t\tul {\r\n\t\tmargin: 0px !important;\r\n\t}\r\n\t.pops[type-value=\"panel\"] section.pops-panel-container > ul > li {\r\n\t\tmargin: 10px 10px;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t> ul\r\n\t\t> li\r\n\t\tdiv:nth-child(2) {\r\n\t\tmax-width: 55%;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-select\r\n\t\tselect {\r\n\t\tmin-width: 88px !important;\r\n\t\twidth: -webkit-fill-available;\r\n\t\twidth: -moz-available;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-container-header-ul\r\n\t\tli {\r\n\t\tfont-size: 16px;\r\n\t}\r\n\t.pops[type-value=\"panel\"] .pops-panel-title p[pops],\r\n\t.pops[type-value=\"panel\"] section.pops-panel-container > ul li,\r\n\t.pops[type-value=\"panel\"] aside.pops-panel-aside ul li {\r\n\t\tfont-size: 14px;\r\n\t}\r\n}\r\n/* switch的CSS */\r\n.pops-panel-switch {\r\n\t--panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n\t--panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n\t--panel-switch-circle-color: #dcdfe6;\r\n\t--panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t--panel-switch-checked-circle-color: #409eff;\r\n\t--panel-switch-checked-core-bd-color: rgb(\r\n\t\t64,\r\n\t\t158,\r\n\t\t255,\r\n\t\tvar(--pops-bd-opacity)\r\n\t);\r\n\t--panel-switch-checked-core-bg-color: rgb(\r\n\t\t64,\r\n\t\t158,\r\n\t\t255,\r\n\t\tvar(--pops-bg-opacity)\r\n\t);\r\n}\r\n.pops-panel-switch {\r\n\tdisplay: inline-flex;\r\n\tflex-direction: row-reverse;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfont-size: 14px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\theight: 32px;\r\n\tvertical-align: middle;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-ms-user-select: none;\r\n\t-moz-user-select: none;\r\n}\r\n.pops-panel-switch input.pops-panel-switch__input {\r\n\tposition: absolute;\r\n\twidth: 0;\r\n\theight: 0;\r\n\topacity: 0;\r\n\tmargin: 0;\r\n}\r\n.pops-panel-switch:has(input.pops-panel-switch__input:disabled),\r\n.pops-panel-switch[data-disabled],\r\n.pops-panel-switch[data-disabled] .pops-panel-switch__core,\r\n.pops-panel-switch\r\n\tinput.pops-panel-switch__input:disabled\r\n\t+ .pops-panel-switch__core {\r\n\tcursor: not-allowed;\r\n\topacity: 0.6;\r\n}\r\n.pops-panel-switch span.pops-panel-switch__core {\r\n\tdisplay: inline-flex;\r\n\tposition: relative;\r\n\talign-items: center;\r\n\tmin-width: 40px;\r\n\theight: 20px;\r\n\tborder: 1px solid var(--panel-switch-core-bd-color);\r\n\toutline: 0;\r\n\tborder-radius: 10px;\r\n\tbox-sizing: border-box;\r\n\tbackground: var(--panel-switch-core-bg-color);\r\n\tcursor: pointer;\r\n\ttransition: border-color 0.3s, background-color 0.3s;\r\n}\r\n.pops-panel-switch .pops-panel-switch__action {\r\n\tposition: absolute;\r\n\tleft: 1px;\r\n\tborder-radius: 100%;\r\n\ttransition: all 0.3s;\r\n\twidth: 16px;\r\n\theight: 16px;\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tbackground-color: var(--panel-switch-circle-bg-color);\r\n\tcolor: var(--panel-switch-circle-color);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\r\n\tborder-color: var(--panel-switch-checked-core-bd-color);\r\n\tbackground-color: var(--panel-switch-checked-core-bg-color);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {\r\n\tleft: calc(100% - 17px);\r\n\tcolor: var(--panel-switch-checked-circle-color);\r\n}\r\n/* switch的CSS */\r\n\r\n/* slider旧的CSS */\r\nsection.pops-panel-container .pops-panel-slider:has(> input[type=\"range\"]) {\r\n\toverflow: hidden;\r\n\theight: 25px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"] {\r\n\theight: 6px;\r\n\tbackground: rgb(228, 231, 237, var(--pops-bg-opacity));\r\n\toutline: 0;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\twidth: 100%;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-slider\r\n\tinput[type=\"range\"]::-webkit-slider-thumb {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\tborder-radius: 50%;\r\n\tborder: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbox-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);\r\n\tcursor: pointer;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tborder-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-slider\r\n\tinput[type=\"range\"]::-moz-range-thumb {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\tborder-radius: 50%;\r\n\tborder: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbox-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);\r\n\tcursor: pointer;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-slider\r\n\tinput[type=\"range\"]::-moz-range-progress {\r\n\theight: 6px;\r\n\tborder-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\n/* slider旧的CSS */\r\n\r\n/* slider的CSS */\r\n.pops-slider {\r\n\t--pops-slider-color-white: #ffffff;\r\n\t--pops-slider-color-primary: #409eff;\r\n\t--pops-slider-color-info: #909399;\r\n\t--pops-slider-text-color-placeholder: #a8abb2;\r\n\t--pops-slider-border-color-light: #e4e7ed;\r\n\t--pops-slider-border-radius-circle: 100%;\r\n\t--pops-slider-transition-duration-fast: 0.2s;\r\n\r\n\t--pops-slider-main-bg-color: var(--pops-slider-color-primary);\r\n\t--pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\r\n\t--pops-slider-stop-bg-color: var(--pops-slider-color-white);\r\n\t--pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\r\n\t--pops-slider-border-radius: 3px;\r\n\t--pops-slider-height: 6px;\r\n\t--pops-slider-button-size: 20px;\r\n\t--pops-slider-button-wrapper-size: 36px;\r\n\t--pops-slider-button-wrapper-offset: -15px;\r\n}\r\n\r\n.pops-slider {\r\n\twidth: 100%;\r\n\theight: 32px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-ms-user-select: none;\r\n\t-moz-user-select: none;\r\n}\r\n\r\n.pops-slider-width {\r\n\tflex: 0 0 52%;\r\n\tmargin-left: 10px;\r\n}\r\n\r\n.pops-slider__runway {\r\n\tflex: 1;\r\n\theight: var(--pops-slider-height);\r\n\tbackground-color: var(--pops-slider-runway-bg-color);\r\n\tborder-radius: var(--pops-slider-border-radius);\r\n\tposition: relative;\r\n\tcursor: pointer;\r\n}\r\n\r\n.pops-slider__runway.show-input {\r\n\tmargin-right: 30px;\r\n\twidth: auto;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled {\r\n\tcursor: default;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\r\n\tbackground-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\r\n\tborder-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n\tcursor: not-allowed;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n\ttransform: scale(1);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n\tcursor: not-allowed;\r\n}\r\n\r\n.pops-slider__input {\r\n\tflex-shrink: 0;\r\n\twidth: 130px;\r\n}\r\n\r\n.pops-slider__bar {\r\n\theight: var(--pops-slider-height);\r\n\tbackground-color: var(--pops-slider-main-bg-color);\r\n\tborder-top-left-radius: var(--pops-slider-border-radius);\r\n\tborder-bottom-left-radius: var(--pops-slider-border-radius);\r\n\tposition: absolute;\r\n}\r\n\r\n.pops-slider__button-wrapper {\r\n\theight: var(--pops-slider-button-wrapper-size);\r\n\twidth: var(--pops-slider-button-wrapper-size);\r\n\tposition: absolute;\r\n\tz-index: 1;\r\n\ttop: var(--pops-slider-button-wrapper-offset);\r\n\ttransform: translate(-50%);\r\n\tbackground-color: transparent;\r\n\ttext-align: center;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tline-height: normal;\r\n\toutline: none;\r\n}\r\n\r\n.pops-slider__button-wrapper:after {\r\n\tdisplay: inline-block;\r\n\tcontent: \"\";\r\n\theight: 100%;\r\n\tvertical-align: middle;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n\tcursor: grab;\r\n}\r\n\r\n.pops-slider__button {\r\n\tdisplay: inline-block;\r\n\twidth: var(--pops-slider-button-size);\r\n\theight: var(--pops-slider-button-size);\r\n\tvertical-align: middle;\r\n\tborder: solid 2px var(--pops-slider-main-bg-color);\r\n\tbackground-color: var(--pops-slider-color-white);\r\n\tborder-radius: 50%;\r\n\tbox-sizing: border-box;\r\n\ttransition: var(--pops-slider-transition-duration-fast);\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover,\r\n.pops-slider__button.dragging {\r\n\ttransform: scale(1.2);\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n\tcursor: grab;\r\n}\r\n\r\n.pops-slider__button.dragging {\r\n\tcursor: grabbing;\r\n}\r\n\r\n.pops-slider__stop {\r\n\tposition: absolute;\r\n\theight: var(--pops-slider-height);\r\n\twidth: var(--pops-slider-height);\r\n\tborder-radius: var(--pops-slider-border-radius-circle);\r\n\tbackground-color: var(--pops-slider-stop-bg-color);\r\n\ttransform: translate(-50%);\r\n}\r\n\r\n.pops-slider__marks {\r\n\ttop: 0;\r\n\tleft: 12px;\r\n\twidth: 18px;\r\n\theight: 100%;\r\n}\r\n\r\n.pops-slider__marks-text {\r\n\tposition: absolute;\r\n\ttransform: translate(-50%);\r\n\tfont-size: 14px;\r\n\tcolor: var(--pops-slider-color-info);\r\n\tmargin-top: 15px;\r\n\twhite-space: pre;\r\n}\r\n\r\n.pops-slider.is-vertical {\r\n\tposition: relative;\r\n\tdisplay: inline-flex;\r\n\twidth: auto;\r\n\theight: 100%;\r\n\tflex: 0;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__runway {\r\n\twidth: var(--pops-slider-height);\r\n\theight: 100%;\r\n\tmargin: 0 16px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__bar {\r\n\twidth: var(--pops-slider-height);\r\n\theight: auto;\r\n\tborder-radius: 0 0 3px 3px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__button-wrapper {\r\n\ttop: auto;\r\n\tleft: var(--pops-slider-button-wrapper-offset);\r\n\ttransform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__stop {\r\n\ttransform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__marks-text {\r\n\tmargin-top: 0;\r\n\tleft: 15px;\r\n\ttransform: translateY(50%);\r\n}\r\n\r\n.pops-slider--large {\r\n\theight: 40px;\r\n}\r\n\r\n.pops-slider--small {\r\n\theight: 24px;\r\n}\r\n/* slider的CSS */\r\n\r\n/* input的CSS */\r\n.pops-panel-input {\r\n\t--el-disabled-text-color: #a8abb2;\r\n\t--el-disabled-bg-color: #f5f7fa;\r\n\t--el-disabled-border-color: #e4e7ed;\r\n\r\n\t--pops-panel-components-input-text-color: #000000;\r\n\t--pops-panel-components-input-text-bg-color: transparent;\r\n\t--pops-panel-components-input-bd-color: #dcdfe6;\r\n\t--pops-panel-components-input-bg-color: #ffffff;\r\n\t--pops-panel-components-input-hover-bd-color: #c0c4cc;\r\n\t--pops-panel-components-input-focus-bd-color: #409eff;\r\n\t--pops-panel-components-input-suffix-color: #a8abb2;\r\n}\r\n.pops-panel-input {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tborder: 1px solid var(--pops-panel-components-input-bd-color);\r\n\tborder-radius: 4px;\r\n\tbackground-color: var(--pops-panel-components-input-bg-color);\r\n\tposition: relative;\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-input:hover {\r\n\tborder: 1px solid var(--pops-panel-components-input-hover-bd-color);\r\n}\r\n.pops-panel-input:has(input:disabled):hover {\r\n\t--pops-panel-components-input-hover-bd-color: var(\r\n\t\t--pops-panel-components-input-bd-color\r\n\t);\r\n}\r\n.pops-panel-input:has(input:focus) {\r\n\toutline: 0;\r\n\tborder: 1px solid var(--pops-panel-components-input-focus-bd-color);\r\n\tborder-radius: 4px;\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-input input {\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\ttext-align: start;\r\n\talign-items: center;\r\n\talign-content: center;\r\n\twhite-space: nowrap;\r\n\tcursor: text;\r\n\tbox-sizing: border-box;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tvertical-align: middle;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tcolor: var(--pops-panel-components-input-text-color);\r\n\tbackground-color: var(--pops-panel-components-input-text-bg-color);\r\n\toutline: 0;\r\n\ttransition: 0.1s;\r\n\tborder: 0;\r\n\tfont-size: 14px;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n\theight: 32px;\r\n\twidth: 100%;\r\n\tflex: 1;\r\n\tmargin-right: calc(1em + 8px);\r\n\tpadding: 8px 8px;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix {\r\n\tdisplay: inline-flex;\r\n\twhite-space: nowrap;\r\n\tflex-shrink: 0;\r\n\tflex-wrap: nowrap;\r\n\theight: 100%;\r\n\ttext-align: center;\r\n\tcolor: var(--pops-panel-components-input-suffix-color);\r\n\ttransition: all 0.3s;\r\n\tpointer-events: none;\r\n\tmargin: 0 8px;\r\n\tposition: absolute;\r\n\tright: 0px;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix-inner {\r\n\tpointer-events: all;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n\tcursor: pointer;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n\theight: inherit;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\ttransition: all 0.3s;\r\n}\r\n.pops-panel-input .pops-panel-icon svg {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n}\r\n\r\n.pops-input-disabled {\r\n\tbackground-color: var(--el-disabled-bg-color);\r\n}\r\n.pops-panel-input.pops-input-disabled {\r\n\tborder: none;\r\n}\r\n.pops-panel-input.pops-input-disabled:hover {\r\n\t--pops-panel-components-input-hover-bd-color: var(\r\n\t\t--pops-panel-components-input-bd-color\r\n\t);\r\n}\r\n.pops-panel-input input:disabled,\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tcolor: var(--el-disabled-text-color);\r\n\t-webkit-text-fill-color: var(--el-disabled-text-color);\r\n\tcursor: not-allowed;\r\n}\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n\tdisplay: none;\r\n}\r\n/* input的CSS */\r\n\r\n/* textarea的CSS */\r\n.pops-panel-textarea {\r\n\t--pops-panel-components-textarea-text-color: #000000;\r\n\t--pops-panel-components-textarea-text-bg-color: #ffffff;\r\n\t--pops-panel-components-textarea-bd-color: #dcdfe6;\r\n\t--pops-panel-components-textarea-hover-bd-color: #c0c4cc;\r\n\t--pops-panel-components-textarea-focus-bd-color: #409eff;\r\n}\r\n.pops-panel-textarea textarea {\r\n\twidth: 100%;\r\n\t/*vertical-align: bottom;*/\r\n\tposition: relative;\r\n\tdisplay: block;\r\n\tresize: none;\r\n\tpadding: 5px 11px;\r\n\t/*line-height: 1;*/\r\n\tbox-sizing: border-box;\r\n\tfont-size: inherit;\r\n\tfont-family: inherit;\r\n\tcolor: var(--pops-panel-components-textarea-text-color);\r\n\tbackground-color: var(--pops-panel-components-textarea-text-bg-color);\r\n\tbackground-image: none;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tbox-shadow: none;\r\n\tborder-radius: 0;\r\n\ttransition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\r\n\tborder: 1px solid var(--pops-panel-components-textarea-bd-color);\r\n}\r\n.pops-panel-textarea textarea:hover {\r\n\tborder-color: var(--pops-panel-components-textarea-hover-bd-color);\r\n}\r\n.pops-panel-textarea:has(textarea:disabled):hover {\r\n\t--pops-panel-components-textarea-hover-bd-color: var(\r\n\t\t--pops-panel-components-textarea-bd-color\r\n\t);\r\n}\r\n.pops-panel-textarea-disable .pops-panel-textarea textarea:hover {\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-textarea textarea:focus {\r\n\toutline: 0;\r\n\tborder-color: var(--pops-panel-components-textarea-focus-bd-color);\r\n}\r\n/* textarea的CSS */\r\n\r\n/* select的CSS */\r\n.pops-panel-select {\r\n\t--pops-panel-components-select-text-color: #000000;\r\n\t--pops-panel-components-select-bd-color: rgb(\r\n\t\t184,\r\n\t\t184,\r\n\t\t184,\r\n\t\tvar(--pops-bd-opacity)\r\n\t);\r\n\t--pops-panel-components-select-bg-color: rgb(\r\n\t\t255,\r\n\t\t255,\r\n\t\t255,\r\n\t\tvar(--pops-bg-opacity)\r\n\t);\r\n\t--pops-panel-components-select-hover-bd-color: #c0c4cc;\r\n}\r\n.pops-panel-select {\r\n\tborder: 0;\r\n}\r\n.pops-panel-select select {\r\n\theight: 32px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tmin-width: 200px;\r\n\tborder: 1px solid var(--pops-panel-components-select-bd-color);\r\n\tborder-radius: 5px;\r\n\ttext-align: center;\r\n\toutline: 0;\r\n\tcolor: var(--pops-panel-components-select-text-color);\r\n\tbackground-color: var(--pops-panel-components-select-bg-color);\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-select select:hover {\r\n\t--pops-panel-components-select-bd-color: var(\r\n\t\t--pops-panel-components-select-hover-bd-color\r\n\t);\r\n}\r\n.pops-panel-select-disable .pops-panel-select select:hover {\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-select select:focus {\r\n\tborder: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n\tbox-shadow: none;\r\n}\r\n/* select的CSS */\r\n\r\n/* select-multiple的CSS*/\r\n.pops-panel-select-multiple {\r\n\t--el-border-radius-base: 4px;\r\n\t--el-fill-color-blank: #ffffff;\r\n\t--el-transition-duration: 0.3s;\r\n\t--el-border-color: #dcdfe6;\r\n\t--el-text-color-placeholder: #a8abb2;\r\n\t--color: inherit;\r\n\t--el-select-input-color: #a8abb2;\r\n\t--el-select-input-font-size: 14px;\r\n\t--el-text-color-regular: #606266;\r\n\t--el-color-info: #909399;\r\n\t--el-color-info-light-9: #f4f4f5;\r\n\t--el-color-info-light-8: #e9e9eb;\r\n\t--el-color-primary-light-9: #ecf5ff;\r\n\t--el-color-primary-light-8: #d9ecff;\r\n\t--el-color-primary: #409eff;\r\n\t--el-color-white: #ffffff;\r\n\twidth: 200px;\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tbox-sizing: border-box;\r\n\tcursor: pointer;\r\n\ttext-align: left;\r\n\tfont-size: 14px;\r\n\tpadding: 4px 12px;\r\n\tgap: 6px;\r\n\tmin-height: 32px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tborder-radius: var(--el-border-radius-base);\r\n\tbackground-color: var(--el-fill-color-blank);\r\n\ttransition: var(--el-transition-duration);\r\n\ttransform: translateZ(0);\r\n\tbox-shadow: 0 0 0 1px var(--el-border-color) inset;\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\r\n\tbox-shadow: 0 0 0 1px var(--el-color-primary) inset;\r\n}\r\n.pops-panel-select-multiple .el-select__selection {\r\n\tposition: relative;\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\talign-items: center;\r\n\tflex: 1;\r\n\tmin-width: 0;\r\n\tgap: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__selected-item {\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\t-webkit-user-select: none;\r\n\tuser-select: none;\r\n}\r\n.pops-panel-select-multiple\r\n\t.el-select__selected-item.el-select__choose_tag\r\n\t.el-tag {\r\n\tmax-width: 200px;\r\n}\r\n.pops-panel-select-multiple .el-select__input-wrapper {\r\n\tmax-width: 100%;\r\n}\r\n.pops-panel-select-multiple .el-select__selection.is-near {\r\n\tmargin-left: -8px;\r\n}\r\n.pops-panel-select-multiple .el-select__placeholder {\r\n\tposition: absolute;\r\n\tdisplay: block;\r\n\ttop: 50%;\r\n\ttransform: translateY(-50%);\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tcolor: var(--el-input-text-color, var(--el-text-color-regular));\r\n}\r\n.pops-panel-select-multiple .el-select__placeholder.is-transparent {\r\n\t-webkit-user-select: none;\r\n\tuser-select: none;\r\n\tcolor: var(--el-text-color-placeholder);\r\n}\r\n.pops-panel-select-multiple .el-select__prefix,\r\n.pops-panel-select-multiple .el-select__suffix {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tflex-shrink: 0;\r\n\tgap: 6px;\r\n\tcolor: var(--el-input-icon-color, var(--el-text-color-placeholder));\r\n}\r\n.pops-panel-select-multiple .el-icon {\r\n\t--color: inherit;\r\n\theight: 1em;\r\n\twidth: 1em;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n\tcolor: var(--color);\r\n\tfont-size: inherit;\r\n}\r\n.pops-panel-select-multiple .el-icon svg {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n}\r\n.pops-panel-select-multiple .el-select__caret {\r\n\tcolor: var(--el-select-input-color);\r\n\tfont-size: var(--el-select-input-font-size);\r\n\ttransition: var(--el-transition-duration);\r\n\ttransform: rotate(0);\r\n\tcursor: pointer;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n\t--el-tag-font-size: 12px;\r\n\t--el-tag-border-radius: 4px;\r\n\t--el-tag-border-radius-rounded: 9999px;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n\tbackground-color: var(--el-tag-bg-color);\r\n\tborder-color: var(--el-tag-border-color);\r\n\tcolor: var(--el-tag-text-color);\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tvertical-align: middle;\r\n\theight: 24px;\r\n\tpadding: 0 9px;\r\n\tfont-size: var(--el-tag-font-size);\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tborder-width: 1px;\r\n\tborder-style: solid;\r\n\tborder-radius: var(--el-tag-border-radius);\r\n\tbox-sizing: border-box;\r\n\twhite-space: nowrap;\r\n\t--el-icon-size: 14px;\r\n\t--el-tag-bg-color: var(--el-color-primary-light-9);\r\n\t--el-tag-border-color: var(--el-color-primary-light-8);\r\n\t--el-tag-hover-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag {\r\n\tcursor: pointer;\r\n\tborder-color: transparent;\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n\t--el-tag-bg-color: var(--el-color-info-light-9);\r\n\t--el-tag-border-color: var(--el-color-info-light-8);\r\n\t--el-tag-hover-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n\t--el-tag-text-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.is-closable {\r\n\tpadding-right: 5px;\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\r\n\tmin-width: 0;\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n\tflex-shrink: 0;\r\n\tcolor: var(--el-tag-text-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\r\n\tcolor: var(--el-color-white);\r\n\tbackground-color: var(--el-tag-hover-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-icon {\r\n\tborder-radius: 50%;\r\n\tcursor: pointer;\r\n\tfont-size: calc(var(--el-icon-size) - 2px);\r\n\theight: var(--el-icon-size);\r\n\twidth: var(--el-icon-size);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n\tmargin-left: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__tags-text {\r\n\tdisplay: block;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n}\r\n/* select-multiple的CSS*/\r\n\r\n/* deepMenu的css */\r\n.pops-panel-deepMenu-nav-item {\r\n\tcursor: pointer;\r\n}\r\n.pops-panel-deepMenu-nav-item:active {\r\n\tbackground: #e9e9e9;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tcolor: #6c6c6c;\r\n\tfill: #6c6c6c;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\r\n\twidth: 15px;\r\n\theight: 15px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\nsection.pops-panel-deepMenu-container\r\n\t.pops-panel-container-header-ul\r\n\tli.pops-panel-deepMenu-container-header {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\twidth: -webkit-fill-available;\r\n\twidth: -moz-available;\r\n\tpadding: var(--pops-panel-forms-header-padding-top-bottom)\r\n\t\tcalc(\r\n\t\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\t\tvar(--pops-panel-forms-container-li-padding-left-right) -\r\n\t\t\t\tvar(--pops-panel-forms-header-icon-size)\r\n\t\t);\r\n\tgap: 0px;\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n\twidth: var(--pops-panel-forms-header-icon-size);\r\n\theight: var(--pops-panel-forms-header-icon-size);\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tcursor: pointer;\r\n}\r\n/* 修复safari上图标大小未正常显示 */\r\n.pops-panel-deepMenu-container\r\n\t.pops-panel-deepMenu-container-left-arrow-icon\r\n\t> svg {\r\n\twidth: inherit;\r\n\theight: inherit;\r\n}\r\n/* deepMenu的css */\r\n\r\n/* 文字对齐 */\r\n.pops-panel-item-left-desc-text:has(code) {\r\n\tdisplay: flex;\r\n\talign-items: baseline;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n\t.pops[type-value=\"panel\"] {\r\n\t\t--pops-bg-color: #000000;\r\n\t\t--pops-color: #f2f2f2;\r\n\t\t--panel-title-bg-color: #000000;\r\n\t\t--panel-aside-bg-color: #262626;\r\n\t\t--pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n\t\t--pops-panel-forms-container-item-bg-color: #262626;\r\n\t\t--pops-panel-forms-container-item-title-color: #c1c1c1;\r\n\r\n\t\t--pops-panel-forms-container-li-border-color: rgb(\r\n\t\t\t51,\r\n\t\t\t51,\r\n\t\t\t51,\r\n\t\t\tvar(--pops-bd-opacity)\r\n\t\t);\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\t.pops-panel-deepMenu-container\r\n\t\t.pops-panel-deepMenu-container-left-arrow-icon {\r\n\t\tfill: #f2f2f2;\r\n\t}\r\n\r\n\t/* switch的CSS */\r\n\t.pops-panel-switch {\r\n\t\t--panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n\t\t--panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n\t\t--panel-switch-circle-color: #dcdfe6;\r\n\t\t--panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t\t--panel-switch-checked-circle-color: #409eff;\r\n\t\t--panel-switch-checked-core-bd-color: rgb(\r\n\t\t\t64,\r\n\t\t\t158,\r\n\t\t\t255,\r\n\t\t\tvar(--pops-bd-opacity)\r\n\t\t);\r\n\t\t--panel-switch-checked-core-bg-color: rgb(\r\n\t\t\t64,\r\n\t\t\t158,\r\n\t\t\t255,\r\n\t\t\tvar(--pops-bg-opacity)\r\n\t\t);\r\n\t}\r\n\t/* select的CSS */\r\n\t.pops-panel-select {\r\n\t\t--pops-panel-components-select-text-color: #f2f2f2;\r\n\t\t--pops-panel-components-select-bd-color: rgb(\r\n\t\t\t51,\r\n\t\t\t51,\r\n\t\t\t51,\r\n\t\t\tvar(--pops-bd-opacity)\r\n\t\t);\r\n\t\t--pops-panel-components-select-bg-color: #141414;\r\n\t}\r\n\t/* select-multiple的CSS*/\r\n\t.pops-panel-select-multiple {\r\n\t\t--el-fill-color-blank: #141414;\r\n\t\t--el-border-color: #4c4d4f;\r\n\t\t--el-text-color-placeholder: #a8abb2;\r\n\t\t--el-select-input-color: #a8abb2;\r\n\t\t--el-text-color-regular: #606266;\r\n\t\t--el-color-info: #909399;\r\n\t\t--el-color-info-light-8: #e9e9eb;\r\n\t\t--el-color-primary-light-9: #ecf5ff;\r\n\t\t--el-color-primary-light-8: #d9ecff;\r\n\t\t--el-color-primary: #409eff;\r\n\t\t--el-color-white: #ffffff;\r\n\t}\r\n\t/* select-multiple的CSS*/\r\n\t.pops-panel-select-multiple .el-tag {\r\n\t\t--el-color-info-light-9: #202121;\r\n\t}\r\n\t/* slider的CSS */\r\n\t.pops-slider {\r\n\t\t--pops-slider-border-color-light: #414243;\r\n\t}\r\n\t/* input的CSS */\r\n\t.pops-panel-input {\r\n\t\t--pops-panel-components-input-text-color: #f2f2f2;\r\n\t\t--pops-panel-components-input-bd-color: #4f5052;\r\n\t\t--pops-panel-components-input-bg-color: #141414;\r\n\t\t--pops-panel-components-input-hover-bd-color: #6f7175;\r\n\t\t--pops-panel-components-input-focus-bd-color: #409eff;\r\n\t\t--pops-panel-components-input-suffix-color: #a8abb2;\r\n\t}\r\n\t/* textarea的CSS */\r\n\t.pops-panel-textarea {\r\n\t\t--pops-panel-components-textarea-text-color: #f2f2f2;\r\n\t\t--pops-panel-components-textarea-text-bg-color: #141414;\r\n\t\t--pops-panel-components-textarea-bd-color: #4f5052;\r\n\t\t--pops-panel-components-textarea-hover-bd-color: #6f7175;\r\n\t\t--pops-panel-components-textarea-focus-bd-color: #409eff;\r\n\t}\r\n}\r\n";
|
|
2412
|
+
var panelCSS = ".pops[type-value=\"panel\"] {\r\n\t--pops-bg-color: #f2f2f2;\r\n\t--pops-color: #333333;\r\n\t--panel-title-bg-color: #ffffff;\r\n\r\n\t--panel-aside-bg-color: #ffffff;\r\n\t--panel-aside-hover-color: rgb(64, 158, 255);\r\n\t--panel-aside-hover-bg-color: rgba(64, 158, 255, 0.1);\r\n\r\n\t--pops-panel-forms-margin-top-bottom: 10px;\r\n\t--pops-panel-forms-margin-left-right: 20px;\r\n\t--pops-panel-forms-header-icon-size: calc(\r\n\t\tvar(--pops-panel-forms-container-li-padding-left-right) + 1px\r\n\t);\r\n\t--pops-panel-forms-header-padding-top-bottom: 15px;\r\n\t--pops-panel-forms-header-padding-left-right: 10px;\r\n\t--pops-panel-forms-container-item-left-text-gap: 6px;\r\n\t--pops-panel-forms-container-item-left-desc-text-size: 0.8em;\r\n\t--pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n\t--pops-panel-forms-container-item-bg-color: #ffffff;\r\n\t--pops-panel-forms-container-item-title-color: #333;\r\n\t--pops-panel-forms-container-item-border-radius: 6px;\r\n\t--pops-panel-forms-container-item-margin-top-bottom: 10px;\r\n\t--pops-panel-forms-container-item-margin-left-right: var(\r\n\t\t--pops-panel-forms-margin-left-right\r\n\t);\r\n\t--pops-panel-forms-container-li-border-color: var(--pops-bd-color);\r\n\t--pops-panel-forms-container-li-padding-top-bottom: 12px;\r\n\t--pops-panel-forms-container-li-padding-left-right: 16px;\r\n}\r\n.pops[type-value=\"panel\"] {\r\n\tcolor: var(--pops-color);\r\n\tbackground: var(--pops-bg-color);\r\n}\r\n.pops[type-value] .pops-panel-title {\r\n\tbackground: var(--panel-title-bg-color);\r\n}\r\n\r\n/* ↓panel的CSS↓ */\r\naside.pops-panel-aside {\r\n\tbox-sizing: border-box;\r\n\tflex-shrink: 0;\r\n\tmax-width: 200px;\r\n\tmin-width: 100px;\r\n\theight: 100%;\r\n\tbackground: var(--panel-aside-bg-color);\r\n\tborder-right: 1px solid var(--panel-aside-bg-color);\r\n\tfont-size: 0.9em;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tjustify-content: space-between;\r\n}\r\naside.pops-panel-aside {\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n}\r\naside.pops-panel-aside .pops-panel-aside-top-container {\r\n\toverflow: auto;\r\n}\r\n.pops-panel-content {\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tflex-basis: auto;\r\n\tbox-sizing: border-box;\r\n\tmin-width: 0;\r\n\tbottom: 0 !important;\r\n}\r\nsection.pops-panel-container {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul,\r\nsection.pops-panel-container .pops-panel-deepMenu-container-header-ul {\r\n\tborder-bottom: 1px solid rgba(223, 223, 223, var(--pops-bg-opacity));\r\n\tflex: 0 auto;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul li,\r\nsection.pops-panel-container\r\n\t.pops-panel-container-header-ul\r\n\tli.pops-panel-container-header-title-text {\r\n\tdisplay: flex;\r\n\tjustify-content: flex-start !important;\r\n\tmargin: 0px !important;\r\n\tpadding: var(--pops-panel-forms-header-padding-top-bottom)\r\n\t\tcalc(\r\n\t\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\t\tvar(--pops-panel-forms-container-li-padding-left-right)\r\n\t\t);\r\n\ttext-align: left;\r\n}\r\nsection.pops-panel-container ul.pops-panel-container-main-ul {\r\n\toverflow: auto;\r\n\t/*flex: 1;*/\r\n}\r\naside.pops-panel-aside ul li {\r\n\tmargin: 6px 8px;\r\n\tborder-radius: 4px;\r\n\tpadding: 6px 10px;\r\n\tcursor: default;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: flex-start;\r\n}\r\naside.pops-panel-aside .pops-is-visited,\r\naside.pops-panel-aside ul li:not(.pops-panel-disabled-aside-hover-css):hover {\r\n\tcolor: var(--panel-aside-hover-color);\r\n\tbackground: var(--panel-aside-hover-bg-color);\r\n}\r\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\r\n\tdisplay: flex;\r\n\tjustify-content: space-between;\r\n\talign-items: center;\r\n\tmargin: var(--pops-panel-forms-margin-top-bottom)\r\n\t\tcalc(\r\n\t\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\t\tvar(--pops-panel-forms-margin-left-right)\r\n\t\t);\r\n\tgap: 10px;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\r\n\tmargin: 10px;\r\n\tmargin-left: calc(\r\n\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\tvar(--pops-panel-forms-container-li-padding-left-right)\r\n\t);\r\n\tfont-size: 0.9em;\r\n\ttext-align: left;\r\n\tcolor: var(--pops-panel-forms-container-item-title-color);\r\n}\r\nsection.pops-panel-container li.pops-panel-forms-container-item {\r\n\t/* 去除<li>左侧的圆点 */\r\n\tdisplay: block;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-container-item\r\n\tul.pops-panel-forms-container-item-formlist {\r\n\tborder-radius: var(--pops-panel-forms-container-item-border-radius);\r\n\tbackground: var(--pops-panel-forms-container-item-bg-color);\r\n\tmargin: var(--pops-panel-forms-container-item-margin-top-bottom)\r\n\t\tvar(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-container-item\r\n\tul.pops-panel-forms-container-item-formlist\r\n\tli {\r\n\tdisplay: flex;\r\n\tjustify-content: space-between;\r\n\talign-items: center;\r\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px;\r\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right);\r\n\tborder-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\r\n\ttext-align: left;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-container-item\r\n\tul\r\n\tli.pops-panel-deepMenu-nav-item {\r\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom)\r\n\t\tvar(--pops-panel-forms-container-li-padding-left-right);\r\n\tmargin: 0px;\r\n\tborder-bottom: 0;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-container-item\r\n\tul.pops-panel-forms-container-item-formlist\r\n\tli:last-child {\r\n\tborder: 0;\r\n}\r\n/* 左侧的文字 */\r\nsection.pops-panel-container .pops-panel-item-left-text {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tgap: var(--pops-panel-forms-container-item-left-text-gap);\r\n}\r\n\r\n/* 左侧的主文字 */\r\n/*section.pops-panel-container .pops-panel-item-left-main-text {\r\n\t\r\n}*/\r\n/* 左侧的描述文字 */\r\nsection.pops-panel-container .pops-panel-item-left-desc-text {\r\n\tfont-size: var(--pops-panel-forms-container-item-left-desc-text-size);\r\n\tcolor: var(--pops-panel-forms-container-item-left-desc-text-color);\r\n}\r\n\r\n/* 折叠面板 */\r\nsection.pops-panel-container .pops-panel-forms-fold {\r\n\tborder-radius: var(--pops-panel-forms-container-item-border-radius);\r\n\tbackground: var(--pops-panel-forms-container-item-bg-color);\r\n\tmargin: var(--pops-panel-forms-margin-top-bottom)\r\n\t\tvar(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\t.pops-panel-forms-fold-container {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tfill: #6c6c6c;\r\n\tjustify-content: space-between;\r\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\r\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold[data-fold-enable]\r\n\t.pops-panel-forms-fold-container-icon {\r\n\ttransform: rotate(90deg);\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\t.pops-panel-forms-fold-container-icon {\r\n\twidth: 15px;\r\n\theight: 15px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\ttransform: rotate(-90deg);\r\n\ttransition: transform 0.3s;\r\n}\r\n/* 折叠状态 */\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold[data-fold-enable]\r\n\t.pops-panel-forms-container-item-formlist {\r\n\theight: 0;\r\n}\r\n/* 非折叠状态 */\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\tul.pops-panel-forms-container-item-formlist {\r\n\tmargin: 0;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\t.pops-panel-forms-container-item-formlist {\r\n\ttransition: height 0.3s;\r\n\toverflow: hidden;\r\n\tborder-radius: unset;\r\n\tbackground: unset;\r\n\tmargin: 0;\r\n\theight: calc-size(auto, size);\r\n}\r\n/* 折叠面板 */\r\n\r\n/* 姑且认为小于600px的屏幕为移动端 */\r\n@media (max-width: 600px) {\r\n\t/* 兼容移动端CSS */\r\n\t.pops[type-value=\"panel\"] {\r\n\t\t--pops-panel-forms-margin-left-right: 10px;\r\n\t}\r\n\t.pops[type-value=\"panel\"] {\r\n\t\twidth: 92%;\r\n\t\twidth: 92vw;\r\n\t\twidth: 92dvw;\r\n\t}\r\n\t.pops[type-value=\"panel\"] .pops-panel-content aside.pops-panel-aside {\r\n\t\tmax-width: 20%;\r\n\t\tmin-width: auto;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-forms-container-item\r\n\t\t> div {\r\n\t\ttext-align: left;\r\n\t\t--pops-panel-forms-margin-left-right: 0px;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-forms-container-item\r\n\t\tul {\r\n\t\tmargin: 0px !important;\r\n\t}\r\n\t.pops[type-value=\"panel\"] section.pops-panel-container > ul > li {\r\n\t\tmargin: 10px 10px;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t> ul\r\n\t\t> li\r\n\t\tdiv:nth-child(2) {\r\n\t\tmax-width: 55%;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-select\r\n\t\tselect {\r\n\t\tmin-width: 88px !important;\r\n\t\twidth: -webkit-fill-available;\r\n\t\twidth: -moz-available;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-container-header-ul\r\n\t\tli {\r\n\t\tfont-size: 16px;\r\n\t}\r\n\t.pops[type-value=\"panel\"] .pops-panel-title p[pops],\r\n\t.pops[type-value=\"panel\"] section.pops-panel-container > ul li,\r\n\t.pops[type-value=\"panel\"] aside.pops-panel-aside ul li {\r\n\t\tfont-size: 14px;\r\n\t}\r\n}\r\n/* switch的CSS */\r\n.pops-panel-switch {\r\n\t--panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n\t--panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n\t--panel-switch-circle-color: #dcdfe6;\r\n\t--panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t--panel-switch-checked-circle-color: #409eff;\r\n\t--panel-switch-checked-core-bd-color: rgb(\r\n\t\t64,\r\n\t\t158,\r\n\t\t255,\r\n\t\tvar(--pops-bd-opacity)\r\n\t);\r\n\t--panel-switch-checked-core-bg-color: rgb(\r\n\t\t64,\r\n\t\t158,\r\n\t\t255,\r\n\t\tvar(--pops-bg-opacity)\r\n\t);\r\n}\r\n.pops-panel-switch {\r\n\tdisplay: inline-flex;\r\n\tflex-direction: row-reverse;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfont-size: 14px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\theight: 32px;\r\n\tvertical-align: middle;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-ms-user-select: none;\r\n\t-moz-user-select: none;\r\n}\r\n.pops-panel-switch input.pops-panel-switch__input {\r\n\tposition: absolute;\r\n\twidth: 0;\r\n\theight: 0;\r\n\topacity: 0;\r\n\tmargin: 0;\r\n}\r\n.pops-panel-switch:has(input.pops-panel-switch__input:disabled),\r\n.pops-panel-switch[data-disabled],\r\n.pops-panel-switch[data-disabled] .pops-panel-switch__core,\r\n.pops-panel-switch\r\n\tinput.pops-panel-switch__input:disabled\r\n\t+ .pops-panel-switch__core {\r\n\tcursor: not-allowed;\r\n\topacity: 0.6;\r\n}\r\n.pops-panel-switch span.pops-panel-switch__core {\r\n\tdisplay: inline-flex;\r\n\tposition: relative;\r\n\talign-items: center;\r\n\tmin-width: 40px;\r\n\theight: 20px;\r\n\tborder: 1px solid var(--panel-switch-core-bd-color);\r\n\toutline: 0;\r\n\tborder-radius: 10px;\r\n\tbox-sizing: border-box;\r\n\tbackground: var(--panel-switch-core-bg-color);\r\n\tcursor: pointer;\r\n\ttransition: border-color 0.3s, background-color 0.3s;\r\n}\r\n.pops-panel-switch .pops-panel-switch__action {\r\n\tposition: absolute;\r\n\tleft: 1px;\r\n\tborder-radius: 100%;\r\n\ttransition: all 0.3s;\r\n\twidth: 16px;\r\n\theight: 16px;\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tbackground-color: var(--panel-switch-circle-bg-color);\r\n\tcolor: var(--panel-switch-circle-color);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\r\n\tborder-color: var(--panel-switch-checked-core-bd-color);\r\n\tbackground-color: var(--panel-switch-checked-core-bg-color);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {\r\n\tleft: calc(100% - 17px);\r\n\tcolor: var(--panel-switch-checked-circle-color);\r\n}\r\n/* switch的CSS */\r\n\r\n/* slider旧的CSS */\r\nsection.pops-panel-container .pops-panel-slider:has(> input[type=\"range\"]) {\r\n\toverflow: hidden;\r\n\theight: 25px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"] {\r\n\theight: 6px;\r\n\tbackground: rgb(228, 231, 237, var(--pops-bg-opacity));\r\n\toutline: 0;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\twidth: 100%;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-slider\r\n\tinput[type=\"range\"]::-webkit-slider-thumb {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\tborder-radius: 50%;\r\n\tborder: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbox-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);\r\n\tcursor: pointer;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tborder-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-slider\r\n\tinput[type=\"range\"]::-moz-range-thumb {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\tborder-radius: 50%;\r\n\tborder: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbox-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);\r\n\tcursor: pointer;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-slider\r\n\tinput[type=\"range\"]::-moz-range-progress {\r\n\theight: 6px;\r\n\tborder-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\n/* slider旧的CSS */\r\n\r\n/* slider的CSS */\r\n.pops-slider {\r\n\t--pops-slider-color-white: #ffffff;\r\n\t--pops-slider-color-primary: #409eff;\r\n\t--pops-slider-color-info: #909399;\r\n\t--pops-slider-text-color-placeholder: #a8abb2;\r\n\t--pops-slider-border-color-light: #e4e7ed;\r\n\t--pops-slider-border-radius-circle: 100%;\r\n\t--pops-slider-transition-duration-fast: 0.2s;\r\n\r\n\t--pops-slider-main-bg-color: var(--pops-slider-color-primary);\r\n\t--pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\r\n\t--pops-slider-stop-bg-color: var(--pops-slider-color-white);\r\n\t--pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\r\n\t--pops-slider-border-radius: 3px;\r\n\t--pops-slider-height: 6px;\r\n\t--pops-slider-button-size: 20px;\r\n\t--pops-slider-button-wrapper-size: 36px;\r\n\t--pops-slider-button-wrapper-offset: -15px;\r\n}\r\n\r\n.pops-slider {\r\n\twidth: 100%;\r\n\theight: 32px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-ms-user-select: none;\r\n\t-moz-user-select: none;\r\n}\r\n\r\n.pops-slider-width {\r\n\tflex: 0 0 52%;\r\n\tmargin-left: 10px;\r\n}\r\n\r\n.pops-slider__runway {\r\n\tflex: 1;\r\n\theight: var(--pops-slider-height);\r\n\tbackground-color: var(--pops-slider-runway-bg-color);\r\n\tborder-radius: var(--pops-slider-border-radius);\r\n\tposition: relative;\r\n\tcursor: pointer;\r\n}\r\n\r\n.pops-slider__runway.show-input {\r\n\tmargin-right: 30px;\r\n\twidth: auto;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled {\r\n\tcursor: default;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\r\n\tbackground-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\r\n\tborder-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n\tcursor: not-allowed;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n\ttransform: scale(1);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n\tcursor: not-allowed;\r\n}\r\n\r\n.pops-slider__input {\r\n\tflex-shrink: 0;\r\n\twidth: 130px;\r\n}\r\n\r\n.pops-slider__bar {\r\n\theight: var(--pops-slider-height);\r\n\tbackground-color: var(--pops-slider-main-bg-color);\r\n\tborder-top-left-radius: var(--pops-slider-border-radius);\r\n\tborder-bottom-left-radius: var(--pops-slider-border-radius);\r\n\tposition: absolute;\r\n}\r\n\r\n.pops-slider__button-wrapper {\r\n\theight: var(--pops-slider-button-wrapper-size);\r\n\twidth: var(--pops-slider-button-wrapper-size);\r\n\tposition: absolute;\r\n\tz-index: 1;\r\n\ttop: var(--pops-slider-button-wrapper-offset);\r\n\ttransform: translate(-50%);\r\n\tbackground-color: transparent;\r\n\ttext-align: center;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tline-height: normal;\r\n\toutline: none;\r\n}\r\n\r\n.pops-slider__button-wrapper:after {\r\n\tdisplay: inline-block;\r\n\tcontent: \"\";\r\n\theight: 100%;\r\n\tvertical-align: middle;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n\tcursor: grab;\r\n}\r\n\r\n.pops-slider__button {\r\n\tdisplay: inline-block;\r\n\twidth: var(--pops-slider-button-size);\r\n\theight: var(--pops-slider-button-size);\r\n\tvertical-align: middle;\r\n\tborder: solid 2px var(--pops-slider-main-bg-color);\r\n\tbackground-color: var(--pops-slider-color-white);\r\n\tborder-radius: 50%;\r\n\tbox-sizing: border-box;\r\n\ttransition: var(--pops-slider-transition-duration-fast);\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover,\r\n.pops-slider__button.dragging {\r\n\ttransform: scale(1.2);\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n\tcursor: grab;\r\n}\r\n\r\n.pops-slider__button.dragging {\r\n\tcursor: grabbing;\r\n}\r\n\r\n.pops-slider__stop {\r\n\tposition: absolute;\r\n\theight: var(--pops-slider-height);\r\n\twidth: var(--pops-slider-height);\r\n\tborder-radius: var(--pops-slider-border-radius-circle);\r\n\tbackground-color: var(--pops-slider-stop-bg-color);\r\n\ttransform: translate(-50%);\r\n}\r\n\r\n.pops-slider__marks {\r\n\ttop: 0;\r\n\tleft: 12px;\r\n\twidth: 18px;\r\n\theight: 100%;\r\n}\r\n\r\n.pops-slider__marks-text {\r\n\tposition: absolute;\r\n\ttransform: translate(-50%);\r\n\tfont-size: 14px;\r\n\tcolor: var(--pops-slider-color-info);\r\n\tmargin-top: 15px;\r\n\twhite-space: pre;\r\n}\r\n\r\n.pops-slider.is-vertical {\r\n\tposition: relative;\r\n\tdisplay: inline-flex;\r\n\twidth: auto;\r\n\theight: 100%;\r\n\tflex: 0;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__runway {\r\n\twidth: var(--pops-slider-height);\r\n\theight: 100%;\r\n\tmargin: 0 16px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__bar {\r\n\twidth: var(--pops-slider-height);\r\n\theight: auto;\r\n\tborder-radius: 0 0 3px 3px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__button-wrapper {\r\n\ttop: auto;\r\n\tleft: var(--pops-slider-button-wrapper-offset);\r\n\ttransform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__stop {\r\n\ttransform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__marks-text {\r\n\tmargin-top: 0;\r\n\tleft: 15px;\r\n\ttransform: translateY(50%);\r\n}\r\n\r\n.pops-slider--large {\r\n\theight: 40px;\r\n}\r\n\r\n.pops-slider--small {\r\n\theight: 24px;\r\n}\r\n/* slider的CSS */\r\n\r\n/* input的CSS */\r\n.pops-panel-input {\r\n\t--el-disabled-text-color: #a8abb2;\r\n\t--el-disabled-bg-color: #f5f7fa;\r\n\t--el-disabled-border-color: #e4e7ed;\r\n\r\n\t--pops-panel-components-input-text-color: #000000;\r\n\t--pops-panel-components-input-text-bg-color: transparent;\r\n\t--pops-panel-components-input-bd-color: #dcdfe6;\r\n\t--pops-panel-components-input-bg-color: #ffffff;\r\n\t--pops-panel-components-input-hover-bd-color: #c0c4cc;\r\n\t--pops-panel-components-input-focus-bd-color: #409eff;\r\n\t--pops-panel-components-input-suffix-color: #a8abb2;\r\n}\r\n.pops-panel-input {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tborder: 1px solid var(--pops-panel-components-input-bd-color);\r\n\tborder-radius: 4px;\r\n\tbackground-color: var(--pops-panel-components-input-bg-color);\r\n\tposition: relative;\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-input:hover {\r\n\tborder: 1px solid var(--pops-panel-components-input-hover-bd-color);\r\n}\r\n.pops-panel-input:has(input:disabled):hover {\r\n\t--pops-panel-components-input-hover-bd-color: var(\r\n\t\t--pops-panel-components-input-bd-color\r\n\t);\r\n}\r\n.pops-panel-input:has(input:focus) {\r\n\toutline: 0;\r\n\tborder: 1px solid var(--pops-panel-components-input-focus-bd-color);\r\n\tborder-radius: 4px;\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-input input {\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\ttext-align: start;\r\n\talign-items: center;\r\n\talign-content: center;\r\n\twhite-space: nowrap;\r\n\tcursor: text;\r\n\tbox-sizing: border-box;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tvertical-align: middle;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tcolor: var(--pops-panel-components-input-text-color);\r\n\tbackground-color: var(--pops-panel-components-input-text-bg-color);\r\n\toutline: 0;\r\n\ttransition: 0.1s;\r\n\tborder: 0;\r\n\tfont-size: 14px;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n\theight: 32px;\r\n\twidth: 100%;\r\n\tflex: 1;\r\n\tmargin-right: calc(1em + 8px);\r\n\tpadding: 8px 8px;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix {\r\n\tdisplay: inline-flex;\r\n\twhite-space: nowrap;\r\n\tflex-shrink: 0;\r\n\tflex-wrap: nowrap;\r\n\theight: 100%;\r\n\ttext-align: center;\r\n\tcolor: var(--pops-panel-components-input-suffix-color);\r\n\ttransition: all 0.3s;\r\n\tpointer-events: none;\r\n\tmargin: 0 8px;\r\n\tposition: absolute;\r\n\tright: 0px;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix-inner {\r\n\tpointer-events: all;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n\tcursor: pointer;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n\theight: inherit;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\ttransition: all 0.3s;\r\n}\r\n.pops-panel-input .pops-panel-icon svg {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n}\r\n\r\n.pops-input-disabled {\r\n\tbackground-color: var(--pops-components-is-disabled-bg-color);\r\n}\r\n.pops-panel-input.pops-input-disabled:hover {\r\n\t--pops-panel-components-input-hover-bd-color: var(\r\n\t\t--pops-panel-components-input-bd-color\r\n\t);\r\n}\r\n.pops-panel-input input:disabled,\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tcolor: var(--el-disabled-text-color);\r\n\t-webkit-text-fill-color: var(--el-disabled-text-color);\r\n\tcursor: not-allowed;\r\n}\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n\tdisplay: none;\r\n}\r\n/* input的CSS */\r\n\r\n/* textarea的CSS */\r\n.pops-panel-textarea {\r\n\t--pops-panel-components-textarea-text-color: #000000;\r\n\t--pops-panel-components-textarea-text-bg-color: #ffffff;\r\n\t--pops-panel-components-textarea-bd-color: #dcdfe6;\r\n\t--pops-panel-components-textarea-hover-bd-color: #c0c4cc;\r\n\t--pops-panel-components-textarea-focus-bd-color: #409eff;\r\n}\r\n.pops-panel-textarea textarea {\r\n\twidth: 100%;\r\n\t/*vertical-align: bottom;*/\r\n\tposition: relative;\r\n\tdisplay: block;\r\n\tresize: none;\r\n\tpadding: 5px 11px;\r\n\t/*line-height: 1;*/\r\n\tbox-sizing: border-box;\r\n\tfont-size: inherit;\r\n\tfont-family: inherit;\r\n\tcolor: var(--pops-panel-components-textarea-text-color);\r\n\tbackground-color: var(--pops-panel-components-textarea-text-bg-color);\r\n\tbackground-image: none;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tbox-shadow: none;\r\n\tborder-radius: 0;\r\n\ttransition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\r\n\tborder: 1px solid var(--pops-panel-components-textarea-bd-color);\r\n}\r\n.pops-panel-textarea textarea:hover {\r\n\tborder-color: var(--pops-panel-components-textarea-hover-bd-color);\r\n}\r\n.pops-panel-textarea:has(textarea:disabled):hover {\r\n\t--pops-panel-components-textarea-hover-bd-color: var(\r\n\t\t--pops-panel-components-textarea-bd-color\r\n\t);\r\n}\r\n.pops-panel-textarea-disable {\r\n\t--pops-panel-components-textarea-text-bg-color: var(\r\n\t\t--pops-components-is-disabled-bg-color\r\n\t) !important;\r\n\t--pops-panel-components-textarea-text-color: var(\r\n\t\t--pops-components-is-disabled-text-color\r\n\t);\r\n}\r\n.pops-panel-textarea-disable textarea {\r\n\tcursor: not-allowed;\r\n}\r\n.pops-panel-textarea textarea:focus {\r\n\toutline: 0;\r\n\tborder-color: var(--pops-panel-components-textarea-focus-bd-color);\r\n}\r\n/* textarea的CSS */\r\n\r\n/* select的CSS */\r\n.pops-panel-select {\r\n\t--pops-panel-components-select-text-color: #000000;\r\n\t--pops-panel-components-select-bd-color: rgb(\r\n\t\t184,\r\n\t\t184,\r\n\t\t184,\r\n\t\tvar(--pops-bd-opacity)\r\n\t);\r\n\t--pops-panel-components-select-hover-bd-color: rgb(\r\n\t\t184,\r\n\t\t184,\r\n\t\t184,\r\n\t\tvar(--pops-bd-opacity)\r\n\t);\r\n\t--pops-panel-components-select-bg-color: rgb(\r\n\t\t255,\r\n\t\t255,\r\n\t\t255,\r\n\t\tvar(--pops-bg-opacity)\r\n\t);\r\n}\r\n.pops-panel-select {\r\n\tborder: 0;\r\n}\r\n.pops-panel-select select {\r\n\theight: 32px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tmin-width: 200px;\r\n\tborder: 1px solid var(--pops-panel-components-select-bd-color);\r\n\tborder-radius: 5px;\r\n\ttext-align: center;\r\n\toutline: 0;\r\n\tcolor: var(--pops-panel-components-select-text-color);\r\n\tbackground-color: var(--pops-panel-components-select-bg-color);\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-select select:hover {\r\n\tborder: 1px solid var(--pops-panel-components-select-hover-bd-color);\r\n}\r\n.pops-panel-select-disable {\r\n\t--pops-panel-components-select-text-color: var(\r\n\t\t--pops-components-is-disabled-text-color\r\n\t);\r\n\t--pops-panel-components-select-bg-color: var(\r\n\t\t--pops-components-is-disabled-bg-color\r\n\t);\r\n}\r\n.pops-panel-select-disable select {\r\n\tcursor: not-allowed;\r\n}\r\n.pops-panel-select-disable select:hover {\r\n\tbox-shadow: none;\r\n\t--pops-panel-components-select-hover-bd-color: var(\r\n\t\t--pops-panel-components-select-bd-color\r\n\t);\r\n}\r\n.pops-panel-select select:focus {\r\n\tborder: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n\tbox-shadow: none;\r\n}\r\n/* select的CSS */\r\n\r\n/* select-multiple的CSS*/\r\n.pops-panel-select-multiple {\r\n\t--el-border-radius-base: 4px;\r\n\t--el-fill-color-blank: #ffffff;\r\n\t--el-transition-duration: 0.3s;\r\n\t--el-border-color: #cbcbcb;\r\n\t--el-text-color-placeholder: #a8abb2;\r\n\t--color: inherit;\r\n\t--el-select-input-color: #a8abb2;\r\n\t--el-select-input-font-size: 14px;\r\n\t--el-text-color-regular: #606266;\r\n\t--el-color-info: #909399;\r\n\t--el-color-info-light-9: #f4f4f5;\r\n\t--el-color-info-light-8: #e9e9eb;\r\n\t--el-color-primary-light-9: #ecf5ff;\r\n\t--el-color-primary-light-8: #d9ecff;\r\n\t--el-color-primary: #409eff;\r\n\t--el-color-white: #ffffff;\r\n\twidth: 200px;\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tbox-sizing: border-box;\r\n\tcursor: pointer;\r\n\ttext-align: left;\r\n\tfont-size: 14px;\r\n\tpadding: 4px 12px;\r\n\tgap: 6px;\r\n\tmin-height: 32px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tborder-radius: var(--el-border-radius-base);\r\n\tbackground-color: var(--el-fill-color-blank);\r\n\ttransition: var(--el-transition-duration);\r\n\ttransform: translateZ(0);\r\n\tborder: 1px solid var(--el-border-color);\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\r\n\t--el-border-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select-multiple .el-select__selection {\r\n\tposition: relative;\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\talign-items: center;\r\n\tflex: 1;\r\n\tmin-width: 0;\r\n\tgap: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__selected-item {\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\t-webkit-user-select: none;\r\n\tuser-select: none;\r\n}\r\n.pops-panel-select-multiple\r\n\t.el-select__selected-item.el-select__choose_tag\r\n\t.el-tag {\r\n\tmax-width: 200px;\r\n}\r\n.pops-panel-select-multiple .el-select__input-wrapper {\r\n\tmax-width: 100%;\r\n}\r\n.pops-panel-select-multiple .el-select__selection.is-near {\r\n\tmargin-left: -8px;\r\n}\r\n.pops-panel-select-multiple .el-select__placeholder {\r\n\tposition: absolute;\r\n\tdisplay: block;\r\n\ttop: 50%;\r\n\ttransform: translateY(-50%);\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tcolor: var(--el-input-text-color, var(--el-text-color-regular));\r\n}\r\n.pops-panel-select-multiple .el-select__placeholder.is-transparent {\r\n\t-webkit-user-select: none;\r\n\tuser-select: none;\r\n\tcolor: var(--el-text-color-placeholder);\r\n}\r\n.pops-panel-select-multiple .el-select__prefix,\r\n.pops-panel-select-multiple .el-select__suffix {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tflex-shrink: 0;\r\n\tgap: 6px;\r\n\tcolor: var(--el-input-icon-color, var(--el-text-color-placeholder));\r\n}\r\n.pops-panel-select-multiple .el-icon {\r\n\t--color: inherit;\r\n\theight: 1em;\r\n\twidth: 1em;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n\tcolor: var(--color);\r\n\tfont-size: inherit;\r\n}\r\n.pops-panel-select-multiple .el-icon svg {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n}\r\n.pops-panel-select-multiple .el-select__caret {\r\n\tcolor: var(--el-select-input-color);\r\n\tfont-size: var(--el-select-input-font-size);\r\n\ttransition: var(--el-transition-duration);\r\n\ttransform: rotate(0);\r\n\tcursor: pointer;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n\t--el-tag-font-size: 12px;\r\n\t--el-tag-border-radius: 4px;\r\n\t--el-tag-border-radius-rounded: 9999px;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n\tbackground-color: var(--el-tag-bg-color);\r\n\tborder-color: var(--el-tag-border-color);\r\n\tcolor: var(--el-tag-text-color);\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tvertical-align: middle;\r\n\theight: 24px;\r\n\tpadding: 0 9px;\r\n\tfont-size: var(--el-tag-font-size);\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tborder-width: 1px;\r\n\tborder-style: solid;\r\n\tborder-radius: var(--el-tag-border-radius);\r\n\tbox-sizing: border-box;\r\n\twhite-space: nowrap;\r\n\t--el-icon-size: 14px;\r\n\t--el-tag-bg-color: var(--el-color-primary-light-9);\r\n\t--el-tag-border-color: var(--el-color-primary-light-8);\r\n\t--el-tag-hover-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag {\r\n\tcursor: pointer;\r\n\tborder-color: transparent;\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n\t--el-tag-bg-color: var(--el-color-info-light-9);\r\n\t--el-tag-border-color: var(--el-color-info-light-8);\r\n\t--el-tag-hover-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n\t--el-tag-text-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.is-closable {\r\n\tpadding-right: 5px;\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\r\n\tmin-width: 0;\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n\tflex-shrink: 0;\r\n\tcolor: var(--el-tag-text-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\r\n\tcolor: var(--el-color-white);\r\n\tbackground-color: var(--el-tag-hover-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-icon {\r\n\tborder-radius: 50%;\r\n\tcursor: pointer;\r\n\tfont-size: calc(var(--el-icon-size) - 2px);\r\n\theight: var(--el-icon-size);\r\n\twidth: var(--el-icon-size);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n\tmargin-left: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__tags-text {\r\n\tdisplay: block;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n}\r\n.pops-panel-select-multiple-disable {\r\n\t--el-fill-color-blank: #f5f7fa;\r\n\t--color: #a8abb2;\r\n\t--el-border-color: #cbcbcb;\r\n}\r\n.pops-panel-select-multiple-disable .el-tag.el-tag--info {\r\n\t--el-tag-bg-color: #e7e7e7;\r\n\t--el-tag-text-color: var(--pops-components-is-disabled-text-color);\r\n}\r\n.pops-panel-select-multiple-disable .el-select__selection .el-tag,\r\n.pops-panel-select-multiple-disable .el-tag .el-tag__close:hover,\r\n.pops-panel-select-multiple-disable .el-select__wrapper,\r\n.pops-panel-select-multiple-disable .el-select__caret {\r\n\tcursor: not-allowed;\r\n}\r\n/* select-multiple的CSS*/\r\n\r\n/* deepMenu的css */\r\n.pops-panel-deepMenu-nav-item {\r\n\tcursor: pointer;\r\n}\r\n.pops-panel-deepMenu-nav-item:active {\r\n\tbackground: #e9e9e9;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tcolor: #6c6c6c;\r\n\tfill: #6c6c6c;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\r\n\twidth: 15px;\r\n\theight: 15px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\nsection.pops-panel-deepMenu-container\r\n\t.pops-panel-container-header-ul\r\n\tli.pops-panel-deepMenu-container-header {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\twidth: -webkit-fill-available;\r\n\twidth: -moz-available;\r\n\tpadding: var(--pops-panel-forms-header-padding-top-bottom)\r\n\t\tcalc(\r\n\t\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\t\tvar(--pops-panel-forms-container-li-padding-left-right) -\r\n\t\t\t\tvar(--pops-panel-forms-header-icon-size)\r\n\t\t);\r\n\tgap: 0px;\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n\twidth: var(--pops-panel-forms-header-icon-size);\r\n\theight: var(--pops-panel-forms-header-icon-size);\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tcursor: pointer;\r\n}\r\n/* 修复safari上图标大小未正常显示 */\r\n.pops-panel-deepMenu-container\r\n\t.pops-panel-deepMenu-container-left-arrow-icon\r\n\t> svg {\r\n\twidth: inherit;\r\n\theight: inherit;\r\n}\r\n/* deepMenu的css */\r\n\r\n/* 文字对齐 */\r\n.pops-panel-item-left-desc-text:has(code) {\r\n\tdisplay: flex;\r\n\talign-items: baseline;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n\t.pops[type-value=\"panel\"] {\r\n\t\t--pops-bg-color: #000000;\r\n\t\t--pops-color: #f2f2f2;\r\n\t\t--panel-title-bg-color: #000000;\r\n\t\t--panel-aside-bg-color: #262626;\r\n\t\t--pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n\t\t--pops-panel-forms-container-item-bg-color: #262626;\r\n\t\t--pops-panel-forms-container-item-title-color: #c1c1c1;\r\n\r\n\t\t--pops-panel-forms-container-li-border-color: rgb(\r\n\t\t\t51,\r\n\t\t\t51,\r\n\t\t\t51,\r\n\t\t\tvar(--pops-bd-opacity)\r\n\t\t);\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\t.pops-panel-deepMenu-container\r\n\t\t.pops-panel-deepMenu-container-left-arrow-icon {\r\n\t\tfill: #f2f2f2;\r\n\t}\r\n\r\n\t/* switch的CSS */\r\n\t.pops-panel-switch {\r\n\t\t--panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n\t\t--panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n\t\t--panel-switch-circle-color: #dcdfe6;\r\n\t\t--panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t\t--panel-switch-checked-circle-color: #409eff;\r\n\t\t--panel-switch-checked-core-bd-color: rgb(\r\n\t\t\t64,\r\n\t\t\t158,\r\n\t\t\t255,\r\n\t\t\tvar(--pops-bd-opacity)\r\n\t\t);\r\n\t\t--panel-switch-checked-core-bg-color: rgb(\r\n\t\t\t64,\r\n\t\t\t158,\r\n\t\t\t255,\r\n\t\t\tvar(--pops-bg-opacity)\r\n\t\t);\r\n\t}\r\n\t/* select的CSS */\r\n\t.pops-panel-select {\r\n\t\t--pops-panel-components-select-text-color: #f2f2f2;\r\n\t\t--pops-panel-components-select-bd-color: rgb(\r\n\t\t\t51,\r\n\t\t\t51,\r\n\t\t\t51,\r\n\t\t\tvar(--pops-bd-opacity)\r\n\t\t);\r\n\t\t--pops-panel-components-select-bg-color: #141414;\r\n\t}\r\n\t/* select-multiple的CSS*/\r\n\t.pops-panel-select-multiple {\r\n\t\t--el-fill-color-blank: #141414;\r\n\t\t--el-border-color: #4c4d4f;\r\n\t\t--el-text-color-placeholder: #a8abb2;\r\n\t\t--el-select-input-color: #a8abb2;\r\n\t\t--el-text-color-regular: #606266;\r\n\t\t--el-color-info: #909399;\r\n\t\t--el-color-info-light-8: #e9e9eb;\r\n\t\t--el-color-primary-light-9: #ecf5ff;\r\n\t\t--el-color-primary-light-8: #d9ecff;\r\n\t\t--el-color-primary: #409eff;\r\n\t\t--el-color-white: #ffffff;\r\n\t}\r\n\t.pops-panel-select-multiple .el-tag {\r\n\t\t--el-color-info-light-9: #202121;\r\n\t}\r\n\t.pops-panel-select-multiple-disable {\r\n\t\t--el-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n\t}\r\n\t.pops-panel-select-multiple-disable .el-tag.el-tag--info {\r\n\t\t--el-tag-bg-color: #2f2f2f;\r\n\t}\r\n\t/* select-multiple的CSS*/\r\n\t/* slider的CSS */\r\n\t.pops-slider {\r\n\t\t--pops-slider-border-color-light: #414243;\r\n\t}\r\n\t/* input的CSS */\r\n\t.pops-panel-input {\r\n\t\t--pops-panel-components-input-text-color: #f2f2f2;\r\n\t\t--pops-panel-components-input-bd-color: #4f5052;\r\n\t\t--pops-panel-components-input-bg-color: #141414;\r\n\t\t--pops-panel-components-input-hover-bd-color: #6f7175;\r\n\t\t--pops-panel-components-input-focus-bd-color: #409eff;\r\n\t\t--pops-panel-components-input-suffix-color: #a8abb2;\r\n\t}\r\n\t/* textarea的CSS */\r\n\t.pops-panel-textarea {\r\n\t\t--pops-panel-components-textarea-text-color: #f2f2f2;\r\n\t\t--pops-panel-components-textarea-text-bg-color: #141414;\r\n\t\t--pops-panel-components-textarea-bd-color: #4f5052;\r\n\t\t--pops-panel-components-textarea-hover-bd-color: #6f7175;\r\n\t\t--pops-panel-components-textarea-focus-bd-color: #409eff;\r\n\t}\r\n\t.pops-panel-textarea-disable {\r\n\t\t--pops-panel-components-textarea-text-color: var(\r\n\t\t\t--pops-components-is-disabled-text-color\r\n\t\t);\r\n\t\t--pops-panel-components-textarea-text-bg-color: var(\r\n\t\t\t--pops-components-is-disabled-bg-color\r\n\t\t);\r\n\t}\r\n\t/* slider */\r\n\t.pops-slider {\r\n\t\t--pops-slider-text-color-placeholder: #8d9095;\r\n\t}\r\n}\r\n";
|
|
2413
2413
|
|
|
2414
2414
|
var rightClickMenuCSS = ".pops-rightClickMenu {\r\n\t--pops-right-context-color: #000000;\r\n\t--pops-right-context-bg-color: #ffffff;\r\n\t--pops-right-context-z-index: 10000;\r\n\t--pops-right-context-menu-shadow-color: #cacaca;\r\n\t--pops-right-context-menu-row-visited-color: #dfdfdf;\r\n\t--pops-right-context-menu-row-hover-color: #dfdfdf;\r\n}\r\n.pops-rightClickMenu * {\r\n\t-webkit-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\t-webkit-tap-highlight-color: transparent;\r\n\tscrollbar-width: thin;\r\n}\r\n.pops-rightClickMenu {\r\n\tposition: fixed;\r\n\tz-index: var(--pops-right-context-z-index);\r\n\ttext-align: center;\r\n\tborder-radius: 3px;\r\n\tfont-size: 16px;\r\n\tfont-weight: 500;\r\n\tcolor: var(--pops-right-context-color);\r\n\tbackground-color: var(--pops-right-context-bg-color);\r\n\tbox-shadow: 0px 1px 6px 1px var(--pops-right-context-menu-shadow-color);\r\n}\r\n.pops-rightClickMenu-anim-grid {\r\n\tdisplay: grid;\r\n\ttransition: 0.3s;\r\n\tgrid-template-rows: 0fr;\r\n}\r\n.pops-rightClickMenu-anim-show {\r\n\tgrid-template-rows: 1fr;\r\n}\r\n.pops-rightClickMenu-is-visited {\r\n\tbackground: var(--pops-right-context-menu-row-visited-color);\r\n}\r\ni.pops-rightClickMenu-icon {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n\tcolor: inherit;\r\n\tfont-size: inherit;\r\n\tmargin-right: 6px;\r\n}\r\ni.pops-rightClickMenu-icon[is-loading=\"true\"] {\r\n\tanimation: rotating 2s linear infinite;\r\n}\r\n.pops-rightClickMenu li:hover {\r\n\tbackground: var(--pops-right-context-menu-row-hover-color);\r\n\tcursor: pointer;\r\n}\r\n.pops-rightClickMenu ul {\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\talign-items: flex-start;\r\n\tjustify-content: center;\r\n\toverflow: hidden;\r\n}\r\n.pops-rightClickMenu ul li {\r\n\tpadding: 5px 10px;\r\n\tmargin: 5px 5px;\r\n\tborder-radius: 3px;\r\n\tdisplay: flex;\r\n\twidth: -webkit-fill-available;\r\n\twidth: -moz-available;\r\n\ttext-align: left;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\talign-items: center;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n\t.pops-rightClickMenu {\r\n\t\t--pops-right-context-menu-shadow-color: #3c3c3c;\r\n\t}\r\n}\r\n";
|
|
2415
2415
|
|
|
@@ -6321,7 +6321,6 @@
|
|
|
6321
6321
|
type: "switch",
|
|
6322
6322
|
// @ts-ignore
|
|
6323
6323
|
props: {},
|
|
6324
|
-
disabled: false,
|
|
6325
6324
|
attributes: [],
|
|
6326
6325
|
getValue() {
|
|
6327
6326
|
return true;
|
|
@@ -6346,6 +6345,21 @@
|
|
|
6346
6345
|
min: 1,
|
|
6347
6346
|
max: 100,
|
|
6348
6347
|
},
|
|
6348
|
+
{
|
|
6349
|
+
className: "panel-button",
|
|
6350
|
+
text: "button",
|
|
6351
|
+
type: "button",
|
|
6352
|
+
// @ts-ignore
|
|
6353
|
+
props: {},
|
|
6354
|
+
attributes: [],
|
|
6355
|
+
buttonIcon: "view",
|
|
6356
|
+
buttonIconIsLoading: true,
|
|
6357
|
+
buttonType: "default",
|
|
6358
|
+
buttonText: "default按钮",
|
|
6359
|
+
callback(event) {
|
|
6360
|
+
console.log("点击按钮", event);
|
|
6361
|
+
},
|
|
6362
|
+
},
|
|
6349
6363
|
{
|
|
6350
6364
|
className: "panel-button",
|
|
6351
6365
|
text: "button",
|
|
@@ -6460,6 +6474,7 @@
|
|
|
6460
6474
|
className: "panel-select",
|
|
6461
6475
|
text: "select",
|
|
6462
6476
|
type: "select",
|
|
6477
|
+
disabled: true,
|
|
6463
6478
|
// @ts-ignore
|
|
6464
6479
|
props: {},
|
|
6465
6480
|
attributes: [],
|
|
@@ -6500,6 +6515,7 @@
|
|
|
6500
6515
|
className: "panel-select-multiple",
|
|
6501
6516
|
type: "select-multiple",
|
|
6502
6517
|
text: "select-multiple",
|
|
6518
|
+
disabled: true,
|
|
6503
6519
|
// @ts-ignore
|
|
6504
6520
|
props: {},
|
|
6505
6521
|
attributes: [],
|
|
@@ -7675,10 +7691,10 @@
|
|
|
7675
7691
|
value: Boolean(formConfig.getValue()),
|
|
7676
7692
|
},
|
|
7677
7693
|
$ele: {
|
|
7694
|
+
itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
|
|
7678
7695
|
switch: $li.querySelector(".pops-panel-switch"),
|
|
7679
7696
|
input: $li.querySelector(".pops-panel-switch__input"),
|
|
7680
7697
|
core: $li.querySelector(".pops-panel-switch__core"),
|
|
7681
|
-
itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
|
|
7682
7698
|
},
|
|
7683
7699
|
init() {
|
|
7684
7700
|
this.setStatus(this.$data.value);
|
|
@@ -7905,6 +7921,7 @@
|
|
|
7905
7921
|
tooltip: null,
|
|
7906
7922
|
},
|
|
7907
7923
|
$ele: {
|
|
7924
|
+
itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
|
|
7908
7925
|
slider: $li.querySelector(".pops-slider"),
|
|
7909
7926
|
runAway: $li.querySelector(".pops-slider__runway"),
|
|
7910
7927
|
bar: $li.querySelector(".pops-slider__bar"),
|
|
@@ -8161,29 +8178,30 @@
|
|
|
8161
8178
|
* 禁止拖拽
|
|
8162
8179
|
*/
|
|
8163
8180
|
disableDrag() {
|
|
8164
|
-
this.$ele.runAway
|
|
8181
|
+
popsDOMUtils.addClassName(this.$ele.runAway, "pops-slider-is-disabled");
|
|
8182
|
+
popsDOMUtils.addClassName(this.$ele.runAway, PopsCommonCSSClassName.textIsDisabled);
|
|
8165
8183
|
},
|
|
8166
8184
|
/**
|
|
8167
8185
|
* 允许拖拽
|
|
8168
8186
|
*/
|
|
8169
8187
|
allowDrag() {
|
|
8170
|
-
this.$ele.runAway
|
|
8188
|
+
popsDOMUtils.removeClassName(this.$ele.runAway, "pops-slider-is-disabled");
|
|
8189
|
+
popsDOMUtils.removeClassName(this.$ele.runAway, PopsCommonCSSClassName.textIsDisabled);
|
|
8171
8190
|
},
|
|
8172
8191
|
/**
|
|
8173
8192
|
* 判断当前滑块是否被禁用
|
|
8174
8193
|
*/
|
|
8175
8194
|
isDisabledDrag() {
|
|
8176
|
-
return this.$ele.runAway
|
|
8195
|
+
return popsDOMUtils.containsClassName(this.$ele.runAway, "pops-slider-is-disabled");
|
|
8177
8196
|
},
|
|
8178
8197
|
/**
|
|
8179
8198
|
* 判断当前滑块是否被禁用（配置中判断）
|
|
8180
8199
|
*/
|
|
8181
8200
|
isFormConfigDisabledDrag() {
|
|
8182
|
-
|
|
8183
|
-
|
|
8184
|
-
|
|
8185
|
-
|
|
8186
|
-
: formConfig.disabled;
|
|
8201
|
+
let isDisabled = typeof formConfig.disabled === "function"
|
|
8202
|
+
? formConfig.disabled()
|
|
8203
|
+
: formConfig.disabled;
|
|
8204
|
+
if (typeof isDisabled === "boolean") {
|
|
8187
8205
|
return isDisabled;
|
|
8188
8206
|
}
|
|
8189
8207
|
else {
|
|
@@ -8194,13 +8212,16 @@
|
|
|
8194
8212
|
* 设置进度条点击定位的事件
|
|
8195
8213
|
*/
|
|
8196
8214
|
setRunAwayClickEvent() {
|
|
8197
|
-
popsDOMUtils.on(this.$ele.runAway, "click",
|
|
8215
|
+
popsDOMUtils.on(this.$ele.runAway, "click", (event) => {
|
|
8198
8216
|
if (event.target !== this.$ele.runAway &&
|
|
8199
8217
|
event.target !== this.$ele.bar) {
|
|
8200
8218
|
return;
|
|
8201
8219
|
}
|
|
8202
8220
|
let clickX = parseFloat(event.offsetX.toString());
|
|
8203
|
-
this.dragStartCallBack();
|
|
8221
|
+
let dragStartResult = this.dragStartCallBack();
|
|
8222
|
+
if (!dragStartResult) {
|
|
8223
|
+
return;
|
|
8224
|
+
}
|
|
8204
8225
|
this.dragMoveCallBack(event, clickX, this.value);
|
|
8205
8226
|
this.dragEndCallBack(clickX);
|
|
8206
8227
|
}, {
|
|
@@ -8211,17 +8232,16 @@
|
|
|
8211
8232
|
* 拖拽开始的回调，如果返回false，禁止拖拽
|
|
8212
8233
|
*/
|
|
8213
8234
|
dragStartCallBack() {
|
|
8235
|
+
if (this.isFormConfigDisabledDrag()) {
|
|
8236
|
+
// 禁止
|
|
8237
|
+
this.disableDrag();
|
|
8238
|
+
return false;
|
|
8239
|
+
}
|
|
8214
8240
|
if (!this.$data.isMove) {
|
|
8215
|
-
|
|
8216
|
-
|
|
8217
|
-
this.disableDrag();
|
|
8218
|
-
return false;
|
|
8219
|
-
}
|
|
8220
|
-
else {
|
|
8241
|
+
// 非移动中
|
|
8242
|
+
if (this.isDisabledDrag()) {
|
|
8221
8243
|
// 允许
|
|
8222
|
-
|
|
8223
|
-
this.allowDrag();
|
|
8224
|
-
}
|
|
8244
|
+
this.allowDrag();
|
|
8225
8245
|
}
|
|
8226
8246
|
this.$data.isMove = true;
|
|
8227
8247
|
}
|
|
@@ -8433,6 +8453,7 @@
|
|
|
8433
8453
|
const PopsPanelInput = {
|
|
8434
8454
|
[Symbol.toStringTag]: "PopsPanelInput",
|
|
8435
8455
|
$ele: {
|
|
8456
|
+
itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
|
|
8436
8457
|
panelInput: $li.querySelector(".pops-panel-input"),
|
|
8437
8458
|
input: $li.querySelector("input"),
|
|
8438
8459
|
inputSpanIcon: document.createElement("span"),
|
|
@@ -8493,14 +8514,16 @@
|
|
|
8493
8514
|
*/
|
|
8494
8515
|
disable() {
|
|
8495
8516
|
this.$ele.input.disabled = true;
|
|
8496
|
-
this.$ele.panelInput
|
|
8517
|
+
popsDOMUtils.addClassName(this.$ele.panelInput, "pops-input-disabled");
|
|
8518
|
+
popsDOMUtils.addClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
|
|
8497
8519
|
},
|
|
8498
8520
|
/**
|
|
8499
8521
|
* 取消禁用
|
|
8500
8522
|
*/
|
|
8501
8523
|
notDisable() {
|
|
8502
8524
|
this.$ele.input.disabled = false;
|
|
8503
|
-
this.$ele.panelInput
|
|
8525
|
+
popsDOMUtils.removeClassName(this.$ele.panelInput, "pops-input-disabled");
|
|
8526
|
+
popsDOMUtils.removeClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
|
|
8504
8527
|
},
|
|
8505
8528
|
/**
|
|
8506
8529
|
* 判断是否已被禁用
|
|
@@ -8633,6 +8656,7 @@
|
|
|
8633
8656
|
const PopsPanelTextArea = {
|
|
8634
8657
|
[Symbol.toStringTag]: "PopsPanelTextArea",
|
|
8635
8658
|
$ele: {
|
|
8659
|
+
itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
|
|
8636
8660
|
panelTextarea: $li.querySelector(".pops-panel-textarea"),
|
|
8637
8661
|
textarea: $li.querySelector(".pops-panel-textarea textarea"),
|
|
8638
8662
|
},
|
|
@@ -8651,15 +8675,17 @@
|
|
|
8651
8675
|
},
|
|
8652
8676
|
disable() {
|
|
8653
8677
|
this.$ele.textarea.setAttribute("disabled", "true");
|
|
8654
|
-
this.$ele.panelTextarea
|
|
8678
|
+
popsDOMUtils.addClassName(this.$ele.panelTextarea, "pops-panel-textarea-disable");
|
|
8679
|
+
popsDOMUtils.addClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
|
|
8655
8680
|
},
|
|
8656
8681
|
notDisable() {
|
|
8657
8682
|
this.$ele.textarea.removeAttribute("disabled");
|
|
8658
|
-
this.$ele.panelTextarea
|
|
8683
|
+
popsDOMUtils.removeClassName(this.$ele.panelTextarea, "pops-panel-textarea-disable");
|
|
8684
|
+
popsDOMUtils.removeClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
|
|
8659
8685
|
},
|
|
8660
8686
|
isDisabled() {
|
|
8661
8687
|
return (this.$ele.textarea.hasAttribute("disabled") ||
|
|
8662
|
-
this.$ele.panelTextarea
|
|
8688
|
+
popsDOMUtils.containsClassName(this.$ele.panelTextarea, "pops-panel-textarea-disable"));
|
|
8663
8689
|
},
|
|
8664
8690
|
setValue(value) {
|
|
8665
8691
|
this.$ele.textarea.value = value;
|
|
@@ -8668,7 +8694,7 @@
|
|
|
8668
8694
|
* 监听选择内容改变
|
|
8669
8695
|
*/
|
|
8670
8696
|
setChangeEvent() {
|
|
8671
|
-
popsDOMUtils.on(this.$ele.textarea, ["input", "propertychange"],
|
|
8697
|
+
popsDOMUtils.on(this.$ele.textarea, ["input", "propertychange"], (event) => {
|
|
8672
8698
|
let value = this.$ele.textarea.value;
|
|
8673
8699
|
this.$data.value = value;
|
|
8674
8700
|
if (typeof formConfig.callback === "function") {
|
|
@@ -8709,6 +8735,7 @@
|
|
|
8709
8735
|
const PopsPanelSelect = {
|
|
8710
8736
|
[Symbol.toStringTag]: "PopsPanelSelect",
|
|
8711
8737
|
$ele: {
|
|
8738
|
+
itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
|
|
8712
8739
|
panelSelect: $li.querySelector(".pops-panel-select"),
|
|
8713
8740
|
select: $li.querySelector(".pops-panel-select select"),
|
|
8714
8741
|
},
|
|
@@ -8755,21 +8782,23 @@
|
|
|
8755
8782
|
*/
|
|
8756
8783
|
disable() {
|
|
8757
8784
|
this.$ele.select.setAttribute("disabled", "true");
|
|
8758
|
-
this.$ele.panelSelect
|
|
8785
|
+
popsDOMUtils.addClassName(this.$ele.panelSelect, "pops-panel-select-disable");
|
|
8786
|
+
popsDOMUtils.addClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
|
|
8759
8787
|
},
|
|
8760
8788
|
/**
|
|
8761
8789
|
* 取消禁用
|
|
8762
8790
|
*/
|
|
8763
8791
|
notDisable() {
|
|
8764
8792
|
this.$ele.select.removeAttribute("disabled");
|
|
8765
|
-
this.$ele.panelSelect
|
|
8793
|
+
popsDOMUtils.removeClassName(this.$ele.panelSelect, "pops-panel-select-disable");
|
|
8794
|
+
popsDOMUtils.removeClassName(this.$ele.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
|
|
8766
8795
|
},
|
|
8767
8796
|
/**
|
|
8768
8797
|
* 判断是否禁用
|
|
8769
8798
|
*/
|
|
8770
8799
|
isDisabled() {
|
|
8771
8800
|
return (this.$ele.select.hasAttribute("disabled") ||
|
|
8772
|
-
this.$ele.panelSelect
|
|
8801
|
+
popsDOMUtils.containsClassName(this.$ele.panelSelect, "pops-panel-select-disable"));
|
|
8773
8802
|
},
|
|
8774
8803
|
/**
|
|
8775
8804
|
* 初始化选项
|
|
@@ -8925,6 +8954,8 @@
|
|
|
8925
8954
|
const PopsPanelSelectMultiple = {
|
|
8926
8955
|
[Symbol.toStringTag]: "PopsPanelSelectMultiple",
|
|
8927
8956
|
$el: {
|
|
8957
|
+
/** 左侧文本容器 */
|
|
8958
|
+
itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
|
|
8928
8959
|
/** 容器 */
|
|
8929
8960
|
$container: void 0,
|
|
8930
8961
|
/** 包括的容器 */
|
|
@@ -8954,6 +8985,12 @@
|
|
|
8954
8985
|
this.initPlaceHolder();
|
|
8955
8986
|
this.initTagElement();
|
|
8956
8987
|
this.setSelectContainerClickEvent();
|
|
8988
|
+
let disabled = typeof formConfig.disabled === "function"
|
|
8989
|
+
? formConfig.disabled()
|
|
8990
|
+
: formConfig.disabled;
|
|
8991
|
+
if (disabled) {
|
|
8992
|
+
this.disable();
|
|
8993
|
+
}
|
|
8957
8994
|
},
|
|
8958
8995
|
/** 初始化默认值 */
|
|
8959
8996
|
initDefault() {
|
|
@@ -9333,6 +9370,9 @@
|
|
|
9333
9370
|
setSelectContainerClickEvent() {
|
|
9334
9371
|
const that = this;
|
|
9335
9372
|
popsDOMUtils.on(this.$el.$container, "click", (event) => {
|
|
9373
|
+
if (this.isDisabled()) {
|
|
9374
|
+
return;
|
|
9375
|
+
}
|
|
9336
9376
|
/** 弹窗的选中的值 */
|
|
9337
9377
|
let selectedInfo = that.$data.selectInfo;
|
|
9338
9378
|
let { style, ...userConfirmDetails } = formConfig.selectConfirmDialogDetails || {};
|
|
@@ -9464,6 +9504,9 @@
|
|
|
9464
9504
|
setSelectedItemCloseIconClickEvent(data) {
|
|
9465
9505
|
popsDOMUtils.on(data.$closeIcon, "click", (event) => {
|
|
9466
9506
|
popsDOMUtils.preventEvent(event);
|
|
9507
|
+
if (this.isDisabled()) {
|
|
9508
|
+
return;
|
|
9509
|
+
}
|
|
9467
9510
|
if (typeof formConfig.closeIconClickCallBack === "function") {
|
|
9468
9511
|
let result = formConfig.closeIconClickCallBack(event, {
|
|
9469
9512
|
$tag: data.$tag,
|
|
@@ -9545,6 +9588,26 @@
|
|
|
9545
9588
|
removeSectionIsNear() {
|
|
9546
9589
|
this.$el.$section.classList.remove("is-near");
|
|
9547
9590
|
},
|
|
9591
|
+
/**
|
|
9592
|
+
* 禁用标签
|
|
9593
|
+
*/
|
|
9594
|
+
disable() {
|
|
9595
|
+
popsDOMUtils.addClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
|
|
9596
|
+
popsDOMUtils.addClassName(this.$el.$container, "pops-panel-select-multiple-disable");
|
|
9597
|
+
},
|
|
9598
|
+
/**
|
|
9599
|
+
* 判断是否被禁用
|
|
9600
|
+
*/
|
|
9601
|
+
isDisabled() {
|
|
9602
|
+
return popsDOMUtils.containsClassName(this.$el.$container, "pops-panel-select-multiple-disable");
|
|
9603
|
+
},
|
|
9604
|
+
/**
|
|
9605
|
+
* 取消禁用标签
|
|
9606
|
+
*/
|
|
9607
|
+
cancleDisable() {
|
|
9608
|
+
popsDOMUtils.removeClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
|
|
9609
|
+
popsDOMUtils.removeClassName(this.$el.$container, "pops-panel-select-multiple-disable");
|
|
9610
|
+
},
|
|
9548
9611
|
};
|
|
9549
9612
|
PopsPanelSelectMultiple.init();
|
|
9550
9613
|
Reflect.set($li, "data-select-multiple", PopsPanelSelectMultiple);
|
|
@@ -10005,7 +10068,7 @@
|
|
|
10005
10068
|
popsDOMUtils.addClassName(formHeaderDivElement, "pops-panel-forms-fold-container");
|
|
10006
10069
|
popsDOMUtils.addClassName(formHeaderDivElement, PopsCommonCSSClassName.userSelectNone);
|
|
10007
10070
|
formContainerListElement.setAttribute("data-fold-enable", "");
|
|
10008
|
-
popsDOMUtils.addClassName(
|
|
10071
|
+
popsDOMUtils.addClassName(formContainerListElement, "pops-panel-forms-fold");
|
|
10009
10072
|
formContainerListElement.appendChild(formHeaderDivElement);
|
|
10010
10073
|
}
|
|
10011
10074
|
else {
|