plain-design 0.0.86 → 0.0.87

Sign up to get free protection for your applications and to get access to all the features.
Files changed (8) hide show
  1. package/dist/plain-design.commonjs.min.js +1 -1
  2. package/dist/plain-design.min.css +1 -1
  3. package/dist/plain-design.min.js +1 -1
  4. package/dist/report.html +2 -2
  5. package/package.json +1 -1
  6. package/src/packages/PlScroll/scroll.scss +0 -7
  7. package/src/packages/PlTable/table/body/body.tsx +2 -7
  8. package/src/styles/data/scan.scss.json +6 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "plain-design",
3
- "version": "0.0.86",
3
+ "version": "0.0.87",
4
4
  "description": "",
5
5
  "main": "dist/plain-design.min.js",
6
6
  "module": "dist/plain-design.commonjs.min.js",
package/src/packages/PlScroll/scroll.scss CHANGED
@@ -112,13 +112,6 @@
112
112
  }
113
113
  }
114
114
 
115
- .pl-scroll-disabled-y .pl-scroll, .pl-scroll.pl-scroll-disabled-y {
116
- .pl-scroll-wrapper {
117
- width: 100%;
118
- overflow-y: hidden;
119
- }
120
- }
121
-
122
115
  .pl-scroll-sticky {
123
116
  position: sticky;
124
117
 
package/src/packages/PlTable/table/body/body.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import {PltRow} from "./row";
2
2
  import {TableHoverPart} from "../utils/table.utils";
3
3
  import {TableNode} from "../use/useTableNode";
4
- import {designComponent, onMounted, useClasses, useRefs} from "plain-design-composition";
4
+ import {designComponent, onMounted, useRefs} from "plain-design-composition";
5
5
  import React from "react";
6
6
  import {PlainTable} from "../../index";
7
7
  import {renderColgroup} from "../../plc/utils/renderColgroup";
@@ -43,17 +43,12 @@ export const PltBody = designComponent({
43
43
  refs.virtual!.refs.scroll!.refs.wrapper!.addEventListener('wheel', handler.onWheel)
44
44
  })
45
45
 
46
- const classes = useClasses(() => [
47
- 'plt-body',
48
- {'pl-scroll-disabled-y': props.table.props.showRows >= (props.table.props.data || []).length}
49
- ])
50
-
51
46
  return {
52
47
  render: () => {
53
48
  // console.log('props.table.disabledVirtual.value', props.table.disabledVirtual.value)
54
49
  return (
55
50
  <PlVirtualTable
56
- className={classes.value}
51
+ className="plt-body"
57
52
  ref={onRef.virtual}
58
53
  key={props.table.plcData.value!.plcKeyString}
59
54
  width={props.table.plcData.value!.targetTableWidth!}
package/src/styles/data/scan.scss.json CHANGED
@@ -96,8 +96,8 @@
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}",
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
101
  "@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}",
102
102
  "@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}",
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}"
@@ -254,7 +254,7 @@
254
254
  {
255
255
  "name": "PlScroll",
256
256
  "codes": [
257
- "@include theme {\r\n .pl-scroll {\r\n display: block;\r\n height: 100%;\r\n width: 100%;\r\n overflow: hidden;\r\n position: relative;\r\n box-sizing: border-box;\r\n\r\n &.pl-scroll-disabled {\r\n .pl-scroll-wrapper {\r\n overflow: hidden !important;\r\n cursor: not-allowed;\r\n }\r\n }\r\n\r\n .pl-scroll-wrapper {\r\n height: calc(100% + 17px);\r\n width: calc(100% + 17px);\r\n overflow: scroll;\r\n display: inline-block;\r\n float: left;\r\n\r\n &::-webkit-scrollbar {\r\n background: transparent;\r\n width: 17px;\r\n height: 17px;\r\n }\r\n\r\n &::-webkit-scrollbar-thumb {\r\n background: transparent;\r\n }\r\n\r\n .pl-scroll-content {\r\n display: inline-block;\r\n\r\n ::-webkit-scrollbar {\r\n background: #f1f1f1;\r\n width: 17px;\r\n height: 17px;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb {\r\n background: #c1c1c1;\r\n }\r\n\r\n }\r\n }\r\n\r\n .pl-vertical-scrollbar-wrapper, .pl-horizontal-scrollbar-wrapper {\r\n z-index: 3;\r\n }\r\n\r\n .pl-vertical-scrollbar-wrapper {\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n bottom: 0;\r\n\r\n .pl-vertical-scrollbar {\r\n top: 0;\r\n right: 2px;\r\n }\r\n\r\n }\r\n\r\n .pl-horizontal-scrollbar-wrapper {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n\r\n .pl-horizontal-scrollbar {\r\n left: 0;\r\n bottom: 2px;\r\n }\r\n }\r\n\r\n & > .pl-horizontal-scrollbar-wrapper, & > .pl-vertical-scrollbar-wrapper {\r\n .pl-vertical-scrollbar, .pl-horizontal-scrollbar {\r\n position: absolute;\r\n border-radius: 100px;\r\n cursor: pointer;\r\n /*opacity: 1;*/\r\n opacity: 0;\r\n transition-duration: 0.2s;\r\n transition-property: opacity, height, width;\r\n }\r\n }\r\n\r\n &.pl-scroll-always-show-scroll-bar {\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 &:hover, &[is-dragging] {\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 &[virtual-scrolling] {\r\n .pl-item {\r\n transition: none !important;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.pl-scroll-disabled-y .pl-scroll, .pl-scroll.pl-scroll-disabled-y {\r\n .pl-scroll-wrapper {\r\n width: 100%;\r\n overflow-y: hidden;\r\n }\r\n}\r\n\r\n.pl-scroll-sticky {\r\n position: sticky;\r\n\r\n &.pl-scroll-sticky-compatible {\r\n position: relative;\r\n }\r\n}\r\n\r\n.pl-auto-scroll-indicator-vertical {\r\n &.pl-auto-scroll-indicator-start {\r\n background: linear-gradient(to top, rgba(255, 255, 255, 0), #ddd);\r\n }\r\n\r\n &.pl-auto-scroll-indicator-end {\r\n background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ddd);\r\n }\r\n}\r\n\r\n.pl-auto-scroll-indicator-horizontal {\r\n &.pl-auto-scroll-indicator-start {\r\n background: linear-gradient(to left, rgba(255, 255, 255, 0), #ddd);\r\n }\r\n\r\n &.pl-auto-scroll-indicator-end {\r\n background: linear-gradient(to right, rgba(255, 255, 255, 0), #ddd);\r\n }\r\n}\r\n"
257
+ "@include theme {\r\n .pl-scroll {\r\n display: block;\r\n height: 100%;\r\n width: 100%;\r\n overflow: hidden;\r\n position: relative;\r\n box-sizing: border-box;\r\n\r\n &.pl-scroll-disabled {\r\n .pl-scroll-wrapper {\r\n overflow: hidden !important;\r\n cursor: not-allowed;\r\n }\r\n }\r\n\r\n .pl-scroll-wrapper {\r\n height: calc(100% + 17px);\r\n width: calc(100% + 17px);\r\n overflow: scroll;\r\n display: inline-block;\r\n float: left;\r\n\r\n &::-webkit-scrollbar {\r\n background: transparent;\r\n width: 17px;\r\n height: 17px;\r\n }\r\n\r\n &::-webkit-scrollbar-thumb {\r\n background: transparent;\r\n }\r\n\r\n .pl-scroll-content {\r\n display: inline-block;\r\n\r\n ::-webkit-scrollbar {\r\n background: #f1f1f1;\r\n width: 17px;\r\n height: 17px;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb {\r\n background: #c1c1c1;\r\n }\r\n\r\n }\r\n }\r\n\r\n .pl-vertical-scrollbar-wrapper, .pl-horizontal-scrollbar-wrapper {\r\n z-index: 3;\r\n }\r\n\r\n .pl-vertical-scrollbar-wrapper {\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n bottom: 0;\r\n\r\n .pl-vertical-scrollbar {\r\n top: 0;\r\n right: 2px;\r\n }\r\n\r\n }\r\n\r\n .pl-horizontal-scrollbar-wrapper {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n\r\n .pl-horizontal-scrollbar {\r\n left: 0;\r\n bottom: 2px;\r\n }\r\n }\r\n\r\n & > .pl-horizontal-scrollbar-wrapper, & > .pl-vertical-scrollbar-wrapper {\r\n .pl-vertical-scrollbar, .pl-horizontal-scrollbar {\r\n position: absolute;\r\n border-radius: 100px;\r\n cursor: pointer;\r\n /*opacity: 1;*/\r\n opacity: 0;\r\n transition-duration: 0.2s;\r\n transition-property: opacity, height, width;\r\n }\r\n }\r\n\r\n &.pl-scroll-always-show-scroll-bar {\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 &:hover, &[is-dragging] {\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 &[virtual-scrolling] {\r\n .pl-item {\r\n transition: none !important;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.pl-scroll-sticky {\r\n position: sticky;\r\n\r\n &.pl-scroll-sticky-compatible {\r\n position: relative;\r\n }\r\n}\r\n\r\n.pl-auto-scroll-indicator-vertical {\r\n &.pl-auto-scroll-indicator-start {\r\n background: linear-gradient(to top, rgba(255, 255, 255, 0), #ddd);\r\n }\r\n\r\n &.pl-auto-scroll-indicator-end {\r\n background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ddd);\r\n }\r\n}\r\n\r\n.pl-auto-scroll-indicator-horizontal {\r\n &.pl-auto-scroll-indicator-start {\r\n background: linear-gradient(to left, rgba(255, 255, 255, 0), #ddd);\r\n }\r\n\r\n &.pl-auto-scroll-indicator-end {\r\n background: linear-gradient(to right, rgba(255, 255, 255, 0), #ddd);\r\n }\r\n}\r\n"
258
258
  ],
259
259
  "seq": 56
260
260
  },
@@ -371,8 +371,8 @@
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-header.pl-tabs-header-horizontal.pl-tabs-header-type-text {\r\n\r\n .pl-tabs-header-item {\r\n line-height: 45px;\r\n\r\n & + .pl-tabs-header-item {\r\n margin-left: 32px;\r\n }\r\n\r\n &.pl-tabs-header-item-active, &:hover {\r\n color: $colorPrimary;\r\n }\r\n }\r\n\r\n .pl-tabs-header-list {\r\n position: relative;\r\n\r\n .pl-tabs-header-horizontal-text-indicator-container {\r\n background-color: $disabled;\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n\r\n .pl-tabs-header-horizontal-text-indicator {\r\n position: absolute;\r\n width: 0;\r\n left: 0;\r\n height: 100%;\r\n background-color: $colorPrimary;\r\n display: block;\r\n transition: $transition 150ms all;\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-top {\r\n .pl-tabs-header-horizontal-text-indicator-container {\r\n bottom: 0;\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-bottom {\r\n .pl-tabs-header-horizontal-text-indicator-container {\r\n top: 0;\r\n }\r\n }\r\n }\r\n}\r\n",
375
374
  "@include theme {\r\n .pl-tabs-header-horizontal {\r\n overflow: hidden;\r\n position: relative;\r\n\r\n .pl-tabs-header-list {\r\n display: inline-flex;\r\n align-items: center;\r\n white-space: nowrap;\r\n min-width: 100%;\r\n position: relative;\r\n transition: 300ms $transitionFlexible left;\r\n }\r\n\r\n .pl-tabs-header-item {\r\n display: inline-block;\r\n font-size: 14px;\r\n }\r\n\r\n &.pl-tabs-header-show-more {\r\n padding-right: 80px;\r\n\r\n .pl-tabs-header-more-button {\r\n z-index: 1;\r\n position: absolute;\r\n background-color: rgba(white, 0.9);\r\n right: 0;\r\n top: 0;\r\n bottom: 0;\r\n width: 80px;\r\n box-shadow: 0 2px 8px #ccc;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: $ihc;\r\n }\r\n }\r\n }\r\n\r\n .pl-tabs-head-position-top, .pl-tabs-head-position-bottom {\r\n &.pl-tabs-fit-height {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n flex: 1;\r\n\r\n & > .pl-tabs-body {\r\n flex: 1;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: stretch;\r\n\r\n & > .pl-inner-tab {\r\n flex: 1;\r\n overflow: auto;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n",
375
+ "@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",
376
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",
377
377
  "@include theme {\r\n .pl-tabs {\r\n &.pl-tabs-head-position-left, &.pl-tabs-head-position-right {\r\n display: flex;\r\n\r\n .pl-tabs-body {\r\n flex: 1;\r\n box-sizing: border-box;\r\n }\r\n\r\n .pl-tabs-header {\r\n position: relative;\r\n\r\n .pl-tabs-header-item {\r\n line-height: 36px;\r\n padding: 0 16px;\r\n position: relative;\r\n z-index: 1;\r\n transition: all linear 150ms;\r\n white-space: nowrap;\r\n\r\n &:hover {\r\n color: $colorPrimary;\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n color: $colorPrimary;\r\n background-color: $colorPrimaryLight;\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-left {\r\n\r\n &:before {\r\n position: absolute;\r\n content: '';\r\n right: 0;\r\n width: 2px;\r\n top: 0;\r\n bottom: 0;\r\n background-color: $ibl;\r\n }\r\n\r\n .pl-tabs-header-item {\r\n text-align: right;\r\n border-right: solid 2px transparent;\r\n\r\n &:hover {\r\n border-right-color: rgba($colorPrimary, 0.5);\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n border-right-color: $colorPrimary;\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-right {\r\n &:before {\r\n position: absolute;\r\n content: '';\r\n left: 0;\r\n width: 2px;\r\n top: 0;\r\n bottom: 0;\r\n background-color: $ibl;\r\n }\r\n\r\n .pl-tabs-header-item {\r\n text-align: left;\r\n border-left: solid 2px transparent;\r\n\r\n &:hover {\r\n border-left-color: rgba($colorPrimary, 0.5);\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n border-left-color: $colorPrimary;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-fit-height {\r\n height: 100%;\r\n flex: 1;\r\n align-items: stretch;\r\n\r\n & > .pl-tabs-header {\r\n overflow: auto;\r\n }\r\n\r\n & > .pl-tabs-body {\r\n overflow: hidden;\r\n display: flex;\r\n align-items: stretch;\r\n\r\n & > .pl-inner-tab {\r\n flex: 1;\r\n overflow: auto;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-head-position-left {\r\n .pl-tabs-body {\r\n padding-left: 16px;\r\n }\r\n }\r\n\r\n &.pl-tabs-head-position-right {\r\n .pl-tabs-body {\r\n padding-right: 16px;\r\n }\r\n }\r\n }\r\n}\r\n"
378
378
  ],
@@ -423,13 +423,13 @@
423
423
  {
424
424
  "name": "createUseTableOption",
425
425
  "codes": [
426
- "@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",
427
426
  "@include theme {\r\n .pro-column-filter-container {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: stretch;\r\n width: 360px;\r\n padding: 0 12px;\r\n\r\n & > div {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 4px 0;\r\n\r\n & > .pl-filter {\r\n width: 100%;\r\n display: flex;\r\n }\r\n\r\n .pl-button-group {\r\n width: 100%;\r\n display: flex;\r\n\r\n .pl-button:not(.pl-button-icon-only) {\r\n flex: 1;\r\n }\r\n }\r\n\r\n & > .pl-button {\r\n flex: 1;\r\n\r\n &:first-child {\r\n margin-right: 2px;\r\n }\r\n\r\n &:last-child {\r\n margin-left: 2px;\r\n }\r\n }\r\n }\r\n\r\n .pro-column-filter-sort-container {\r\n background-color: $ibl;\r\n height: plv(sizeNormal);\r\n border-radius: 100px;\r\n width: 100%;\r\n display: flex;\r\n align-items: stretch;\r\n box-sizing: border-box;\r\n padding: 2px;\r\n\r\n & > div {\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n border-radius: 100px;\r\n cursor: pointer;\r\n background-color: $ibl;\r\n transition: background-color 300ms linear;\r\n\r\n &:hover {\r\n background-color: #fcfcfc;\r\n }\r\n\r\n &.pro-column-filter-sort-item-active {\r\n background-color: white;\r\n box-shadow: 0 2px 8px #ddd;\r\n color: $colorPrimary;\r\n }\r\n\r\n }\r\n }\r\n }\r\n}\r\n",
427
+ "@include theme {\r\n .pl-table-pro-distinct-filter-item {\r\n display: flex;\r\n align-items: stretch;\r\n line-height: 28px;\r\n\r\n padding: 8px 0;\r\n\r\n background-color: white;\r\n transition: background-color 300ms linear;\r\n\r\n &:not(:last-child) {\r\n border-bottom: solid 1px $ibl;\r\n }\r\n\r\n &:hover {\r\n background-color: #f6f6f6;\r\n }\r\n\r\n .pl-table-pro-distinct-filter-item-title {\r\n color: $colorPrimary;\r\n margin: 0 8px;\r\n }\r\n\r\n .pl-table-pro-distinct-filter-item-tags {\r\n\r\n cursor: pointer;\r\n\r\n & > div {\r\n display: inline-block;\r\n font-size: 12px;\r\n background-color: $colorPrimaryLight;\r\n padding: 0 12px;\r\n margin: 1px 2px;\r\n border-radius: 4px;\r\n }\r\n }\r\n\r\n .pl-table-pro-distinct-filter-item-button {\r\n\r\n }\r\n }\r\n}\r\n",
428
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",
429
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
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
- ".pl-table-pro-setting-senior-filter {\r\n .pl-table-pro-setting-senior-filter-button {\r\n display: flex;\r\n justify-content: space-between;\r\n\r\n .pl-button + * {\r\n margin-left: 8px;\r\n }\r\n }\r\n\r\n .pl-table-pro-setting-senior-filter-item {\r\n margin-bottom: 16px;\r\n\r\n .pl-table-pro-setting-senior-filter-item-id {\r\n width: 80px;\r\n display: inline-block;\r\n text-align: center;\r\n }\r\n\r\n .pl-table-pro-setting-senior-filter-item-content {\r\n width: calc(100% - 80px);\r\n display: inline-block;\r\n }\r\n }\r\n}\r\n",
432
- "@include theme {\r\n .pl-table-pro-setting {\r\n height: 100%;\r\n display: flex;\r\n align-items: stretch;\r\n\r\n $nav-bg: #fcfcfc;\r\n\r\n .pl-table-pro-setting-nav {\r\n background-color: $nav-bg;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n .pl-table-pro-setting-nav-item:last-child {\r\n flex: 1;\r\n }\r\n\r\n .pl-table-pro-setting-nav-item {\r\n padding: 12px 24px;\r\n cursor: pointer;\r\n background-color: white;\r\n position: relative;\r\n\r\n .pl-table-pro-setting-nav-item-inner {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n &:hover, &.pl-table-pro-setting-nav-item-active {\r\n color: $colorPrimary;\r\n }\r\n\r\n &.pl-table-pro-setting-nav-item-active {\r\n &:after {\r\n position: absolute;\r\n content: '';\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n width: 2px;\r\n background-color: $colorPrimary;\r\n }\r\n }\r\n\r\n &.pl-table-pro-setting-nav-item-prev {\r\n &:before {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n border-bottom-right-radius: 4px;\r\n background-color: $nav-bg;\r\n content: '';\r\n border-bottom: solid 1px $ibl;\r\n border-right: solid 1px $ibl;\r\n }\r\n }\r\n\r\n &.pl-table-pro-setting-nav-item-next {\r\n &:before {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n border-top-right-radius: 4px;\r\n background-color: $nav-bg;\r\n content: '';\r\n border-top: solid 1px $ibl;\r\n border-right: solid 1px $ibl;\r\n }\r\n }\r\n\r\n &:not(.pl-table-pro-setting-nav-item-prev):not(.pl-table-pro-setting-nav-item-next):not(.pl-table-pro-setting-nav-item-active) {\r\n background-color: $nav-bg;\r\n border-right: solid 1px $ibl;\r\n }\r\n }\r\n }\r\n\r\n .pl-table-pro-setting-content {\r\n flex: 1;\r\n overflow-y: scroll;\r\n overflow-x: hidden;\r\n width: 650px;\r\n box-sizing: border-box;\r\n\r\n &.pl-table-pro-setting-content-pending {\r\n padding: 16px;\r\n }\r\n\r\n &::-webkit-scrollbar {\r\n background: white;\r\n width: 6px;\r\n height: 6px;\r\n }\r\n\r\n &::-webkit-scrollbar-thumb {\r\n background: rgba(black, 0.25);\r\n border-radius: 6px;\r\n }\r\n\r\n .pl-table-pro-setting-content-header {\r\n text-align: right;\r\n\r\n & > .pl-button + .pl-button {\r\n margin-left: 8px;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n"
431
+ "@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",
432
+ ".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"
433
433
  ],
434
434
  "seq": 92
435
435
  },