plain-design 0.0.68 → 0.0.72
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 +4 -4
- package/dist/plain-design.min.js +2 -2
- package/dist/report.html +2 -2
- package/package.json +2 -1
- package/src/packages/PlAddress/index.tsx +1 -0
- package/src/packages/PlColorButton/color-button.scss +22 -21
- package/src/packages/PlFormItem/index.tsx +1 -1
- package/src/packages/PlIcon/index.tsx +2 -1
- package/src/packages/PlInputGroup/index.tsx +2 -1
- package/src/packages/PlLoading/index.tsx +2 -1
- package/src/packages/PlObject/index.tsx +1 -0
- package/src/packages/PlOv/index.tsx +1 -0
- package/src/packages/PlSelect/index.tsx +1 -1
- package/src/packages/PlTab/index.tsx +1 -0
- package/src/packages/PlTable/plc/standard/plc-expand.tsx +2 -1
- package/src/packages/PlTable/table.scss +4 -0
- package/src/packages/PlTablePro/index.tsx +1 -0
- package/src/packages/PlTabs/index.tsx +1 -0
- package/src/packages/PlTree/tree.scss +3 -1
- package/src/packages/PlcAddress/index.tsx +1 -0
- package/src/packages/PlcImage/index.tsx +2 -1
- package/src/packages/PlcObject/index.tsx +1 -0
- package/src/packages/PlcOperator/index.tsx +2 -1
- package/src/packages/PlcOv/index.tsx +1 -0
- package/src/packages/createUseTableOption/index.tsx +3 -0
- package/src/packages/createUseTableOption/use/filter/useDistinctFilter.tsx +2 -2
- package/src/packages/createUseTableOption/use/use.base-table.tsx +0 -1
- package/src/packages/createUseTableOption/use/use.methods.tsx +4 -0
- package/src/packages/createUseTableOption/use/use.paginaiton.tsx +3 -2
- package/src/packages/useMessage/PlMessage.scss +1 -1
- package/src/styles/data/scan.scss.json +16 -16
- package/src/utils/findReactElement.tsx +4 -4
|
@@ -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 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}"
|
|
65
65
|
],
|
|
66
66
|
"seq": 18
|
|
67
67
|
},
|
|
@@ -89,17 +89,17 @@
|
|
|
89
89
|
{
|
|
90
90
|
"name": "PlColorButton",
|
|
91
91
|
"codes": [
|
|
92
|
-
"@include theme {\r\n
|
|
92
|
+
"@include theme {\r\n .pl-color-button {\r\n border-radius: 2px;\r\n height: 24px;\r\n width: 24px;\r\n border: solid 1px $ibc;\r\n padding: 2px;\r\n box-sizing: border-box;\r\n display: inline-block;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n\r\n .pl-color-button-background {\r\n background-size: 7px 7px;\r\n border-radius: 2px;\r\n box-sizing: border-box;\r\n height: 100%;\r\n width: 100%;\r\n\r\n .pl-color-button-color {\r\n height: 100%;\r\n width: 100%;\r\n }\r\n }\r\n }\r\n}\r\n"
|
|
93
93
|
],
|
|
94
94
|
"seq": 26
|
|
95
95
|
},
|
|
96
96
|
{
|
|
97
97
|
"name": "PlColorPicker",
|
|
98
98
|
"codes": [
|
|
99
|
-
"@include theme {\r\n .pl-color-panel {\r\n display: inline-block;\r\n font-size: 0;\r\n padding: 8px 12px;\r\n\r\n & > div:first-child {\r\n white-space: nowrap;\r\n }\r\n\r\n .pl-color-hue-slider {\r\n margin-top: 8px;\r\n display: block;\r\n }\r\n\r\n .pl-color-alpha-slider {\r\n margin-left: 8px;\r\n }\r\n\r\n .pl-color-panel-input-group {\r\n margin-top: 8px;\r\n\r\n .pl-input {\r\n\r\n .pl-input-inner {\r\n text-align: center;\r\n border-top-right-radius: 0;\r\n border-bottom-right-radius: 0;\r\n border-right: none;\r\n }\r\n }\r\n\r\n .pl-button-group {\r\n & > .pl-button:first-child {\r\n border-top-left-radius: 0;\r\n border-bottom-left-radius: 0;\r\n border-left: none;\r\n }\r\n }\r\n }\r\n }\r\n}",
|
|
100
99
|
"@include theme {\r\n\r\n .pl-color-button {\r\n border-radius: 2px;\r\n height: 24px;\r\n width: 24px;\r\n border: solid 1px $ibc;\r\n padding: 2px;\r\n box-sizing: border-box;\r\n display: inline-block;\r\n cursor: pointer;\r\n\r\n .pl-color-button-background {\r\n background-size: 7px 7px;\r\n border-radius: 2px;\r\n box-sizing: border-box;\r\n height: 100%;\r\n width: 100%;\r\n\r\n .pl-color-button-color {\r\n height: 100%;\r\n width: 100%;\r\n }\r\n }\r\n }\r\n\r\n .pl-color-picker {\r\n @include sizeMixin(input) {\r\n .pl-color-button {\r\n height: $value/2;\r\n width: $value/2;\r\n }\r\n }\r\n }\r\n}",
|
|
101
|
-
"@include theme {\r\n .pl-color-
|
|
100
|
+
"@include theme {\r\n .pl-color-panel {\r\n display: inline-block;\r\n font-size: 0;\r\n padding: 8px 12px;\r\n\r\n & > div:first-child {\r\n white-space: nowrap;\r\n }\r\n\r\n .pl-color-hue-slider {\r\n margin-top: 8px;\r\n display: block;\r\n }\r\n\r\n .pl-color-alpha-slider {\r\n margin-left: 8px;\r\n }\r\n\r\n .pl-color-panel-input-group {\r\n margin-top: 8px;\r\n\r\n .pl-input {\r\n\r\n .pl-input-inner {\r\n text-align: center;\r\n border-top-right-radius: 0;\r\n border-bottom-right-radius: 0;\r\n border-right: none;\r\n }\r\n }\r\n\r\n .pl-button-group {\r\n & > .pl-button:first-child {\r\n border-top-left-radius: 0;\r\n border-bottom-left-radius: 0;\r\n border-left: none;\r\n }\r\n }\r\n }\r\n }\r\n}",
|
|
102
101
|
"@include theme {\r\n .pl-color-hue-slider {\r\n background: linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);\r\n display: inline-block;\r\n height: 10px;\r\n position: relative;\r\n cursor: pointer;\r\n border-radius: 10px;\r\n\r\n .pl-color-hue-slider-thumb {\r\n display: inline-block;\r\n height: 100%;\r\n background-color: white;\r\n position: absolute;\r\n top: 0;\r\n border: solid 1px $colorInfo;\r\n box-sizing: border-box;\r\n border-radius: 100px;\r\n }\r\n }\r\n}",
|
|
102
|
+
"@include theme {\r\n .pl-color-alpha-slider {\r\n width: 10px;\r\n background-size: 10px 10px;\r\n position: relative;\r\n cursor: pointer;\r\n border-radius: 10px;\r\n display: inline-block;\r\n\r\n .pl-color-alpha-shadow, .pl-color-alpha-thumb {\r\n pointer-events: none;\r\n }\r\n\r\n .pl-color-alpha-shadow {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n border-radius: 10px;\r\n }\r\n\r\n .pl-color-alpha-thumb {\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 10px;\r\n border: solid 1px $colorInfo;\r\n display: inline-block;\r\n background-color: white;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n box-sizing: border-box;\r\n }\r\n }\r\n}",
|
|
103
103
|
"@include theme {\r\n .pl-color-sv-panel {\r\n position: relative;\r\n box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.4);\r\n cursor: pointer;\r\n display: inline-block;\r\n\r\n &:before, &:after, & span {\r\n pointer-events: none;\r\n }\r\n\r\n &, &:before, &:after {\r\n border-radius: 2px;\r\n }\r\n\r\n &:before, &:after {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n content: '';\r\n }\r\n\r\n &:before {\r\n background: linear-gradient(to right, white, rgba(255, 255, 255, 0));\r\n }\r\n\r\n &:after {\r\n background: linear-gradient(to top, black, rgba(255, 255, 255, 0));\r\n }\r\n\r\n .pl-color-sv-thumb {\r\n display: inline-block;\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n left: 0;\r\n top: 0;\r\n z-index: 1;\r\n\r\n &:after {\r\n display: inline-block;\r\n width: 10px;\r\n height: 10px;\r\n border: solid 1px #999;\r\n border-radius: 10px;\r\n position: absolute;\r\n top: -5px;\r\n left: -5px;\r\n content: '';\r\n box-sizing: border-box;\r\n background-color: white;\r\n }\r\n }\r\n }\r\n}"
|
|
104
104
|
],
|
|
105
105
|
"seq": 27
|
|
@@ -282,7 +282,7 @@
|
|
|
282
282
|
{
|
|
283
283
|
"name": "PlTable",
|
|
284
284
|
"codes": [
|
|
285
|
-
"@include theme {\r\n $tableHeadColor: rgba(0, 0, 0, .85);\r\n $tableHeadBackground: #f9f9f9;\r\n $tableHeadHoverBackground: #e4e7ef;\r\n $tableHeadBorderColor: #f0f0f0;\r\n\r\n $tableBodyColor: rgba(0, 0, 0, 0.85);\r\n\r\n $tableRowHoverBackground: #f5f7fa;\r\n $tableRowCurrentBackground: mix($colorPrimary, white, 7.5%);\r\n\r\n $scrollbarSize: 12px;\r\n /*---------------------------------------scroll-------------------------------------------*/\r\n .pl-table, .pl-virtual-table {\r\n position: relative;\r\n\r\n .pl-scroll {\r\n .pl-scroll-content {\r\n min-width: 100%;\r\n }\r\n\r\n .pl-vertical-scrollbar-wrapper, .pl-horizontal-scrollbar-wrapper {\r\n z-index: 10;\r\n }\r\n }\r\n\r\n &:hover {\r\n .pl-scroll {\r\n & > .pl-horizontal-scrollbar-wrapper, & > .pl-vertical-scrollbar-wrapper {\r\n .pl-vertical-scrollbar, .pl-horizontal-scrollbar {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n /*---------------------------------------虚拟表格-------------------------------------------*/\r\n .pl-virtual-table {\r\n height: 100%;\r\n width: 100%;\r\n overflow: hidden;\r\n\r\n .pl-virtual-table-summary-table-wrapper {\r\n pointer-events: none;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n overflow: hidden;\r\n z-index: 5;\r\n\r\n & > table {\r\n &:after {\r\n content: '';\r\n display: block;\r\n height: $scrollbarSize;\r\n width: 1px;\r\n }\r\n }\r\n\r\n &:after {\r\n position: absolute;\r\n bottom: 0;\r\n height: $scrollbarSize;\r\n left: 0;\r\n content: \"\";\r\n background-color: #f5f7fa;\r\n z-index: 3;\r\n width: 5000px;\r\n }\r\n\r\n .pl-virtual-table-summary-table {\r\n pointer-events: auto;\r\n position: absolute;\r\n left: 0;\r\n\r\n td {\r\n background-color: $tableHeadBackground;\r\n }\r\n }\r\n }\r\n }\r\n /*---------------------------------------basic-------------------------------------------*/\r\n table {\r\n border-collapse: collapse;\r\n border-spacing: 0;\r\n box-sizing: border-box;\r\n table-layout: fixed;\r\n /**\r\n * table一直都是有个最小宽度100%。\r\n * 当总列宽小于表格宽度时，table没有具体width宽度，fit列不设置库宽度，使其自适应宽度；\r\n * 当总列宽大于表格宽度时，table设置具体的width宽度，fit值无效，以列具体宽度为准；\r\n */\r\n //min-width: 100%; // 不能设置min-width，当文字过长的时候，会自动撑开列宽，导致表头与表体错位\r\n width: 100%;\r\n\r\n tr {\r\n td {\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n box-sizing: border-box;\r\n position: relative;\r\n padding: 1px 11px;\r\n }\r\n }\r\n }\r\n /*---------------------------------------collector-------------------------------------------*/\r\n .plc-collector {\r\n display: none;\r\n }\r\n /*---------------------------------------no data-------------------------------------------*/\r\n .pl-table-no-data {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: none;\r\n }\r\n /*---------------------------------------head-------------------------------------------*/\r\n .plt-head {\r\n td {\r\n background-color: $tableHeadBackground;\r\n color: $tableHeadColor;\r\n\r\n &:hover {\r\n background-color: $tableHeadHoverBackground;\r\n }\r\n\r\n .plt-head-cell-indicator {\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n height: inherit;\r\n width: 6px;\r\n right: 0;\r\n content: '';\r\n background-color: rgba(black, 0.1);\r\n cursor: ew-resize;\r\n opacity: 0;\r\n transition: opacity 500ms $transition;\r\n z-index: 1;\r\n }\r\n\r\n .plt-head-cell-sorter {\r\n position: absolute;\r\n right: 4px;\r\n top: 0;\r\n bottom: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n .plt-head-cell-sorter-inner {\r\n display: flex;\r\n flex-direction: column;\r\n color: rgba(black, 0.4);\r\n\r\n .pl-icon:first-child {\r\n position: relative;\r\n top: 3px;\r\n }\r\n\r\n .pl-icon:last-child {\r\n position: relative;\r\n bottom: 3px;\r\n }\r\n }\r\n\r\n &.plt-head-cell-sorter-asc {\r\n .plt-head-cell-sorter-inner {\r\n .pl-icon:first-child {\r\n color: rgba(black, 0.8);\r\n }\r\n }\r\n }\r\n\r\n &.plt-head-cell-sorter-desc {\r\n .plt-head-cell-sorter-inner {\r\n .pl-icon:last-child {\r\n color: rgba(black, 0.8);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n /*---------------------------------------body-------------------------------------------*/\r\n .plt-body {\r\n tr {\r\n td {\r\n transition: background-color 150ms linear;\r\n background-color: white;\r\n color: $tableBodyColor;\r\n }\r\n }\r\n }\r\n /*---------------------------------------row-------------------------------------------*/\r\n .plt-row {\r\n border-bottom: solid 1px $tableHeadBorderColor;\r\n\r\n &:hover {\r\n td {\r\n background-color: $tableRowHoverBackground;\r\n }\r\n }\r\n\r\n &.plt-row-current {\r\n &, &:hover {\r\n td {\r\n background-color: $tableRowCurrentBackground;\r\n }\r\n }\r\n }\r\n }\r\n .plt-head {\r\n tr {\r\n border-bottom: solid 1px $tableHeadBorderColor;\r\n border-top: solid 1px $tableHeadBorderColor;\r\n }\r\n }\r\n .plt-body {\r\n .pl-virtual-table-summary-table-wrapper {\r\n & > table {\r\n border-top: solid 1px $tableHeadBorderColor;\r\n }\r\n }\r\n }\r\n /*---------------------------------------cell-------------------------------------------*/\r\n .plt-cell {\r\n text-align: left;\r\n\r\n &.plt-cell-align-center {\r\n text-align: center;\r\n }\r\n\r\n &.plt-cell-align-right {\r\n text-align: right;\r\n }\r\n\r\n &.plt-cell-no-padding {\r\n padding: 0;\r\n }\r\n\r\n &.plt-cell-editing {\r\n &:not(.plt-cell-add-edit-padding) {\r\n padding-left: 0;\r\n }\r\n }\r\n\r\n &.plt-cell-link {\r\n color: $colorPrimary;\r\n cursor: pointer;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n /*---------------------------------------border-------------------------------------------*/\r\n .pl-table {\r\n\r\n &.pl-table-border {\r\n tr {\r\n td {\r\n border-right: solid 1px $tableHeadBorderColor;\r\n border-left: solid 1px $tableHeadBorderColor;\r\n }\r\n }\r\n\r\n &:after {\r\n position: absolute;\r\n right: 0;\r\n bottom: 0;\r\n top: 0;\r\n left: 0;\r\n background-color: transparent;\r\n border: solid 0.5px $tableHeadBorderColor;\r\n content: '';\r\n z-index: 5;\r\n pointer-events: none;\r\n }\r\n }\r\n\r\n &.pl-table-stripe {\r\n .plt-body {\r\n .pl-virtual-list-content {\r\n table {\r\n tr:nth-child(odd):not(:hover):not(.plt-row-current) {\r\n td {\r\n background-color: #f2f5ff;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n /*---------------------------------------size-------------------------------------------*/\r\n .pl-table {\r\n &.pl-table-size-large {\r\n .plt-cell {\r\n font-size: 16px;\r\n }\r\n }\r\n\r\n &.pl-table-size-normal {\r\n .plt-cell {\r\n font-size: 14px;\r\n }\r\n }\r\n\r\n &.pl-table-size-mini {\r\n .plt-cell {\r\n font-size: 12px;\r\n }\r\n }\r\n }\r\n /*---------------------------------------shadow-------------------------------------------*/\r\n .pl-table {\r\n &, &.pl-table-border {\r\n\r\n .plt-cell-last-fixed-left, .plt-cell-first-fixed-right {\r\n\r\n &:before {\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n width: 3px;\r\n pointer-events: none;\r\n content: '';\r\n z-index: 4;\r\n background-color: transparent;\r\n\r\n left: initial;\r\n right: initial;\r\n transform: none;\r\n }\r\n\r\n &.plt-cell-last-fixed-left {\r\n &:before {\r\n right: 0;\r\n box-shadow: inset 10px 0 10px -10px mix(black, $boxshadowColor, 10%);\r\n }\r\n }\r\n\r\n &.plt-cell-first-fixed-right {\r\n &:before {\r\n left: 0;\r\n box-shadow: inset -10px 0 10px -10px mix(black, $boxshadowColor, 10%);\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.plt-table-hide-fixed-left .plt-cell-last-fixed-left, &.plt-table-hide-fixed-right .plt-cell-first-fixed-right {\r\n &:before {\r\n display: none;\r\n }\r\n }\r\n }\r\n /*---------------------------------------standard-------------------------------------------*/\r\n /*plc-index*/\r\n .plc-index-summary-text {\r\n font-size: 12px;\r\n }\r\n /*!*icon*!\r\n .plt-cell {\r\n & > .pl-icon {\r\n vertical-align: -0.3em;\r\n\r\n & + * {\r\n margin-left: 4px;\r\n }\r\n }\r\n }*/\r\n /*input*/\r\n .plt-cell {\r\n & > * {\r\n vertical-align: middle;\r\n }\r\n\r\n & > .pl-input {\r\n width: 100%;\r\n\r\n & > .pl-input-inner {\r\n width: inherit !important;\r\n\r\n & > .pl-input-custom-inner {\r\n & > input {\r\n width: 100% !important;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n /*plc-expand*/\r\n .plt-row {\r\n &.plt-expand-row {\r\n td {\r\n background-color: white;\r\n z-index: 5;\r\n white-space: normal;\r\n padding: 0;\r\n overflow: unset;\r\n }\r\n\r\n .plt-expand-body {\r\n padding: 16px;\r\n box-sizing: border-box;\r\n position: sticky;\r\n left: 0;\r\n\r\n & > .pl-form {\r\n padding: 0;\r\n }\r\n }\r\n }\r\n\r\n .plc-expand-icon {\r\n .pl-icon {\r\n @include transition;\r\n transition-property: transform;\r\n }\r\n\r\n &.plc-expand-icon-active {\r\n .pl-icon {\r\n transform: rotate(-180deg);\r\n }\r\n }\r\n }\r\n }\r\n /*plc-draggier*/\r\n .pl-button.plc-draggier-handler {\r\n cursor: move;\r\n }\r\n /*col draggier*/\r\n .plt-col-draggier-indicator {\r\n &[droppable=\"true\"] {\r\n background-color: $colorPrimary;\r\n }\r\n\r\n &[droppable=\"false\"] {\r\n background-color: $colorError;\r\n }\r\n }\r\n /*plc-tree*/\r\n .plc-tree-node {\r\n white-space: nowrap;\r\n\r\n & > * {\r\n display: inline-block;\r\n height: 100%;\r\n }\r\n\r\n .plc-tree-node-expander, .plc-tree-node-check {\r\n width: 30px;\r\n text-align: center;\r\n }\r\n }\r\n .plc-tree-node-content {\r\n display: inline-block;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n padding-left: 8px;\r\n box-sizing: border-box;\r\n }\r\n}\r\n"
|
|
285
|
+
"@include theme {\r\n $tableHeadColor: rgba(0, 0, 0, .85);\r\n $tableHeadBackground: #f9f9f9;\r\n $tableHeadHoverBackground: #e4e7ef;\r\n $tableHeadBorderColor: #f0f0f0;\r\n\r\n $tableBodyColor: rgba(0, 0, 0, 0.85);\r\n\r\n $tableRowHoverBackground: #f5f7fa;\r\n $tableRowCurrentBackground: mix($colorPrimary, white, 7.5%);\r\n\r\n $scrollbarSize: 12px;\r\n /*---------------------------------------scroll-------------------------------------------*/\r\n .pl-table, .pl-virtual-table {\r\n position: relative;\r\n\r\n .pl-scroll {\r\n .pl-scroll-content {\r\n min-width: 100%;\r\n }\r\n\r\n .pl-vertical-scrollbar-wrapper, .pl-horizontal-scrollbar-wrapper {\r\n z-index: 10;\r\n }\r\n }\r\n\r\n &:hover {\r\n .pl-scroll {\r\n & > .pl-horizontal-scrollbar-wrapper, & > .pl-vertical-scrollbar-wrapper {\r\n .pl-vertical-scrollbar, .pl-horizontal-scrollbar {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n /*---------------------------------------虚拟表格-------------------------------------------*/\r\n .pl-virtual-table {\r\n height: 100%;\r\n width: 100%;\r\n overflow: hidden;\r\n\r\n .pl-virtual-table-summary-table-wrapper {\r\n pointer-events: none;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n overflow: hidden;\r\n z-index: 5;\r\n\r\n & > table {\r\n &:after {\r\n content: '';\r\n display: block;\r\n height: $scrollbarSize;\r\n width: 1px;\r\n }\r\n }\r\n\r\n &:after {\r\n position: absolute;\r\n bottom: 0;\r\n height: $scrollbarSize;\r\n left: 0;\r\n content: \"\";\r\n background-color: #f5f7fa;\r\n z-index: 3;\r\n width: 5000px;\r\n }\r\n\r\n .pl-virtual-table-summary-table {\r\n pointer-events: auto;\r\n position: absolute;\r\n left: 0;\r\n\r\n td {\r\n background-color: $tableHeadBackground;\r\n }\r\n }\r\n }\r\n }\r\n /*---------------------------------------basic-------------------------------------------*/\r\n table {\r\n border-collapse: collapse;\r\n border-spacing: 0;\r\n box-sizing: border-box;\r\n table-layout: fixed;\r\n /**\r\n * table一直都是有个最小宽度100%。\r\n * 当总列宽小于表格宽度时，table没有具体width宽度，fit列不设置库宽度，使其自适应宽度；\r\n * 当总列宽大于表格宽度时，table设置具体的width宽度，fit值无效，以列具体宽度为准；\r\n */\r\n //min-width: 100%; // 不能设置min-width，当文字过长的时候，会自动撑开列宽，导致表头与表体错位\r\n width: 100%;\r\n\r\n tr {\r\n td {\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n box-sizing: border-box;\r\n position: relative;\r\n padding: 1px 11px;\r\n }\r\n }\r\n }\r\n /*---------------------------------------collector-------------------------------------------*/\r\n .plc-collector {\r\n display: none;\r\n }\r\n /*---------------------------------------no data-------------------------------------------*/\r\n .pl-table-no-data {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: none;\r\n }\r\n /*---------------------------------------head-------------------------------------------*/\r\n .plt-head {\r\n td {\r\n background-color: $tableHeadBackground;\r\n color: $tableHeadColor;\r\n\r\n &:hover {\r\n background-color: $tableHeadHoverBackground;\r\n }\r\n\r\n .plt-head-cell-indicator {\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n height: inherit;\r\n width: 6px;\r\n right: 0;\r\n content: '';\r\n background-color: rgba(black, 0.1);\r\n cursor: ew-resize;\r\n opacity: 0;\r\n transition: opacity 500ms $transition;\r\n z-index: 1;\r\n }\r\n\r\n .plt-head-cell-sorter {\r\n position: absolute;\r\n right: 4px;\r\n top: 0;\r\n bottom: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n .plt-head-cell-sorter-inner {\r\n display: flex;\r\n flex-direction: column;\r\n color: rgba(black, 0.4);\r\n\r\n .pl-icon:first-child {\r\n position: relative;\r\n top: 3px;\r\n }\r\n\r\n .pl-icon:last-child {\r\n position: relative;\r\n bottom: 3px;\r\n }\r\n }\r\n\r\n &.plt-head-cell-sorter-asc {\r\n .plt-head-cell-sorter-inner {\r\n .pl-icon:first-child {\r\n color: rgba(black, 0.8);\r\n }\r\n }\r\n }\r\n\r\n &.plt-head-cell-sorter-desc {\r\n .plt-head-cell-sorter-inner {\r\n .pl-icon:last-child {\r\n color: rgba(black, 0.8);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n /*---------------------------------------body-------------------------------------------*/\r\n .plt-body {\r\n tr {\r\n td {\r\n transition: background-color 150ms linear;\r\n background-color: white;\r\n color: $tableBodyColor;\r\n }\r\n }\r\n }\r\n /*---------------------------------------row-------------------------------------------*/\r\n .plt-row {\r\n border-bottom: solid 1px $tableHeadBorderColor;\r\n\r\n &:hover {\r\n td {\r\n background-color: $tableRowHoverBackground;\r\n }\r\n }\r\n\r\n &.plt-row-current {\r\n &, &:hover {\r\n td {\r\n background-color: $tableRowCurrentBackground;\r\n }\r\n }\r\n }\r\n }\r\n .plt-head {\r\n tr {\r\n border-bottom: solid 1px $tableHeadBorderColor;\r\n border-top: solid 1px $tableHeadBorderColor;\r\n }\r\n }\r\n .plt-body {\r\n .pl-virtual-table-summary-table-wrapper {\r\n & > table {\r\n border-top: solid 1px $tableHeadBorderColor;\r\n }\r\n }\r\n }\r\n /*---------------------------------------cell-------------------------------------------*/\r\n .plt-cell {\r\n text-align: left;\r\n\r\n &.plt-cell-align-center {\r\n text-align: center;\r\n }\r\n\r\n &.plt-cell-align-right {\r\n text-align: right;\r\n }\r\n\r\n &.plt-cell-no-padding {\r\n padding: 0;\r\n }\r\n\r\n &.plt-cell-editing {\r\n &:not(.plt-cell-add-edit-padding) {\r\n padding-left: 0;\r\n }\r\n }\r\n\r\n &.plt-cell-link {\r\n color: $colorPrimary;\r\n cursor: pointer;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n /*---------------------------------------border-------------------------------------------*/\r\n .pl-table {\r\n\r\n &.pl-table-border {\r\n tr {\r\n td {\r\n border-right: solid 1px $tableHeadBorderColor;\r\n border-left: solid 1px $tableHeadBorderColor;\r\n }\r\n }\r\n\r\n &:after {\r\n position: absolute;\r\n right: 0;\r\n bottom: 0;\r\n top: 0;\r\n left: 0;\r\n background-color: transparent;\r\n border: solid 0.5px $tableHeadBorderColor;\r\n content: '';\r\n z-index: 5;\r\n pointer-events: none;\r\n }\r\n }\r\n\r\n &.pl-table-stripe {\r\n .plt-body {\r\n .pl-virtual-list-content {\r\n table {\r\n tr:nth-child(odd):not(:hover):not(.plt-row-current) {\r\n td {\r\n background-color: #f2f5ff;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n /*---------------------------------------size-------------------------------------------*/\r\n .pl-table {\r\n &.pl-table-size-large {\r\n .plt-cell {\r\n font-size: 16px;\r\n }\r\n }\r\n\r\n &.pl-table-size-normal {\r\n .plt-cell {\r\n font-size: 14px;\r\n }\r\n }\r\n\r\n &.pl-table-size-mini {\r\n .plt-cell {\r\n font-size: 12px;\r\n }\r\n }\r\n }\r\n /*---------------------------------------shadow-------------------------------------------*/\r\n .pl-table {\r\n &, &.pl-table-border {\r\n\r\n .plt-cell-last-fixed-left, .plt-cell-first-fixed-right {\r\n\r\n &:before {\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n width: 3px;\r\n pointer-events: none;\r\n content: '';\r\n z-index: 4;\r\n background-color: transparent;\r\n\r\n left: initial;\r\n right: initial;\r\n transform: none;\r\n }\r\n\r\n &.plt-cell-last-fixed-left {\r\n &:before {\r\n right: 0;\r\n box-shadow: inset 10px 0 10px -10px mix(black, $boxshadowColor, 10%);\r\n }\r\n }\r\n\r\n &.plt-cell-first-fixed-right {\r\n &:before {\r\n left: 0;\r\n box-shadow: inset -10px 0 10px -10px mix(black, $boxshadowColor, 10%);\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.plt-table-hide-fixed-left .plt-cell-last-fixed-left, &.plt-table-hide-fixed-right .plt-cell-first-fixed-right {\r\n &:before {\r\n display: none;\r\n }\r\n }\r\n }\r\n /*---------------------------------------standard-------------------------------------------*/\r\n /*plc-index*/\r\n .plc-index-summary-text {\r\n font-size: 12px;\r\n }\r\n /*!*icon*!\r\n .plt-cell {\r\n & > .pl-icon {\r\n vertical-align: -0.3em;\r\n\r\n & + * {\r\n margin-left: 4px;\r\n }\r\n }\r\n }*/\r\n /*input*/\r\n .plt-cell {\r\n & > * {\r\n vertical-align: middle;\r\n\r\n &.pl-icon {\r\n vertical-align: middle;\r\n }\r\n }\r\n\r\n & > .pl-input {\r\n width: 100%;\r\n\r\n & > .pl-input-inner {\r\n width: inherit !important;\r\n\r\n & > .pl-input-custom-inner {\r\n & > input {\r\n width: 100% !important;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n /*plc-expand*/\r\n .plt-row {\r\n &.plt-expand-row {\r\n td {\r\n background-color: white;\r\n z-index: 5;\r\n white-space: normal;\r\n padding: 0;\r\n overflow: unset;\r\n }\r\n\r\n .plt-expand-body {\r\n padding: 16px;\r\n box-sizing: border-box;\r\n position: sticky;\r\n left: 0;\r\n\r\n & > .pl-form {\r\n padding: 0;\r\n }\r\n }\r\n }\r\n\r\n .plc-expand-icon {\r\n .pl-icon {\r\n @include transition;\r\n transition-property: transform;\r\n }\r\n\r\n &.plc-expand-icon-active {\r\n .pl-icon {\r\n transform: rotate(-180deg);\r\n }\r\n }\r\n }\r\n }\r\n /*plc-draggier*/\r\n .pl-button.plc-draggier-handler {\r\n cursor: move;\r\n }\r\n /*col draggier*/\r\n .plt-col-draggier-indicator {\r\n &[droppable=\"true\"] {\r\n background-color: $colorPrimary;\r\n }\r\n\r\n &[droppable=\"false\"] {\r\n background-color: $colorError;\r\n }\r\n }\r\n /*plc-tree*/\r\n .plc-tree-node {\r\n white-space: nowrap;\r\n\r\n & > * {\r\n display: inline-block;\r\n height: 100%;\r\n }\r\n\r\n .plc-tree-node-expander, .plc-tree-node-check {\r\n width: 30px;\r\n text-align: center;\r\n }\r\n }\r\n .plc-tree-node-content {\r\n display: inline-block;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n padding-left: 8px;\r\n box-sizing: border-box;\r\n }\r\n}\r\n"
|
|
286
286
|
],
|
|
287
287
|
"seq": 63
|
|
288
288
|
},
|
|
@@ -305,8 +305,8 @@
|
|
|
305
305
|
"codes": [
|
|
306
306
|
"@include theme {\r\n .pl-time {\r\n .pl-time-inner {\r\n display: flex;\r\n align-items: stretch;\r\n height: 100%;\r\n\r\n & > span {\r\n color: $icc;\r\n }\r\n\r\n .pl-time-input-inner {\r\n border: none;\r\n outline: none;\r\n width: 90px;\r\n height: 100%;\r\n background: transparent;\r\n }\r\n }\r\n\r\n &.pl-time-range {\r\n .pl-time-input-inner {\r\n text-align: center;\r\n }\r\n }\r\n\r\n .pl-input-inner {\r\n width: auto !important;\r\n }\r\n }\r\n\r\n .pl-time-panel-foot {\r\n padding: 8px 8px 0 8px;\r\n border-top: solid 1px $ibl;\r\n display: flex;\r\n justify-content: center;\r\n\r\n & > * + * {\r\n margin-left: 8px;\r\n }\r\n }\r\n}",
|
|
307
307
|
"@include theme {\r\n .pl-time-range-panel {\r\n display: inline-block;\r\n\r\n .pl-time-base-panel {\r\n\r\n &:first-child {\r\n border-right: solid 1px $ibc;\r\n border-radius: 0;\r\n }\r\n }\r\n }\r\n}",
|
|
308
|
-
"$time-size: 24px;\r\n\r\n@include theme {\r\n .pl-time-base-
|
|
309
|
-
"$time-size: 24px;\r\n\r\n@include theme {\r\n .pl-time-base-
|
|
308
|
+
"$time-size: 24px;\r\n\r\n@include theme {\r\n .pl-time-base-panel {\r\n display: inline-block;\r\n position: relative;\r\n color: $itc;\r\n\r\n &:before {\r\n position: absolute;\r\n top: $time-size*3;\r\n left: 0;\r\n right: 0;\r\n height: 1px;\r\n background-color: $ibl;\r\n content: '';\r\n pointer-events: none;\r\n }\r\n\r\n &:after {\r\n position: absolute;\r\n top: $time-size*4;\r\n left: 0;\r\n right: 0;\r\n height: 1px;\r\n background-color: $ibl;\r\n content: '';\r\n pointer-events: none;\r\n }\r\n\r\n .pl-time-base-column {\r\n border: none;\r\n\r\n & + .pl-time-base-column {\r\n border-left: dashed 1px $ibc;\r\n }\r\n }\r\n }\r\n}",
|
|
309
|
+
"$time-size: 24px;\r\n\r\n@include theme {\r\n .pl-time-base-column {\r\n display: inline-block;\r\n height: 7*$time-size;\r\n width: 40px;\r\n border-radius: 2px;\r\n\r\n .pl-time-base-column-list {\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n position: relative;\r\n\r\n .pl-time-base-column-item {\r\n font-size: 12px;\r\n height: $time-size;\r\n line-height: $time-size;\r\n transition: all 300ms $transition;\r\n text-align: center;\r\n\r\n &.pl-time-base-column-option-item {\r\n cursor: pointer;\r\n\r\n &:hover {\r\n background-color: rgba($colorInfo, 0.1);\r\n color: $ihc;\r\n }\r\n }\r\n\r\n &.pl-time-base-column-item-disabled {\r\n color: $disabledText;\r\n cursor: not-allowed;\r\n\r\n &:hover {\r\n color: $disabledText;\r\n background-color: transparent;\r\n }\r\n }\r\n\r\n &.pl-time-base-column-item-current {\r\n background-color: rgba($colorPrimary, 0.1);\r\n color: $colorPrimary;\r\n\r\n &:hover {\r\n color: $colorPrimary;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}"
|
|
310
310
|
],
|
|
311
311
|
"seq": 66
|
|
312
312
|
},
|
|
@@ -327,7 +327,7 @@
|
|
|
327
327
|
{
|
|
328
328
|
"name": "PlTree",
|
|
329
329
|
"codes": [
|
|
330
|
-
"@include theme {\r\n .pl-tree {\r\n width: 100%;\r\n position: relative;\r\n\r\n .pl-tree-placeholder {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 300px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n color: $icc;\r\n\r\n & > .pl-icon {\r\n font-size: 3em;\r\n margin-bottom: 8px;\r\n }\r\n }\r\n\r\n .pl-tree-node-list {\r\n overflow: hidden;\r\n }\r\n\r\n .pl-tree-node {\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n font-size: 14px;\r\n box-sizing: border-box;\r\n border-bottom: solid 1px $ibl;\r\n color: $itc;\r\n\r\n & > .pl-tree-node-content {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n flex: 1;\r\n }\r\n\r\n & > .pl-tree-node-operator {\r\n display: flex;\r\n align-items: center;\r\n font-size: 1.2em;\r\n\r\n .pl-tree-node-expander {\r\n width: 1em;\r\n }\r\n\r\n & > * {\r\n margin-right: 8px;\r\n color: $colorPrimary;\r\n user-select: none;\r\n width: 1em;\r\n transition: all 300ms linear;\r\n }\r\n\r\n .pl-icon {\r\n cursor: pointer;\r\n\r\n &.pl-tree-node-draggier {\r\n cursor: move;\r\n }\r\n }\r\n }\r\n\r\n &:first-child {\r\n border-top: solid 1px $ibl;\r\n }\r\n\r\n &:hover {\r\n background-color: #f6f6f6;\r\n }\r\n\r\n &.pl-tree-node-current {\r\n background-color: rgba($colorPrimary, 0.1);\r\n color: $colorPrimary;\r\n }\r\n\r\n &.pl-tree-empty-node {\r\n color: $colorWarn;\r\n\r\n & > .pl-tree-node-operator > * {\r\n color: $colorWarn;\r\n }\r\n }\r\n\r\n &.pl-tree-node-not-checkable {\r\n color: $disabledText;\r\n\r\n & > .pl-tree-node-operator > * {\r\n color: $disabledText;\r\n }\r\n }\r\n }\r\n }\r\n}"
|
|
330
|
+
"@include theme {\r\n .pl-tree {\r\n width: 100%;\r\n position: relative;\r\n\r\n .pl-tree-placeholder {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 300px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n color: $icc;\r\n\r\n & > .pl-icon {\r\n font-size: 3em;\r\n margin-bottom: 8px;\r\n }\r\n }\r\n\r\n .pl-tree-node-list {\r\n overflow: hidden;\r\n }\r\n\r\n .pl-tree-node {\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n font-size: 14px;\r\n box-sizing: border-box;\r\n border-bottom: solid 1px $ibl;\r\n color: $itc;\r\n\r\n & > .pl-tree-node-content {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n flex: 1;\r\n }\r\n\r\n & > .pl-tree-node-operator {\r\n display: flex;\r\n align-items: center;\r\n font-size: 1.2em;\r\n\r\n .pl-tree-node-expander {\r\n width: 1em;\r\n }\r\n\r\n & > * {\r\n display: flex;\r\n align-items: center;\r\n margin-right: 8px;\r\n color: $colorPrimary;\r\n user-select: none;\r\n width: 1em;\r\n transition: all 300ms linear;\r\n }\r\n\r\n .pl-icon {\r\n cursor: pointer;\r\n\r\n &.pl-tree-node-draggier {\r\n cursor: move;\r\n }\r\n }\r\n }\r\n\r\n &:first-child {\r\n border-top: solid 1px $ibl;\r\n }\r\n\r\n &:hover {\r\n background-color: #f6f6f6;\r\n }\r\n\r\n &.pl-tree-node-current {\r\n background-color: rgba($colorPrimary, 0.1);\r\n color: $colorPrimary;\r\n }\r\n\r\n &.pl-tree-empty-node {\r\n color: $colorWarn;\r\n\r\n & > .pl-tree-node-operator > * {\r\n color: $colorWarn;\r\n }\r\n }\r\n\r\n &.pl-tree-node-not-checkable {\r\n color: $disabledText;\r\n\r\n & > .pl-tree-node-operator > * {\r\n color: $disabledText;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n"
|
|
331
331
|
],
|
|
332
332
|
"seq": 70
|
|
333
333
|
},
|
|
@@ -371,10 +371,10 @@
|
|
|
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
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}",
|
|
374
|
-
"@include theme {\r\n .pl-tabs
|
|
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",
|
|
374
|
+
"@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",
|
|
376
375
|
"@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
|
|
376
|
+
"@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",
|
|
377
|
+
"@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"
|
|
378
378
|
],
|
|
379
379
|
"seq": 80
|
|
380
380
|
},
|
|
@@ -409,7 +409,7 @@
|
|
|
409
409
|
{
|
|
410
410
|
"name": "useMessage",
|
|
411
411
|
"codes": [
|
|
412
|
-
"@include theme {\r\n .pl-message-manager {\r\n pointer-events: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n z-index: 9999;\r\n }\r\n .pl-message-container {\r\n pointer-events: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n height: 100vh;\r\n width: 100vw;\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: border-box;\r\n\r\n @each $horizontal in (start, center, end) {\r\n @each $vertical in (start, center, end) {\r\n &.pl-message-container-#{$horizontal}-#{$vertical} {\r\n @if $vertical == center {\r\n justify-content: center;\r\n } @else {\r\n justify-content: flex-#{$vertical};\r\n }\r\n\r\n & > .pl-list {\r\n & > .pl-item {\r\n margin-bottom: 8px;\r\n width: 100%;\r\n $textAlign: center;\r\n @if ($horizontal == \"start\") {\r\n $textAlign: left;\r\n }\r\n @if ($horizontal == \"end\") {\r\n $textAlign: right;\r\n }\r\n text-align: $textAlign;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n .pl-message {\r\n text-align: initial;\r\n padding: 12px 20px;\r\n white-space: nowrap;\r\n background-color: white;\r\n pointer-events: auto;\r\n display: inline-flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n font-size: 14px;\r\n box-shadow: 0 3px 6px -4px
|
|
412
|
+
"@include theme {\r\n .pl-message-manager {\r\n pointer-events: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n z-index: 9999;\r\n }\r\n .pl-message-container {\r\n pointer-events: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n height: 100vh;\r\n width: 100vw;\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: border-box;\r\n\r\n @each $horizontal in (start, center, end) {\r\n @each $vertical in (start, center, end) {\r\n &.pl-message-container-#{$horizontal}-#{$vertical} {\r\n @if $vertical == center {\r\n justify-content: center;\r\n } @else {\r\n justify-content: flex-#{$vertical};\r\n }\r\n\r\n & > .pl-list {\r\n & > .pl-item {\r\n margin-bottom: 8px;\r\n width: 100%;\r\n $textAlign: center;\r\n @if ($horizontal == \"start\") {\r\n $textAlign: left;\r\n }\r\n @if ($horizontal == \"end\") {\r\n $textAlign: right;\r\n }\r\n text-align: $textAlign;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n .pl-message {\r\n text-align: initial;\r\n padding: 12px 20px;\r\n white-space: nowrap;\r\n background-color: white;\r\n pointer-events: auto;\r\n display: inline-flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n font-size: 14px;\r\n box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);\r\n position: relative;\r\n\r\n .pl-icon {\r\n &:not(.pl-message-close) + * {\r\n margin-left: 8px;\r\n }\r\n }\r\n\r\n .pl-message-close {\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n opacity: 0;\r\n transition: opacity 300ms linear;\r\n width: 20px;\r\n height: 28px;\r\n }\r\n\r\n &:hover {\r\n .pl-message-close {\r\n opacity: initial\r\n }\r\n }\r\n\r\n .pl-message-content {\r\n max-width: 75vw;\r\n display: inline-block;\r\n white-space: normal;\r\n }\r\n\r\n .pl-message-close {\r\n cursor: pointer;\r\n user-select: none;\r\n }\r\n\r\n @include statusMixin(message) {\r\n .pl-icon {\r\n color: $value;\r\n }\r\n }\r\n\r\n &.pl-message-status-dark {\r\n background-color: #383838;\r\n border-color: #383838;\r\n color: white;\r\n }\r\n\r\n &.pl-message-status-lite {\r\n background-color: white;\r\n border-color: #ddd;\r\n color: $itc;\r\n }\r\n }\r\n}\r\n"
|
|
413
413
|
],
|
|
414
414
|
"seq": 88
|
|
415
415
|
},
|
|
@@ -423,12 +423,12 @@
|
|
|
423
423
|
{
|
|
424
424
|
"name": "createUseTableOption",
|
|
425
425
|
"codes": [
|
|
426
|
-
"
|
|
426
|
+
".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
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",
|
|
428
|
+
"@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",
|
|
428
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",
|
|
429
|
-
".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",
|
|
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",
|
|
431
430
|
".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",
|
|
431
|
+
"@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",
|
|
432
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": 91
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {ReactElement, ReactNode} from "react";
|
|
2
2
|
import {isElement, isFragment} from 'react-is'
|
|
3
3
|
|
|
4
|
-
export function
|
|
4
|
+
export function findReactElement(node: ReactNode, isMatch: (node: ReactElement) => boolean): ReactNode[] | null {
|
|
5
5
|
if (node == null) {return null}
|
|
6
6
|
const type = typeof node
|
|
7
7
|
switch (type) {
|
|
@@ -14,14 +14,14 @@ export function findRreactElement(node: ReactNode, isMatch: (node: ReactElement)
|
|
|
14
14
|
if (Array.isArray(node) && node.length > 0) {
|
|
15
15
|
const ret: ReactNode[] = []
|
|
16
16
|
node.forEach(n => {
|
|
17
|
-
const findList =
|
|
17
|
+
const findList = findReactElement(n, isMatch)
|
|
18
18
|
if (!!findList && findList.length > 0) {
|
|
19
19
|
ret.push(...findList)
|
|
20
20
|
}
|
|
21
21
|
})
|
|
22
22
|
return ret
|
|
23
23
|
} else if (isFragment(node)) {
|
|
24
|
-
return
|
|
24
|
+
return findReactElement(node.props.children, isMatch)
|
|
25
25
|
} else if (isElement(node)) {
|
|
26
26
|
if (isMatch(node)) {
|
|
27
27
|
return [node]
|
|
@@ -29,4 +29,4 @@ export function findRreactElement(node: ReactNode, isMatch: (node: ReactElement)
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
return null
|
|
32
|
-
}
|
|
32
|
+
}
|