plain-design 0.0.90 → 0.0.94
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/plain-design.commonjs.min.js +2 -2
- package/dist/plain-design.min.css +17 -17
- package/dist/plain-design.min.js +2 -2
- package/dist/report.html +2 -2
- package/package.json +3 -3
- package/src/packages/PlDialog/dialog.scss +8 -8
- package/src/packages/PlDialog/index.tsx +2 -2
- package/src/packages/PlDropdown/dropdown.scss +1 -1
- package/src/packages/createUseTableOption/use/use.methods.tsx +21 -1
- package/src/packages/useContextmenu/contextmenu-service.scss +1 -1
- package/src/packages/useDialog/PlDialogService.tsx +2 -2
- package/src/styles/data/scan.scss.json +14 -14
- package/src/styles/public/public.scss +31 -1
- package/src/styles/public/transition.scss +1 -1
- package/src/styles/theme/default.scss +2 -2
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "plain-design",
|
3
|
-
"version": "0.0.
|
3
|
+
"version": "0.0.94",
|
4
4
|
"description": "",
|
5
5
|
"main": "dist/plain-design.min.js",
|
6
6
|
"module": "dist/plain-design.commonjs.min.js",
|
@@ -21,7 +21,7 @@
|
|
21
21
|
"author": "",
|
22
22
|
"license": "ISC",
|
23
23
|
"peerDependencies": {
|
24
|
-
"plain-design-composition": "0.0.
|
24
|
+
"plain-design-composition": "^0.0.117",
|
25
25
|
"react": "^17.0.1",
|
26
26
|
"react-dom": "^17.0.1"
|
27
27
|
},
|
@@ -65,7 +65,7 @@
|
|
65
65
|
"fork-ts-checker-webpack-plugin": "^6.2.4",
|
66
66
|
"mini-css-extract-plugin": "^1.6.2",
|
67
67
|
"mockjs": "^1.1.0",
|
68
|
-
"plain-design-composition": "0.0.
|
68
|
+
"plain-design-composition": "0.0.117",
|
69
69
|
"postcss": "^8.2.13",
|
70
70
|
"postcss-loader": "^4.2.0",
|
71
71
|
"qs": "^6.10.1",
|
@@ -109,7 +109,7 @@
|
|
109
109
|
/*@formatter:off*/
|
110
110
|
&.pl-transition-dialog-enter {
|
111
111
|
&:before {opacity: 0;}
|
112
|
-
.pl-dialog-body {transform: translateY(-
|
112
|
+
.pl-dialog-body {transform: translateY(-10px);opacity: 0;}
|
113
113
|
}
|
114
114
|
&.pl-transition-dialog-enter-active {
|
115
115
|
&:before {opacity: 1;}
|
@@ -121,10 +121,10 @@
|
|
121
121
|
}
|
122
122
|
&.pl-transition-dialog-exit-active {
|
123
123
|
&:before {opacity: 0;}
|
124
|
-
.pl-dialog-body {transform: translateY(-
|
124
|
+
.pl-dialog-body {transform: translateY(-10px);opacity: 0;}
|
125
125
|
}
|
126
126
|
&.pl-transition-dialog-enter-active, &.pl-transition-dialog-exit-active {
|
127
|
-
transition: opacity
|
127
|
+
transition: opacity 150ms linear, transform 150ms $transition;
|
128
128
|
}
|
129
129
|
/*@formatter:on*/
|
130
130
|
}
|
@@ -171,19 +171,19 @@
|
|
171
171
|
/*@formatter:off*/
|
172
172
|
&.pl-transition-dialog-#{$key}-enter {
|
173
173
|
&:before {opacity: 0;}
|
174
|
-
.pl-dialog-body {transform: $value;}
|
174
|
+
.pl-dialog-body {opacity: 0;transform: $value;}
|
175
175
|
}
|
176
176
|
&.pl-transition-dialog-#{$key}-enter-active {
|
177
177
|
&:before {opacity: 1;}
|
178
|
-
.pl-dialog-body {transform: translate3d(0, 0, 0);}
|
178
|
+
.pl-dialog-body {opacity: 1;transform: translate3d(0, 0, 0);}
|
179
179
|
}
|
180
180
|
&.pl-transition-dialog-#{$key}-exit {
|
181
181
|
&:before {opacity: 1;}
|
182
|
-
.pl-dialog-body {transform: translate3d(0, 0, 0);}
|
182
|
+
.pl-dialog-body {opacity: 1;transform: translate3d(0, 0, 0);}
|
183
183
|
}
|
184
184
|
&.pl-transition-dialog-#{$key}-exit-active {
|
185
185
|
&:before {opacity: 0;}
|
186
|
-
.pl-dialog-body {transform: $value;}
|
186
|
+
.pl-dialog-body {opacity: 0;transform: $value;}
|
187
187
|
}
|
188
188
|
&.pl-transition-dialog-#{$key}-enter-active, &.pl-transition-dialog-#{$key}-exit-active {
|
189
189
|
.pl-dialog-body {
|
@@ -193,4 +193,4 @@
|
|
193
193
|
/*@formatter:on*/
|
194
194
|
}
|
195
195
|
}
|
196
|
-
}
|
196
|
+
}
|
@@ -121,8 +121,8 @@ export const PlDialog = designComponent({
|
|
121
121
|
let height = props.fullHeight ? `calc(100vh - ${(!!hasHead.value ? 45 : 0) + (hasFoot.value ? 50 : 0)}px)` : props.height
|
122
122
|
let width = props.fullWidth ? '100vw' : props.width
|
123
123
|
|
124
|
-
let minHeight = props.minHeight !== undefined ? props.minHeight : height !== undefined ? null : '
|
125
|
-
let minWidth = props.minWidth !== undefined ? props.minWidth : width !== undefined ? null : '
|
124
|
+
let minHeight = props.minHeight !== undefined ? props.minHeight : height !== undefined ? null : '100px'
|
125
|
+
let minWidth = props.minWidth !== undefined ? props.minWidth : width !== undefined ? null : '400px'
|
126
126
|
let maxHeight = props.maxHeight !== undefined ? props.maxHeight : height !== undefined ? null : '80vh'
|
127
127
|
let maxWidth = props.maxWidth !== undefined ? props.maxWidth : width !== undefined ? null : '60vw'
|
128
128
|
|
@@ -61,6 +61,14 @@ export function useTableOptionMethods({tableState, config, pagination, hooks, cu
|
|
61
61
|
requestConfig,
|
62
62
|
}
|
63
63
|
},
|
64
|
+
getChangeNode: (node: TableNode) => {
|
65
|
+
const {editRow, data} = node
|
66
|
+
const changeKey = Object.keys({...editRow, ...data}).find(key => editRow[key] !== data[key])
|
67
|
+
/*if (!!changeKey) {
|
68
|
+
console.log(editRow[changeKey], data[changeKey])
|
69
|
+
}*/
|
70
|
+
return !!changeKey ? node : null
|
71
|
+
},
|
64
72
|
}
|
65
73
|
|
66
74
|
const pageMethods = useAsyncMethods((() => {
|
@@ -381,6 +389,13 @@ export function useTableOptionMethods({tableState, config, pagination, hooks, cu
|
|
381
389
|
$$message.error(`第${index + 1}条记录校验不通过,${errors[0].label}:${errors[0].message}`)
|
382
390
|
return Promise.reject(validateResult)
|
383
391
|
}
|
392
|
+
const changeNode = utils.getChangeNode(node)
|
393
|
+
if (!changeNode) {
|
394
|
+
// 没有改变任何字段
|
395
|
+
node.closeEdit()
|
396
|
+
await selectCurrent(node.editRow[config.keyField])
|
397
|
+
return
|
398
|
+
}
|
384
399
|
const saveRow = await saveUpdate(node.editRow)
|
385
400
|
node.saveEdit(saveRow)
|
386
401
|
node.closeEdit()
|
@@ -425,8 +440,13 @@ export function useTableOptionMethods({tableState, config, pagination, hooks, cu
|
|
425
440
|
$$message.error(`第${index + 1}条记录校验不通过,${errors[0].label}:${errors[0].message}`)
|
426
441
|
return Promise.reject(validateResults[0])
|
427
442
|
}
|
443
|
+
const changeNodes = updateNodes.map(node => utils.getChangeNode(node)).filter(Boolean) as TableNode[]
|
444
|
+
if (changeNodes.length === 0) {
|
445
|
+
updateNodes.forEach(node => node.cancelEdit())
|
446
|
+
return confirm.close.clear()
|
447
|
+
}
|
428
448
|
let {request, requestConfig} = utils.getUrlConfig('batchUpdate')
|
429
|
-
requestConfig.body = {rows: await Promise.all(deepcopy(
|
449
|
+
requestConfig.body = {rows: await Promise.all(deepcopy(changeNodes.map(node => node.editRow)).map(row => hooks.onBeforeSaveRow.exec(row)))}
|
430
450
|
requestConfig = await hooks.onBeforeUpdate.exec(requestConfig)
|
431
451
|
await request!(requestConfig)
|
432
452
|
confirm.close.clear()
|
@@ -197,9 +197,9 @@ export default createDefaultService({
|
|
197
197
|
const width = (() => {
|
198
198
|
if (!!option.dialogProps && option.dialogProps.width !== undefined) {return option.dialogProps.width}
|
199
199
|
if (option.editType === DialogServiceEditType.textarea) {
|
200
|
-
return ((option.dialogProps || {}).width || '
|
200
|
+
return ((option.dialogProps || {}).width || '400px')
|
201
201
|
} else {
|
202
|
-
return
|
202
|
+
return 400
|
203
203
|
}
|
204
204
|
})()
|
205
205
|
|
@@ -1,5 +1,5 @@
|
|
1
1
|
{
|
2
|
-
"globalImport": "/*red*/\r\n$red_1: #fff1f0;\r\n$red_2: #ffccc7;\r\n$red_3: #ffa39e;\r\n$red_4: #ff4d4f;\r\n$red_5: #ff4d4f;\r\n$red_6: #f5222d;\r\n$red_7: #cf1322;\r\n$red_8: #a8071a;\r\n$red_9: #820014;\r\n$red_10: #5c0011;\r\n\r\n/*volcano*/\r\n$volcano_1: #fff2e8;\r\n$volcano_2: #ffd8bf;\r\n$volcano_3: #ffbb96;\r\n$volcano_4: #ff9c6e;\r\n$volcano_5: #ff7a45;\r\n$volcano_6: #fa541c;\r\n$volcano_7: #d4380d;\r\n$volcano_8: #ad2102;\r\n$volcano_9: #871400;\r\n$volcano_10: #610b00;\r\n\r\n/*orange*/\r\n$orange_1: #fff7e6;\r\n$orange_2: #ffe7ba;\r\n$orange_3: #ffd591;\r\n$orange_4: #ffc069;\r\n$orange_5: #ffa940;\r\n$orange_6: #fa8c16;\r\n$orange_7: #d46b08;\r\n$orange_8: #ad4e00;\r\n$orange_9: #873800;\r\n$orange_10: #612500;\r\n\r\n/*gold*/\r\n$gold_1: #fffbe6;\r\n$gold_2: #fff1b8;\r\n$gold_3: #ffe58f;\r\n$gold_4: #ffd666;\r\n$gold_5: #ffc53d;\r\n$gold_6: #faad14;\r\n$gold_7: #d48806;\r\n$gold_8: #ad6800;\r\n$gold_9: #874d00;\r\n$gold_10: #613400;\r\n\r\n/*yellow*/\r\n$yellow_1: #feffe6;\r\n$yellow_2: #ffffb8;\r\n$yellow_3: #fffb8f;\r\n$yellow_4: #fff566;\r\n$yellow_5: #ffec3d;\r\n$yellow_6: #fadb14;\r\n$yellow_7: #d4b106;\r\n$yellow_8: #ad8b00;\r\n$yellow_9: #876800;\r\n$yellow_10: #614700;\r\n\r\n/*lime*/\r\n$lime_1: #fcffe6;\r\n$lime_2: #f4ffb8;\r\n$lime_3: #eaff8f;\r\n$lime_4: #d3f261;\r\n$lime_5: #bae637;\r\n$lime_6: #a0d911;\r\n$lime_7: #7cb305;\r\n$lime_8: #5b8c00;\r\n$lime_9: #3f6600;\r\n$lime_10: #254000;\r\n\r\n/*green*/\r\n$green_1: #f6ffed;\r\n$green_2: #d9f7be;\r\n$green_3: #b7eb8f;\r\n$green_4: #95de64;\r\n$green_5: #73d13d;\r\n$green_6: #52c41a;\r\n$green_7: #389e0d;\r\n$green_8: #237804;\r\n$green_9: #135200;\r\n$green_10: #092b00;\r\n\r\n/*cyan*/\r\n$cyan_1: #e6fffb;\r\n$cyan_2: #b5f5ec;\r\n$cyan_3: #87e8de;\r\n$cyan_4: #5cdbd3;\r\n$cyan_5: #36cfc9;\r\n$cyan_6: #13c2c2;\r\n$cyan_7: #08979c;\r\n$cyan_8: #006d75;\r\n$cyan_9: #00474f;\r\n$cyan_10: #002329;\r\n\r\n/*blue*/\r\n$blue_1: #e6f7ff;\r\n$blue_2: #bae7ff;\r\n$blue_3: #91d5ff;\r\n$blue_4: #69c0ff;\r\n$blue_5: #40a9ff;\r\n$blue_6: #1890ff;\r\n$blue_7: #096dd9;\r\n$blue_8: #0050b3;\r\n$blue_9: #003a8c;\r\n$blue_10: #002766;\r\n\r\n/*geek*/\r\n$geek_1: #f0f5ff;\r\n$geek_2: #d6e4ff;\r\n$geek_3: #adc6ff;\r\n$geek_4: #85a5ff;\r\n$geek_5: #597ef7;\r\n$geek_6: #2f54eb;\r\n$geek_7: #1d39c4;\r\n$geek_8: #10239e;\r\n$geek_9: #061178;\r\n$geek_10: #030852;\r\n\r\n/*purple*/\r\n$purple_1: #f9f0ff;\r\n$purple_2: #efdbff;\r\n$purple_3: #d3adf7;\r\n$purple_4: #b37feb;\r\n$purple_5: #9254de;\r\n$purple_6: #722ed1;\r\n$purple_7: #531dab;\r\n$purple_8: #391085;\r\n$purple_9: #22075e;\r\n$purple_10: #120338;\r\n\r\n/*magenta*/\r\n$magenta_1: #fff0f6;\r\n$magenta_2: #ffd6e7;\r\n$magenta_3: #ffadd2;\r\n$magenta_4: #ff85c0;\r\n$magenta_5: #f759ab;\r\n$magenta_6: #eb2f96;\r\n$magenta_7: #c41d7f;\r\n$magenta_8: #9e1068;\r\n$magenta_9: #780650;\r\n$magenta_10: #520339;\r\n\r\n/*gray*/\r\n$gray_1: #ffffff;\r\n$gray_2: #fafafa;\r\n$gray_3: #f5f5f5;\r\n$gray_4: #f0f0f0;\r\n$gray_5: #d9d9d9;\r\n$gray_6: #bfbfbf;\r\n$gray_7: #8c8c8c;\r\n$gray_8: #595959;\r\n$gray_9: #434343;\r\n$gray_10: #262626;\r\n$gray_11: #1f1f1f;\r\n$gray_12: #141414;\r\n$gray_13: #000000;\r\n\r\n//$boxshadow: 0 1px 1px 0 rgba(60, 64, 67, 0.08), 0 1px 3px 1px rgba(60, 64, 67, 0.16);\r\n$boxshadowColor: #f0f1f2;\r\n$boxshadow: 0 2px 8px $boxshadowColor;\r\n\r\n/*@formatter:off*/\r\n$theme-default: (\r\n '':(\r\n colorPrimary: $geek_7, /*基础*/\r\n colorSuccess: $cyan_7, /*成功*/\r\n colorWarn: $yellow_7, /*警告*/\r\n colorError: $red_7, /*错误*/\r\n colorInfo:$gray_7, /*帮助*/\r\n\r\n disabled:#f5f7fa, /*禁用*/\r\n disabledLight:#fcfcfc, /*禁用(轻)*/\r\n disabledDeep:#c6c6c6, /*禁用(深)*/\r\n disabledText:#c0c4cc, /*禁用字体*/\r\n\r\n sizeLarge:40px, /*尺寸(大)*/\r\n sizeNormal:32px, /*尺寸(中)*/\r\n sizeMini:28px, /*尺寸(小)*/\r\n\r\n shapeFillet:2px, /*小圆角*/\r\n shapeRound:100px, /*大圆角*/\r\n shapeNone:0, /*无圆角*/\r\n\r\n font:'-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji',/**/\r\n\r\n ibc:#dcdfe6, /*边框色*/\r\n ibl:#ebeef5, /*边框色(轻)*/\r\n itc:#314659, /*文本色*/\r\n itl:#697b8c, /*文本色(轻)*/\r\n ihc:#000000, /*标题色*/\r\n ipc:rgba(0, 0, 0, 0.25), /*占位符颜色*/\r\n icc:rgba(0, 0, 0, 0.45), /*图标色*/\r\n\r\n transitionFlexible:cubic-bezier(.24, .22, .015, 1.2), /*flexible过度动画*/\r\n transition:
|
2
|
+
"globalImport": "/*red*/\r\n$red_1: #fff1f0;\r\n$red_2: #ffccc7;\r\n$red_3: #ffa39e;\r\n$red_4: #ff4d4f;\r\n$red_5: #ff4d4f;\r\n$red_6: #f5222d;\r\n$red_7: #cf1322;\r\n$red_8: #a8071a;\r\n$red_9: #820014;\r\n$red_10: #5c0011;\r\n\r\n/*volcano*/\r\n$volcano_1: #fff2e8;\r\n$volcano_2: #ffd8bf;\r\n$volcano_3: #ffbb96;\r\n$volcano_4: #ff9c6e;\r\n$volcano_5: #ff7a45;\r\n$volcano_6: #fa541c;\r\n$volcano_7: #d4380d;\r\n$volcano_8: #ad2102;\r\n$volcano_9: #871400;\r\n$volcano_10: #610b00;\r\n\r\n/*orange*/\r\n$orange_1: #fff7e6;\r\n$orange_2: #ffe7ba;\r\n$orange_3: #ffd591;\r\n$orange_4: #ffc069;\r\n$orange_5: #ffa940;\r\n$orange_6: #fa8c16;\r\n$orange_7: #d46b08;\r\n$orange_8: #ad4e00;\r\n$orange_9: #873800;\r\n$orange_10: #612500;\r\n\r\n/*gold*/\r\n$gold_1: #fffbe6;\r\n$gold_2: #fff1b8;\r\n$gold_3: #ffe58f;\r\n$gold_4: #ffd666;\r\n$gold_5: #ffc53d;\r\n$gold_6: #faad14;\r\n$gold_7: #d48806;\r\n$gold_8: #ad6800;\r\n$gold_9: #874d00;\r\n$gold_10: #613400;\r\n\r\n/*yellow*/\r\n$yellow_1: #feffe6;\r\n$yellow_2: #ffffb8;\r\n$yellow_3: #fffb8f;\r\n$yellow_4: #fff566;\r\n$yellow_5: #ffec3d;\r\n$yellow_6: #fadb14;\r\n$yellow_7: #d4b106;\r\n$yellow_8: #ad8b00;\r\n$yellow_9: #876800;\r\n$yellow_10: #614700;\r\n\r\n/*lime*/\r\n$lime_1: #fcffe6;\r\n$lime_2: #f4ffb8;\r\n$lime_3: #eaff8f;\r\n$lime_4: #d3f261;\r\n$lime_5: #bae637;\r\n$lime_6: #a0d911;\r\n$lime_7: #7cb305;\r\n$lime_8: #5b8c00;\r\n$lime_9: #3f6600;\r\n$lime_10: #254000;\r\n\r\n/*green*/\r\n$green_1: #f6ffed;\r\n$green_2: #d9f7be;\r\n$green_3: #b7eb8f;\r\n$green_4: #95de64;\r\n$green_5: #73d13d;\r\n$green_6: #52c41a;\r\n$green_7: #389e0d;\r\n$green_8: #237804;\r\n$green_9: #135200;\r\n$green_10: #092b00;\r\n\r\n/*cyan*/\r\n$cyan_1: #e6fffb;\r\n$cyan_2: #b5f5ec;\r\n$cyan_3: #87e8de;\r\n$cyan_4: #5cdbd3;\r\n$cyan_5: #36cfc9;\r\n$cyan_6: #13c2c2;\r\n$cyan_7: #08979c;\r\n$cyan_8: #006d75;\r\n$cyan_9: #00474f;\r\n$cyan_10: #002329;\r\n\r\n/*blue*/\r\n$blue_1: #e6f7ff;\r\n$blue_2: #bae7ff;\r\n$blue_3: #91d5ff;\r\n$blue_4: #69c0ff;\r\n$blue_5: #40a9ff;\r\n$blue_6: #1890ff;\r\n$blue_7: #096dd9;\r\n$blue_8: #0050b3;\r\n$blue_9: #003a8c;\r\n$blue_10: #002766;\r\n\r\n/*geek*/\r\n$geek_1: #f0f5ff;\r\n$geek_2: #d6e4ff;\r\n$geek_3: #adc6ff;\r\n$geek_4: #85a5ff;\r\n$geek_5: #597ef7;\r\n$geek_6: #2f54eb;\r\n$geek_7: #1d39c4;\r\n$geek_8: #10239e;\r\n$geek_9: #061178;\r\n$geek_10: #030852;\r\n\r\n/*purple*/\r\n$purple_1: #f9f0ff;\r\n$purple_2: #efdbff;\r\n$purple_3: #d3adf7;\r\n$purple_4: #b37feb;\r\n$purple_5: #9254de;\r\n$purple_6: #722ed1;\r\n$purple_7: #531dab;\r\n$purple_8: #391085;\r\n$purple_9: #22075e;\r\n$purple_10: #120338;\r\n\r\n/*magenta*/\r\n$magenta_1: #fff0f6;\r\n$magenta_2: #ffd6e7;\r\n$magenta_3: #ffadd2;\r\n$magenta_4: #ff85c0;\r\n$magenta_5: #f759ab;\r\n$magenta_6: #eb2f96;\r\n$magenta_7: #c41d7f;\r\n$magenta_8: #9e1068;\r\n$magenta_9: #780650;\r\n$magenta_10: #520339;\r\n\r\n/*gray*/\r\n$gray_1: #ffffff;\r\n$gray_2: #fafafa;\r\n$gray_3: #f5f5f5;\r\n$gray_4: #f0f0f0;\r\n$gray_5: #d9d9d9;\r\n$gray_6: #bfbfbf;\r\n$gray_7: #8c8c8c;\r\n$gray_8: #595959;\r\n$gray_9: #434343;\r\n$gray_10: #262626;\r\n$gray_11: #1f1f1f;\r\n$gray_12: #141414;\r\n$gray_13: #000000;\r\n\r\n//$boxshadow: 0 1px 1px 0 rgba(60, 64, 67, 0.08), 0 1px 3px 1px rgba(60, 64, 67, 0.16);\r\n$boxshadowColor: #f0f1f2;\r\n$boxshadow: 0 2px 8px $boxshadowColor;\r\n\r\n/*@formatter:off*/\r\n$theme-default: (\r\n '':(\r\n colorPrimary: $geek_7, /*基础*/\r\n colorSuccess: $cyan_7, /*成功*/\r\n colorWarn: $yellow_7, /*警告*/\r\n colorError: $red_7, /*错误*/\r\n colorInfo:$gray_7, /*帮助*/\r\n\r\n disabled:#f5f7fa, /*禁用*/\r\n disabledLight:#fcfcfc, /*禁用(轻)*/\r\n disabledDeep:#c6c6c6, /*禁用(深)*/\r\n disabledText:#c0c4cc, /*禁用字体*/\r\n\r\n sizeLarge:40px, /*尺寸(大)*/\r\n sizeNormal:32px, /*尺寸(中)*/\r\n sizeMini:28px, /*尺寸(小)*/\r\n\r\n shapeFillet:2px, /*小圆角*/\r\n shapeRound:100px, /*大圆角*/\r\n shapeNone:0, /*无圆角*/\r\n\r\n font:'-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji',/**/\r\n\r\n ibc:#dcdfe6, /*边框色*/\r\n ibl:#ebeef5, /*边框色(轻)*/\r\n itc:#314659, /*文本色*/\r\n itl:#697b8c, /*文本色(轻)*/\r\n ihc:#000000, /*标题色*/\r\n ipc:rgba(0, 0, 0, 0.25), /*占位符颜色*/\r\n icc:rgba(0, 0, 0, 0.45), /*图标色*/\r\n\r\n transitionFlexible:cubic-bezier(.24, .22, .015, 1.2), /*flexible过度动画*/\r\n transition:ease, /*默认过渡动画*/\r\n transition2:ease, /*过渡动画(轻)*/\r\n\r\n boxshadow:$boxshadow, /*阴影*/\r\n boxshadowColor:$boxshadowColor, /*阴影*/\r\n popperRadius:2px, /*阴影*/\r\n )\r\n);\r\n/*@formatter:on*/\r\n\r\n\r\n$dt: map_get($theme-default, '');\r\n$generate_default: true;\r\n\r\n@function plv($key) {\r\n @if (map_has_key($globalTheme, $key)) {\r\n @return map-get($globalTheme, $key);\r\n } @else {\r\n @return map-get($dt, $key);\r\n }\r\n}\r\n\r\n@mixin generateThemeContent($name,$theme) {\r\n $globalTheme: $theme !global;\r\n $globalThemeName: $name !global;\r\n\r\n $colorPrimary: plv(colorPrimary) !global;\r\n $colorPrimaryLight: mix(white, $colorPrimary, 85%) !global;\r\n $colorSuccess: plv(colorSuccess) !global;\r\n $colorWarn: plv(colorWarn) !global;\r\n $colorError: plv(colorError) !global;\r\n $colorInfo: plv(colorInfo) !global;\r\n $disabled: plv(disabled) !global;\r\n $disabledLight: plv(disabledLight) !global;\r\n $disabledDeep: plv(disabledDeep) !global;\r\n $disabledText: plv(disabledText) !global;\r\n $font: plv(font) !global;\r\n $ibc: plv(ibc) !global;\r\n $ibl: plv(ibl) !global;\r\n $itc: plv(itc) !global;\r\n $itl: plv(itl) !global;\r\n $ihc: plv(ihc) !global;\r\n $ipc: plv(ipc) !global;\r\n $icc: plv(icc) !global;\r\n $transitionFlexible: plv(transitionFlexible) !global;\r\n $transition: plv(transition) !global;\r\n $transition2: plv(transition2) !global;\r\n $shapeFillet: plv(shapeFillet) !global;\r\n $shapeRound: plv(shapeRound) !global;\r\n $shapeNone: plv(shapeNone) !global;\r\n $popperRadius: plv(popperRadius) !global;\r\n $boxshadow: plv(boxshadow) !global;\r\n $boxshadowColor: plv(boxshadowColor) !global;\r\n\r\n @if (str_length($name)>0) {\r\n .theme-#{$name} {\r\n @content;\r\n }\r\n } @else {\r\n html {\r\n @if ($generate_default) {\r\n @content;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@mixin statusMixin($component) {\r\n @each $key in (Primary, Success, Warn, Error, Info) {\r\n\r\n $value: plv(color#{$key}) !global;\r\n\r\n $name: to-lower-case($key) !global;\r\n &.pl-#{$component}-status-#{$name} {\r\n @content;\r\n }\r\n }\r\n}\r\n\r\n@mixin shapeMixin($component) {\r\n @each $key in (Fillet, Round, Square) {\r\n\r\n $value: plv(shape#{$key}) !global;\r\n $name: to-lower-case($key) !global;\r\n\r\n &.pl-#{$component}-shape-#{$name} {\r\n @content;\r\n }\r\n }\r\n}\r\n\r\n@mixin sizeMixin($component) {\r\n @each $key in (Large, Normal, Mini) {\r\n\r\n $value: plv(size#{$key}) !global;\r\n $name: to-lower-case($key) !global;\r\n\r\n &.pl-#{$component}-size-#{$name} {\r\n @content;\r\n }\r\n }\r\n}\r\n\r\n@mixin public-style {\r\n box-sizing: border-box;\r\n font-weight: 400;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n@mixin transition {\r\n transition: all $transition 300ms;\r\n}\r\n\r\n$theme-blue: (\r\n /*'blue':(\r\n colorPrimary: #409EFF,\r\n colorSuccess: #67C23A,\r\n colorWarn: #E6A23C,\r\n colorError: #F56C6C,\r\n colorInfo:#909399,\r\n\r\n shapeFillet:4px,\r\n ),\r\n 'violet':(\r\n colorPrimary: #8A2BE2,\r\n colorSuccess: #4caf50,\r\n colorWarn: #ff9800,\r\n colorError: #e91e63,\r\n colorInfo:#000042,\r\n\r\n shapeFillet:8px,\r\n )*/\r\n);\r\n\r\n$themes: map_merge($theme-default, $theme-blue);\r\n\r\n@mixin theme {\r\n @each $curThemeName, $curTheme in $themes {\r\n @include generateThemeContent($curThemeName, $curTheme) {\r\n @content;\r\n }\r\n }\r\n}",
|
3
3
|
"packagesScss": [
|
4
4
|
{
|
5
5
|
"name": "PlAlert",
|
@@ -60,8 +60,8 @@
|
|
60
60
|
{
|
61
61
|
"name": "PlCascadePanel",
|
62
62
|
"codes": [
|
63
|
-
"@include theme {\r\n
|
64
|
-
"@include theme {\r\n
|
63
|
+
"@include theme {\r\n [service-name=pl-popper-service-cascade] {\r\n .pl-popper-content-inner {\r\n padding: 0 !important;\r\n }\r\n\r\n .pl-cascade-panel {\r\n border: none !important;\r\n }\r\n }\r\n}",
|
64
|
+
"@include theme {\r\n .pl-cascade-panel {\r\n display: inline-block;\r\n height: 200px;\r\n border: solid 1px $ibc;\r\n border-radius: $popperRadius;\r\n color: $itc;\r\n\r\n & > .pl-list {\r\n height: 100%;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n }\r\n\r\n .pl-cascade-list {\r\n width: 180px;\r\n height: 100%;\r\n padding: 6px 0;\r\n font-size: 14px;\r\n display: inline-block;\r\n vertical-align: top;\r\n overflow: hidden;\r\n box-sizing: border-box;\r\n\r\n &:not(:last-child) {\r\n border-right: solid 1px $ibc;\r\n }\r\n\r\n .pl-list {\r\n overflow: hidden;\r\n }\r\n\r\n .pl-cascade-item {\r\n padding: 5px 0 5px 12px;\r\n line-height: 22px;\r\n font-weight: 400;\r\n font-size: 13px;\r\n color: $itc;\r\n background-color: white;\r\n transition: all 300ms $transition;\r\n cursor: pointer;\r\n\r\n .pl-cascade-content {\r\n padding-right: 30px;\r\n position: relative;\r\n\r\n .pl-cascade-arrow {\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n right: 0;\r\n width: 30px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: $icc;\r\n }\r\n }\r\n\r\n &.pl-cascade-item-expand, &:hover {\r\n color: $ihc;\r\n background-color: $disabled;\r\n }\r\n\r\n &.pl-cascade-item-active {\r\n color: $colorPrimary;\r\n background-color: rgba($colorPrimary, 0.1);\r\n }\r\n\r\n &.pl-cascade-empty {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n padding-left: 0;\r\n font-size: 12px;\r\n color: $disabledText;\r\n background-color: transparent;\r\n cursor: auto;\r\n\r\n .pl-icon {\r\n margin-bottom: 8px;\r\n font-size: 20px;\r\n }\r\n }\r\n\r\n &.pl-cascade-item-disabled {\r\n background-color: transparent;\r\n color: $disabledText;\r\n cursor: not-allowed;\r\n }\r\n }\r\n\r\n &.pl-cascade-filter-list {\r\n width: 360px;\r\n }\r\n }\r\n\r\n .pl-loading-mask {\r\n top: 1px;\r\n bottom: 1px;\r\n left: 1px;\r\n right: 1px;\r\n }\r\n }\r\n}\r\n"
|
65
65
|
],
|
66
66
|
"seq": 18
|
67
67
|
},
|
@@ -114,14 +114,14 @@
|
|
114
114
|
{
|
115
115
|
"name": "PlDialog",
|
116
116
|
"codes": [
|
117
|
-
".pl-dialog {\r\n z-index: 1500;\r\n\r\n position: fixed;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: auto;\r\n transition: all linear 300ms;\r\n\r\n &:before {\r\n content: '';\r\n background-color: rgba(0, 0, 0, 0.2);\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n user-select: none;\r\n transition: all linear 300ms;\r\n }\r\n\r\n .pl-dialog-body {\r\n background-color: white;\r\n position: relative;\r\n z-index: 1;\r\n transition: all cubic-bezier(0.410, 1.110, 0.615, 0.995) 300ms;\r\n box-shadow: 0 0 20px 8px rgba(100, 100, 100, 0.1);\r\n overflow: hidden;\r\n pointer-events: auto;\r\n box-sizing: border-box;\r\n\r\n .pl-dialog-head {\r\n padding: 12px 24px;\r\n background-color: white;\r\n position: relative;\r\n font-size: 14px;\r\n font-weight: 500;\r\n\r\n .pl-dialog-head-close {\r\n font-size: 18px;\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n right: 10px;\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n padding: 0 8px;\r\n opacity: 0.75;\r\n color: inherit;\r\n }\r\n }\r\n\r\n .pl-dialog-content {\r\n overflow: auto;\r\n padding: 16px 24px;\r\n font-size: 14px;\r\n box-sizing: border-box;\r\n }\r\n\r\n .pl-dialog-foot {\r\n padding: 8px 24px;\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n\r\n & > * + * {\r\n margin-left: 8px;\r\n }\r\n }\r\n }\r\n\r\n &.pl-dialog-fullscreen {\r\n padding: 0 !important;\r\n\r\n .pl-dialog-body {\r\n position: fixed;\r\n height: 100% !important;\r\n width: 100% !important;\r\n }\r\n }\r\n\r\n &.pl-dialog-no-mask {\r\n pointer-events: none;\r\n\r\n &:before {\r\n display: none;\r\n }\r\n }\r\n\r\n &.pl-dialog-vertical-center {\r\n padding: 0;\r\n align-items: center;\r\n }\r\n\r\n &.pl-dialog-no-content-padding {\r\n .pl-dialog-content {\r\n padding: 0;\r\n }\r\n }\r\n}\r\n\r\n.pl-transition-dialog {\r\n /*@formatter:off*/\r\n &.pl-transition-dialog-enter {\r\n &:before {opacity: 0;}\r\n .pl-dialog-body {transform: translateY(-
|
117
|
+
".pl-dialog {\r\n z-index: 1500;\r\n\r\n position: fixed;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: auto;\r\n transition: all linear 300ms;\r\n\r\n &:before {\r\n content: '';\r\n background-color: rgba(0, 0, 0, 0.2);\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n user-select: none;\r\n transition: all linear 300ms;\r\n }\r\n\r\n .pl-dialog-body {\r\n background-color: white;\r\n position: relative;\r\n z-index: 1;\r\n transition: all cubic-bezier(0.410, 1.110, 0.615, 0.995) 300ms;\r\n box-shadow: 0 0 20px 8px rgba(100, 100, 100, 0.1);\r\n overflow: hidden;\r\n pointer-events: auto;\r\n box-sizing: border-box;\r\n\r\n .pl-dialog-head {\r\n padding: 12px 24px;\r\n background-color: white;\r\n position: relative;\r\n font-size: 14px;\r\n font-weight: 500;\r\n\r\n .pl-dialog-head-close {\r\n font-size: 18px;\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n right: 10px;\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n padding: 0 8px;\r\n opacity: 0.75;\r\n color: inherit;\r\n }\r\n }\r\n\r\n .pl-dialog-content {\r\n overflow: auto;\r\n padding: 16px 24px;\r\n font-size: 14px;\r\n box-sizing: border-box;\r\n }\r\n\r\n .pl-dialog-foot {\r\n padding: 8px 24px;\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n\r\n & > * + * {\r\n margin-left: 8px;\r\n }\r\n }\r\n }\r\n\r\n &.pl-dialog-fullscreen {\r\n padding: 0 !important;\r\n\r\n .pl-dialog-body {\r\n position: fixed;\r\n height: 100% !important;\r\n width: 100% !important;\r\n }\r\n }\r\n\r\n &.pl-dialog-no-mask {\r\n pointer-events: none;\r\n\r\n &:before {\r\n display: none;\r\n }\r\n }\r\n\r\n &.pl-dialog-vertical-center {\r\n padding: 0;\r\n align-items: center;\r\n }\r\n\r\n &.pl-dialog-no-content-padding {\r\n .pl-dialog-content {\r\n padding: 0;\r\n }\r\n }\r\n}\r\n\r\n.pl-transition-dialog {\r\n /*@formatter:off*/\r\n &.pl-transition-dialog-enter {\r\n &:before {opacity: 0;}\r\n .pl-dialog-body {transform: translateY(-10px);opacity: 0;}\r\n }\r\n &.pl-transition-dialog-enter-active {\r\n &:before {opacity: 1;}\r\n .pl-dialog-body {transform: translateY(0) scale(1);opacity: 1;}\r\n }\r\n &.pl-transition-dialog-exit {\r\n &:before {opacity: 1;}\r\n .pl-dialog-body {transform: translateY(0) scale(1);opacity: 1;}\r\n }\r\n &.pl-transition-dialog-exit-active {\r\n &:before {opacity: 0;}\r\n .pl-dialog-body {transform: translateY(-10px);opacity: 0;}\r\n }\r\n &.pl-transition-dialog-enter-active, &.pl-transition-dialog-exit-active {\r\n transition: opacity 150ms linear, transform 150ms $transition;\r\n }\r\n /*@formatter:on*/\r\n}\r\n\r\n@include theme {\r\n .pl-dialog {\r\n .pl-dialog-body {\r\n color: $itc;\r\n\r\n .pl-dialog-head {\r\n color: $ihc;\r\n border-bottom: solid 1px $ibl;\r\n background: #fafafa;\r\n\r\n .pl-dialog-head-close .pl-button.pl-button-mode-text.pl-button-status-primary {\r\n color: $icc;\r\n\r\n &:hover {\r\n color: $colorPrimary;\r\n }\r\n }\r\n }\r\n\r\n .pl-dialog-foot {\r\n border-top: solid 1px $ibl;\r\n //background: #fafafa;\r\n }\r\n\r\n @include shapeMixin(dialog-body) {\r\n border-radius: $value;\r\n }\r\n }\r\n }\r\n\r\n $dialogTransition: (\r\n left:translate3d(-100%, 0, 0),\r\n right:translate3d(100%, 0, 0),\r\n top:translate3d(0, -100%, 0),\r\n bottom:translate3d(0, 100%, 0),\r\n );\r\n\r\n @each $key, $value in $dialogTransition {\r\n .pl-transition-dialog-#{$key} {\r\n /*@formatter:off*/\r\n &.pl-transition-dialog-#{$key}-enter {\r\n &:before {opacity: 0;}\r\n .pl-dialog-body {opacity: 0;transform: $value;}\r\n }\r\n &.pl-transition-dialog-#{$key}-enter-active {\r\n &:before {opacity: 1;}\r\n .pl-dialog-body {opacity: 1;transform: translate3d(0, 0, 0);}\r\n }\r\n &.pl-transition-dialog-#{$key}-exit {\r\n &:before {opacity: 1;}\r\n .pl-dialog-body {opacity: 1;transform: translate3d(0, 0, 0);}\r\n }\r\n &.pl-transition-dialog-#{$key}-exit-active {\r\n &:before {opacity: 0;}\r\n .pl-dialog-body {opacity: 0;transform: $value;}\r\n }\r\n &.pl-transition-dialog-#{$key}-enter-active, &.pl-transition-dialog-#{$key}-exit-active {\r\n .pl-dialog-body {\r\n transition: all $transition2 300ms;\r\n }\r\n }\r\n /*@formatter:on*/\r\n }\r\n }\r\n}\r\n"
|
118
118
|
],
|
119
119
|
"seq": 30
|
120
120
|
},
|
121
121
|
{
|
122
122
|
"name": "PlDropdown",
|
123
123
|
"codes": [
|
124
|
-
"@include theme {\r\n .pl-dropdown-option {\r\n padding: 5px 12px;\r\n font-weight: 400;\r\n font-size: 14px;\r\n line-height: 22px;\r\n color: $itc;\r\n background-color: white;\r\n transition: background-color linear 200ms;\r\n\r\n .pl-dropdown-option-icon {\r\n margin-right: 6px;\r\n opacity: 0.5;\r\n }\r\n\r\n &:not(.pl-dropdown-option-disabled):hover {\r\n background-color: #f2f2f2;\r\n cursor: pointer;\r\n }\r\n\r\n &.pl-dropdown-option-disabled {\r\n color: $disabledText;\r\n cursor: not-allowed;\r\n }\r\n\r\n &.pl-dropdown-option-align-left {\r\n text-align: left\r\n }\r\n\r\n &.pl-dropdown-option-align-center {\r\n text-align: center\r\n }\r\n\r\n &.pl-dropdown-option-align-right {\r\n text-align: right\r\n }\r\n\r\n &.pl-dropdown-option-no-wrap {\r\n white-space: nowrap;\r\n }\r\n }\r\n\r\n .pl-dropdown-group {\r\n\r\n .pl-dropdown-group-title {\r\n font-size: 12px;\r\n color: $ipc;\r\n padding: 8px 12px;\r\n margin-top: 4px;\r\n border-bottom: solid 1px $ibl;\r\n\r\n & > .pl-icon {\r\n margin-right: 6px;\r\n }\r\n }\r\n\r\n .pl-dropdown-group-content {\r\n padding: 4px
|
124
|
+
"@include theme {\r\n .pl-dropdown-option {\r\n padding: 5px 12px;\r\n font-weight: 400;\r\n font-size: 14px;\r\n line-height: 22px;\r\n color: $itc;\r\n background-color: white;\r\n transition: background-color linear 200ms;\r\n\r\n .pl-dropdown-option-icon {\r\n margin-right: 6px;\r\n opacity: 0.5;\r\n }\r\n\r\n &:not(.pl-dropdown-option-disabled):hover {\r\n background-color: #f2f2f2;\r\n cursor: pointer;\r\n }\r\n\r\n &.pl-dropdown-option-disabled {\r\n color: $disabledText;\r\n cursor: not-allowed;\r\n }\r\n\r\n &.pl-dropdown-option-align-left {\r\n text-align: left\r\n }\r\n\r\n &.pl-dropdown-option-align-center {\r\n text-align: center\r\n }\r\n\r\n &.pl-dropdown-option-align-right {\r\n text-align: right\r\n }\r\n\r\n &.pl-dropdown-option-no-wrap {\r\n white-space: nowrap;\r\n }\r\n }\r\n\r\n .pl-dropdown-group {\r\n\r\n .pl-dropdown-group-title {\r\n font-size: 12px;\r\n color: $ipc;\r\n padding: 8px 12px;\r\n margin-top: 4px;\r\n border-bottom: solid 1px $ibl;\r\n\r\n & > .pl-icon {\r\n margin-right: 6px;\r\n }\r\n }\r\n\r\n .pl-dropdown-group-content {\r\n padding: 4px 0;\r\n }\r\n\r\n &.pl-dropdown-no-title:not(:last-child) {\r\n border-bottom: solid 1px $ibc;\r\n }\r\n\r\n }\r\n}\r\n"
|
125
125
|
],
|
126
126
|
"seq": 31
|
127
127
|
},
|
@@ -240,7 +240,7 @@
|
|
240
240
|
{
|
241
241
|
"name": "PlRoot",
|
242
242
|
"codes": [
|
243
|
-
"html{line-height:1.4;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.515;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}\r\n$transition:
|
243
|
+
"html{line-height:1.4;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.515;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}\r\n$transition: ease;\r\n\r\n/*---------------------------------------scale-------------------------------------------*/\r\n\r\n.pl-transition-scale-enter {\r\n opacity: 0;\r\n transform: scale(0.75);\r\n}\r\n\r\n.pl-transition-scale-enter-active {\r\n opacity: 1;\r\n transform: scale(1);\r\n}\r\n\r\n.pl-transition-scale-exit {\r\n opacity: 1;\r\n transform: scale(1);\r\n}\r\n\r\n.pl-transition-scale-exit-active {\r\n opacity: 0;\r\n transform: scale(0.75);\r\n}\r\n\r\n.pl-transition-scale-enter-active, .pl-transition-scale-exit-active {\r\n transition: opacity 300ms linear, transform 300ms $transition;\r\n}\r\n\r\n/*---------------------------------------scale-y-------------------------------------------*/\r\n\r\n.pl-transition-scale-y-enter {\r\n transform: scaleY(0);\r\n opacity: 0;\r\n}\r\n\r\n.pl-transition-scale-y-enter-active {\r\n transform: scaleY(1);\r\n opacity: 1;\r\n}\r\n\r\n.pl-transition-scale-y-exit {\r\n transform: scaleY(1);\r\n opacity: 1;\r\n}\r\n\r\n.pl-transition-scale-y-exit-active {\r\n transform: scaleY(0);\r\n opacity: 0;\r\n}\r\n\r\n.pl-transition-scale-y-enter-active, .pl-transition-scale-y-exit-active {\r\n transform-origin: top;\r\n transition: opacity 300ms linear, transform 300ms $transition;\r\n}\r\n\r\n/*---------------------------------------fade-------------------------------------------*/\r\n\r\n.pl-transition-fade-enter {\r\n opacity: 0;\r\n}\r\n\r\n.pl-transition-fade-enter-active {\r\n opacity: 1;\r\n}\r\n\r\n.pl-transition-fade-exit {\r\n opacity: 1;\r\n}\r\n\r\n.pl-transition-fade-exit-active {\r\n opacity: 0;\r\n}\r\n\r\n.pl-transition-fade-enter-active, .pl-transition-fade-exit-active {\r\n transition: opacity 300ms linear;\r\n}\r\n\r\n/*---------------------------------------slider-------------------------------------------*/\r\n\r\n[direction=horizontal] {\r\n\r\n /*horizontal next*/\r\n &.pl-transition-slide-next-enter {\r\n transform: translate3d(100%, 0, 0);\r\n }\r\n\r\n &.pl-transition-slide-next-enter-active {\r\n transform: translate3d(0, 0, 0);\r\n transition: transform 150ms linear;\r\n }\r\n\r\n /*horizontal prev*/\r\n &.pl-transition-slide-prev-enter {\r\n transform: translate3d(-100%, 0, 0);\r\n }\r\n\r\n &.pl-transition-slide-prev-enter-active {\r\n transform: translate3d(0, 0, 0);\r\n transition: transform 150ms linear;\r\n }\r\n}\r\n\r\n[direction=vertical] {\r\n\r\n /*vertical next*/\r\n &.pl-transition-slide-next-enter {\r\n transform: translate3d(0, 100%, 0);\r\n }\r\n\r\n &.pl-transition-slide-next-enter-active {\r\n transform: translate3d(0, 0, 0);\r\n }\r\n\r\n /*horizontal prev*/\r\n &.pl-transition-slide-prev-enter {\r\n transform: translate3d(0, -100%, 0);\r\n }\r\n\r\n &.pl-transition-slide-prev-enter-active {\r\n transform: translate3d(0, 0, 0);\r\n transition: transform 150ms linear;\r\n }\r\n}\r\n\r\n.pl-collapse-transition {\r\n transition: 0.3s height linear, 0.3s padding-top linear, 0.3s padding-bottom linear;\r\n}\r\n\r\n@include theme {\r\n font-family: $font;\r\n\r\n --color-primary: #{$colorPrimary};\r\n --color-success: #{$colorSuccess};\r\n --color-warn: #{$colorWarn};\r\n --color-error: #{$colorError};\r\n --color-info: #{$colorInfo};\r\n\r\n --color-disabled: #{$disabled};\r\n --color-disbaled-light: #{$disabledLight};\r\n --color-disbaled-deep: #{$disabledDeep};\r\n --color-disbaled-text: #{$disabledText};\r\n\r\n --color-ibc: #{$ibc};\r\n --color-ibl: #{$ibl};\r\n --color-itc: #{$itc};\r\n --color-itl: #{$itl};\r\n --color-ihc: #{$ihc};\r\n --color-ipc: #{$ipc};\r\n --color-icc: #{$icc};\r\n\r\n --transition-flexible: #{$transitionFlexible};\r\n --transition: #{$transition};\r\n --transition2: #{$transition2};\r\n\r\n --shape-fllet: #{$shapeFillet};\r\n --shape-round: #{$shapeRound};\r\n --shape-none: #{$shapeNone};\r\n\r\n --boxshadow: #{$boxshadow};\r\n --boxshadow-color: #{$boxshadowColor};\r\n\r\n .pl-text-primary {color: $colorPrimary;}\r\n .pl-text-success {color: $colorSuccess;}\r\n .pl-text-warn {color: $colorWarn;}\r\n .pl-text-error {color: $colorError;}\r\n .pl-text-info {color: $colorInfo;}\r\n\r\n .pl-background-primary {background-color: $colorPrimary;}\r\n .pl-background-success {background-color: $colorSuccess;}\r\n .pl-background-warn {background-color: $colorWarn;}\r\n .pl-background-error {background-color: $colorError;}\r\n .pl-background-info {background-color: $colorInfo;}\r\n\r\n .pl-background-disabled{background-color: $disabled;}\r\n .pl-background-disabled-light {background-color: $disabledLight;}\r\n .pl-background-disabled-deep {background-color: $disabledDeep;}\r\n .pl-background-disabled-text {color: $disabledText;}\r\n\r\n .pl-border-radius-fillet{border-radius: $shapeFillet;}\r\n .pl-border-radius-round{border-radius: $shapeRound;}\r\n .pl-border-radius-none{border-radius: $shapeNone;}\r\n\r\n .pl-border-color{border-color: $ibc}\r\n .pl-border-color-light{border-color: $ibl}\r\n\r\n .pl-text-color{color: $itc}\r\n .pl-text-color-light{color: $itl}\r\n .pl-title-color{color: $ihc}\r\n .pl-placeholder-color{color: $ipc}\r\n .pl-icon-color{color: $icc}\r\n\r\n .pl-boxshadow{box-shadow: $boxshadow}\r\n}\r\n\r\n\r\n.pl-root-service-container {\r\n position: fixed;\r\n width: 100vw;\r\n height: 100vh;\r\n overflow: hidden;\r\n //background-color: rgba(black, 0.1);\r\n top: 0;\r\n left: 0;\r\n pointer-events: none;\r\n z-index: 1500;\r\n\r\n & > * {\r\n pointer-events: auto;\r\n }\r\n}"
|
244
244
|
],
|
245
245
|
"seq": 54
|
246
246
|
},
|
@@ -370,11 +370,11 @@
|
|
370
370
|
"name": "PlTabs",
|
371
371
|
"codes": [
|
372
372
|
"@include theme {\r\n .pl-tabs {\r\n .pl-tabs-collector {\r\n height: 0;\r\n width: 0;\r\n overflow: hidden;\r\n display: block;\r\n }\r\n\r\n .pl-tabs-header-item {\r\n cursor: pointer;\r\n user-select: none;\r\n\r\n .pl-icon {\r\n margin-left: 8px;\r\n }\r\n\r\n &:not(.pl-tabs-header-item-active) {\r\n .pl-icon {\r\n color: $icc;\r\n }\r\n }\r\n }\r\n\r\n .pl-tabs-header-item-operator {\r\n flex-grow: 1;\r\n flex-shrink: 0;\r\n position: sticky;\r\n right: 4px;\r\n height: 45px;\r\n line-height: 45px;\r\n padding-left: 16px;\r\n justify-self: flex-end;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n background-color: white;\r\n\r\n & > * + * {\r\n margin-left: 4px;\r\n }\r\n }\r\n }\r\n}\r\n",
|
373
|
-
"@include theme {\r\n .pl-tabs {\r\n &.pl-tabs-head-position-left, &.pl-tabs-head-position-right {\r\n display: flex;\r\n\r\n .pl-tabs-body {\r\n flex: 1;\r\n box-sizing: border-box;\r\n }\r\n\r\n .pl-tabs-header {\r\n position: relative;\r\n\r\n .pl-tabs-header-item {\r\n line-height: 36px;\r\n padding: 0 16px;\r\n position: relative;\r\n z-index: 1;\r\n transition: all linear 150ms;\r\n white-space: nowrap;\r\n\r\n &:hover {\r\n color: $colorPrimary;\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n color: $colorPrimary;\r\n background-color: $colorPrimaryLight;\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-left {\r\n\r\n &:before {\r\n position: absolute;\r\n content: '';\r\n right: 0;\r\n width: 2px;\r\n top: 0;\r\n bottom: 0;\r\n background-color: $ibl;\r\n }\r\n\r\n .pl-tabs-header-item {\r\n text-align: right;\r\n border-right: solid 2px transparent;\r\n\r\n &:hover {\r\n border-right-color: rgba($colorPrimary, 0.5);\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n border-right-color: $colorPrimary;\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-right {\r\n &:before {\r\n position: absolute;\r\n content: '';\r\n left: 0;\r\n width: 2px;\r\n top: 0;\r\n bottom: 0;\r\n background-color: $ibl;\r\n }\r\n\r\n .pl-tabs-header-item {\r\n text-align: left;\r\n border-left: solid 2px transparent;\r\n\r\n &:hover {\r\n border-left-color: rgba($colorPrimary, 0.5);\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n border-left-color: $colorPrimary;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-fit-height {\r\n height: 100%;\r\n flex: 1;\r\n align-items: stretch;\r\n\r\n & > .pl-tabs-header {\r\n overflow: auto;\r\n }\r\n\r\n & > .pl-tabs-body {\r\n overflow: hidden;\r\n display: flex;\r\n align-items: stretch;\r\n\r\n & > .pl-inner-tab {\r\n flex: 1;\r\n overflow: auto;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-head-position-left {\r\n .pl-tabs-body {\r\n padding-left: 16px;\r\n }\r\n }\r\n\r\n &.pl-tabs-head-position-right {\r\n .pl-tabs-body {\r\n padding-right: 16px;\r\n }\r\n }\r\n }\r\n}\r\n",
|
374
|
-
"@include theme {\r\n .pl-tabs-header-horizontal {\r\n overflow: hidden;\r\n position: relative;\r\n\r\n .pl-tabs-header-list {\r\n display: inline-flex;\r\n align-items: center;\r\n white-space: nowrap;\r\n min-width: 100%;\r\n position: relative;\r\n transition: 300ms $transitionFlexible left;\r\n }\r\n\r\n .pl-tabs-header-item {\r\n display: inline-block;\r\n font-size: 14px;\r\n }\r\n\r\n &.pl-tabs-header-show-more {\r\n padding-right: 80px;\r\n\r\n .pl-tabs-header-more-button {\r\n z-index: 1;\r\n position: absolute;\r\n background-color: rgba(white, 0.9);\r\n right: 0;\r\n top: 0;\r\n bottom: 0;\r\n width: 80px;\r\n box-shadow: 0 2px 8px #ccc;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: $ihc;\r\n }\r\n }\r\n }\r\n\r\n .pl-tabs-head-position-top, .pl-tabs-head-position-bottom {\r\n &.pl-tabs-fit-height {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n flex: 1;\r\n\r\n & > .pl-tabs-body {\r\n flex: 1;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: stretch;\r\n\r\n & > .pl-inner-tab {\r\n flex: 1;\r\n overflow: auto;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n",
|
375
373
|
"@include theme {\r\n .pl-tabs-header.pl-tabs-header-horizontal.pl-tabs-header-type-card {\r\n .pl-tabs-header-item {\r\n line-height: 45px;\r\n padding: 0 20px;\r\n border-left: solid 1px $ibc;\r\n\r\n &:last-child {\r\n border-right: solid 1px $ibc;\r\n }\r\n\r\n &:hover, &.pl-tabs-header-item-active {\r\n color: $colorPrimary;\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-top {\r\n .pl-tabs-header-list {\r\n border-bottom: solid 1px $ibc;\r\n\r\n .pl-tabs-header-item {\r\n border-top: solid 1px $ibc;\r\n\r\n &:first-child {\r\n border-top-left-radius: $shapeFillet;\r\n }\r\n\r\n &:last-child {\r\n border-top-right-radius: $shapeFillet;\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n position: relative;\r\n\r\n &:before {\r\n position: absolute;\r\n background-color: white;\r\n left: 0;\r\n right: 0;\r\n top: 100%;\r\n height: 1px;\r\n content: '';\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-bottom {\r\n .pl-tabs-header-list {\r\n border-top: solid 1px $ibc;\r\n\r\n .pl-tabs-header-item {\r\n border-bottom: solid 1px $ibc;\r\n\r\n &:first-child {\r\n border-bottom-left-radius: $shapeFillet;\r\n }\r\n\r\n &:last-child {\r\n border-bottom-right-radius: $shapeFillet;\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n position: relative;\r\n\r\n &:before {\r\n position: absolute;\r\n background-color: white;\r\n left: 0;\r\n right: 0;\r\n bottom: 100%;\r\n height: 1px;\r\n content: '';\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}",
|
376
374
|
"@include theme {\r\n .pl-tabs.pl-tabs-head-type-shadow {\r\n box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);\r\n border: solid 1px $ibl;\r\n box-sizing: border-box;\r\n\r\n & + * {\r\n margin-top: 16px;\r\n }\r\n\r\n .pl-tabs-header.pl-tabs-header-horizontal.pl-tabs-header-type-shadow {\r\n background-color: $disabled;\r\n\r\n .pl-tabs-header-item {\r\n line-height: 45px;\r\n padding: 0 20px;\r\n color: $itl;\r\n box-sizing: border-box;\r\n transition: all linear 300ms;\r\n border-left: solid 1px transparent;\r\n border-right: solid 1px transparent;\r\n\r\n &:first-child {\r\n border-left: none;\r\n }\r\n\r\n &:hover, &.pl-tabs-header-item-active {\r\n color: $colorPrimary;\r\n }\r\n\r\n &:before {\r\n position: absolute;\r\n background-color: transparent;\r\n left: 0;\r\n right: 0;\r\n height: 1px;\r\n content: '';\r\n transition: all linear 300ms;\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n position: relative;\r\n background-color: white;\r\n border-color: $ibl;\r\n\r\n &:before {\r\n background-color: white;\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-top {\r\n .pl-tabs-header-list {\r\n border-bottom: solid 1px $ibl;\r\n\r\n .pl-tabs-header-item-active:before {\r\n top: 100%\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-bottom {\r\n .pl-tabs-header-list {\r\n border-top: solid 1px $ibl;\r\n\r\n .pl-tabs-header-item-active:before {\r\n bottom: 100%\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n",
|
377
|
-
"@include theme {\r\n .pl-tabs-header
|
375
|
+
"@include theme {\r\n .pl-tabs-header-horizontal {\r\n overflow: hidden;\r\n position: relative;\r\n\r\n .pl-tabs-header-list {\r\n display: inline-flex;\r\n align-items: center;\r\n white-space: nowrap;\r\n min-width: 100%;\r\n position: relative;\r\n transition: 300ms $transitionFlexible left;\r\n }\r\n\r\n .pl-tabs-header-item {\r\n display: inline-block;\r\n font-size: 14px;\r\n }\r\n\r\n &.pl-tabs-header-show-more {\r\n padding-right: 80px;\r\n\r\n .pl-tabs-header-more-button {\r\n z-index: 1;\r\n position: absolute;\r\n background-color: rgba(white, 0.9);\r\n right: 0;\r\n top: 0;\r\n bottom: 0;\r\n width: 80px;\r\n box-shadow: 0 2px 8px #ccc;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: $ihc;\r\n }\r\n }\r\n }\r\n\r\n .pl-tabs-head-position-top, .pl-tabs-head-position-bottom {\r\n &.pl-tabs-fit-height {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n flex: 1;\r\n\r\n & > .pl-tabs-body {\r\n flex: 1;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: stretch;\r\n\r\n & > .pl-inner-tab {\r\n flex: 1;\r\n overflow: auto;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n",
|
376
|
+
"@include theme {\r\n .pl-tabs-header.pl-tabs-header-horizontal.pl-tabs-header-type-text {\r\n\r\n .pl-tabs-header-item {\r\n line-height: 45px;\r\n\r\n & + .pl-tabs-header-item {\r\n margin-left: 32px;\r\n }\r\n\r\n &.pl-tabs-header-item-active, &:hover {\r\n color: $colorPrimary;\r\n }\r\n }\r\n\r\n .pl-tabs-header-list {\r\n position: relative;\r\n\r\n .pl-tabs-header-horizontal-text-indicator-container {\r\n background-color: $disabled;\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n\r\n .pl-tabs-header-horizontal-text-indicator {\r\n position: absolute;\r\n width: 0;\r\n left: 0;\r\n height: 100%;\r\n background-color: $colorPrimary;\r\n display: block;\r\n transition: $transition 150ms all;\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-top {\r\n .pl-tabs-header-horizontal-text-indicator-container {\r\n bottom: 0;\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-bottom {\r\n .pl-tabs-header-horizontal-text-indicator-container {\r\n top: 0;\r\n }\r\n }\r\n }\r\n}\r\n",
|
377
|
+
"@include theme {\r\n .pl-tabs {\r\n &.pl-tabs-head-position-left, &.pl-tabs-head-position-right {\r\n display: flex;\r\n\r\n .pl-tabs-body {\r\n flex: 1;\r\n box-sizing: border-box;\r\n }\r\n\r\n .pl-tabs-header {\r\n position: relative;\r\n\r\n .pl-tabs-header-item {\r\n line-height: 36px;\r\n padding: 0 16px;\r\n position: relative;\r\n z-index: 1;\r\n transition: all linear 150ms;\r\n white-space: nowrap;\r\n\r\n &:hover {\r\n color: $colorPrimary;\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n color: $colorPrimary;\r\n background-color: $colorPrimaryLight;\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-left {\r\n\r\n &:before {\r\n position: absolute;\r\n content: '';\r\n right: 0;\r\n width: 2px;\r\n top: 0;\r\n bottom: 0;\r\n background-color: $ibl;\r\n }\r\n\r\n .pl-tabs-header-item {\r\n text-align: right;\r\n border-right: solid 2px transparent;\r\n\r\n &:hover {\r\n border-right-color: rgba($colorPrimary, 0.5);\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n border-right-color: $colorPrimary;\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-right {\r\n &:before {\r\n position: absolute;\r\n content: '';\r\n left: 0;\r\n width: 2px;\r\n top: 0;\r\n bottom: 0;\r\n background-color: $ibl;\r\n }\r\n\r\n .pl-tabs-header-item {\r\n text-align: left;\r\n border-left: solid 2px transparent;\r\n\r\n &:hover {\r\n border-left-color: rgba($colorPrimary, 0.5);\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n border-left-color: $colorPrimary;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-fit-height {\r\n height: 100%;\r\n flex: 1;\r\n align-items: stretch;\r\n\r\n & > .pl-tabs-header {\r\n overflow: auto;\r\n }\r\n\r\n & > .pl-tabs-body {\r\n overflow: hidden;\r\n display: flex;\r\n align-items: stretch;\r\n\r\n & > .pl-inner-tab {\r\n flex: 1;\r\n overflow: auto;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-head-position-left {\r\n .pl-tabs-body {\r\n padding-left: 16px;\r\n }\r\n }\r\n\r\n &.pl-tabs-head-position-right {\r\n .pl-tabs-body {\r\n padding-right: 16px;\r\n }\r\n }\r\n }\r\n}\r\n"
|
378
378
|
],
|
379
379
|
"seq": 80
|
380
380
|
},
|
@@ -388,7 +388,7 @@
|
|
388
388
|
{
|
389
389
|
"name": "useContextmenu",
|
390
390
|
"codes": [
|
391
|
-
"@include theme {\r\n .pl-contextmenu-service {\r\n position: fixed;\r\n\r\n .pl-contextmenu-service-body {\r\n transition: all $transition
|
391
|
+
"@include theme {\r\n .pl-contextmenu-service {\r\n position: fixed;\r\n\r\n .pl-contextmenu-service-body {\r\n transition: all $transition 150ms;\r\n transform-origin: top left;\r\n box-sizing: border-box;\r\n box-shadow: $boxshadow;\r\n padding: 4px 0;\r\n border: solid 1px $ibc;\r\n\r\n .pl-dropdown-option {\r\n font-size: 12px;\r\n color: $itc;\r\n }\r\n }\r\n }\r\n}\r\n"
|
392
392
|
],
|
393
393
|
"seq": 85
|
394
394
|
},
|
@@ -423,13 +423,13 @@
|
|
423
423
|
{
|
424
424
|
"name": "createUseTableOption",
|
425
425
|
"codes": [
|
426
|
+
"@include theme {\r\n .pro-column-filter-container {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: stretch;\r\n width: 360px;\r\n padding: 0 12px;\r\n\r\n & > div {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 4px 0;\r\n\r\n & > .pl-filter {\r\n width: 100%;\r\n display: flex;\r\n }\r\n\r\n .pl-button-group {\r\n width: 100%;\r\n display: flex;\r\n\r\n .pl-button:not(.pl-button-icon-only) {\r\n flex: 1;\r\n }\r\n }\r\n\r\n & > .pl-button {\r\n flex: 1;\r\n\r\n &:first-child {\r\n margin-right: 2px;\r\n }\r\n\r\n &:last-child {\r\n margin-left: 2px;\r\n }\r\n }\r\n }\r\n\r\n .pro-column-filter-sort-container {\r\n background-color: $ibl;\r\n height: plv(sizeNormal);\r\n border-radius: 100px;\r\n width: 100%;\r\n display: flex;\r\n align-items: stretch;\r\n box-sizing: border-box;\r\n padding: 2px;\r\n\r\n & > div {\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n border-radius: 100px;\r\n cursor: pointer;\r\n background-color: $ibl;\r\n transition: background-color 300ms linear;\r\n\r\n &:hover {\r\n background-color: #fcfcfc;\r\n }\r\n\r\n &.pro-column-filter-sort-item-active {\r\n background-color: white;\r\n box-shadow: 0 2px 8px #ddd;\r\n color: $colorPrimary;\r\n }\r\n\r\n }\r\n }\r\n }\r\n}\r\n",
|
427
|
+
"@include theme {\r\n .pl-table-pro-distinct-filter-item {\r\n display: flex;\r\n align-items: stretch;\r\n line-height: 28px;\r\n\r\n padding: 8px 0;\r\n\r\n background-color: white;\r\n transition: background-color 300ms linear;\r\n\r\n &:not(:last-child) {\r\n border-bottom: solid 1px $ibl;\r\n }\r\n\r\n &:hover {\r\n background-color: #f6f6f6;\r\n }\r\n\r\n .pl-table-pro-distinct-filter-item-title {\r\n color: $colorPrimary;\r\n margin: 0 8px;\r\n }\r\n\r\n .pl-table-pro-distinct-filter-item-tags {\r\n\r\n cursor: pointer;\r\n\r\n & > div {\r\n display: inline-block;\r\n font-size: 12px;\r\n background-color: $colorPrimaryLight;\r\n padding: 0 12px;\r\n margin: 1px 2px;\r\n border-radius: 4px;\r\n }\r\n }\r\n\r\n .pl-table-pro-distinct-filter-item-button {\r\n\r\n }\r\n }\r\n}\r\n",
|
426
428
|
".pl-table-pro-setting-config {\r\n .pl-table-pro-setting-config-button {\r\n margin-bottom: 16px;\r\n\r\n & > * {\r\n margin-right: 8px;\r\n }\r\n }\r\n}\r\n",
|
427
429
|
"@include theme {\r\n .pl-table-pro-setting-export {\r\n .pl-table-pro-setting-export-option {\r\n padding: 12px 12px 12px 50px;\r\n transition: background-color linear 300ms;\r\n position: relative;\r\n\r\n &:hover {\r\n background-color: $colorPrimaryLight;\r\n cursor: pointer;\r\n }\r\n\r\n &:not(:first-child) {\r\n border-top: solid 1px $ibl;\r\n }\r\n\r\n .pl-table-pro-setting-export-option-radio {\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n width: 50px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .pl-table-pro-setting-export-option-title {\r\n font-size: 16px;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .pl-table-pro-setting-export-option-desc {\r\n font-size: 12px;\r\n color: $icc;\r\n }\r\n }\r\n\r\n .pl-table-pro-setting-export-foot {\r\n text-align: center;\r\n margin-top: 20px;\r\n\r\n .pl-button + .pl-button {\r\n margin-left: 8px;\r\n }\r\n }\r\n\r\n .pl-table-pro-setting-export-loading {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n .pl-loading, .pl-icon {\r\n font-size: 32px;\r\n }\r\n\r\n & > span {\r\n color: $icc;\r\n }\r\n\r\n & > * {\r\n margin-bottom: 24px;\r\n }\r\n }\r\n }\r\n}\r\n",
|
428
|
-
".pl-table-pro-setting-senior-filter {\r\n .pl-table-pro-setting-senior-filter-button {\r\n display: flex;\r\n justify-content: space-between;\r\n\r\n .pl-button + * {\r\n margin-left: 8px;\r\n }\r\n }\r\n\r\n .pl-table-pro-setting-senior-filter-item {\r\n margin-bottom: 16px;\r\n\r\n .pl-table-pro-setting-senior-filter-item-id {\r\n width: 80px;\r\n display: inline-block;\r\n text-align: center;\r\n }\r\n\r\n .pl-table-pro-setting-senior-filter-item-content {\r\n width: calc(100% - 80px);\r\n display: inline-block;\r\n }\r\n }\r\n}\r\n",
|
429
430
|
"@include theme {\r\n .pl-table-pro-setting-all-filter {\r\n\r\n background-color: #fafafa;\r\n min-height: 100%;\r\n width: 100%;\r\n display: inline-block;\r\n box-sizing: border-box;\r\n padding: 16px;\r\n\r\n & > * {\r\n margin-bottom: 16px;\r\n\r\n &:first-child {\r\n text-align: right;\r\n }\r\n }\r\n\r\n .pl-table-pro-setting-all-filter-item {\r\n background-color: white;\r\n box-sizing: border-box;\r\n border-radius: 2px;\r\n box-shadow: 1px 1px 8px 1px #e2e3e4;\r\n\r\n .pl-table-pro-setting-all-filter-item-head {\r\n font-size: 16px;\r\n font-weight: 600;\r\n border-bottom: solid 1px $ibl;\r\n padding: 16px;\r\n display: flex;\r\n justify-content: space-between;\r\n }\r\n\r\n .pl-table-pro-setting-all-filter-item-body {\r\n padding: 16px;\r\n }\r\n }\r\n }\r\n\r\n}\r\n",
|
430
|
-
"
|
431
|
-
"@include theme {\r\n .pl-table-pro-
|
432
|
-
"@include theme {\r\n .pro-column-filter-container {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: stretch;\r\n width: 360px;\r\n padding: 0 12px;\r\n\r\n & > div {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 4px 0;\r\n\r\n & > .pl-filter {\r\n width: 100%;\r\n display: flex;\r\n }\r\n\r\n .pl-button-group {\r\n width: 100%;\r\n display: flex;\r\n\r\n .pl-button:not(.pl-button-icon-only) {\r\n flex: 1;\r\n }\r\n }\r\n\r\n & > .pl-button {\r\n flex: 1;\r\n\r\n &:first-child {\r\n margin-right: 2px;\r\n }\r\n\r\n &:last-child {\r\n margin-left: 2px;\r\n }\r\n }\r\n }\r\n\r\n .pro-column-filter-sort-container {\r\n background-color: $ibl;\r\n height: plv(sizeNormal);\r\n border-radius: 100px;\r\n width: 100%;\r\n display: flex;\r\n align-items: stretch;\r\n box-sizing: border-box;\r\n padding: 2px;\r\n\r\n & > div {\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n border-radius: 100px;\r\n cursor: pointer;\r\n background-color: $ibl;\r\n transition: background-color 300ms linear;\r\n\r\n &:hover {\r\n background-color: #fcfcfc;\r\n }\r\n\r\n &.pro-column-filter-sort-item-active {\r\n background-color: white;\r\n box-shadow: 0 2px 8px #ddd;\r\n color: $colorPrimary;\r\n }\r\n\r\n }\r\n }\r\n }\r\n}\r\n"
|
431
|
+
".pl-table-pro-setting-senior-filter {\r\n .pl-table-pro-setting-senior-filter-button {\r\n display: flex;\r\n justify-content: space-between;\r\n\r\n .pl-button + * {\r\n margin-left: 8px;\r\n }\r\n }\r\n\r\n .pl-table-pro-setting-senior-filter-item {\r\n margin-bottom: 16px;\r\n\r\n .pl-table-pro-setting-senior-filter-item-id {\r\n width: 80px;\r\n display: inline-block;\r\n text-align: center;\r\n }\r\n\r\n .pl-table-pro-setting-senior-filter-item-content {\r\n width: calc(100% - 80px);\r\n display: inline-block;\r\n }\r\n }\r\n}\r\n",
|
432
|
+
"@include theme {\r\n .pl-table-pro-setting {\r\n height: 100%;\r\n display: flex;\r\n align-items: stretch;\r\n\r\n $nav-bg: #fcfcfc;\r\n\r\n .pl-table-pro-setting-nav {\r\n background-color: $nav-bg;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n .pl-table-pro-setting-nav-item:last-child {\r\n flex: 1;\r\n }\r\n\r\n .pl-table-pro-setting-nav-item {\r\n padding: 12px 24px;\r\n cursor: pointer;\r\n background-color: white;\r\n position: relative;\r\n\r\n .pl-table-pro-setting-nav-item-inner {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n &:hover, &.pl-table-pro-setting-nav-item-active {\r\n color: $colorPrimary;\r\n }\r\n\r\n &.pl-table-pro-setting-nav-item-active {\r\n &:after {\r\n position: absolute;\r\n content: '';\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n width: 2px;\r\n background-color: $colorPrimary;\r\n }\r\n }\r\n\r\n &.pl-table-pro-setting-nav-item-prev {\r\n &:before {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n border-bottom-right-radius: 4px;\r\n background-color: $nav-bg;\r\n content: '';\r\n border-bottom: solid 1px $ibl;\r\n border-right: solid 1px $ibl;\r\n }\r\n }\r\n\r\n &.pl-table-pro-setting-nav-item-next {\r\n &:before {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n border-top-right-radius: 4px;\r\n background-color: $nav-bg;\r\n content: '';\r\n border-top: solid 1px $ibl;\r\n border-right: solid 1px $ibl;\r\n }\r\n }\r\n\r\n &:not(.pl-table-pro-setting-nav-item-prev):not(.pl-table-pro-setting-nav-item-next):not(.pl-table-pro-setting-nav-item-active) {\r\n background-color: $nav-bg;\r\n border-right: solid 1px $ibl;\r\n }\r\n }\r\n }\r\n\r\n .pl-table-pro-setting-content {\r\n flex: 1;\r\n overflow-y: scroll;\r\n overflow-x: hidden;\r\n width: 650px;\r\n box-sizing: border-box;\r\n\r\n &.pl-table-pro-setting-content-pending {\r\n padding: 16px;\r\n }\r\n\r\n &::-webkit-scrollbar {\r\n background: white;\r\n width: 6px;\r\n height: 6px;\r\n }\r\n\r\n &::-webkit-scrollbar-thumb {\r\n background: rgba(black, 0.25);\r\n border-radius: 6px;\r\n }\r\n\r\n .pl-table-pro-setting-content-header {\r\n text-align: right;\r\n\r\n & > .pl-button + .pl-button {\r\n margin-left: 8px;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n"
|
433
433
|
],
|
434
434
|
"seq": 92
|
435
435
|
},
|
@@ -4,6 +4,36 @@
|
|
4
4
|
@include theme {
|
5
5
|
font-family: $font;
|
6
6
|
|
7
|
+
--color-primary: #{$colorPrimary};
|
8
|
+
--color-success: #{$colorSuccess};
|
9
|
+
--color-warn: #{$colorWarn};
|
10
|
+
--color-error: #{$colorError};
|
11
|
+
--color-info: #{$colorInfo};
|
12
|
+
|
13
|
+
--color-disabled: #{$disabled};
|
14
|
+
--color-disbaled-light: #{$disabledLight};
|
15
|
+
--color-disbaled-deep: #{$disabledDeep};
|
16
|
+
--color-disbaled-text: #{$disabledText};
|
17
|
+
|
18
|
+
--color-ibc: #{$ibc};
|
19
|
+
--color-ibl: #{$ibl};
|
20
|
+
--color-itc: #{$itc};
|
21
|
+
--color-itl: #{$itl};
|
22
|
+
--color-ihc: #{$ihc};
|
23
|
+
--color-ipc: #{$ipc};
|
24
|
+
--color-icc: #{$icc};
|
25
|
+
|
26
|
+
--transition-flexible: #{$transitionFlexible};
|
27
|
+
--transition: #{$transition};
|
28
|
+
--transition2: #{$transition2};
|
29
|
+
|
30
|
+
--shape-fllet: #{$shapeFillet};
|
31
|
+
--shape-round: #{$shapeRound};
|
32
|
+
--shape-none: #{$shapeNone};
|
33
|
+
|
34
|
+
--boxshadow: #{$boxshadow};
|
35
|
+
--boxshadow-color: #{$boxshadowColor};
|
36
|
+
|
7
37
|
.pl-text-primary {color: $colorPrimary;}
|
8
38
|
.pl-text-success {color: $colorSuccess;}
|
9
39
|
.pl-text-warn {color: $colorWarn;}
|
@@ -35,4 +65,4 @@
|
|
35
65
|
.pl-icon-color{color: $icc}
|
36
66
|
|
37
67
|
.pl-boxshadow{box-shadow: $boxshadow}
|
38
|
-
}
|
68
|
+
}
|
@@ -36,8 +36,8 @@ $theme-default: (
|
|
36
36
|
icc:rgba(0, 0, 0, 0.45), /*图标色*/
|
37
37
|
|
38
38
|
transitionFlexible:cubic-bezier(.24, .22, .015, 1.2), /*flexible过度动画*/
|
39
|
-
transition:
|
40
|
-
transition2:
|
39
|
+
transition:ease, /*默认过渡动画*/
|
40
|
+
transition2:ease, /*过渡动画(轻)*/
|
41
41
|
|
42
42
|
boxshadow:$boxshadow, /*阴影*/
|
43
43
|
boxshadowColor:$boxshadowColor, /*阴影*/
|