plain-design 0.0.92 → 0.0.93
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/plain-design.commonjs.min.js +1 -1
- package/dist/plain-design.min.css +2 -2
- package/dist/plain-design.min.js +1 -1
- package/dist/report.html +2 -2
- package/package.json +1 -1
- package/src/packages/PlDialog/dialog.scss +4 -4
- package/src/packages/PlDialog/index.tsx +2 -2
- package/src/packages/useDialog/PlDialogService.tsx +2 -2
- package/src/styles/data/scan.scss.json +11 -11
- package/src/styles/public/public.scss +31 -1
package/package.json
CHANGED
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
/*@formatter:off*/
|
|
110
110
|
&.pl-transition-dialog-enter {
|
|
111
111
|
&:before {opacity: 0;}
|
|
112
|
-
.pl-dialog-body {transform: translateY(-
|
|
112
|
+
.pl-dialog-body {transform: translateY(-10px);opacity: 0;}
|
|
113
113
|
}
|
|
114
114
|
&.pl-transition-dialog-enter-active {
|
|
115
115
|
&:before {opacity: 1;}
|
|
@@ -121,10 +121,10 @@
|
|
|
121
121
|
}
|
|
122
122
|
&.pl-transition-dialog-exit-active {
|
|
123
123
|
&:before {opacity: 0;}
|
|
124
|
-
.pl-dialog-body {transform: translateY(-
|
|
124
|
+
.pl-dialog-body {transform: translateY(-10px);opacity: 0;}
|
|
125
125
|
}
|
|
126
126
|
&.pl-transition-dialog-enter-active, &.pl-transition-dialog-exit-active {
|
|
127
|
-
transition: opacity
|
|
127
|
+
transition: opacity 150ms linear, transform 150ms $transition;
|
|
128
128
|
}
|
|
129
129
|
/*@formatter:on*/
|
|
130
130
|
}
|
|
@@ -193,4 +193,4 @@
|
|
|
193
193
|
/*@formatter:on*/
|
|
194
194
|
}
|
|
195
195
|
}
|
|
196
|
-
}
|
|
196
|
+
}
|
|
@@ -121,8 +121,8 @@ export const PlDialog = designComponent({
|
|
|
121
121
|
let height = props.fullHeight ? `calc(100vh - ${(!!hasHead.value ? 45 : 0) + (hasFoot.value ? 50 : 0)}px)` : props.height
|
|
122
122
|
let width = props.fullWidth ? '100vw' : props.width
|
|
123
123
|
|
|
124
|
-
let minHeight = props.minHeight !== undefined ? props.minHeight : height !== undefined ? null : '
|
|
125
|
-
let minWidth = props.minWidth !== undefined ? props.minWidth : width !== undefined ? null : '
|
|
124
|
+
let minHeight = props.minHeight !== undefined ? props.minHeight : height !== undefined ? null : '100px'
|
|
125
|
+
let minWidth = props.minWidth !== undefined ? props.minWidth : width !== undefined ? null : '400px'
|
|
126
126
|
let maxHeight = props.maxHeight !== undefined ? props.maxHeight : height !== undefined ? null : '80vh'
|
|
127
127
|
let maxWidth = props.maxWidth !== undefined ? props.maxWidth : width !== undefined ? null : '60vw'
|
|
128
128
|
|
|
@@ -197,9 +197,9 @@ export default createDefaultService({
|
|
|
197
197
|
const width = (() => {
|
|
198
198
|
if (!!option.dialogProps && option.dialogProps.width !== undefined) {return option.dialogProps.width}
|
|
199
199
|
if (option.editType === DialogServiceEditType.textarea) {
|
|
200
|
-
return ((option.dialogProps || {}).width || '
|
|
200
|
+
return ((option.dialogProps || {}).width || '400px')
|
|
201
201
|
} else {
|
|
202
|
-
return
|
|
202
|
+
return 400
|
|
203
203
|
}
|
|
204
204
|
})()
|
|
205
205
|
|
|
@@ -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 .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}"
|
|
65
65
|
],
|
|
66
66
|
"seq": 18
|
|
67
67
|
},
|
|
@@ -96,11 +96,11 @@
|
|
|
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}",
|
|
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
102
|
"@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}",
|
|
103
|
-
"@include theme {\r\n .pl-color-
|
|
103
|
+
"@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}"
|
|
104
104
|
],
|
|
105
105
|
"seq": 27
|
|
106
106
|
},
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
{
|
|
115
115
|
"name": "PlDialog",
|
|
116
116
|
"codes": [
|
|
117
|
-
".pl-dialog {\r\n z-index: 1500;\r\n\r\n position: fixed;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: auto;\r\n transition: all linear 300ms;\r\n\r\n &:before {\r\n content: '';\r\n background-color: rgba(0, 0, 0, 0.2);\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n user-select: none;\r\n transition: all linear 300ms;\r\n }\r\n\r\n .pl-dialog-body {\r\n background-color: white;\r\n position: relative;\r\n z-index: 1;\r\n transition: all cubic-bezier(0.410, 1.110, 0.615, 0.995) 300ms;\r\n box-shadow: 0 0 20px 8px rgba(100, 100, 100, 0.1);\r\n overflow: hidden;\r\n pointer-events: auto;\r\n box-sizing: border-box;\r\n\r\n .pl-dialog-head {\r\n padding: 12px 24px;\r\n background-color: white;\r\n position: relative;\r\n font-size: 14px;\r\n font-weight: 500;\r\n\r\n .pl-dialog-head-close {\r\n font-size: 18px;\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n right: 10px;\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n padding: 0 8px;\r\n opacity: 0.75;\r\n color: inherit;\r\n }\r\n }\r\n\r\n .pl-dialog-content {\r\n overflow: auto;\r\n padding: 16px 24px;\r\n font-size: 14px;\r\n box-sizing: border-box;\r\n }\r\n\r\n .pl-dialog-foot {\r\n padding: 8px 24px;\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n\r\n & > * + * {\r\n margin-left: 8px;\r\n }\r\n }\r\n }\r\n\r\n &.pl-dialog-fullscreen {\r\n padding: 0 !important;\r\n\r\n .pl-dialog-body {\r\n position: fixed;\r\n height: 100% !important;\r\n width: 100% !important;\r\n }\r\n }\r\n\r\n &.pl-dialog-no-mask {\r\n pointer-events: none;\r\n\r\n &:before {\r\n display: none;\r\n }\r\n }\r\n\r\n &.pl-dialog-vertical-center {\r\n padding: 0;\r\n align-items: center;\r\n }\r\n\r\n &.pl-dialog-no-content-padding {\r\n .pl-dialog-content {\r\n padding: 0;\r\n }\r\n }\r\n}\r\n\r\n.pl-transition-dialog {\r\n /*@formatter:off*/\r\n &.pl-transition-dialog-enter {\r\n &:before {opacity: 0;}\r\n .pl-dialog-body {transform: translateY(-
|
|
117
|
+
".pl-dialog {\r\n z-index: 1500;\r\n\r\n position: fixed;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: auto;\r\n transition: all linear 300ms;\r\n\r\n &:before {\r\n content: '';\r\n background-color: rgba(0, 0, 0, 0.2);\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n user-select: none;\r\n transition: all linear 300ms;\r\n }\r\n\r\n .pl-dialog-body {\r\n background-color: white;\r\n position: relative;\r\n z-index: 1;\r\n transition: all cubic-bezier(0.410, 1.110, 0.615, 0.995) 300ms;\r\n box-shadow: 0 0 20px 8px rgba(100, 100, 100, 0.1);\r\n overflow: hidden;\r\n pointer-events: auto;\r\n box-sizing: border-box;\r\n\r\n .pl-dialog-head {\r\n padding: 12px 24px;\r\n background-color: white;\r\n position: relative;\r\n font-size: 14px;\r\n font-weight: 500;\r\n\r\n .pl-dialog-head-close {\r\n font-size: 18px;\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n right: 10px;\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n padding: 0 8px;\r\n opacity: 0.75;\r\n color: inherit;\r\n }\r\n }\r\n\r\n .pl-dialog-content {\r\n overflow: auto;\r\n padding: 16px 24px;\r\n font-size: 14px;\r\n box-sizing: border-box;\r\n }\r\n\r\n .pl-dialog-foot {\r\n padding: 8px 24px;\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n\r\n & > * + * {\r\n margin-left: 8px;\r\n }\r\n }\r\n }\r\n\r\n &.pl-dialog-fullscreen {\r\n padding: 0 !important;\r\n\r\n .pl-dialog-body {\r\n position: fixed;\r\n height: 100% !important;\r\n width: 100% !important;\r\n }\r\n }\r\n\r\n &.pl-dialog-no-mask {\r\n pointer-events: none;\r\n\r\n &:before {\r\n display: none;\r\n }\r\n }\r\n\r\n &.pl-dialog-vertical-center {\r\n padding: 0;\r\n align-items: center;\r\n }\r\n\r\n &.pl-dialog-no-content-padding {\r\n .pl-dialog-content {\r\n padding: 0;\r\n }\r\n }\r\n}\r\n\r\n.pl-transition-dialog {\r\n /*@formatter:off*/\r\n &.pl-transition-dialog-enter {\r\n &:before {opacity: 0;}\r\n .pl-dialog-body {transform: translateY(-10px);opacity: 0;}\r\n }\r\n &.pl-transition-dialog-enter-active {\r\n &:before {opacity: 1;}\r\n .pl-dialog-body {transform: translateY(0) scale(1);opacity: 1;}\r\n }\r\n &.pl-transition-dialog-exit {\r\n &:before {opacity: 1;}\r\n .pl-dialog-body {transform: translateY(0) scale(1);opacity: 1;}\r\n }\r\n &.pl-transition-dialog-exit-active {\r\n &:before {opacity: 0;}\r\n .pl-dialog-body {transform: translateY(-10px);opacity: 0;}\r\n }\r\n &.pl-transition-dialog-enter-active, &.pl-transition-dialog-exit-active {\r\n transition: opacity 150ms linear, transform 150ms $transition;\r\n }\r\n /*@formatter:on*/\r\n}\r\n\r\n@include theme {\r\n .pl-dialog {\r\n .pl-dialog-body {\r\n color: $itc;\r\n\r\n .pl-dialog-head {\r\n color: $ihc;\r\n border-bottom: solid 1px $ibl;\r\n background: #fafafa;\r\n\r\n .pl-dialog-head-close .pl-button.pl-button-mode-text.pl-button-status-primary {\r\n color: $icc;\r\n\r\n &:hover {\r\n color: $colorPrimary;\r\n }\r\n }\r\n }\r\n\r\n .pl-dialog-foot {\r\n border-top: solid 1px $ibl;\r\n //background: #fafafa;\r\n }\r\n\r\n @include shapeMixin(dialog-body) {\r\n border-radius: $value;\r\n }\r\n }\r\n }\r\n\r\n $dialogTransition: (\r\n left:translate3d(-100%, 0, 0),\r\n right:translate3d(100%, 0, 0),\r\n top:translate3d(0, -100%, 0),\r\n bottom:translate3d(0, 100%, 0),\r\n );\r\n\r\n @each $key, $value in $dialogTransition {\r\n .pl-transition-dialog-#{$key} {\r\n /*@formatter:off*/\r\n &.pl-transition-dialog-#{$key}-enter {\r\n &:before {opacity: 0;}\r\n .pl-dialog-body {opacity: 0;transform: $value;}\r\n }\r\n &.pl-transition-dialog-#{$key}-enter-active {\r\n &:before {opacity: 1;}\r\n .pl-dialog-body {opacity: 1;transform: translate3d(0, 0, 0);}\r\n }\r\n &.pl-transition-dialog-#{$key}-exit {\r\n &:before {opacity: 1;}\r\n .pl-dialog-body {opacity: 1;transform: translate3d(0, 0, 0);}\r\n }\r\n &.pl-transition-dialog-#{$key}-exit-active {\r\n &:before {opacity: 0;}\r\n .pl-dialog-body {opacity: 0;transform: $value;}\r\n }\r\n &.pl-transition-dialog-#{$key}-enter-active, &.pl-transition-dialog-#{$key}-exit-active {\r\n .pl-dialog-body {\r\n transition: all $transition2 300ms;\r\n }\r\n }\r\n /*@formatter:on*/\r\n }\r\n }\r\n}\r\n"
|
|
118
118
|
],
|
|
119
119
|
"seq": 30
|
|
120
120
|
},
|
|
@@ -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: 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 .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",
|
|
373
374
|
"@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
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",
|
|
375
376
|
"@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",
|
|
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"
|
|
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"
|
|
378
378
|
],
|
|
379
379
|
"seq": 80
|
|
380
380
|
},
|
|
@@ -424,10 +424,10 @@
|
|
|
424
424
|
"name": "createUseTableOption",
|
|
425
425
|
"codes": [
|
|
426
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
|
-
".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",
|
|
428
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",
|
|
429
|
-
"
|
|
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",
|
|
430
429
|
"@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-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",
|
|
431
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
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
|
],
|
|
@@ -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
|
+
}
|