@vtx/components 3.1.194 → 3.1.196

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,278 +1,278 @@
1
- @import (reference) '~antd/lib/style/themes/index.less';
2
- @import '../../style/themes/index';
3
-
4
- @prefix-cls: vtx-datagrid;
5
-
6
- .@{prefix-cls} {
7
- position: relative;
8
- width: 100%;
9
- overflow: hidden;
10
-
11
- &-fit {
12
- height: 100%;
13
- .ant-table-container {
14
- border-left: none !important;
15
- table > thead > tr th:first-child {
16
- border-left: 1px solid @table-border-color;
17
- }
18
- }
19
- .ant-table-body {
20
- // overflow-y: auto !important;
21
- }
22
- .ant-table-header,
23
- .ant-table-body {
24
- &::-webkit-scrollbar {
25
- width: @webkit-scrollbar-width;
26
- height: @webkit-scrollbar-height;
27
- background-color: @webkit-scrollbar-color;
28
- }
29
-
30
- &::-webkit-scrollbar-thumb {
31
- background-color: @webkit-scrollbar-thumb-color;
32
- border-radius: @webkit-scrollbar-thumb-radius;
33
- &:hover,&:active {
34
- background-color: #7a7a7a;
35
- }
36
- }
37
- > table {
38
- min-height: 1px;
39
- }
40
- }
41
- .ant-table-tbody > tr {
42
- &:nth-child(odd) {
43
- background: @table-row-odd;
44
- > td {
45
- background: @table-row-odd !important;
46
- }
47
- }
48
- > td:first-child {
49
- border-left: 1px solid @table-border-color;
50
- }
51
- }
52
- .ant-table-fixed-header .ant-table-scroll .ant-table-header {
53
- min-width: 5px !important;
54
- }
55
- .ant-table-pagination {
56
- position: absolute;
57
- right: 0;
58
- bottom: 0;
59
- }
60
- .ant-spin-nested-loading {
61
- height: 100%;
62
- .ant-spin-container {
63
- position: relative;
64
- height: 100%;
65
- .ant-table {
66
- height: 100%;
67
- }
68
- }
69
- }
70
- }
71
- &-noFit {
72
- .ant-table-tbody > tr {
73
- &:nth-child(even) when(@theme=default) {
74
- background: #f6f6f6;
75
- > td {
76
- background: #f6f6f6 !important;
77
- }
78
- }
79
- }
80
- }
81
- .ant-table-container {
82
- position: relative;
83
- height: 100%;
84
- }
85
- // 固定列目前没有办法用细的滚动条
86
- // .ant-table-has-fix-right {
87
- // .ant-table-body {
88
- // &::-webkit-scrollbar {
89
- // width: 5px;
90
- // height: 5px;
91
- // }
92
- // }
93
- // }
94
- // mac 和 windows下有差异,window chrome下滚动条宽度17px,mac chrome下15px
95
- // &-userAgent-mac {
96
- // .ant-table-has-fix-right {
97
- // .ant-table-body {
98
- // &::-webkit-scrollbar {
99
- // width: 5px;
100
- // height: 5px;
101
- // }
102
- // }
103
- // }
104
- // }
105
- .ant-table-middle {
106
- .ant-table-thead > tr > th {
107
- padding-left: 12px !important;
108
- padding-right: 12px !important;
109
- }
110
- .ant-table-tbody > tr > td {
111
- padding-left: 12px !important;
112
- padding-right: 12px !important;
113
- }
114
- }
115
- .ant-table-tbody > tr.ant-table-row-selected > td {
116
- // background: transparent !important;
117
- border-color: @table-border-color !important;
118
- }
119
-
120
- .ant-table-thead > tr > th when(@theme=default) {
121
- // antd4.0 半透明会重叠
122
- // background-color: fade(#1890ff, 8);
123
- font-weight: bold;
124
- background-color: rgba(237, 246, 255, 1);
125
- }
126
- .ant-table-tbody > tr {
127
- // &:nth-child(even) when(@theme=default) {
128
- // background: #f6f6f6;
129
- // }
130
- & > .ant-table-cell {
131
- color: @text-color;
132
- }
133
-
134
- &.ant-table-placeholder {
135
- position: absolute;
136
- top: 25%;
137
- // top: auto;
138
- right: 0;
139
- // bottom: auto;
140
- left: 0;
141
- background-color: transparent;
142
- border-top: none;
143
- // height: 100%;
144
- & > td.ant-table-cell {
145
- display: flex;
146
- align-items: center;
147
- justify-content: center;
148
- width: 100%;
149
- height: 100%;
150
- // border-right: @border-width-base @border-style-base @table-border-color;
151
- // border-left: @border-width-base @border-style-base @table-border-color;
152
- border: none;
153
- }
154
- }
155
- }
156
- // fix: checkbox 选中时 固定列 最上面一层透明会 和下面重叠
157
- // .ant-table-tbody > tr.ant-table-row-selected td {
158
- // background: transparent;
159
- // }
160
- &-alert {
161
- margin-bottom: 8px;
162
- &-message when(@theme=default) {
163
- color: fade(@black, 65%);
164
- }
165
- &-message when(@theme=dark) {
166
- color: @text-color;
167
- }
168
- &-info-content > strong {
169
- margin: 0 4px;
170
- color: #13c2c2;
171
- }
172
- &-info-option {
173
- margin-left: 10px;
174
- }
175
- }
176
- &-nodata {
177
- .ant-table-scroll {
178
- overflow-y: hidden;
179
- }
180
- }
181
- &-toolbar {
182
- display: table;
183
- width: 100%;
184
- margin: 16px 0;
185
- color: @text-color;
186
- }
187
- &-toolbar-left,
188
- &-toolbar-right {
189
- display: inline-block;
190
- display: table-cell;
191
- vertical-align: middle;
192
- }
193
- &-toolbar-left {
194
- color: @text-color;
195
- font-size: 16px;
196
- }
197
- &-toolbar-right {
198
- float: right;
199
- }
200
- &-toolbar-line {
201
- width: 1px;
202
- height: 14px;
203
- display: inline-block;
204
- vertical-align: middle;
205
- background: #e8e8e8;
206
- margin: 0 -2px 0 12px;
207
- }
208
- &-toolbar-setting-item {
209
- display: inline-block;
210
- margin-left: 16px;
211
- color: @icon-color;
212
- font-size: 16px;
213
- vertical-align: middle;
214
- cursor: pointer;
215
- color: #707070;
216
- &:hover {
217
- color: @icon-color-hover;
218
- }
219
- }
220
- &-column-setting-title {
221
- height: 32px;
222
- line-height: 32px;
223
- a {
224
- display: inline-block;
225
- float: right;
226
- vertical-align: middle;
227
- }
228
- }
229
- &-column-setting-checkbox-wrapper {
230
- color: @text-color;
231
- vertical-align: middle;
232
- }
233
- &-space-item {
234
- display: inline-block;
235
- vertical-align: middle;
236
- }
237
- .react-resizable {
238
- position: relative;
239
- background-clip: padding-box;
240
- }
241
- .react-resizable-handle {
242
- position: absolute;
243
- right: -5px;
244
- bottom: 0;
245
- z-index: 1;
246
- width: 10px;
247
- height: 100%;
248
- cursor: col-resize;
249
- }
250
-
251
- &-column-setting {
252
- &-title {
253
- height: 32px;
254
- line-height: 32px;
255
-
256
- a {
257
- display: inline-block;
258
- float: right;
259
- vertical-align: middle;
260
- }
261
- }
262
-
263
- &-checkbox-wrapper {
264
- color: @text-color;
265
- vertical-align: middle;
266
- }
267
-
268
- &-list {
269
- &-list-item {
270
- display: flex;
271
-
272
- &-title {
273
- flex: 1;
274
- }
275
- }
276
- }
277
- }
278
- }
1
+ @import (reference) '~antd/lib/style/themes/index.less';
2
+ @import '../../style/themes/index';
3
+
4
+ @prefix-cls: vtx-datagrid;
5
+
6
+ .@{prefix-cls} {
7
+ position: relative;
8
+ width: 100%;
9
+ overflow: hidden;
10
+
11
+ &-fit {
12
+ height: 100%;
13
+ .ant-table-container {
14
+ border-left: none !important;
15
+ table > thead > tr th:first-child {
16
+ border-left: 1px solid @table-border-color;
17
+ }
18
+ }
19
+ .ant-table-body {
20
+ // overflow-y: auto !important;
21
+ }
22
+ .ant-table-header,
23
+ .ant-table-body {
24
+ &::-webkit-scrollbar {
25
+ width: @webkit-scrollbar-width;
26
+ height: @webkit-scrollbar-height;
27
+ background-color: @webkit-scrollbar-color;
28
+ }
29
+
30
+ &::-webkit-scrollbar-thumb {
31
+ background-color: @webkit-scrollbar-thumb-color;
32
+ border-radius: @webkit-scrollbar-thumb-radius;
33
+ &:hover,&:active {
34
+ background-color: #7a7a7a;
35
+ }
36
+ }
37
+ > table {
38
+ min-height: 1px;
39
+ }
40
+ }
41
+ .ant-table-tbody > tr {
42
+ &:nth-child(odd) {
43
+ background: @table-row-odd;
44
+ > td {
45
+ background: @table-row-odd !important;
46
+ }
47
+ }
48
+ > td:first-child {
49
+ border-left: 1px solid @table-border-color;
50
+ }
51
+ }
52
+ .ant-table-fixed-header .ant-table-scroll .ant-table-header {
53
+ min-width: 5px !important;
54
+ }
55
+ .ant-table-pagination {
56
+ position: absolute;
57
+ right: 0;
58
+ bottom: 0;
59
+ }
60
+ .ant-spin-nested-loading {
61
+ height: 100%;
62
+ .ant-spin-container {
63
+ position: relative;
64
+ height: 100%;
65
+ .ant-table {
66
+ height: 100%;
67
+ }
68
+ }
69
+ }
70
+ }
71
+ &-noFit {
72
+ .ant-table-tbody > tr {
73
+ &:nth-child(even) when(@theme=default) {
74
+ background: #f6f6f6;
75
+ > td {
76
+ background: #f6f6f6 !important;
77
+ }
78
+ }
79
+ }
80
+ }
81
+ .ant-table-container {
82
+ position: relative;
83
+ height: 100%;
84
+ }
85
+ // 固定列目前没有办法用细的滚动条
86
+ // .ant-table-has-fix-right {
87
+ // .ant-table-body {
88
+ // &::-webkit-scrollbar {
89
+ // width: 5px;
90
+ // height: 5px;
91
+ // }
92
+ // }
93
+ // }
94
+ // mac 和 windows下有差异,window chrome下滚动条宽度17px,mac chrome下15px
95
+ // &-userAgent-mac {
96
+ // .ant-table-has-fix-right {
97
+ // .ant-table-body {
98
+ // &::-webkit-scrollbar {
99
+ // width: 5px;
100
+ // height: 5px;
101
+ // }
102
+ // }
103
+ // }
104
+ // }
105
+ .ant-table-middle {
106
+ .ant-table-thead > tr > th {
107
+ padding-left: 12px !important;
108
+ padding-right: 12px !important;
109
+ }
110
+ .ant-table-tbody > tr > td {
111
+ padding-left: 12px !important;
112
+ padding-right: 12px !important;
113
+ }
114
+ }
115
+ .ant-table-tbody > tr.ant-table-row-selected > td {
116
+ // background: transparent !important;
117
+ border-color: @table-border-color !important;
118
+ }
119
+
120
+ .ant-table-thead > tr > th when(@theme=default) {
121
+ // antd4.0 半透明会重叠
122
+ // background-color: fade(#1890ff, 8);
123
+ font-weight: bold;
124
+ background-color: rgba(237, 246, 255, 1);
125
+ }
126
+ .ant-table-tbody > tr {
127
+ // &:nth-child(even) when(@theme=default) {
128
+ // background: #f6f6f6;
129
+ // }
130
+ & > .ant-table-cell {
131
+ color: @text-color;
132
+ }
133
+
134
+ &.ant-table-placeholder {
135
+ position: absolute;
136
+ top: 25%;
137
+ // top: auto;
138
+ right: 0;
139
+ // bottom: auto;
140
+ left: 0;
141
+ background-color: transparent;
142
+ border-top: none;
143
+ // height: 100%;
144
+ & > td.ant-table-cell {
145
+ display: flex;
146
+ align-items: center;
147
+ justify-content: center;
148
+ width: 100%;
149
+ height: 100%;
150
+ // border-right: @border-width-base @border-style-base @table-border-color;
151
+ // border-left: @border-width-base @border-style-base @table-border-color;
152
+ border: none;
153
+ }
154
+ }
155
+ }
156
+ // fix: checkbox 选中时 固定列 最上面一层透明会 和下面重叠
157
+ // .ant-table-tbody > tr.ant-table-row-selected td {
158
+ // background: transparent;
159
+ // }
160
+ &-alert {
161
+ margin-bottom: 8px;
162
+ &-message when(@theme=default) {
163
+ color: fade(@black, 65%);
164
+ }
165
+ &-message when(@theme=dark) {
166
+ color: @text-color;
167
+ }
168
+ &-info-content > strong {
169
+ margin: 0 4px;
170
+ color: #13c2c2;
171
+ }
172
+ &-info-option {
173
+ margin-left: 10px;
174
+ }
175
+ }
176
+ &-nodata {
177
+ .ant-table-scroll {
178
+ overflow-y: hidden;
179
+ }
180
+ }
181
+ &-toolbar {
182
+ display: table;
183
+ width: 100%;
184
+ margin: 16px 0;
185
+ color: @text-color;
186
+ }
187
+ &-toolbar-left,
188
+ &-toolbar-right {
189
+ display: inline-block;
190
+ display: table-cell;
191
+ vertical-align: middle;
192
+ }
193
+ &-toolbar-left {
194
+ color: @text-color;
195
+ font-size: 16px;
196
+ }
197
+ &-toolbar-right {
198
+ float: right;
199
+ }
200
+ &-toolbar-line {
201
+ width: 1px;
202
+ height: 14px;
203
+ display: inline-block;
204
+ vertical-align: middle;
205
+ background: #e8e8e8;
206
+ margin: 0 -2px 0 12px;
207
+ }
208
+ &-toolbar-setting-item {
209
+ display: inline-block;
210
+ margin-left: 16px;
211
+ color: @icon-color;
212
+ font-size: 16px;
213
+ vertical-align: middle;
214
+ cursor: pointer;
215
+ color: #707070;
216
+ &:hover {
217
+ color: @icon-color-hover;
218
+ }
219
+ }
220
+ &-column-setting-title {
221
+ height: 32px;
222
+ line-height: 32px;
223
+ a {
224
+ display: inline-block;
225
+ float: right;
226
+ vertical-align: middle;
227
+ }
228
+ }
229
+ &-column-setting-checkbox-wrapper {
230
+ color: @text-color;
231
+ vertical-align: middle;
232
+ }
233
+ &-space-item {
234
+ display: inline-block;
235
+ vertical-align: middle;
236
+ }
237
+ .react-resizable {
238
+ position: relative;
239
+ background-clip: padding-box;
240
+ }
241
+ .react-resizable-handle {
242
+ position: absolute;
243
+ right: -5px;
244
+ bottom: 0;
245
+ z-index: 1;
246
+ width: 10px;
247
+ height: 100%;
248
+ cursor: col-resize;
249
+ }
250
+
251
+ &-column-setting {
252
+ &-title {
253
+ height: 32px;
254
+ line-height: 32px;
255
+
256
+ a {
257
+ display: inline-block;
258
+ float: right;
259
+ vertical-align: middle;
260
+ }
261
+ }
262
+
263
+ &-checkbox-wrapper {
264
+ color: @text-color;
265
+ vertical-align: middle;
266
+ }
267
+
268
+ &-list {
269
+ &-list-item {
270
+ display: flex;
271
+
272
+ &-title {
273
+ flex: 1;
274
+ }
275
+ }
276
+ }
277
+ }
278
+ }