inl-ui 0.1.20 → 0.1.21

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,343 +1,343 @@
1
- // body,
2
- // #app {
3
- // background-color: #132041;
4
- // }
5
-
6
- @theme: dark;
7
- @white: #fff;
8
- @black: #000;
9
- @primary-color: #1d33a2;
10
- @menu-item-height: 48px;
11
- @disabled-color: #a4aabf;
12
- @green: #22cc83;
13
- @red: #ea5858;
14
- @orange: #ff9214;
15
- @blue-1: fade(@primary-color, 20%);
16
- @blue-3: fade(@primary-color, 0%);
17
- @blue-7: fade(@primary-color, 100%);
18
- @green-1: fade(@green, 20%);
19
- @green-3: fade(@green, 0%);
20
- @green-7: fade(@green, 100%);
21
- @red-1: fade(@red, 20%);
22
- @red-3: fade(@red, 0%);
23
- @red-7: fade(@red, 100%);
24
- @orange-1: fade(@orange, 20%);
25
- @orange-3: fade(@orange, 0%);
26
- @orange-7: fade(@orange, 100%);
27
- @component-background: transparent;
28
- @input-placeholder-color: #a4aabf;
29
- @menu-dark-bg: #1b2c55;
30
- @menu-dark-arrow-color: @white;
31
- @menu-dark-inline-submenu-bg: @menu-dark-bg;
32
- @menu-dark-highlight-color: #3e7eff;
33
- @menu-dark-item-active-bg: rgba(255, 255, 255, 0.1);
34
- @menu-dark-item-hover-bg: transparent;
35
- @border-color-base: #b9c2d5;
36
- @shadow-2: 0px 1px 12px 0px rgba(55, 63, 77, 0.08);
37
-
38
- @radio-solid-checked-color: @white;
39
- @radio-button-focus-shadow: none;
40
-
41
- @message-notice-content-bg: @white;
42
-
43
- @layout-header-height: 33px;
44
-
45
- // 按钮
46
- @btn-default-bg: @white;
47
- @text-color: #5c667d;
48
- @btn-font-weight: 400;
49
- @btn-primary-shadow: none;
50
- @btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
51
- @btn-text-hover-bg: rgba(144, 149, 162, 0.05);
52
-
53
- .ant-modal-confirm {
54
- .ant-modal-confirm-btns {
55
- .ant-btn + .ant-btn {
56
- margin-left: 16px;
57
- }
58
- }
59
- }
60
-
61
- // form
62
- @label-color: #354052;
63
- @input-disabled-bg: rgba(144, 149, 162, 0.3);
64
- @input-disabled-color: #5c667d;
65
-
66
- @select-item-active-bg: #f2f3f8;
67
- @select-dropdown-bg: @white;
68
- @select-item-selected-bg: rgba(242, 243, 248, 1);
69
- @calendar-item-active-bg: rgba(242, 243, 248, 1);
70
- @calendar-bg: @white;
71
-
72
- .ant-picker-clear {
73
- color: @primary-color;
74
- background-color: none;
75
- }
76
-
77
- .ant-picker-suffix {
78
- color: @primary-color;
79
- }
80
-
81
- // switch
82
- @switch-bg: @white;
83
- .ant-switch {
84
- background-color: #a4aabf;
85
- }
86
-
87
- .ant-switch-checked {
88
- background-color: @primary-color;
89
- }
90
-
91
- // table
92
- @table-bg: @white;
93
- @table-header-bg: rgba(242, 243, 248, 1);
94
- @table-header-color: rgba(53, 64, 82, 1);
95
- @table-border-color: #f2f3f8;
96
- @table-header-sort-active-bg: #f2f3f8;
97
- @table-font-size: 14px;
98
- @table-padding-vertical: 10px;
99
- @table-padding-horizontal: 16px;
100
- @table-row-hover-bg: #eff2f6;
101
- @table-header-sort-bg: #dce2ed;
102
- @table-selected-row-bg: #eff2f6;
103
-
104
- // Pagination
105
- // ---
106
- @pagination-item-bg: transparent;
107
- @pagination-item-bg-active: @primary-color;
108
- @pagination-item-link-bg: transparent;
109
- @pagination-item-disabled-bg-active: fade(@white, 25%);
110
- @pagination-item-disabled-color-active: @black;
111
- @pagination-item-input-bg: @pagination-item-bg;
112
- .ant-table-pagination.ant-pagination {
113
- margin: 30px 0;
114
- }
115
-
116
- // 选中
117
- .ant-pagination-item-active,
118
- .ant-pagination-item-active:hover {
119
- a {
120
- color: @white;
121
- }
122
- }
123
-
124
- // Avatar
125
- @avatar-bg: @primary-color;
126
-
127
- // 图标头像
128
- .ant-avatar.ant-avatar-icon {
129
- background-color: #eff2f6;
130
- color: #959cb9;
131
- }
132
-
133
- // Tag
134
- @tag-default-bg: #eff2f6;
135
- @border-color-base: #dce2ed;
136
- @tag-default-color: #5d616b;
137
- @text-color-secondary: #333333;
138
-
139
- // popover
140
- @popover-bg: @white;
141
- @heading-color: #354052;
142
- @popover-color: #5c667d;
143
- @border-color-split: #eff2f6;
144
-
145
- // modal
146
- @modal-content-bg: @white;
147
- @modal-heading-color: @heading-color;
148
- @modal-header-bg: @white;
149
- @modal-close-color: rgba(0, 0, 0, 0.45);
150
- @icon-color-hover: @modal-close-color;
151
- @modal-header-border-color-split: transparent;
152
- @modal-footer-border-color-split: transparent;
153
- @modal-footer-padding-vertical: 24px;
154
- @modal-footer-padding-horizontal: 24px;
155
- @modal-confirm-body-padding: 24px;
156
- .ant-modal {
157
- .ant-modal-header {
158
- padding-bottom: 0;
159
- }
160
- .ant-modal-footer {
161
- padding-top: 0;
162
- .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
163
- margin-left: 16px;
164
- }
165
- }
166
- }
167
- .ant-modal .ant-table {
168
- background: transparent;
169
- thead > tr > th {
170
- background-color: #f2f3f8;
171
- border-bottom: 1px solid #f2f3f8;
172
- }
173
- tbody > tr > td {
174
- border-bottom: 1px solid #f2f3f8;
175
- }
176
- }
177
-
178
- .ant-modal .ant-table {
179
- background: transparent;
180
-
181
- thead > tr > th {
182
- background-color: #f2f3f8;
183
- border-bottom: 1px solid #f2f3f8;
184
- }
185
-
186
- tbody > tr > td {
187
- border-bottom: 1px solid #f2f3f8;
188
- }
189
- }
190
-
191
- // alert
192
- @alert-close-color: rgba(0, 0, 0, 0.45);
193
- @alert-close-hover-color: @alert-close-color;
194
- @alert-success-bg-color: fade(@green, 10%);
195
- @alert-success-border-color: @green;
196
- @alert-success-icon-color: @green;
197
- @alert-info-bg-color: fade(@primary-color, 10%);
198
- @alert-info-border-color: @primary-color;
199
- @alert-info-icon-color: @primary-color;
200
- @alert-warning-bg-color: fade(@orange, 10%);
201
- @alert-warning-border-color: @orange;
202
- @alert-warning-icon-color: @orange;
203
- @alert-error-bg-color: fade(@red, 10%);
204
- @alert-error-border-color: @red;
205
- @alert-error-icon-color: @red;
206
-
207
- // 成功
208
- .ant-alert-success {
209
- .ant-alert-message,
210
- .ant-alert-description,
211
- .ant-alert-close-text {
212
- color: @green;
213
- }
214
- }
215
-
216
- // 提示
217
- .ant-alert-info {
218
- .ant-alert-message,
219
- .ant-alert-description,
220
- .ant-alert-close-text {
221
- color: @primary-color;
222
- }
223
- }
224
-
225
- // 警告
226
- .ant-alert-warning {
227
- .ant-alert-message,
228
- .ant-alert-description,
229
- .ant-alert-close-text {
230
- color: @orange;
231
- }
232
- }
233
-
234
- // 错误
235
- .ant-alert-error {
236
- .ant-alert-message,
237
- .ant-alert-description,
238
- .ant-alert-close-text {
239
- color: @red;
240
- }
241
- }
242
-
243
- // .ant-message {
244
- // &-success {
245
- // color: @green;
246
- // }
247
-
248
- // &-error {
249
- // color: @red;
250
- // }
251
-
252
- // &-warning {
253
- // color: @orange;
254
- // }
255
-
256
- // &-info,
257
- // &-loading {
258
- // color: @primary-color;
259
- // }
260
- // }
261
-
262
- // breadcrumb
263
- @breadcrumb-base-color: #959cb9;
264
- @breadcrumb-link-color: #959cb9;
265
- @breadcrumb-last-item-color: #354052;
266
- @breadcrumb-separator-color: #959cb9;
267
- @breadcrumb-link-color-hover: @primary-color;
268
-
269
- // dropdown
270
- @dropdown-menu-bg: @white;
271
-
272
- // menu
273
- @menu-highlight-color: #ffffff;
274
- @menu-item-hover-bg: fade(@white, 10%);
275
- @menu-dark-selected-item-icon-color: #3e7eff;
276
- @menu-dark-selected-item-text-color: #3e7eff;
277
- @menu-dark-highlight-color: #3e7eff;
278
- @menu-dark-item-active-bg: fade(@white, 10%);
279
- @menu-dark-item-hover-bg: fade(@white, 10%);
280
- @menu-dark-inline-submenu-bg: @menu-dark-bg;
281
- @menu-inline-submenu-bg: @menu-dark-bg;
282
- @menu-item-active-bg: rgba(255, 255, 255, 0.1);
283
- @menu-bg: @menu-dark-bg;
284
- @menu-item-color: fade(@white, 65%);
285
- // @border-color-split: @menu-dark-bg;
286
- @menu-popup-bg: @menu-dark-bg;
287
-
288
- //
289
- .ant-menu-inline .ant-menu-item::after {
290
- left: 0;
291
- right: initial;
292
- }
293
-
294
- .ant-menu.ant-menu-root > li > .ant-menu-title-content {
295
- font-weight: 400;
296
- }
297
-
298
- .ant-menu-dark.ant-menu-inline .ant-menu-item-selected::after {
299
- border-right: 3px solid #3e7eff;
300
- }
301
-
302
- .ant-menu.ant-menu-inline .ant-menu-item-selected::after {
303
- border-right: 3px solid #3e7eff;
304
- }
305
-
306
- // empty
307
- .ant-empty-img-simple {
308
- &-ellipse {
309
- fill: #f5f5f5;
310
- fill-opacity: 1;
311
- }
312
-
313
- &-path {
314
- fill: #fafafa;
315
- stroke: #d9d9d9;
316
- }
317
-
318
- &-g {
319
- stroke: #d9d9d9;
320
- }
321
- }
322
- .ant-empty-img-default-path {
323
- &-1 {
324
- fill: #aeb8c2;
325
- }
326
- &-3 {
327
- fill: #f5f5f7;
328
- }
329
- &-4 {
330
- fill: #dce0e6;
331
- }
332
- &-5 {
333
- fill: #dce0e6;
334
- }
335
- }
336
-
337
- // tree
338
- @tree-node-selected-bg: #f2f3f8;
339
-
340
- .rc-virtual-list-scrollbar-thumb,
341
- .ant-select-tree-list-scrollbar-thumb {
342
- background: rgb(221, 221, 221) !important;
343
- }
1
+ // body,
2
+ // #app {
3
+ // background-color: #132041;
4
+ // }
5
+
6
+ @theme: dark;
7
+ @white: #fff;
8
+ @black: #000;
9
+ @primary-color: #1d33a2;
10
+ @menu-item-height: 48px;
11
+ @disabled-color: #a4aabf;
12
+ @green: #22cc83;
13
+ @red: #ea5858;
14
+ @orange: #ff9214;
15
+ @blue-1: fade(@primary-color, 20%);
16
+ @blue-3: fade(@primary-color, 0%);
17
+ @blue-7: fade(@primary-color, 100%);
18
+ @green-1: fade(@green, 20%);
19
+ @green-3: fade(@green, 0%);
20
+ @green-7: fade(@green, 100%);
21
+ @red-1: fade(@red, 20%);
22
+ @red-3: fade(@red, 0%);
23
+ @red-7: fade(@red, 100%);
24
+ @orange-1: fade(@orange, 20%);
25
+ @orange-3: fade(@orange, 0%);
26
+ @orange-7: fade(@orange, 100%);
27
+ @component-background: transparent;
28
+ @input-placeholder-color: #a4aabf;
29
+ @menu-dark-bg: #1b2c55;
30
+ @menu-dark-arrow-color: @white;
31
+ @menu-dark-inline-submenu-bg: @menu-dark-bg;
32
+ @menu-dark-highlight-color: #3e7eff;
33
+ @menu-dark-item-active-bg: rgba(255, 255, 255, 0.1);
34
+ @menu-dark-item-hover-bg: transparent;
35
+ @border-color-base: #b9c2d5;
36
+ @shadow-2: 0px 1px 12px 0px rgba(55, 63, 77, 0.08);
37
+
38
+ @radio-solid-checked-color: @white;
39
+ @radio-button-focus-shadow: none;
40
+
41
+ @message-notice-content-bg: @white;
42
+
43
+ @layout-header-height: 33px;
44
+
45
+ // 按钮
46
+ @btn-default-bg: @white;
47
+ @text-color: #5c667d;
48
+ @btn-font-weight: 400;
49
+ @btn-primary-shadow: none;
50
+ @btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
51
+ @btn-text-hover-bg: rgba(144, 149, 162, 0.05);
52
+
53
+ .ant-modal-confirm {
54
+ .ant-modal-confirm-btns {
55
+ .ant-btn + .ant-btn {
56
+ margin-left: 16px;
57
+ }
58
+ }
59
+ }
60
+
61
+ // form
62
+ @label-color: #354052;
63
+ @input-disabled-bg: rgba(144, 149, 162, 0.3);
64
+ @input-disabled-color: #5c667d;
65
+
66
+ @select-item-active-bg: #f2f3f8;
67
+ @select-dropdown-bg: @white;
68
+ @select-item-selected-bg: rgba(242, 243, 248, 1);
69
+ @calendar-item-active-bg: rgba(242, 243, 248, 1);
70
+ @calendar-bg: @white;
71
+
72
+ .ant-picker-clear {
73
+ color: @primary-color;
74
+ background-color: none;
75
+ }
76
+
77
+ .ant-picker-suffix {
78
+ color: @primary-color;
79
+ }
80
+
81
+ // switch
82
+ @switch-bg: @white;
83
+ .ant-switch {
84
+ background-color: #a4aabf;
85
+ }
86
+
87
+ .ant-switch-checked {
88
+ background-color: @primary-color;
89
+ }
90
+
91
+ // table
92
+ @table-bg: @white;
93
+ @table-header-bg: rgba(242, 243, 248, 1);
94
+ @table-header-color: rgba(53, 64, 82, 1);
95
+ @table-border-color: #f2f3f8;
96
+ @table-header-sort-active-bg: #f2f3f8;
97
+ @table-font-size: 14px;
98
+ @table-padding-vertical: 10px;
99
+ @table-padding-horizontal: 16px;
100
+ @table-row-hover-bg: #eff2f6;
101
+ @table-header-sort-bg: #dce2ed;
102
+ @table-selected-row-bg: #eff2f6;
103
+
104
+ // Pagination
105
+ // ---
106
+ @pagination-item-bg: transparent;
107
+ @pagination-item-bg-active: @primary-color;
108
+ @pagination-item-link-bg: transparent;
109
+ @pagination-item-disabled-bg-active: fade(@white, 25%);
110
+ @pagination-item-disabled-color-active: @black;
111
+ @pagination-item-input-bg: @pagination-item-bg;
112
+ .ant-table-pagination.ant-pagination {
113
+ margin: 30px 0;
114
+ }
115
+
116
+ // 选中
117
+ .ant-pagination-item-active,
118
+ .ant-pagination-item-active:hover {
119
+ a {
120
+ color: @white;
121
+ }
122
+ }
123
+
124
+ // Avatar
125
+ @avatar-bg: @primary-color;
126
+
127
+ // 图标头像
128
+ .ant-avatar.ant-avatar-icon {
129
+ background-color: #eff2f6;
130
+ color: #959cb9;
131
+ }
132
+
133
+ // Tag
134
+ @tag-default-bg: #eff2f6;
135
+ @border-color-base: #dce2ed;
136
+ @tag-default-color: #5d616b;
137
+ @text-color-secondary: #333333;
138
+
139
+ // popover
140
+ @popover-bg: @white;
141
+ @heading-color: #354052;
142
+ @popover-color: #5c667d;
143
+ @border-color-split: #eff2f6;
144
+
145
+ // modal
146
+ @modal-content-bg: @white;
147
+ @modal-heading-color: @heading-color;
148
+ @modal-header-bg: @white;
149
+ @modal-close-color: rgba(0, 0, 0, 0.45);
150
+ @icon-color-hover: @modal-close-color;
151
+ @modal-header-border-color-split: transparent;
152
+ @modal-footer-border-color-split: transparent;
153
+ @modal-footer-padding-vertical: 24px;
154
+ @modal-footer-padding-horizontal: 24px;
155
+ @modal-confirm-body-padding: 24px;
156
+ .ant-modal {
157
+ .ant-modal-header {
158
+ padding-bottom: 0;
159
+ }
160
+ .ant-modal-footer {
161
+ padding-top: 0;
162
+ .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
163
+ margin-left: 16px;
164
+ }
165
+ }
166
+ }
167
+ .ant-modal .ant-table {
168
+ background: transparent;
169
+ thead > tr > th {
170
+ background-color: #f2f3f8;
171
+ border-bottom: 1px solid #f2f3f8;
172
+ }
173
+ tbody > tr > td {
174
+ border-bottom: 1px solid #f2f3f8;
175
+ }
176
+ }
177
+
178
+ .ant-modal .ant-table {
179
+ background: transparent;
180
+
181
+ thead > tr > th {
182
+ background-color: #f2f3f8;
183
+ border-bottom: 1px solid #f2f3f8;
184
+ }
185
+
186
+ tbody > tr > td {
187
+ border-bottom: 1px solid #f2f3f8;
188
+ }
189
+ }
190
+
191
+ // alert
192
+ @alert-close-color: rgba(0, 0, 0, 0.45);
193
+ @alert-close-hover-color: @alert-close-color;
194
+ @alert-success-bg-color: fade(@green, 10%);
195
+ @alert-success-border-color: @green;
196
+ @alert-success-icon-color: @green;
197
+ @alert-info-bg-color: fade(@primary-color, 10%);
198
+ @alert-info-border-color: @primary-color;
199
+ @alert-info-icon-color: @primary-color;
200
+ @alert-warning-bg-color: fade(@orange, 10%);
201
+ @alert-warning-border-color: @orange;
202
+ @alert-warning-icon-color: @orange;
203
+ @alert-error-bg-color: fade(@red, 10%);
204
+ @alert-error-border-color: @red;
205
+ @alert-error-icon-color: @red;
206
+
207
+ // 成功
208
+ .ant-alert-success {
209
+ .ant-alert-message,
210
+ .ant-alert-description,
211
+ .ant-alert-close-text {
212
+ color: @green;
213
+ }
214
+ }
215
+
216
+ // 提示
217
+ .ant-alert-info {
218
+ .ant-alert-message,
219
+ .ant-alert-description,
220
+ .ant-alert-close-text {
221
+ color: @primary-color;
222
+ }
223
+ }
224
+
225
+ // 警告
226
+ .ant-alert-warning {
227
+ .ant-alert-message,
228
+ .ant-alert-description,
229
+ .ant-alert-close-text {
230
+ color: @orange;
231
+ }
232
+ }
233
+
234
+ // 错误
235
+ .ant-alert-error {
236
+ .ant-alert-message,
237
+ .ant-alert-description,
238
+ .ant-alert-close-text {
239
+ color: @red;
240
+ }
241
+ }
242
+
243
+ // .ant-message {
244
+ // &-success {
245
+ // color: @green;
246
+ // }
247
+
248
+ // &-error {
249
+ // color: @red;
250
+ // }
251
+
252
+ // &-warning {
253
+ // color: @orange;
254
+ // }
255
+
256
+ // &-info,
257
+ // &-loading {
258
+ // color: @primary-color;
259
+ // }
260
+ // }
261
+
262
+ // breadcrumb
263
+ @breadcrumb-base-color: #959cb9;
264
+ @breadcrumb-link-color: #959cb9;
265
+ @breadcrumb-last-item-color: #354052;
266
+ @breadcrumb-separator-color: #959cb9;
267
+ @breadcrumb-link-color-hover: @primary-color;
268
+
269
+ // dropdown
270
+ @dropdown-menu-bg: @white;
271
+
272
+ // menu
273
+ @menu-highlight-color: #ffffff;
274
+ @menu-item-hover-bg: fade(@white, 10%);
275
+ @menu-dark-selected-item-icon-color: #3e7eff;
276
+ @menu-dark-selected-item-text-color: #3e7eff;
277
+ @menu-dark-highlight-color: #3e7eff;
278
+ @menu-dark-item-active-bg: fade(@white, 10%);
279
+ @menu-dark-item-hover-bg: fade(@white, 10%);
280
+ @menu-dark-inline-submenu-bg: @menu-dark-bg;
281
+ @menu-inline-submenu-bg: @menu-dark-bg;
282
+ @menu-item-active-bg: rgba(255, 255, 255, 0.1);
283
+ @menu-bg: @menu-dark-bg;
284
+ @menu-item-color: fade(@white, 65%);
285
+ // @border-color-split: @menu-dark-bg;
286
+ @menu-popup-bg: @menu-dark-bg;
287
+
288
+ //
289
+ .ant-menu-inline .ant-menu-item::after {
290
+ left: 0;
291
+ right: initial;
292
+ }
293
+
294
+ .ant-menu.ant-menu-root > li > .ant-menu-title-content {
295
+ font-weight: 400;
296
+ }
297
+
298
+ .ant-menu-dark.ant-menu-inline .ant-menu-item-selected::after {
299
+ border-right: 3px solid #3e7eff;
300
+ }
301
+
302
+ .ant-menu.ant-menu-inline .ant-menu-item-selected::after {
303
+ border-right: 3px solid #3e7eff;
304
+ }
305
+
306
+ // empty
307
+ .ant-empty-img-simple {
308
+ &-ellipse {
309
+ fill: #f5f5f5;
310
+ fill-opacity: 1;
311
+ }
312
+
313
+ &-path {
314
+ fill: #fafafa;
315
+ stroke: #d9d9d9;
316
+ }
317
+
318
+ &-g {
319
+ stroke: #d9d9d9;
320
+ }
321
+ }
322
+ .ant-empty-img-default-path {
323
+ &-1 {
324
+ fill: #aeb8c2;
325
+ }
326
+ &-3 {
327
+ fill: #f5f5f7;
328
+ }
329
+ &-4 {
330
+ fill: #dce0e6;
331
+ }
332
+ &-5 {
333
+ fill: #dce0e6;
334
+ }
335
+ }
336
+
337
+ // tree
338
+ @tree-node-selected-bg: #f2f3f8;
339
+
340
+ .rc-virtual-list-scrollbar-thumb,
341
+ .ant-select-tree-list-scrollbar-thumb {
342
+ background: rgb(221, 221, 221) !important;
343
+ }