plain-design 0.0.89 → 0.0.90
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 +3 -3
- package/dist/plain-design.min.js +2 -2
- package/dist/report.html +2 -2
- package/package.json +3 -3
- package/src/packages/PlCascadePanel/cascade-panel.scss +90 -89
- package/src/packages/PlInput/input.scss +1 -0
- package/src/packages/PlSlider/slider.scss +2 -1
- package/src/styles/data/scan.scss.json +11 -11
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "plain-design",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.90",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/plain-design.min.js",
|
|
6
6
|
"module": "dist/plain-design.commonjs.min.js",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"author": "",
|
|
22
22
|
"license": "ISC",
|
|
23
23
|
"peerDependencies": {
|
|
24
|
-
"plain-design-composition": "0.0.
|
|
24
|
+
"plain-design-composition": "0.0.109",
|
|
25
25
|
"react": "^17.0.1",
|
|
26
26
|
"react-dom": "^17.0.1"
|
|
27
27
|
},
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"fork-ts-checker-webpack-plugin": "^6.2.4",
|
|
66
66
|
"mini-css-extract-plugin": "^1.6.2",
|
|
67
67
|
"mockjs": "^1.1.0",
|
|
68
|
-
"plain-design-composition": "0.0.
|
|
68
|
+
"plain-design-composition": "0.0.109",
|
|
69
69
|
"postcss": "^8.2.13",
|
|
70
70
|
"postcss-loader": "^4.2.0",
|
|
71
71
|
"qs": "^6.10.1",
|
|
@@ -1,106 +1,107 @@
|
|
|
1
1
|
@include theme {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
& > .pl-list {
|
|
10
|
-
height: 100%;
|
|
11
|
-
overflow: hidden;
|
|
12
|
-
white-space: nowrap;
|
|
13
|
-
}
|
|
2
|
+
.pl-cascade-panel {
|
|
3
|
+
display: inline-block;
|
|
4
|
+
height: 200px;
|
|
5
|
+
border: solid 1px $ibc;
|
|
6
|
+
border-radius: $popperRadius;
|
|
7
|
+
color: $itc;
|
|
14
8
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
display: inline-block;
|
|
21
|
-
vertical-align: top;
|
|
22
|
-
overflow: hidden;
|
|
23
|
-
box-sizing: border-box;
|
|
24
|
-
|
|
25
|
-
&:not(:last-child) {
|
|
26
|
-
border-right: solid 1px $ibc;
|
|
27
|
-
}
|
|
9
|
+
& > .pl-list {
|
|
10
|
+
height: 100%;
|
|
11
|
+
overflow: hidden;
|
|
12
|
+
white-space: nowrap;
|
|
13
|
+
}
|
|
28
14
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
15
|
+
.pl-cascade-list {
|
|
16
|
+
width: 180px;
|
|
17
|
+
height: 100%;
|
|
18
|
+
padding: 6px 0;
|
|
19
|
+
font-size: 14px;
|
|
20
|
+
display: inline-block;
|
|
21
|
+
vertical-align: top;
|
|
22
|
+
overflow: hidden;
|
|
23
|
+
box-sizing: border-box;
|
|
32
24
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
font-size: 13px;
|
|
37
|
-
color: $itc;
|
|
38
|
-
background-color: white;
|
|
39
|
-
transition: all 300ms $transition;
|
|
40
|
-
cursor: pointer;
|
|
25
|
+
&:not(:last-child) {
|
|
26
|
+
border-right: solid 1px $ibc;
|
|
27
|
+
}
|
|
41
28
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
29
|
+
.pl-list {
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
}
|
|
45
32
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
color: $icc;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
33
|
+
.pl-cascade-item {
|
|
34
|
+
padding: 5px 0 5px 12px;
|
|
35
|
+
line-height: 22px;
|
|
36
|
+
font-weight: 400;
|
|
37
|
+
font-size: 13px;
|
|
38
|
+
color: $itc;
|
|
39
|
+
background-color: white;
|
|
40
|
+
transition: all 300ms $transition;
|
|
41
|
+
cursor: pointer;
|
|
58
42
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
}
|
|
43
|
+
.pl-cascade-content {
|
|
44
|
+
padding-right: 30px;
|
|
45
|
+
position: relative;
|
|
63
46
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
47
|
+
.pl-cascade-arrow {
|
|
48
|
+
position: absolute;
|
|
49
|
+
top: 0;
|
|
50
|
+
bottom: 0;
|
|
51
|
+
right: 0;
|
|
52
|
+
width: 30px;
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
justify-content: center;
|
|
56
|
+
color: $icc;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
68
59
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
justify-content: center;
|
|
60
|
+
&.pl-cascade-item-expand, &:hover {
|
|
61
|
+
color: $ihc;
|
|
62
|
+
background-color: $disabled;
|
|
63
|
+
}
|
|
74
64
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
cursor: auto;
|
|
65
|
+
&.pl-cascade-item-active {
|
|
66
|
+
color: $colorPrimary;
|
|
67
|
+
background-color: rgba($colorPrimary, 0.1);
|
|
68
|
+
}
|
|
80
69
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
70
|
+
&.pl-cascade-empty {
|
|
71
|
+
display: flex;
|
|
72
|
+
flex-direction: column;
|
|
73
|
+
align-items: center;
|
|
74
|
+
justify-content: center;
|
|
86
75
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}
|
|
76
|
+
padding-left: 0;
|
|
77
|
+
font-size: 12px;
|
|
78
|
+
color: $disabledText;
|
|
79
|
+
background-color: transparent;
|
|
80
|
+
cursor: auto;
|
|
93
81
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
82
|
+
.pl-icon {
|
|
83
|
+
margin-bottom: 8px;
|
|
84
|
+
font-size: 20px;
|
|
85
|
+
}
|
|
97
86
|
}
|
|
98
87
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
right: 1px;
|
|
88
|
+
&.pl-cascade-item-disabled {
|
|
89
|
+
background-color: transparent;
|
|
90
|
+
color: $disabledText;
|
|
91
|
+
cursor: not-allowed;
|
|
104
92
|
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&.pl-cascade-filter-list {
|
|
96
|
+
width: 360px;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.pl-loading-mask {
|
|
101
|
+
top: 1px;
|
|
102
|
+
bottom: 1px;
|
|
103
|
+
left: 1px;
|
|
104
|
+
right: 1px;
|
|
105
105
|
}
|
|
106
|
-
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
@@ -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
|
},
|
|
@@ -149,7 +149,7 @@
|
|
|
149
149
|
{
|
|
150
150
|
"name": "PlInput",
|
|
151
151
|
"codes": [
|
|
152
|
-
"@include theme {\r\n .pl-input, .pl-textarea {\r\n display: inline-block;\r\n color: $itc;\r\n font-family: $font;\r\n background-color: white;\r\n vertical-align: baseline;\r\n\r\n /*---------------------------------------public-------------------------------------------*/\r\n .pl-input-inner, .pl-textarea-inner {\r\n width: 180px;\r\n padding: 0;\r\n display: inline-block;\r\n outline: none;\r\n border: solid 1px $ibc;\r\n box-sizing: border-box;\r\n box-shadow: 0 0 0 0 transparent;\r\n transition: all 150ms linear;\r\n color: inherit;\r\n font-family: inherit;\r\n\r\n input, textarea, button {\r\n color: inherit;\r\n font-family: inherit;\r\n }\r\n\r\n input {\r\n padding: 0;\r\n }\r\n }\r\n\r\n .pl-input-custom-placeholder {\r\n color: $ipc;\r\n }\r\n\r\n input, textarea {\r\n &::placeholder {\r\n color: $ipc;\r\n }\r\n\r\n &::-ms-clear {\r\n display: none;\r\n }\r\n\r\n &::-webkit-outer-spin-button,\r\n &::-webkit-inner-spin-button {\r\n -webkit-appearance: none !important;\r\n margin: 0;\r\n }\r\n\r\n &:-webkit-autofill {\r\n background-color: white !important;\r\n -webkit-transition: background-color 10000s cubic-bezier(1, -100, 1, -100) 0s !important;\r\n }\r\n }\r\n\r\n &:not(.pl-input-disabled) {\r\n\r\n &.pl-input-focus {\r\n .pl-input-inner, .pl-textarea-inner {\r\n border-color: $colorPrimary;\r\n box-shadow: 0 0 0 2px rgba(18, 180, 165, 0.2);\r\n }\r\n }\r\n\r\n .pl-input-inner, .pl-textarea-inner {\r\n &:focus {\r\n border-color: $colorPrimary;\r\n box-shadow: 0 0 0 2px rgba(18, 180, 165, 0.2);\r\n }\r\n }\r\n\r\n .pl-input-inner, .pl-textarea-inner {\r\n &:hover {\r\n border-color: $colorPrimary;\r\n }\r\n }\r\n }\r\n\r\n @include shapeMixin(input) {\r\n .pl-input-inner, .pl-textarea-inner {\r\n border-radius: $value;\r\n }\r\n }\r\n\r\n @include sizeMixin(input) {\r\n &.pl-input-size-large {\r\n\r\n .pl-input-inner, .pl-textarea-inner, input {\r\n font-size: 16px;\r\n }\r\n\r\n .pl-input-inner, .pl-textarea-inner {\r\n padding-left: 12px;\r\n padding-right: 12px;\r\n }\r\n\r\n &.pl-input-shape-round {\r\n .pl-input-inner, .pl-textarea-inner {\r\n padding-left: 24px;\r\n padding-right: 24px;\r\n }\r\n }\r\n }\r\n &.pl-input-size-normal {\r\n\r\n .pl-input-inner, .pl-textarea-inner, input {\r\n font-size: 14px;\r\n }\r\n\r\n .pl-input-inner, .pl-textarea-inner {\r\n padding-left: 10px;\r\n padding-right: 10px;\r\n }\r\n\r\n &.pl-input-shape-round {\r\n .pl-input-inner, .pl-textarea-inner {\r\n padding-left: 20px;\r\n padding-right: 20px;\r\n }\r\n }\r\n }\r\n &.pl-input-size-mini {\r\n\r\n .pl-input-inner, .pl-textarea-inner, input {\r\n font-size: 12px;\r\n }\r\n\r\n .pl-input-inner, .pl-textarea-inner {\r\n padding-left: 8px;\r\n padding-right: 8px;\r\n }\r\n\r\n &.pl-input-shape-round {\r\n .pl-input-inner, .pl-textarea-inner {\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n }\r\n }\r\n }\r\n }\r\n\r\n @include statusMixin(input) {\r\n &:not(.pl-input-disabled) {\r\n\r\n &.pl-input-focus {\r\n .pl-input-inner, .pl-textarea-inner {\r\n box-shadow: 0 0 0 2px mix($value, white, 20%);\r\n }\r\n }\r\n\r\n .pl-input-inner, .pl-textarea-inner {\r\n border-color: $value;\r\n color: $value;\r\n background-color: mix($value, white, 5%);\r\n\r\n &:focus {\r\n box-shadow: 0 0 0 2px mix($value, white, 20%);\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.pl-input-disabled {\r\n .pl-input-inner, .pl-textarea-inner {\r\n background-color: $disabled;\r\n cursor: not-allowed;\r\n color: $disabledText;\r\n }\r\n }\r\n\r\n &.pl-input-block {\r\n width: 100%;\r\n display: block;\r\n\r\n .pl-input-inner, .pl-textarea-inner {\r\n width: 100%;\r\n }\r\n\r\n }\r\n\r\n &.pl-input-fill-group {\r\n flex: 1;\r\n\r\n & > .pl-input-inner {\r\n width: 100% !important;\r\n }\r\n\r\n &.pl-input-custom {\r\n .pl-input-inner, .pl-input-custom-inner, input {\r\n width: 100% !important;\r\n }\r\n }\r\n }\r\n\r\n\r\n /*align*/\r\n &.pl-input-align-left {\r\n .pl-input-inner, input {\r\n text-align: left\r\n }\r\n }\r\n\r\n &.pl-input-align-center {\r\n .pl-input-inner, input {\r\n text-align: center;\r\n }\r\n }\r\n\r\n &.pl-input-align-right {\r\n .pl-input-inner, input {\r\n text-align: right;\r\n }\r\n }\r\n\r\n /*---------------------------------------specific size-------------------------------------------*/\r\n\r\n &.pl-input {\r\n @include sizeMixin(input) {\r\n .pl-input-inner {\r\n height: $value;\r\n }\r\n div.pl-input-inner {\r\n line-height: $value - 2;\r\n }\r\n }\r\n }\r\n\r\n &.pl-textarea {\r\n position: relative;\r\n display: inline-block;\r\n\r\n .pl-textarea-inner {\r\n float: left;\r\n }\r\n\r\n @include sizeMixin(input) {\r\n &.pl-input-size-large {\r\n .pl-textarea-inner {\r\n padding-top: 12px;\r\n padding-bottom: 12px;\r\n }\r\n }\r\n &.pl-input-size-normal {\r\n .pl-textarea-inner {\r\n padding-top: 8px;\r\n padding-bottom: 8px;\r\n }\r\n }\r\n &.pl-input-size-mini {\r\n .pl-textarea-inner {\r\n padding-top: 4px;\r\n padding-bottom: 4px;\r\n }\r\n }\r\n }\r\n\r\n .pl-textarea-hidden {\r\n position: absolute;\r\n pointer-events: none;\r\n opacity: 0;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n }\r\n }\r\n }\r\n\r\n /*---------------------------------------input suffix prefix-------------------------------------------*/\r\n .pl-input {\r\n position: relative;\r\n\r\n .pl-input-suffix-icon, .pl-input-prefix-icon {\r\n user-select: none;\r\n cursor: pointer;\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n box-sizing: border-box;\r\n text-align: center;\r\n color: $icc;\r\n font-size: 12px;\r\n transition: all 300ms linear;\r\n z-index: 2;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .pl-input-suffix-icon {\r\n right: 2px;\r\n }\r\n\r\n .pl-input-prefix-icon {\r\n left: 2px;\r\n }\r\n\r\n @include sizeMixin(input) {\r\n\r\n &.pl-input-suffix-padding {\r\n &.pl-input-size-large {\r\n .pl-input-inner {\r\n padding-right: #{12px*3};\r\n }\r\n\r\n .pl-input-suffix-icon {\r\n width: #{12px*3};\r\n }\r\n }\r\n\r\n &.pl-input-size-normal {\r\n .pl-input-inner {\r\n padding-right: #{10px*3};\r\n }\r\n\r\n .pl-input-suffix-icon {\r\n width: #{10px*3};\r\n }\r\n }\r\n\r\n &.pl-input-size-mini {\r\n .pl-input-inner {\r\n padding-right: #{8px*3};\r\n }\r\n\r\n .pl-input-suffix-icon {\r\n width: #{8px*3};\r\n }\r\n }\r\n }\r\n &.pl-input-prefix-padding {\r\n &.pl-input-size-large {\r\n .pl-input-inner {\r\n padding-left: #{12px*3};\r\n }\r\n\r\n .pl-input-prefix-icon {\r\n width: #{12px*3};\r\n }\r\n }\r\n\r\n &.pl-input-size-normal {\r\n .pl-input-inner {\r\n padding-left: #{10px*3};\r\n }\r\n\r\n .pl-input-prefix-icon {\r\n width: #{10px*3};\r\n }\r\n }\r\n\r\n &.pl-input-size-mini {\r\n .pl-input-inner {\r\n padding-left: #{8px*3};\r\n }\r\n\r\n .pl-input-prefix-icon {\r\n width: #{8px*3};\r\n }\r\n }\r\n }\r\n }\r\n\r\n\r\n &.pl-input-clear {\r\n &:not(.pl-input-suffix) {\r\n &.pl-input-empty {\r\n .pl-input-clear-icon {\r\n opacity: 0;\r\n pointer-events: none;\r\n }\r\n }\r\n }\r\n\r\n &.pl-input-suffix {\r\n .pl-input-clear-icon {\r\n opacity: 0;\r\n pointer-events: none;\r\n }\r\n\r\n &:not(.pl-input-empty) {\r\n &:hover:not(.pl-input-not-editable) {\r\n .pl-input-clear-icon {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n\r\n .pl-input-suffix-icon:not(.pl-input-clear-icon) {\r\n opacity: 0;\r\n pointer-events: none;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n .pl-loading {\r\n cursor: not-allowed;\r\n\r\n &:before {\r\n position: absolute;\r\n top: 2px;\r\n bottom: 2px;\r\n left: 2px;\r\n right: 2px;\r\n background-color: white;\r\n content: '';\r\n }\r\n }\r\n\r\n .pl-input-inner-hidden {\r\n position: fixed;\r\n float: left;\r\n z-index: -999;\r\n pointer-events: none;\r\n opacity: 0;\r\n display: none;\r\n }\r\n }\r\n\r\n .pl-input-container {\r\n width: 100%;\r\n display: table;\r\n\r\n .pl-input-prepend, .pl-input-append {\r\n background-color: #f5f7fa;\r\n color: $itc;\r\n vertical-align: baseline;\r\n display: table-cell;\r\n position: relative;\r\n border: 1px solid #dcdfe6;\r\n border-radius: 2px;\r\n padding: 0 12px;\r\n overflow: hidden;\r\n\r\n width: 1px;\r\n white-space: nowrap;\r\n\r\n &.pl-input-prepend {\r\n border-right: none;\r\n }\r\n\r\n &.pl-input-append {\r\n border-left: none;\r\n }\r\n\r\n & > .pl-input, & > .pl-button {\r\n display: inline-block;\r\n margin: -1px -13px -1px -12px;\r\n }\r\n\r\n & > .pl-input {\r\n .pl-input-inner {\r\n border: none !important;\r\n }\r\n }\r\n }\r\n\r\n .pl-input {\r\n display: table-cell;\r\n position: relative;\r\n z-index: 1;\r\n\r\n .pl-input-inner {\r\n width: 100%;\r\n }\r\n }\r\n\r\n & > *:not(:last-child):not(:first-child) {\r\n border-radius: 0;\r\n\r\n &.pl-input {\r\n .pl-input-inner {\r\n border-radius: 0;\r\n }\r\n }\r\n }\r\n\r\n & > *:first-child {\r\n border-top-right-radius: 0;\r\n border-bottom-right-radius: 0;\r\n\r\n &.pl-input {\r\n .pl-input-inner {\r\n border-top-right-radius: 0;\r\n border-bottom-right-radius: 0;\r\n }\r\n }\r\n }\r\n\r\n & > *:last-child {\r\n border-top-left-radius: 0;\r\n border-bottom-left-radius: 0;\r\n\r\n &.pl-input {\r\n .pl-input-inner {\r\n border-top-left-radius: 0;\r\n border-bottom-left-radius: 0;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .pl-input-custom {\r\n .pl-input-inner {\r\n width: auto !important;\r\n }\r\n\r\n .pl-input-custom-inner {\r\n display: flex;\r\n align-content: stretch;\r\n height: 100%;\r\n\r\n & > span {\r\n color: $icc;\r\n }\r\n\r\n .pl-input-custom-inner-input {\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 &[range=true] {\r\n .pl-input-custom-inner-input {\r\n text-align: center;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .pl-form-item-content {\r\n .pl-input-custom {\r\n .pl-input-custom-inner {\r\n display: flex;\r\n align-items: center;\r\n\r\n .pl-input-custom-inner-input {\r\n flex: 1;\r\n font-size: inherit;\r\n color: inherit;\r\n }\r\n }\r\n\r\n &.pl-input-disabled {\r\n .pl-input-custom-inner-input {\r\n cursor: not-allowed;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .pl-input {\r\n &.pl-input-tags {\r\n user-select: none;\r\n vertical-align: top;\r\n\r\n .pl-input-inner {\r\n padding-left: 3px !important;\r\n height: auto !important;\r\n line-height: normal !important;\r\n cursor: pointer;\r\n }\r\n\r\n .pl-input-inner-tags {\r\n .pl-input-inner-tag-item {\r\n display: inline-block;\r\n font-size: 12px;\r\n border: solid 1px $ibl;\r\n background-color: #fafafa;\r\n padding: 0 6px;\r\n border-radius: 2px;\r\n margin: 3px;\r\n color: inherit;\r\n\r\n span + .pl-icon {\r\n margin-left: 3px;\r\n color: $icc;\r\n }\r\n\r\n &.pl-input-inner-tag-item-takeover {\r\n display: inline-block;\r\n padding: 0 0;\r\n margin-left: 0;\r\n margin-right: 0;\r\n width: 4px;\r\n opacity: 0;\r\n }\r\n }\r\n }\r\n\r\n @include sizeMixin(input) {\r\n .pl-input-inner {\r\n min-height: $value;\r\n\r\n .pl-input-inner-tags {\r\n .pl-input-inner-tag-item {\r\n line-height: $value - 9;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.pl-input-disabled {\r\n .pl-input-inner-tag-item {\r\n cursor: not-allowed;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n"
|
|
152
|
+
"@include theme {\r\n .pl-input, .pl-textarea {\r\n display: inline-block;\r\n color: $itc;\r\n font-family: $font;\r\n background-color: white;\r\n vertical-align: baseline;\r\n\r\n /*---------------------------------------public-------------------------------------------*/\r\n .pl-input-inner, .pl-textarea-inner {\r\n width: 180px;\r\n padding: 0;\r\n display: inline-block;\r\n outline: none;\r\n border: solid 1px $ibc;\r\n box-sizing: border-box;\r\n box-shadow: 0 0 0 0 transparent;\r\n transition: all 150ms linear;\r\n color: inherit;\r\n font-family: inherit;\r\n\r\n input, textarea, button {\r\n color: inherit;\r\n font-family: inherit;\r\n }\r\n\r\n input {\r\n padding: 0;\r\n }\r\n }\r\n\r\n .pl-input-custom-placeholder {\r\n color: $ipc;\r\n margin-left: 6px;\r\n }\r\n\r\n input, textarea {\r\n &::placeholder {\r\n color: $ipc;\r\n }\r\n\r\n &::-ms-clear {\r\n display: none;\r\n }\r\n\r\n &::-webkit-outer-spin-button,\r\n &::-webkit-inner-spin-button {\r\n -webkit-appearance: none !important;\r\n margin: 0;\r\n }\r\n\r\n &:-webkit-autofill {\r\n background-color: white !important;\r\n -webkit-transition: background-color 10000s cubic-bezier(1, -100, 1, -100) 0s !important;\r\n }\r\n }\r\n\r\n &:not(.pl-input-disabled) {\r\n\r\n &.pl-input-focus {\r\n .pl-input-inner, .pl-textarea-inner {\r\n border-color: $colorPrimary;\r\n box-shadow: 0 0 0 2px rgba(18, 180, 165, 0.2);\r\n }\r\n }\r\n\r\n .pl-input-inner, .pl-textarea-inner {\r\n &:focus {\r\n border-color: $colorPrimary;\r\n box-shadow: 0 0 0 2px rgba(18, 180, 165, 0.2);\r\n }\r\n }\r\n\r\n .pl-input-inner, .pl-textarea-inner {\r\n &:hover {\r\n border-color: $colorPrimary;\r\n }\r\n }\r\n }\r\n\r\n @include shapeMixin(input) {\r\n .pl-input-inner, .pl-textarea-inner {\r\n border-radius: $value;\r\n }\r\n }\r\n\r\n @include sizeMixin(input) {\r\n &.pl-input-size-large {\r\n\r\n .pl-input-inner, .pl-textarea-inner, input {\r\n font-size: 16px;\r\n }\r\n\r\n .pl-input-inner, .pl-textarea-inner {\r\n padding-left: 12px;\r\n padding-right: 12px;\r\n }\r\n\r\n &.pl-input-shape-round {\r\n .pl-input-inner, .pl-textarea-inner {\r\n padding-left: 24px;\r\n padding-right: 24px;\r\n }\r\n }\r\n }\r\n &.pl-input-size-normal {\r\n\r\n .pl-input-inner, .pl-textarea-inner, input {\r\n font-size: 14px;\r\n }\r\n\r\n .pl-input-inner, .pl-textarea-inner {\r\n padding-left: 10px;\r\n padding-right: 10px;\r\n }\r\n\r\n &.pl-input-shape-round {\r\n .pl-input-inner, .pl-textarea-inner {\r\n padding-left: 20px;\r\n padding-right: 20px;\r\n }\r\n }\r\n }\r\n &.pl-input-size-mini {\r\n\r\n .pl-input-inner, .pl-textarea-inner, input {\r\n font-size: 12px;\r\n }\r\n\r\n .pl-input-inner, .pl-textarea-inner {\r\n padding-left: 8px;\r\n padding-right: 8px;\r\n }\r\n\r\n &.pl-input-shape-round {\r\n .pl-input-inner, .pl-textarea-inner {\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n }\r\n }\r\n }\r\n }\r\n\r\n @include statusMixin(input) {\r\n &:not(.pl-input-disabled) {\r\n\r\n &.pl-input-focus {\r\n .pl-input-inner, .pl-textarea-inner {\r\n box-shadow: 0 0 0 2px mix($value, white, 20%);\r\n }\r\n }\r\n\r\n .pl-input-inner, .pl-textarea-inner {\r\n border-color: $value;\r\n color: $value;\r\n background-color: mix($value, white, 5%);\r\n\r\n &:focus {\r\n box-shadow: 0 0 0 2px mix($value, white, 20%);\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.pl-input-disabled {\r\n .pl-input-inner, .pl-textarea-inner {\r\n background-color: $disabled;\r\n cursor: not-allowed;\r\n color: $disabledText;\r\n }\r\n }\r\n\r\n &.pl-input-block {\r\n width: 100%;\r\n display: block;\r\n\r\n .pl-input-inner, .pl-textarea-inner {\r\n width: 100%;\r\n }\r\n\r\n }\r\n\r\n &.pl-input-fill-group {\r\n flex: 1;\r\n\r\n & > .pl-input-inner {\r\n width: 100% !important;\r\n }\r\n\r\n &.pl-input-custom {\r\n .pl-input-inner, .pl-input-custom-inner, input {\r\n width: 100% !important;\r\n }\r\n }\r\n }\r\n\r\n\r\n /*align*/\r\n &.pl-input-align-left {\r\n .pl-input-inner, input {\r\n text-align: left\r\n }\r\n }\r\n\r\n &.pl-input-align-center {\r\n .pl-input-inner, input {\r\n text-align: center;\r\n }\r\n }\r\n\r\n &.pl-input-align-right {\r\n .pl-input-inner, input {\r\n text-align: right;\r\n }\r\n }\r\n\r\n /*---------------------------------------specific size-------------------------------------------*/\r\n\r\n &.pl-input {\r\n @include sizeMixin(input) {\r\n .pl-input-inner {\r\n height: $value;\r\n }\r\n div.pl-input-inner {\r\n line-height: $value - 2;\r\n }\r\n }\r\n }\r\n\r\n &.pl-textarea {\r\n position: relative;\r\n display: inline-block;\r\n\r\n .pl-textarea-inner {\r\n float: left;\r\n }\r\n\r\n @include sizeMixin(input) {\r\n &.pl-input-size-large {\r\n .pl-textarea-inner {\r\n padding-top: 12px;\r\n padding-bottom: 12px;\r\n }\r\n }\r\n &.pl-input-size-normal {\r\n .pl-textarea-inner {\r\n padding-top: 8px;\r\n padding-bottom: 8px;\r\n }\r\n }\r\n &.pl-input-size-mini {\r\n .pl-textarea-inner {\r\n padding-top: 4px;\r\n padding-bottom: 4px;\r\n }\r\n }\r\n }\r\n\r\n .pl-textarea-hidden {\r\n position: absolute;\r\n pointer-events: none;\r\n opacity: 0;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n }\r\n }\r\n }\r\n\r\n /*---------------------------------------input suffix prefix-------------------------------------------*/\r\n .pl-input {\r\n position: relative;\r\n\r\n .pl-input-suffix-icon, .pl-input-prefix-icon {\r\n user-select: none;\r\n cursor: pointer;\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n box-sizing: border-box;\r\n text-align: center;\r\n color: $icc;\r\n font-size: 12px;\r\n transition: all 300ms linear;\r\n z-index: 2;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .pl-input-suffix-icon {\r\n right: 2px;\r\n }\r\n\r\n .pl-input-prefix-icon {\r\n left: 2px;\r\n }\r\n\r\n @include sizeMixin(input) {\r\n\r\n &.pl-input-suffix-padding {\r\n &.pl-input-size-large {\r\n .pl-input-inner {\r\n padding-right: #{12px*3};\r\n }\r\n\r\n .pl-input-suffix-icon {\r\n width: #{12px*3};\r\n }\r\n }\r\n\r\n &.pl-input-size-normal {\r\n .pl-input-inner {\r\n padding-right: #{10px*3};\r\n }\r\n\r\n .pl-input-suffix-icon {\r\n width: #{10px*3};\r\n }\r\n }\r\n\r\n &.pl-input-size-mini {\r\n .pl-input-inner {\r\n padding-right: #{8px*3};\r\n }\r\n\r\n .pl-input-suffix-icon {\r\n width: #{8px*3};\r\n }\r\n }\r\n }\r\n &.pl-input-prefix-padding {\r\n &.pl-input-size-large {\r\n .pl-input-inner {\r\n padding-left: #{12px*3};\r\n }\r\n\r\n .pl-input-prefix-icon {\r\n width: #{12px*3};\r\n }\r\n }\r\n\r\n &.pl-input-size-normal {\r\n .pl-input-inner {\r\n padding-left: #{10px*3};\r\n }\r\n\r\n .pl-input-prefix-icon {\r\n width: #{10px*3};\r\n }\r\n }\r\n\r\n &.pl-input-size-mini {\r\n .pl-input-inner {\r\n padding-left: #{8px*3};\r\n }\r\n\r\n .pl-input-prefix-icon {\r\n width: #{8px*3};\r\n }\r\n }\r\n }\r\n }\r\n\r\n\r\n &.pl-input-clear {\r\n &:not(.pl-input-suffix) {\r\n &.pl-input-empty {\r\n .pl-input-clear-icon {\r\n opacity: 0;\r\n pointer-events: none;\r\n }\r\n }\r\n }\r\n\r\n &.pl-input-suffix {\r\n .pl-input-clear-icon {\r\n opacity: 0;\r\n pointer-events: none;\r\n }\r\n\r\n &:not(.pl-input-empty) {\r\n &:hover:not(.pl-input-not-editable) {\r\n .pl-input-clear-icon {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n\r\n .pl-input-suffix-icon:not(.pl-input-clear-icon) {\r\n opacity: 0;\r\n pointer-events: none;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n .pl-loading {\r\n cursor: not-allowed;\r\n\r\n &:before {\r\n position: absolute;\r\n top: 2px;\r\n bottom: 2px;\r\n left: 2px;\r\n right: 2px;\r\n background-color: white;\r\n content: '';\r\n }\r\n }\r\n\r\n .pl-input-inner-hidden {\r\n position: fixed;\r\n float: left;\r\n z-index: -999;\r\n pointer-events: none;\r\n opacity: 0;\r\n display: none;\r\n }\r\n }\r\n\r\n .pl-input-container {\r\n width: 100%;\r\n display: table;\r\n\r\n .pl-input-prepend, .pl-input-append {\r\n background-color: #f5f7fa;\r\n color: $itc;\r\n vertical-align: baseline;\r\n display: table-cell;\r\n position: relative;\r\n border: 1px solid #dcdfe6;\r\n border-radius: 2px;\r\n padding: 0 12px;\r\n overflow: hidden;\r\n\r\n width: 1px;\r\n white-space: nowrap;\r\n\r\n &.pl-input-prepend {\r\n border-right: none;\r\n }\r\n\r\n &.pl-input-append {\r\n border-left: none;\r\n }\r\n\r\n & > .pl-input, & > .pl-button {\r\n display: inline-block;\r\n margin: -1px -13px -1px -12px;\r\n }\r\n\r\n & > .pl-input {\r\n .pl-input-inner {\r\n border: none !important;\r\n }\r\n }\r\n }\r\n\r\n .pl-input {\r\n display: table-cell;\r\n position: relative;\r\n z-index: 1;\r\n\r\n .pl-input-inner {\r\n width: 100%;\r\n }\r\n }\r\n\r\n & > *:not(:last-child):not(:first-child) {\r\n border-radius: 0;\r\n\r\n &.pl-input {\r\n .pl-input-inner {\r\n border-radius: 0;\r\n }\r\n }\r\n }\r\n\r\n & > *:first-child {\r\n border-top-right-radius: 0;\r\n border-bottom-right-radius: 0;\r\n\r\n &.pl-input {\r\n .pl-input-inner {\r\n border-top-right-radius: 0;\r\n border-bottom-right-radius: 0;\r\n }\r\n }\r\n }\r\n\r\n & > *:last-child {\r\n border-top-left-radius: 0;\r\n border-bottom-left-radius: 0;\r\n\r\n &.pl-input {\r\n .pl-input-inner {\r\n border-top-left-radius: 0;\r\n border-bottom-left-radius: 0;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .pl-input-custom {\r\n .pl-input-inner {\r\n width: auto !important;\r\n }\r\n\r\n .pl-input-custom-inner {\r\n display: flex;\r\n align-content: stretch;\r\n height: 100%;\r\n\r\n & > span {\r\n color: $icc;\r\n }\r\n\r\n .pl-input-custom-inner-input {\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 &[range=true] {\r\n .pl-input-custom-inner-input {\r\n text-align: center;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .pl-form-item-content {\r\n .pl-input-custom {\r\n .pl-input-custom-inner {\r\n display: flex;\r\n align-items: center;\r\n\r\n .pl-input-custom-inner-input {\r\n flex: 1;\r\n font-size: inherit;\r\n color: inherit;\r\n }\r\n }\r\n\r\n &.pl-input-disabled {\r\n .pl-input-custom-inner-input {\r\n cursor: not-allowed;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .pl-input {\r\n &.pl-input-tags {\r\n user-select: none;\r\n vertical-align: top;\r\n\r\n .pl-input-inner {\r\n padding-left: 3px !important;\r\n height: auto !important;\r\n line-height: normal !important;\r\n cursor: pointer;\r\n }\r\n\r\n .pl-input-inner-tags {\r\n .pl-input-inner-tag-item {\r\n display: inline-block;\r\n font-size: 12px;\r\n border: solid 1px $ibl;\r\n background-color: #fafafa;\r\n padding: 0 6px;\r\n border-radius: 2px;\r\n margin: 3px;\r\n color: inherit;\r\n\r\n span + .pl-icon {\r\n margin-left: 3px;\r\n color: $icc;\r\n }\r\n\r\n &.pl-input-inner-tag-item-takeover {\r\n display: inline-block;\r\n padding: 0 0;\r\n margin-left: 0;\r\n margin-right: 0;\r\n width: 4px;\r\n opacity: 0;\r\n }\r\n }\r\n }\r\n\r\n @include sizeMixin(input) {\r\n .pl-input-inner {\r\n min-height: $value;\r\n\r\n .pl-input-inner-tags {\r\n .pl-input-inner-tag-item {\r\n line-height: $value - 9;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.pl-input-disabled {\r\n .pl-input-inner-tag-item {\r\n cursor: not-allowed;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n"
|
|
153
153
|
],
|
|
154
154
|
"seq": 40
|
|
155
155
|
},
|
|
@@ -268,7 +268,7 @@
|
|
|
268
268
|
{
|
|
269
269
|
"name": "PlSlider",
|
|
270
270
|
"codes": [
|
|
271
|
-
"@include theme {\r\n .pl-slider {\r\n @include public-style;\r\n cursor: pointer;\r\n display: inline-block;\r\n position: relative;\r\n background-color: rgba(black, 0.15);\r\n border-radius: 100px;\r\n\r\n .pl-slider-progress {\r\n border-radius: 100px;\r\n position: absolute;\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: space-between;\r\n\r\n .pl-slider-dot-wrapper {\r\n width: 0;\r\n height: 0;\r\n overflow: visible;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n user-select: none;\r\n\r\n .pl-slider-dot {\r\n height: 16px;\r\n width: 16px;\r\n background-color: white;\r\n box-shadow: 0 0 6px #aaa;\r\n border-radius: 100px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n transition: all 0.15s cubic-bezier(0, 1.55, 1, 1.52);\r\n transform-origin: center center;\r\n\r\n .pl-slider-dot-inner {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 100px;\r\n position: relative;\r\n\r\n .pl-slider-dot-tooltip {\r\n transition: all 300ms $transition;\r\n opacity: 0;\r\n background-color: rgba(black, 0.8);\r\n color: white;\r\n padding: 3px 6px;\r\n position: absolute;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n bottom: calc(100% + 9px);\r\n border-radius: 4px;\r\n font-size: 12px;\r\n pointer-events: none;\r\n &:hover {\r\n opacity: 0.5;\r\n }\r\n }\r\n }\r\n\r\n &:hover {\r\n .pl-slider-dot-tooltip {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n .pl-slider-step {\r\n position: absolute;\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: space-evenly;\r\n\r\n .pl-slider-step-item-wrapper {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 0;\r\n height: 0;\r\n overflow: visible;\r\n\r\n .pl-slider-step-item {\r\n background-color: rgba(black, 0.3);\r\n border-radius: 100px;\r\n flex-shrink: 0;\r\n }\r\n }\r\n }\r\n\r\n &.pl-slider-touching {\r\n .pl-slider-dot {\r\n transform: scale(1.4);\r\n\r\n .pl-slider-dot-tooltip {\r\n opacity: 1 !important;\r\n }\r\n }\r\n }\r\n\r\n .pl-slider-dot:hover {\r\n transform: scale(1.4);\r\n transform-origin: center center;\r\n transition: all 0.15s cubic-bezier(0, 1.55, 1, 1.52);\r\n }\r\n\r\n @include statusMixin(slider) {\r\n .pl-slider-progress {\r\n &, & .pl-slider-dot-inner {\r\n background-color: $value;\r\n }\r\n }\r\n }\r\n\r\n &.pl-slider-vertical {\r\n .pl-slider-progress, .pl-slider-step {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n }\r\n\r\n &.pl-slider-horizontal {\r\n .pl-slider-progress, .pl-slider-step {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n }\r\n\r\n &.pl-slider-align-start {\r\n .pl-slider-dot-wrapper-start {\r\n opacity: 0;\r\n z-index: 0;\r\n }\r\n\r\n .pl-slider-dot-wrapper-end {\r\n z-index: 1;\r\n }\r\n }\r\n\r\n &.pl-slider-align-end {\r\n .pl-slider-dot-wrapper-end {\r\n opacity: 0;\r\n z-index: 0;\r\n }\r\n\r\n .pl-slider-dot-wrapper-start {\r\n z-index: 1;\r\n }\r\n }\r\n\r\n &.pl-slider-range {\r\n .pl-slider-dot-wrapper {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &.pl-slider-place-end {\r\n .pl-slider-dot-wrapper-start {\r\n z-index: 2;\r\n }\r\n }\r\n }\r\n}"
|
|
271
|
+
"@include theme {\r\n .pl-slider {\r\n @include public-style;\r\n cursor: pointer;\r\n display: inline-block;\r\n position: relative;\r\n background-color: rgba(black, 0.15);\r\n border-radius: 100px;\r\n\r\n .pl-slider-progress {\r\n border-radius: 100px;\r\n position: absolute;\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: space-between;\r\n\r\n .pl-slider-dot-wrapper {\r\n width: 0;\r\n height: 0;\r\n overflow: visible;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n user-select: none;\r\n\r\n .pl-slider-dot {\r\n height: 16px;\r\n width: 16px;\r\n background-color: white;\r\n box-shadow: 0 0 6px #aaa;\r\n border-radius: 100px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n transition: all 0.15s cubic-bezier(0, 1.55, 1, 1.52);\r\n transform-origin: center center;\r\n\r\n .pl-slider-dot-inner {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 100px;\r\n position: relative;\r\n\r\n .pl-slider-dot-tooltip {\r\n transition: all 300ms $transition;\r\n opacity: 0;\r\n background-color: rgba(black, 0.8);\r\n color: white;\r\n padding: 3px 6px;\r\n line-height: initial;\r\n position: absolute;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n bottom: calc(100% + 9px);\r\n border-radius: 4px;\r\n font-size: 12px;\r\n pointer-events: none;\r\n &:hover {\r\n opacity: 0.5;\r\n }\r\n }\r\n }\r\n\r\n &:hover {\r\n .pl-slider-dot-tooltip {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n .pl-slider-step {\r\n position: absolute;\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: space-evenly;\r\n\r\n .pl-slider-step-item-wrapper {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 0;\r\n height: 0;\r\n overflow: visible;\r\n\r\n .pl-slider-step-item {\r\n background-color: rgba(black, 0.3);\r\n border-radius: 100px;\r\n flex-shrink: 0;\r\n }\r\n }\r\n }\r\n\r\n &.pl-slider-touching {\r\n .pl-slider-dot {\r\n transform: scale(1.4);\r\n\r\n .pl-slider-dot-tooltip {\r\n opacity: 1 !important;\r\n }\r\n }\r\n }\r\n\r\n .pl-slider-dot:hover {\r\n transform: scale(1.4);\r\n transform-origin: center center;\r\n transition: all 0.15s cubic-bezier(0, 1.55, 1, 1.52);\r\n }\r\n\r\n @include statusMixin(slider) {\r\n .pl-slider-progress {\r\n &, & .pl-slider-dot-inner {\r\n background-color: $value;\r\n }\r\n }\r\n }\r\n\r\n &.pl-slider-vertical {\r\n .pl-slider-progress, .pl-slider-step {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n }\r\n\r\n &.pl-slider-horizontal {\r\n .pl-slider-progress, .pl-slider-step {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n }\r\n\r\n &.pl-slider-align-start {\r\n .pl-slider-dot-wrapper-start {\r\n opacity: 0;\r\n z-index: 0;\r\n }\r\n\r\n .pl-slider-dot-wrapper-end {\r\n z-index: 1;\r\n }\r\n }\r\n\r\n &.pl-slider-align-end {\r\n .pl-slider-dot-wrapper-end {\r\n opacity: 0;\r\n z-index: 0;\r\n }\r\n\r\n .pl-slider-dot-wrapper-start {\r\n z-index: 1;\r\n }\r\n }\r\n\r\n &.pl-slider-range {\r\n .pl-slider-dot-wrapper {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &.pl-slider-place-end {\r\n .pl-slider-dot-wrapper-start {\r\n z-index: 2;\r\n }\r\n }\r\n }\r\n}\r\n"
|
|
272
272
|
],
|
|
273
273
|
"seq": 60
|
|
274
274
|
},
|
|
@@ -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-
|
|
373
|
+
"@include theme {\r\n .pl-tabs {\r\n &.pl-tabs-head-position-left, &.pl-tabs-head-position-right {\r\n display: flex;\r\n\r\n .pl-tabs-body {\r\n flex: 1;\r\n box-sizing: border-box;\r\n }\r\n\r\n .pl-tabs-header {\r\n position: relative;\r\n\r\n .pl-tabs-header-item {\r\n line-height: 36px;\r\n padding: 0 16px;\r\n position: relative;\r\n z-index: 1;\r\n transition: all linear 150ms;\r\n white-space: nowrap;\r\n\r\n &:hover {\r\n color: $colorPrimary;\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n color: $colorPrimary;\r\n background-color: $colorPrimaryLight;\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-left {\r\n\r\n &:before {\r\n position: absolute;\r\n content: '';\r\n right: 0;\r\n width: 2px;\r\n top: 0;\r\n bottom: 0;\r\n background-color: $ibl;\r\n }\r\n\r\n .pl-tabs-header-item {\r\n text-align: right;\r\n border-right: solid 2px transparent;\r\n\r\n &:hover {\r\n border-right-color: rgba($colorPrimary, 0.5);\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n border-right-color: $colorPrimary;\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-header-pos-right {\r\n &:before {\r\n position: absolute;\r\n content: '';\r\n left: 0;\r\n width: 2px;\r\n top: 0;\r\n bottom: 0;\r\n background-color: $ibl;\r\n }\r\n\r\n .pl-tabs-header-item {\r\n text-align: left;\r\n border-left: solid 2px transparent;\r\n\r\n &:hover {\r\n border-left-color: rgba($colorPrimary, 0.5);\r\n }\r\n\r\n &.pl-tabs-header-item-active {\r\n border-left-color: $colorPrimary;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-fit-height {\r\n height: 100%;\r\n flex: 1;\r\n align-items: stretch;\r\n\r\n & > .pl-tabs-header {\r\n overflow: auto;\r\n }\r\n\r\n & > .pl-tabs-body {\r\n overflow: hidden;\r\n display: flex;\r\n align-items: stretch;\r\n\r\n & > .pl-inner-tab {\r\n flex: 1;\r\n overflow: auto;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.pl-tabs-head-position-left {\r\n .pl-tabs-body {\r\n padding-left: 16px;\r\n }\r\n }\r\n\r\n &.pl-tabs-head-position-right {\r\n .pl-tabs-body {\r\n padding-right: 16px;\r\n }\r\n }\r\n }\r\n}\r\n",
|
|
374
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-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}",
|
|
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
|
},
|
|
@@ -423,13 +423,13 @@
|
|
|
423
423
|
{
|
|
424
424
|
"name": "createUseTableOption",
|
|
425
425
|
"codes": [
|
|
426
|
-
"@include theme {\r\n .pro-column-filter-container {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: stretch;\r\n width: 360px;\r\n padding: 0 12px;\r\n\r\n & > div {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 4px 0;\r\n\r\n & > .pl-filter {\r\n width: 100%;\r\n display: flex;\r\n }\r\n\r\n .pl-button-group {\r\n width: 100%;\r\n display: flex;\r\n\r\n .pl-button:not(.pl-button-icon-only) {\r\n flex: 1;\r\n }\r\n }\r\n\r\n & > .pl-button {\r\n flex: 1;\r\n\r\n &:first-child {\r\n margin-right: 2px;\r\n }\r\n\r\n &:last-child {\r\n margin-left: 2px;\r\n }\r\n }\r\n }\r\n\r\n .pro-column-filter-sort-container {\r\n background-color: $ibl;\r\n height: plv(sizeNormal);\r\n border-radius: 100px;\r\n width: 100%;\r\n display: flex;\r\n align-items: stretch;\r\n box-sizing: border-box;\r\n padding: 2px;\r\n\r\n & > div {\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n border-radius: 100px;\r\n cursor: pointer;\r\n background-color: $ibl;\r\n transition: background-color 300ms linear;\r\n\r\n &:hover {\r\n background-color: #fcfcfc;\r\n }\r\n\r\n &.pro-column-filter-sort-item-active {\r\n background-color: white;\r\n box-shadow: 0 2px 8px #ddd;\r\n color: $colorPrimary;\r\n }\r\n\r\n }\r\n }\r\n }\r\n}\r\n",
|
|
427
|
-
"@include theme {\r\n .pl-table-pro-distinct-filter-item {\r\n display: flex;\r\n align-items: stretch;\r\n line-height: 28px;\r\n\r\n padding: 8px 0;\r\n\r\n background-color: white;\r\n transition: background-color 300ms linear;\r\n\r\n &:not(:last-child) {\r\n border-bottom: solid 1px $ibl;\r\n }\r\n\r\n &:hover {\r\n background-color: #f6f6f6;\r\n }\r\n\r\n .pl-table-pro-distinct-filter-item-title {\r\n color: $colorPrimary;\r\n margin: 0 8px;\r\n }\r\n\r\n .pl-table-pro-distinct-filter-item-tags {\r\n\r\n cursor: pointer;\r\n\r\n & > div {\r\n display: inline-block;\r\n font-size: 12px;\r\n background-color: $colorPrimaryLight;\r\n padding: 0 12px;\r\n margin: 1px 2px;\r\n border-radius: 4px;\r\n }\r\n }\r\n\r\n .pl-table-pro-distinct-filter-item-button {\r\n\r\n }\r\n }\r\n}\r\n",
|
|
428
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",
|
|
429
427
|
"@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",
|
|
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
428
|
".pl-table-pro-setting-senior-filter {\r\n .pl-table-pro-setting-senior-filter-button {\r\n display: flex;\r\n justify-content: space-between;\r\n\r\n .pl-button + * {\r\n margin-left: 8px;\r\n }\r\n }\r\n\r\n .pl-table-pro-setting-senior-filter-item {\r\n margin-bottom: 16px;\r\n\r\n .pl-table-pro-setting-senior-filter-item-id {\r\n width: 80px;\r\n display: inline-block;\r\n text-align: center;\r\n }\r\n\r\n .pl-table-pro-setting-senior-filter-item-content {\r\n width: calc(100% - 80px);\r\n display: inline-block;\r\n }\r\n }\r\n}\r\n",
|
|
432
|
-
"@include theme {\r\n .pl-table-pro-setting {\r\n
|
|
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 {\r\n height: 100%;\r\n display: flex;\r\n align-items: stretch;\r\n\r\n $nav-bg: #fcfcfc;\r\n\r\n .pl-table-pro-setting-nav {\r\n background-color: $nav-bg;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n .pl-table-pro-setting-nav-item:last-child {\r\n flex: 1;\r\n }\r\n\r\n .pl-table-pro-setting-nav-item {\r\n padding: 12px 24px;\r\n cursor: pointer;\r\n background-color: white;\r\n position: relative;\r\n\r\n .pl-table-pro-setting-nav-item-inner {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n &:hover, &.pl-table-pro-setting-nav-item-active {\r\n color: $colorPrimary;\r\n }\r\n\r\n &.pl-table-pro-setting-nav-item-active {\r\n &:after {\r\n position: absolute;\r\n content: '';\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n width: 2px;\r\n background-color: $colorPrimary;\r\n }\r\n }\r\n\r\n &.pl-table-pro-setting-nav-item-prev {\r\n &:before {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n border-bottom-right-radius: 4px;\r\n background-color: $nav-bg;\r\n content: '';\r\n border-bottom: solid 1px $ibl;\r\n border-right: solid 1px $ibl;\r\n }\r\n }\r\n\r\n &.pl-table-pro-setting-nav-item-next {\r\n &:before {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n border-top-right-radius: 4px;\r\n background-color: $nav-bg;\r\n content: '';\r\n border-top: solid 1px $ibl;\r\n border-right: solid 1px $ibl;\r\n }\r\n }\r\n\r\n &:not(.pl-table-pro-setting-nav-item-prev):not(.pl-table-pro-setting-nav-item-next):not(.pl-table-pro-setting-nav-item-active) {\r\n background-color: $nav-bg;\r\n border-right: solid 1px $ibl;\r\n }\r\n }\r\n }\r\n\r\n .pl-table-pro-setting-content {\r\n flex: 1;\r\n overflow-y: scroll;\r\n overflow-x: hidden;\r\n width: 650px;\r\n box-sizing: border-box;\r\n\r\n &.pl-table-pro-setting-content-pending {\r\n padding: 16px;\r\n }\r\n\r\n &::-webkit-scrollbar {\r\n background: white;\r\n width: 6px;\r\n height: 6px;\r\n }\r\n\r\n &::-webkit-scrollbar-thumb {\r\n background: rgba(black, 0.25);\r\n border-radius: 6px;\r\n }\r\n\r\n .pl-table-pro-setting-content-header {\r\n text-align: right;\r\n\r\n & > .pl-button + .pl-button {\r\n margin-left: 8px;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n",
|
|
431
|
+
"@include theme {\r\n .pl-table-pro-distinct-filter-item {\r\n display: flex;\r\n align-items: stretch;\r\n line-height: 28px;\r\n\r\n padding: 8px 0;\r\n\r\n background-color: white;\r\n transition: background-color 300ms linear;\r\n\r\n &:not(:last-child) {\r\n border-bottom: solid 1px $ibl;\r\n }\r\n\r\n &:hover {\r\n background-color: #f6f6f6;\r\n }\r\n\r\n .pl-table-pro-distinct-filter-item-title {\r\n color: $colorPrimary;\r\n margin: 0 8px;\r\n }\r\n\r\n .pl-table-pro-distinct-filter-item-tags {\r\n\r\n cursor: pointer;\r\n\r\n & > div {\r\n display: inline-block;\r\n font-size: 12px;\r\n background-color: $colorPrimaryLight;\r\n padding: 0 12px;\r\n margin: 1px 2px;\r\n border-radius: 4px;\r\n }\r\n }\r\n\r\n .pl-table-pro-distinct-filter-item-button {\r\n\r\n }\r\n }\r\n}\r\n",
|
|
432
|
+
"@include theme {\r\n .pro-column-filter-container {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: stretch;\r\n width: 360px;\r\n padding: 0 12px;\r\n\r\n & > div {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 4px 0;\r\n\r\n & > .pl-filter {\r\n width: 100%;\r\n display: flex;\r\n }\r\n\r\n .pl-button-group {\r\n width: 100%;\r\n display: flex;\r\n\r\n .pl-button:not(.pl-button-icon-only) {\r\n flex: 1;\r\n }\r\n }\r\n\r\n & > .pl-button {\r\n flex: 1;\r\n\r\n &:first-child {\r\n margin-right: 2px;\r\n }\r\n\r\n &:last-child {\r\n margin-left: 2px;\r\n }\r\n }\r\n }\r\n\r\n .pro-column-filter-sort-container {\r\n background-color: $ibl;\r\n height: plv(sizeNormal);\r\n border-radius: 100px;\r\n width: 100%;\r\n display: flex;\r\n align-items: stretch;\r\n box-sizing: border-box;\r\n padding: 2px;\r\n\r\n & > div {\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n border-radius: 100px;\r\n cursor: pointer;\r\n background-color: $ibl;\r\n transition: background-color 300ms linear;\r\n\r\n &:hover {\r\n background-color: #fcfcfc;\r\n }\r\n\r\n &.pro-column-filter-sort-item-active {\r\n background-color: white;\r\n box-shadow: 0 2px 8px #ddd;\r\n color: $colorPrimary;\r\n }\r\n\r\n }\r\n }\r\n }\r\n}\r\n"
|
|
433
433
|
],
|
|
434
434
|
"seq": 92
|
|
435
435
|
},
|