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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "plain-design",
3
- "version": "0.0.90",
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.109",
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.109",
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(-5vh) scale(0.85);opacity: 0;}
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(-5vh) scale(0.85);opacity: 0;}
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 300ms linear, transform 300ms $transition;
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 : '120px'
125
- let minWidth = props.minWidth !== undefined ? props.minWidth : width !== undefined ? null : '500px'
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
 
@@ -55,7 +55,7 @@
55
55
  }
56
56
 
57
57
  .pl-dropdown-group-content {
58
- padding: 4px 8px;
58
+ padding: 4px 0;
59
59
  }
60
60
 
61
61
  &.pl-dropdown-no-title:not(:last-child) {
@@ -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(updateNodes.map(node => node.editRow)).map(row => hooks.onBeforeSaveRow.exec(row)))}
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()
@@ -3,7 +3,7 @@
3
3
  position: fixed;
4
4
 
5
5
  .pl-contextmenu-service-body {
6
- transition: all $transition 300ms;
6
+ transition: all $transition 150ms;
7
7
  transform-origin: top left;
8
8
  box-sizing: border-box;
9
9
  box-shadow: $boxshadow;
@@ -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 || '500px')
200
+ return ((option.dialogProps || {}).width || '400px')
201
201
  } else {
202
- return 500
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:cubic-bezier(0.23, 1, 0.32, 1), /*默认过渡动画*/\r\n transition2:cubic-bezier(.59,1.12,.81,.95), /*过渡动画(轻)*/\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}",
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 .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",
64
- "@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}"
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(-5vh) scale(0.85);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(-5vh) scale(0.85);opacity: 0;}\r\n }\r\n &.pl-transition-dialog-enter-active, &.pl-transition-dialog-exit-active {\r\n transition: opacity 300ms linear, transform 300ms $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 {transform: $value;}\r\n }\r\n &.pl-transition-dialog-#{$key}-enter-active {\r\n &:before {opacity: 1;}\r\n .pl-dialog-body {transform: translate3d(0, 0, 0);}\r\n }\r\n &.pl-transition-dialog-#{$key}-exit {\r\n &:before {opacity: 1;}\r\n .pl-dialog-body {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 {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}"
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 8px;\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"
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: cubic-bezier(0.23, 1, 0.32, 1);\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 .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.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}"
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.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"
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 300ms;\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"
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
- "@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",
431
- "@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",
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
+ }
@@ -1,4 +1,4 @@
1
- $transition: cubic-bezier(0.23, 1, 0.32, 1);
1
+ $transition: ease;
2
2
 
3
3
  /*---------------------------------------scale-------------------------------------------*/
4
4
 
@@ -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:cubic-bezier(0.23, 1, 0.32, 1), /*默认过渡动画*/
40
- transition2:cubic-bezier(.59,1.12,.81,.95), /*过渡动画(轻)*/
39
+ transition:ease, /*默认过渡动画*/
40
+ transition2:ease, /*过渡动画(轻)*/
41
41
 
42
42
  boxshadow:$boxshadow, /*阴影*/
43
43
  boxshadowColor:$boxshadowColor, /*阴影*/