@yeeyoon/library 2.1.7 → 2.1.8

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.
@@ -3,1064 +3,1066 @@
3
3
 
4
4
  body {
5
5
  // :global {
6
- // Button
7
- .ant-btn {
8
- padding: 0 22px;
9
- }
10
- .ant-btn-primary {
11
- &:hover {
12
- background-color: @primary-color;
13
- border-color: @primary-color;
14
- box-shadow: 0px 4px 14px fade(@primary-color, 38%);
15
- }
16
- &:active,
17
- &:focus {
18
- background-color: @primary-color-active;
6
+ #root {
7
+ // Button
8
+ .ant-btn {
9
+ padding: 0 22px;
19
10
  }
20
- &:disabled,
21
- &:disabled:hover {
22
- color: @white;
23
- background-color: fade(@primary-color, 65%);
24
- }
25
- &.gradient {
26
- background: linear-gradient(45deg, #7367f0 0%, #9e95f5 100%);
27
- border: none;
11
+ .ant-btn-primary {
12
+ &:hover {
13
+ background-color: @primary-color;
14
+ border-color: @primary-color;
15
+ box-shadow: 0px 4px 14px fade(@primary-color, 38%);
16
+ }
17
+ &:active,
18
+ &:focus {
19
+ background-color: @primary-color-active;
20
+ }
21
+ &:disabled,
22
+ &:disabled:hover {
23
+ color: @white;
24
+ background-color: fade(@primary-color, 65%);
25
+ }
26
+ &.gradient {
27
+ background: linear-gradient(45deg, #7367f0 0%, #9e95f5 100%);
28
+ border: none;
29
+ }
28
30
  }
29
- }
30
- .ant-btn-default,
31
- .ant-btn-dashed {
32
- &:hover,
33
- &:disabled,
34
- &:disabled:hover {
35
- color: @default-color;
36
- border-color: @default-color;
37
- }
38
- &:active,
39
- &:focus {
40
- color: @default-color-active;
41
- background-color: fade(@default-color, 20%);
42
- border-color: @default-color;
43
- }
44
- &:disabled {
45
- opacity: 0.65;
31
+ .ant-btn-default,
32
+ .ant-btn-dashed {
33
+ &:hover,
34
+ &:disabled,
35
+ &:disabled:hover {
36
+ color: @default-color;
37
+ border-color: @default-color;
38
+ }
39
+ &:active,
40
+ &:focus {
41
+ color: @default-color-active;
42
+ background-color: fade(@default-color, 20%);
43
+ border-color: @default-color;
44
+ }
45
+ &:disabled {
46
+ opacity: 0.65;
47
+ }
46
48
  }
47
- }
48
- .ant-btn.ant-btn-text {
49
- color: @primary-color;
50
- &:hover {
51
- background-color: fade(@primary-color, 4%);
49
+ .ant-btn.ant-btn-text {
50
+ color: @primary-color;
51
+ &:hover {
52
+ background-color: fade(@primary-color, 4%);
53
+ }
54
+ &:active,
55
+ &:focus {
56
+ background-color: fade(@primary-color, 20%);
57
+ }
58
+ &:disabled {
59
+ color: @primary-color;
60
+ background-color: @white;
61
+ opacity: 0.65;
62
+ }
52
63
  }
53
- &:active,
54
- &:focus {
55
- background-color: fade(@primary-color, 20%);
64
+ .ant-btn-link {
65
+ &:hover {
66
+ color: @primary-color;
67
+ }
68
+ &:active,
69
+ &:focus {
70
+ color: @primary-color-active;
71
+ }
56
72
  }
57
- &:disabled {
58
- color: @primary-color;
59
- background-color: @white;
60
- opacity: 0.65;
73
+ .ant-btn-primary.ant-btn-dangerous {
74
+ &:hover {
75
+ background-color: @error-color;
76
+ box-shadow: 0px 0px 10px fade(@error-color, 65%);
77
+ }
78
+ &:active,
79
+ &:focus {
80
+ background-color: @error-color-active;
81
+ border-color: @error-color;
82
+ }
83
+ &:disabled,
84
+ &:disabled:hover {
85
+ color: fade(@white, 65%);
86
+ background-color: fade(@error-color, 65%);
87
+ }
88
+ &.gradient {
89
+ background: linear-gradient(43.96deg, @error-color 2.91%, #f08182 94.71%);
90
+ border: none;
91
+ }
61
92
  }
62
- }
63
- .ant-btn-link {
64
- &:hover {
65
- color: @primary-color;
93
+ .ant-btn-circle {
94
+ display: flex;
95
+ align-items: center;
96
+ justify-content: center;
97
+ width: 38px;
98
+ height: 38px;
99
+ padding: 0;
100
+ border-radius: 76px;
101
+ svg {
102
+ font-size: @font-heading-4;
103
+ }
66
104
  }
67
- &:active,
68
- &:focus {
69
- color: @primary-color-active;
105
+ .ant-btn-round {
106
+ border-radius: 24px;
70
107
  }
71
- }
72
- .ant-btn-primary.ant-btn-dangerous {
73
- &:hover {
74
- background-color: @error-color;
75
- box-shadow: 0px 0px 10px fade(@error-color, 65%);
76
- }
77
- &:active,
78
- &:focus {
79
- background-color: @error-color-active;
80
- border-color: @error-color;
81
- }
82
- &:disabled,
83
- &:disabled:hover {
84
- color: fade(@white, 65%);
85
- background-color: fade(@error-color, 65%);
86
- }
87
- &.gradient {
88
- background: linear-gradient(43.96deg, @error-color 2.91%, #f08182 94.71%);
89
- border: none;
108
+ .ant-btn-lg {
109
+ padding: 0 28px;
90
110
  }
91
- }
92
- .ant-btn-circle {
93
- display: flex;
94
- align-items: center;
95
- justify-content: center;
96
- width: 38px;
97
- height: 38px;
98
- padding: 0;
99
- border-radius: 76px;
100
- svg {
101
- font-size: @font-heading-4;
111
+ .ant-btn-sm {
112
+ padding: 0 19px;
102
113
  }
103
- }
104
- .ant-btn-round {
105
- border-radius: 24px;
106
- }
107
- .ant-btn-lg {
108
- padding: 0 28px;
109
- }
110
- .ant-btn-sm {
111
- padding: 0 19px;
112
- }
113
114
 
114
- // Table
115
- .ant-table {
116
- border: 1px solid #ebe9f1;
117
- }
118
- .ant-table-thead > tr > th {
119
- font-weight: 600;
120
- font-size: @font-paragraph-small;
121
- }
122
- .ant-table-tbody > tr > td,
123
- .ant-table tfoot > tr > td {
124
- color: @font-paragraph-color;
125
- }
126
- .ant-table-thead > tr > th,
127
- .ant-table-tbody > tr > td,
128
- .ant-table tfoot > tr > th,
129
- .ant-table tfoot > tr > td {
130
- padding: 10px 16px;
131
- border-bottom: 1px solid #ebe9f1;
132
- }
133
- .ant-table tbody > tr {
134
- &:last-of-type {
135
- td {
136
- border-bottom: none;
137
- }
115
+ // Table
116
+ .ant-table {
117
+ border: 1px solid #ebe9f1;
138
118
  }
139
- }
140
- .ant-table-thead > tr > th::before {
141
- width: 0 !important;
142
- }
143
- .ant-table-wrapper.borderless {
144
- .ant-table,
145
- th,
146
- td {
147
- border: none;
119
+ .ant-table-thead > tr > th {
120
+ font-weight: 600;
121
+ font-size: @font-paragraph-small;
148
122
  }
149
- }
150
-
151
- // Pagination
152
- .ant-pagination-item,
153
- .ant-pagination.mini .ant-pagination-item:not(.ant-pagination-item-active) {
154
- margin-right: 0;
155
- font-weight: 400;
156
- font-size: @font-paragraph;
157
- line-height: 32px;
158
- background-color: #f3f2f7;
159
- border: none;
160
- border-radius: 0;
161
- &:nth-of-type(2) {
162
- border-top-left-radius: 16px;
163
- border-bottom-left-radius: 16px;
164
- }
165
- &:nth-last-child(2) {
166
- border-top-right-radius: 16px;
167
- border-bottom-right-radius: 16px;
168
- }
169
- a {
123
+ .ant-table-tbody > tr > td,
124
+ .ant-table tfoot > tr > td {
170
125
  color: @font-paragraph-color;
171
126
  }
172
- }
173
- .ant-pagination.mini .ant-pagination-item:not(.ant-pagination-item-active) {
174
- font-size: @font-paragraph-small;
175
- line-height: 28px;
176
- &:nth-of-type(2) {
177
- border-top-left-radius: 14px;
178
- border-bottom-left-radius: 14px;
127
+ .ant-table-thead > tr > th,
128
+ .ant-table-tbody > tr > td,
129
+ .ant-table tfoot > tr > th,
130
+ .ant-table tfoot > tr > td {
131
+ padding: 10px 16px;
132
+ border-bottom: 1px solid #ebe9f1;
133
+ }
134
+ .ant-table tbody > tr {
135
+ &:last-of-type {
136
+ td {
137
+ border-bottom: none;
138
+ }
139
+ }
179
140
  }
180
- &:nth-last-child(2) {
181
- border-top-right-radius: 14px;
182
- border-bottom-right-radius: 14px;
141
+ .ant-table-thead > tr > th::before {
142
+ width: 0 !important;
183
143
  }
184
- }
185
- .ant-pagination-prev,
186
- .ant-pagination-next {
187
- .ant-pagination-item-link {
144
+ .ant-table-wrapper.borderless {
145
+ .ant-table,
146
+ th,
147
+ td {
148
+ border: none;
149
+ }
150
+ }
151
+
152
+ // Pagination
153
+ .ant-pagination-item,
154
+ .ant-pagination.mini .ant-pagination-item:not(.ant-pagination-item-active) {
155
+ margin-right: 0;
156
+ font-weight: 400;
157
+ font-size: @font-paragraph;
158
+ line-height: 32px;
188
159
  background-color: #f3f2f7;
189
160
  border: none;
190
- border-radius: 64px;
191
- > span {
192
- color: @primary-color;
161
+ border-radius: 0;
162
+ &:nth-of-type(2) {
163
+ border-top-left-radius: 16px;
164
+ border-bottom-left-radius: 16px;
193
165
  }
194
- }
195
- }
196
- .ant-pagination-prev {
197
- // .ant-pagination-item-link {
198
- margin-right: 6px;
199
- // }
200
- }
201
- .ant-pagination-next {
202
- // .ant-pagination-item-link {
203
- margin-left: 6px;
204
- // }
205
- }
206
- .ant-pagination-disabled {
207
- .ant-pagination-item-link {
208
- > span {
209
- color: #babfc7;
166
+ &:nth-last-child(2) {
167
+ border-top-right-radius: 16px;
168
+ border-bottom-right-radius: 16px;
210
169
  }
211
- }
212
- }
213
- .ant-pagination-item-active {
214
- position: relative;
215
- a {
216
- position: absolute;
217
- top: -2px;
218
- left: -2px;
219
- display: block;
220
- width: 36px;
221
- height: 36px;
222
- color: @white;
223
- font-weight: 400;
224
- line-height: 36px;
225
- background-color: @primary-color;
226
- border-radius: 72px;
227
- }
228
- &:hover {
229
170
  a {
230
- color: @white;
231
- font-weight: 400;
171
+ color: @font-paragraph-color;
232
172
  }
233
173
  }
234
- }
235
- .ant-pagination.mini .ant-pagination-item.ant-pagination-item-active {
236
- a {
237
- top: -2px;
238
- left: -2px;
239
- width: 32px;
240
- height: 32px;
174
+ .ant-pagination.mini .ant-pagination-item:not(.ant-pagination-item-active) {
241
175
  font-size: @font-paragraph-small;
242
- line-height: 32px;
243
- }
244
- }
245
- .ant-pagination-jump-next {
246
- margin-right: 0;
247
- }
248
-
249
- // Tag
250
- .ant-tag {
251
- height: 20px;
252
- padding: 1px 9px;
253
- font-weight: 600;
254
- line-height: 18px;
255
- border: none;
256
- border-radius: 4px;
257
- &.secondary {
258
- color: @default-color;
259
- }
260
- &.success {
261
- color: @success-color;
262
- }
263
- &.danger {
264
- color: @error-color;
265
- }
266
- &.warning {
267
- color: @warning-color;
176
+ line-height: 28px;
177
+ &:nth-of-type(2) {
178
+ border-top-left-radius: 14px;
179
+ border-bottom-left-radius: 14px;
180
+ }
181
+ &:nth-last-child(2) {
182
+ border-top-right-radius: 14px;
183
+ border-bottom-right-radius: 14px;
184
+ }
268
185
  }
269
- &.info {
270
- color: @info-color;
186
+ .ant-pagination-prev,
187
+ .ant-pagination-next {
188
+ .ant-pagination-item-link {
189
+ background-color: #f3f2f7;
190
+ border: none;
191
+ border-radius: 64px;
192
+ > span {
193
+ color: @primary-color;
194
+ }
195
+ }
271
196
  }
272
- &.dark {
273
- color: @dark-color;
197
+ .ant-pagination-prev {
198
+ // .ant-pagination-item-link {
199
+ margin-right: 6px;
200
+ // }
274
201
  }
275
- &.badge {
276
- color: @white;
202
+ .ant-pagination-next {
203
+ // .ant-pagination-item-link {
204
+ margin-left: 6px;
205
+ // }
277
206
  }
278
- }
279
-
280
- // Form
281
- .ant-form-item-has-error {
282
- :not(.ant-input-disabled).ant-input,
283
- :not(.ant-input-affix-wrapper-disabled).ant-input-affix-wrapper,
284
- :not(.ant-input-disabled).ant-input:hover,
285
- :not(.ant-input-affix-wrapper-disabled).ant-input-affix-wrapper:hover {
286
- border-color: @error-color;
207
+ .ant-pagination-disabled {
208
+ .ant-pagination-item-link {
209
+ > span {
210
+ color: #babfc7;
211
+ }
212
+ }
287
213
  }
288
- }
289
- .ant-form-item-label > label {
290
- color: @font-color;
291
- }
292
- // .ant-form-item {
293
- // align-items: center;
294
- // }
295
-
296
- // Input
297
- .ant-input:focus,
298
- .ant-input-focused,
299
- .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
300
- border-color: @primary-color;
301
- }
302
- .ant-input-prefix,
303
- .ant-input-suffix {
304
- color: @placeholder-color;
305
- }
306
- // Select
307
- .ant-select {
308
- color: @font-paragraph-color;
309
- }
310
- .ant-select-item {
311
- min-height: 40px;
312
- padding: 0 12px 0 18px;
313
- line-height: 40px;
314
- &:not(.ant-select-item-group):hover {
315
- background: fade(@primary-color, 12%);
316
- }
317
- &:not(.ant-select-item-group):focus,
318
- &:not(.ant-select-item-group):active,
319
- &.ant-select-item-option-selected {
320
- background: @primary-color;
321
- .ant-select-item-option-content {
214
+ .ant-pagination-item-active {
215
+ position: relative;
216
+ a {
217
+ position: absolute;
218
+ top: -2px;
219
+ left: -2px;
220
+ display: block;
221
+ width: 36px;
222
+ height: 36px;
322
223
  color: @white;
224
+ font-weight: 400;
225
+ line-height: 36px;
226
+ background-color: @primary-color;
227
+ border-radius: 72px;
323
228
  }
324
229
  &:hover {
325
- background: @primary-color;
230
+ a {
231
+ color: @white;
232
+ font-weight: 400;
233
+ }
326
234
  }
327
235
  }
328
- &.ant-select-item-option-selected {
329
- .anticon {
330
- color: @white;
236
+ .ant-pagination.mini .ant-pagination-item.ant-pagination-item-active {
237
+ a {
238
+ top: -2px;
239
+ left: -2px;
240
+ width: 32px;
241
+ height: 32px;
242
+ font-size: @font-paragraph-small;
243
+ line-height: 32px;
331
244
  }
332
245
  }
333
- }
334
- .ant-select-item-group {
335
- color: @font-color;
336
- font-weight: 600;
337
- font-size: @font-paragraph;
338
- }
339
- .ant-select-item-option-content {
340
- color: @font-paragraph-color;
341
- }
342
- .ant-select-single.ant-select-lg:not(.ant-select-customize-input)
343
- .ant-select-selector {
344
- height: 46px;
345
- }
346
- .ant-select-single.ant-select-lg:not(.ant-select-customize-input)
347
- .ant-select-selector::after,
348
- .ant-select-single.ant-select-lg:not(.ant-select-customize-input)
349
- .ant-select-selector
350
- .ant-select-selection-item,
351
- .ant-select-single.ant-select-lg:not(.ant-select-customize-input)
352
- .ant-select-selector
353
- .ant-select-selection-placeholder {
354
- line-height: 46px;
355
- }
356
- .ant-select-selection-overflow-item {
357
- .ant-select-selection-item {
358
- height: 24px;
359
- color: @white;
360
- background-color: @primary-color;
361
- border-color: @primary-color;
362
- border-radius: 3px;
363
- .anticon {
364
- color: @white;
365
- }
246
+ .ant-pagination-jump-next {
247
+ margin-right: 0;
366
248
  }
367
- }
368
- // Textarea
369
- textarea {
370
- resize: none;
371
- }
372
249
 
373
- // Checkbox
374
- .ant-checkbox-wrapper,
375
- .ant-checkbox-wrapper-disabled,
376
- .ant-radio-wrapper,
377
- .ant-radio-wrapper-disabled {
378
- color: @font-paragraph-color;
379
- .ant-checkbox-disabled + span,
380
- .ant-radio-disabled + span {
381
- color: @font-paragraph-color;
382
- }
383
- }
384
- .ant-checkbox-inner {
385
- border-color: @input-border-color;
386
- border-radius: 3px;
387
- }
388
- .ant-checkbox-checked.ant-checkbox-disabled,
389
- .ant-radio-checked.ant-radio-disabled {
390
- filter: none;
391
- .ant-checkbox-inner,
392
- .ant-radio-inner {
393
- background-color: fade(@primary-color, 65%);
394
- border: none;
395
- &::after {
396
- border-color: @white;
397
- }
398
- }
399
- }
400
- .ant-checkbox-checked,
401
- .ant-radio-checked {
402
- filter: drop-shadow(0px 2px 4px fade(@primary-color, 40%));
403
- }
404
- // Radio
405
- .ant-radio-checked {
406
- .ant-radio-inner {
250
+ // Tag
251
+ .ant-tag {
252
+ height: 20px;
253
+ padding: 1px 9px;
254
+ font-weight: 600;
255
+ line-height: 18px;
407
256
  border: none;
408
- &::after {
409
- top: 0;
410
- left: 0;
411
- width: 16px;
412
- height: 16px;
413
- }
414
- }
415
- }
416
-
417
- // Switch
418
- .ant-switch {
419
- line-height: 24px;
420
- border-radius: 14px;
421
- .ant-switch-handle {
422
- top: 5px;
423
- left: 6px;
424
- width: 14px;
425
- height: 14px;
426
- border-radius: 11px;
427
- box-shadow: -1px 2px 3px rgba(0, 0, 0, 0.2);
428
- }
429
- .anticon-check {
430
- svg {
431
- color: @white;
432
- }
433
- }
434
- &.ant-switch-checked {
435
- .ant-switch-handle {
436
- left: calc(100% - 20px);
437
- }
257
+ border-radius: 4px;
438
258
  &.secondary {
439
- background-color: @default-color;
259
+ color: @default-color;
440
260
  }
441
261
  &.success {
442
- background-color: @success-color;
262
+ color: @success-color;
443
263
  }
444
264
  &.danger {
445
- background-color: @error-color;
265
+ color: @error-color;
446
266
  }
447
267
  &.warning {
448
- background-color: @warning-color;
268
+ color: @warning-color;
449
269
  }
450
270
  &.info {
451
- background-color: @info-color;
271
+ color: @info-color;
452
272
  }
453
273
  &.dark {
454
- background-color: @dark-color;
274
+ color: @dark-color;
275
+ }
276
+ &.badge {
277
+ color: @white;
455
278
  }
456
279
  }
457
- }
458
280
 
459
- // DatePicker
460
- .ant-picker-header {
461
- border-bottom: none;
462
- & > button {
281
+ // Form
282
+ .ant-form-item-has-error {
283
+ :not(.ant-input-disabled).ant-input,
284
+ :not(.ant-input-affix-wrapper-disabled).ant-input-affix-wrapper,
285
+ :not(.ant-input-disabled).ant-input:hover,
286
+ :not(.ant-input-affix-wrapper-disabled).ant-input-affix-wrapper:hover {
287
+ border-color: @error-color;
288
+ }
289
+ }
290
+ .ant-form-item-label > label {
291
+ color: @font-color;
292
+ }
293
+ // .ant-form-item {
294
+ // align-items: center;
295
+ // }
296
+
297
+ // Input
298
+ .ant-input:focus,
299
+ .ant-input-focused,
300
+ .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
301
+ border-color: @primary-color;
302
+ }
303
+ .ant-input-prefix,
304
+ .ant-input-suffix {
305
+ color: @placeholder-color;
306
+ }
307
+ // Select
308
+ .ant-select {
463
309
  color: @font-paragraph-color;
464
310
  }
465
- }
466
- .ant-picker-header-view {
467
- button {
311
+ .ant-select-item {
312
+ min-height: 40px;
313
+ padding: 0 12px 0 18px;
314
+ line-height: 40px;
315
+ &:not(.ant-select-item-group):hover {
316
+ background: fade(@primary-color, 12%);
317
+ }
318
+ &:not(.ant-select-item-group):focus,
319
+ &:not(.ant-select-item-group):active,
320
+ &.ant-select-item-option-selected {
321
+ background: @primary-color;
322
+ .ant-select-item-option-content {
323
+ color: @white;
324
+ }
325
+ &:hover {
326
+ background: @primary-color;
327
+ }
328
+ }
329
+ &.ant-select-item-option-selected {
330
+ .anticon {
331
+ color: @white;
332
+ }
333
+ }
334
+ }
335
+ .ant-select-item-group {
468
336
  color: @font-color;
337
+ font-weight: 600;
338
+ font-size: @font-paragraph;
469
339
  }
470
- }
471
- .ant-picker-content {
472
- th {
340
+ .ant-select-item-option-content {
473
341
  color: @font-paragraph-color;
474
- font-weight: 400;
475
342
  }
476
- }
477
- .ant-picker-cell {
478
- color: @placeholder-color;
479
- &.ant-picker-cell-in-view {
343
+ .ant-select-single.ant-select-lg:not(.ant-select-customize-input)
344
+ .ant-select-selector {
345
+ height: 46px;
346
+ }
347
+ .ant-select-single.ant-select-lg:not(.ant-select-customize-input)
348
+ .ant-select-selector::after,
349
+ .ant-select-single.ant-select-lg:not(.ant-select-customize-input)
350
+ .ant-select-selector
351
+ .ant-select-selection-item,
352
+ .ant-select-single.ant-select-lg:not(.ant-select-customize-input)
353
+ .ant-select-selector
354
+ .ant-select-selection-placeholder {
355
+ line-height: 46px;
356
+ }
357
+ .ant-select-selection-overflow-item {
358
+ .ant-select-selection-item {
359
+ height: 24px;
360
+ color: @white;
361
+ background-color: @primary-color;
362
+ border-color: @primary-color;
363
+ border-radius: 3px;
364
+ .anticon {
365
+ color: @white;
366
+ }
367
+ }
368
+ }
369
+ // Textarea
370
+ textarea {
371
+ resize: none;
372
+ }
373
+
374
+ // Checkbox
375
+ .ant-checkbox-wrapper,
376
+ .ant-checkbox-wrapper-disabled,
377
+ .ant-radio-wrapper,
378
+ .ant-radio-wrapper-disabled {
480
379
  color: @font-paragraph-color;
380
+ .ant-checkbox-disabled + span,
381
+ .ant-radio-disabled + span {
382
+ color: @font-paragraph-color;
383
+ }
481
384
  }
482
- &.ant-picker-cell-selected,
483
- &.ant-picker-cell-range-start,
484
- &.ant-picker-cell-range-end {
485
- &:hover {
486
- .ant-picker-cell-inner {
487
- color: @white !important;
488
- background-color: @primary-color !important;
385
+ .ant-checkbox-inner {
386
+ border-color: @input-border-color;
387
+ border-radius: 3px;
388
+ }
389
+ .ant-checkbox-checked.ant-checkbox-disabled,
390
+ .ant-radio-checked.ant-radio-disabled {
391
+ filter: none;
392
+ .ant-checkbox-inner,
393
+ .ant-radio-inner {
394
+ background-color: fade(@primary-color, 65%);
395
+ border: none;
396
+ &::after {
397
+ border-color: @white;
489
398
  }
490
399
  }
491
400
  }
492
- &.ant-picker-cell-disabled {
493
- .ant-picker-cell-inner {
494
- background-color: #f6f6f6;
495
- border-radius: 0;
401
+ .ant-checkbox-checked,
402
+ .ant-radio-checked {
403
+ filter: drop-shadow(0px 2px 4px fade(@primary-color, 40%));
404
+ }
405
+ // Radio
406
+ .ant-radio-checked {
407
+ .ant-radio-inner {
408
+ border: none;
409
+ &::after {
410
+ top: 0;
411
+ left: 0;
412
+ width: 16px;
413
+ height: 16px;
414
+ }
496
415
  }
497
416
  }
498
- .ant-picker-cell-inner {
499
- width: 36px;
500
- height: 36px;
501
- line-height: 36px;
502
- border: 1px solid @white;
503
- border-radius: 18px;
504
- transition: none;
505
- &:focus,
506
- &:active {
507
- color: @white;
508
- background-color: @primary-color !important;
417
+
418
+ // Switch
419
+ .ant-switch {
420
+ line-height: 24px;
421
+ border-radius: 14px;
422
+ .ant-switch-handle {
423
+ top: 5px;
424
+ left: 6px;
425
+ width: 14px;
426
+ height: 14px;
427
+ border-radius: 11px;
428
+ box-shadow: -1px 2px 3px rgba(0, 0, 0, 0.2);
429
+ }
430
+ .anticon-check {
431
+ svg {
432
+ color: @white;
433
+ }
434
+ }
435
+ &.ant-switch-checked {
436
+ .ant-switch-handle {
437
+ left: calc(100% - 20px);
438
+ }
439
+ &.secondary {
440
+ background-color: @default-color;
441
+ }
442
+ &.success {
443
+ background-color: @success-color;
444
+ }
445
+ &.danger {
446
+ background-color: @error-color;
447
+ }
448
+ &.warning {
449
+ background-color: @warning-color;
450
+ }
451
+ &.info {
452
+ background-color: @info-color;
453
+ }
454
+ &.dark {
455
+ background-color: @dark-color;
456
+ }
509
457
  }
510
458
  }
511
- &:hover:not(.ant-picker-cell-in-view),
512
- &:hover:not(.ant-picker-cell-in-range),
513
- &:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) {
514
- .ant-picker-cell-inner {
515
- background: #f6f6f6;
516
- border: 1px solid#e6e6e6;
459
+
460
+ // DatePicker
461
+ .ant-picker-header {
462
+ border-bottom: none;
463
+ & > button {
464
+ color: @font-paragraph-color;
517
465
  }
518
466
  }
519
- &.ant-picker-cell-today {
520
- .ant-picker-cell-inner {
467
+ .ant-picker-header-view {
468
+ button {
469
+ color: @font-color;
470
+ }
471
+ }
472
+ .ant-picker-content {
473
+ th {
474
+ color: @font-paragraph-color;
475
+ font-weight: 400;
476
+ }
477
+ }
478
+ .ant-picker-cell {
479
+ color: @placeholder-color;
480
+ &.ant-picker-cell-in-view {
481
+ color: @font-paragraph-color;
482
+ }
483
+ &.ant-picker-cell-selected,
484
+ &.ant-picker-cell-range-start,
485
+ &.ant-picker-cell-range-end {
521
486
  &:hover {
522
- background-color: transparent;
487
+ .ant-picker-cell-inner {
488
+ color: @white !important;
489
+ background-color: @primary-color !important;
490
+ }
491
+ }
492
+ }
493
+ &.ant-picker-cell-disabled {
494
+ .ant-picker-cell-inner {
495
+ background-color: #f6f6f6;
496
+ border-radius: 0;
497
+ }
498
+ }
499
+ .ant-picker-cell-inner {
500
+ width: 36px;
501
+ height: 36px;
502
+ line-height: 36px;
503
+ border: 1px solid @white;
504
+ border-radius: 18px;
505
+ transition: none;
506
+ &:focus,
507
+ &:active {
508
+ color: @white;
509
+ background-color: @primary-color !important;
523
510
  }
511
+ }
512
+ &:hover:not(.ant-picker-cell-in-view),
513
+ &:hover:not(.ant-picker-cell-in-range),
514
+ &:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) {
515
+ .ant-picker-cell-inner {
516
+ background: #f6f6f6;
517
+ border: 1px solid#e6e6e6;
518
+ }
519
+ }
520
+ &.ant-picker-cell-today {
521
+ .ant-picker-cell-inner {
522
+ &:hover {
523
+ background-color: transparent;
524
+ }
525
+ &::before {
526
+ border-radius: 18px;
527
+ }
528
+ }
529
+ }
530
+ &.ant-picker-cell-in-range {
524
531
  &::before {
525
- border-radius: 18px;
532
+ background-color: transparent;
533
+ }
534
+ .ant-picker-cell-inner {
535
+ color: @primary-color;
536
+ background-color: rgba(105, 108, 255, 0.08);
537
+ border-radius: 0;
526
538
  }
527
539
  }
528
540
  }
529
- &.ant-picker-cell-in-range {
530
- &::before {
531
- background-color: transparent;
532
- }
541
+ .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single):not(.ant-picker-cell-range-start),
542
+ .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single):not(.ant-picker-cell-range-end) {
533
543
  .ant-picker-cell-inner {
534
- color: @primary-color;
535
- background-color: rgba(105, 108, 255, 0.08);
536
- border-radius: 0;
544
+ border-radius: 18px 0 0 18px;
537
545
  }
538
546
  }
539
- }
540
- .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single):not(.ant-picker-cell-range-start),
541
- .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single):not(.ant-picker-cell-range-end) {
542
- .ant-picker-cell-inner {
543
- border-radius: 18px 0 0 18px;
544
- }
545
- }
546
- .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single):not(.ant-picker-cell-range-start) {
547
- .ant-picker-cell-inner {
548
- border-radius: 0 18px 18px 0;
547
+ .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single):not(.ant-picker-cell-range-start) {
548
+ .ant-picker-cell-inner {
549
+ border-radius: 0 18px 18px 0;
550
+ }
549
551
  }
550
- }
551
- .ant-picker-decade-panel,
552
- .ant-picker-year-panel,
553
- .ant-picker-quarter-panel,
554
- .ant-picker-month-panel {
555
- .ant-picker-cell-inner {
556
- padding: 0;
552
+ .ant-picker-decade-panel,
553
+ .ant-picker-year-panel,
554
+ .ant-picker-quarter-panel,
555
+ .ant-picker-month-panel {
556
+ .ant-picker-cell-inner {
557
+ padding: 0;
558
+ }
557
559
  }
558
- }
559
- .ant-picker-year-panel {
560
- .ant-picker-cell-inner {
561
- width: 50px;
562
- height: 50px;
563
- line-height: 50px;
564
- border-radius: 25px;
560
+ .ant-picker-year-panel {
561
+ .ant-picker-cell-inner {
562
+ width: 50px;
563
+ height: 50px;
564
+ line-height: 50px;
565
+ border-radius: 25px;
566
+ }
565
567
  }
566
- }
567
- .ant-picker-decade-panel {
568
- .ant-picker-cell-inner {
569
- width: auto;
570
- min-width: 24px;
571
- height: 24px;
572
- line-height: 24px;
573
- border-radius: 2px;
568
+ .ant-picker-decade-panel {
569
+ .ant-picker-cell-inner {
570
+ width: auto;
571
+ min-width: 24px;
572
+ height: 24px;
573
+ line-height: 24px;
574
+ border-radius: 2px;
575
+ }
574
576
  }
575
- }
576
- .ant-picker-month-panel {
577
- .ant-picker-cell-inner {
578
- width: 46px;
579
- height: 46px;
580
- line-height: 46px;
581
- border-radius: 23px;
577
+ .ant-picker-month-panel {
578
+ .ant-picker-cell-inner {
579
+ width: 46px;
580
+ height: 46px;
581
+ line-height: 46px;
582
+ border-radius: 23px;
583
+ }
582
584
  }
583
- }
584
- // TimePicker
585
- .ant-picker-time-panel-column
586
- > li.ant-picker-time-panel-cell-selected
587
- .ant-picker-time-panel-cell-inner {
588
- color: @white;
589
- background-color: @primary-color;
590
- &:hover {
585
+ // TimePicker
586
+ .ant-picker-time-panel-column
587
+ > li.ant-picker-time-panel-cell-selected
588
+ .ant-picker-time-panel-cell-inner {
591
589
  color: @white;
592
- background-color: @primary-color !important;
590
+ background-color: @primary-color;
591
+ &:hover {
592
+ color: @white;
593
+ background-color: @primary-color !important;
594
+ }
593
595
  }
594
- }
595
596
 
596
- // Card
597
- .ant-card {
598
- color: @font-paragraph-color;
599
- border: none;
600
- border-radius: 6px;
601
- box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.06);
602
- &:not(.ant-card-small) {
603
- .ant-card-head-title {
604
- padding: 14px 0;
605
- font-weight: 500;
606
- font-size: @font-heading-5;
597
+ // Card
598
+ .ant-card {
599
+ color: @font-paragraph-color;
600
+ border: none;
601
+ border-radius: 6px;
602
+ box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.06);
603
+ &:not(.ant-card-small) {
604
+ .ant-card-head-title {
605
+ padding: 14px 0;
606
+ font-weight: 500;
607
+ font-size: @font-heading-5;
608
+ }
607
609
  }
608
610
  }
609
- }
610
- .ant-card-head {
611
- border-bottom: 1px solid #ebe9f1;
612
- }
613
-
614
- // Tabs
615
- .ant-tabs-top > .ant-tabs-nav::before,
616
- .ant-tabs-bottom > .ant-tabs-nav::before,
617
- .ant-tabs-top > div > .ant-tabs-nav::before,
618
- .ant-tabs-bottom > div > .ant-tabs-nav::before {
619
- border-bottom: none;
620
- }
611
+ .ant-card-head {
612
+ border-bottom: 1px solid #ebe9f1;
613
+ }
621
614
 
622
- .ant-tabs-tab {
623
- .ant-tabs-tab-btn {
624
- color: @font-color;
615
+ // Tabs
616
+ .ant-tabs-top > .ant-tabs-nav::before,
617
+ .ant-tabs-bottom > .ant-tabs-nav::before,
618
+ .ant-tabs-top > div > .ant-tabs-nav::before,
619
+ .ant-tabs-bottom > div > .ant-tabs-nav::before {
620
+ border-bottom: none;
625
621
  }
626
- &.ant-tabs-tab-disabled {
622
+
623
+ .ant-tabs-tab {
627
624
  .ant-tabs-tab-btn {
628
- color: @placeholder-color;
625
+ color: @font-color;
626
+ }
627
+ &.ant-tabs-tab-disabled {
628
+ .ant-tabs-tab-btn {
629
+ color: @placeholder-color;
630
+ }
629
631
  }
630
632
  }
631
- }
632
- .ant-tabs-ink-bar {
633
- box-shadow: 0px 0px 6px rgba(115, 103, 240, 0.45277);
634
- }
635
- .ant-tabs-card {
636
- .ant-tabs-tab {
637
- height: 38px;
638
- padding: 0 19px !important;
639
- line-height: 38px;
640
- background-color: transparent !important;
641
- border: none !important;
642
- border-radius: 5px !important;
643
- }
644
- .ant-tabs-tab-active {
645
- background-color: @primary-color !important;
646
- .ant-tabs-tab-btn {
647
- color: @white;
633
+ .ant-tabs-ink-bar {
634
+ box-shadow: 0px 0px 6px rgba(115, 103, 240, 0.45277);
635
+ }
636
+ .ant-tabs-card {
637
+ .ant-tabs-tab {
638
+ height: 38px;
639
+ padding: 0 19px !important;
640
+ line-height: 38px;
641
+ background-color: transparent !important;
642
+ border: none !important;
643
+ border-radius: 5px !important;
644
+ }
645
+ .ant-tabs-tab-active {
646
+ background-color: @primary-color !important;
647
+ .ant-tabs-tab-btn {
648
+ color: @white;
649
+ }
648
650
  }
649
651
  }
650
- }
651
- .ant-tabs-content-holder {
652
- border: none !important;
653
- }
652
+ .ant-tabs-content-holder {
653
+ border: none !important;
654
+ }
654
655
 
655
- // Menu
656
- .ant-menu {
657
- padding: 0 15px;
658
- border-right: none;
659
- }
660
- .ant-menu-item {
661
- padding-left: 24px !important;
662
- border-radius: 5px;
663
- &:active {
664
- color: @white !important;
656
+ // Menu
657
+ .ant-menu {
658
+ padding: 0 15px;
659
+ border-right: none;
660
+ }
661
+ .ant-menu-item {
662
+ padding-left: 24px !important;
663
+ border-radius: 5px;
664
+ &:active {
665
+ color: @white !important;
666
+ }
667
+ &:hover {
668
+ background-color: #f8f8f8;
669
+ }
665
670
  }
666
- &:hover {
667
- background-color: #f8f8f8;
671
+ .ant-menu-light .ant-menu-item:hover {
672
+ color: @font-color;
668
673
  }
669
- }
670
- .ant-menu-light .ant-menu-item:hover {
671
- color: @font-color;
672
- }
673
- .ant-menu-submenu-title {
674
- // height: auto !important;
675
- // line-height: normal !important;
676
- color: @placeholder-color !important;
677
- // font-size: @font-paragraph-small;
678
- &:active {
679
- background: transparent;
680
- }
681
- .ant-menu-submenu-arrow {
682
- color: @font-paragraph-color;
674
+ .ant-menu-submenu-title {
675
+ // height: auto !important;
676
+ // line-height: normal !important;
677
+ color: @placeholder-color !important;
678
+ // font-size: @font-paragraph-small;
679
+ &:active {
680
+ background: transparent;
681
+ }
682
+ .ant-menu-submenu-arrow {
683
+ color: @font-paragraph-color;
684
+ }
683
685
  }
684
- }
685
- .ant-menu-sub.ant-menu-inline {
686
- background-color: transparent;
687
- }
688
- .ant-menu-item-selected {
689
- color: @white;
690
- background: linear-gradient(46.62deg, #7367f0 0%, #9e95f5 93.64%);
691
- &:hover {
692
- color: @white !important;
686
+ .ant-menu-sub.ant-menu-inline {
687
+ background-color: transparent;
693
688
  }
694
- }
695
- .ant-menu-vertical,
696
- .ant-menu-vertical-left,
697
- .ant-menu-vertical-right,
698
- .ant-menu-inline {
699
- .ant-menu-item:not(:last-child) {
700
- margin-bottom: 0;
689
+ .ant-menu-item-selected {
690
+ color: @white;
691
+ background: linear-gradient(46.62deg, #7367f0 0%, #9e95f5 93.64%);
692
+ &:hover {
693
+ color: @white !important;
694
+ }
701
695
  }
702
- }
703
- .ant-menu-item .ant-menu-item-icon,
704
- .ant-menu-submenu-title .ant-menu-item-icon,
705
- .ant-menu-item .anticon,
706
- .ant-menu-submenu-title .anticon {
707
- font-size: 18px;
708
- }
709
-
710
- // Dropdown
711
- .ant-dropdown-menu {
712
- padding: 9px 0;
713
- border-radius: 6px;
714
- }
715
- .ant-dropdown-menu-item-icon,
716
- .ant-dropdown-menu-title-content {
717
- color: @font-paragraph-color;
718
- font-size: 14px;
719
- }
720
- .ant-dropdown-menu-item-divider {
721
- background-color: #ebe9f1;
722
- }
723
- .ant-dropdown-menu-item,
724
- .ant-dropdown-menu-submenu-title {
725
- padding: 8px 17px;
726
- &:hover {
727
- background-color: fade(@primary-color, 12%);
728
- .ant-dropdown-menu-item-icon,
729
- .ant-dropdown-menu-title-content {
730
- color: @primary-color;
696
+ .ant-menu-vertical,
697
+ .ant-menu-vertical-left,
698
+ .ant-menu-vertical-right,
699
+ .ant-menu-inline {
700
+ .ant-menu-item:not(:last-child) {
701
+ margin-bottom: 0;
731
702
  }
732
703
  }
733
- }
734
-
735
- // Tooltip
736
- .ant-tooltip-content {
737
- border-radius: 6px;
738
- .ant-tooltip-inner {
739
- min-height: 30px;
740
- padding: 4px 10px;
704
+ .ant-menu-item .ant-menu-item-icon,
705
+ .ant-menu-submenu-title .ant-menu-item-icon,
706
+ .ant-menu-item .anticon,
707
+ .ant-menu-submenu-title .anticon {
708
+ font-size: 18px;
741
709
  }
742
- }
743
710
 
744
- // Notification
745
- .ant-notification-notice {
746
- padding: 14px;
747
- border-radius: 4px;
748
- .ant-notification-notice-message {
749
- margin-left: 28px;
750
- color: @primary-color;
751
- font-weight: 600;
752
- font-size: 14px;
711
+ // Dropdown
712
+ .ant-dropdown-menu {
713
+ padding: 9px 0;
714
+ border-radius: 6px;
753
715
  }
754
- .ant-notification-notice-description {
755
- margin-left: 28px;
716
+ .ant-dropdown-menu-item-icon,
717
+ .ant-dropdown-menu-title-content {
756
718
  color: @font-paragraph-color;
757
- font-size: @font-paragraph-small;
719
+ font-size: 14px;
758
720
  }
759
- .ant-notification-notice-close {
760
- top: 4px;
761
- right: 10px;
762
- color: @font-paragraph-color;
763
- svg {
764
- font-size: @font-paragraph-small;
765
- }
721
+ .ant-dropdown-menu-item-divider {
722
+ background-color: #ebe9f1;
766
723
  }
767
- .ant-notification-notice-icon {
768
- margin-top: -2px;
769
- svg {
770
- font-size: 18px;
724
+ .ant-dropdown-menu-item,
725
+ .ant-dropdown-menu-submenu-title {
726
+ padding: 8px 17px;
727
+ &:hover {
728
+ background-color: fade(@primary-color, 12%);
729
+ .ant-dropdown-menu-item-icon,
730
+ .ant-dropdown-menu-title-content {
731
+ color: @primary-color;
732
+ }
771
733
  }
772
734
  }
773
- }
774
735
 
775
- // Modal
776
- .ant-modal-header {
777
- padding: 13px 26px;
778
- border-bottom: none;
779
- .ant-modal-title {
780
- color: @font-color;
781
- font-weight: 500;
782
- }
783
- }
784
- .ant-modal-body {
785
- color: @font-paragraph-color;
786
- }
787
- .ant-modal-footer {
788
- padding: 15px 16px;
789
- border-top: 1px solid #ebe9f1;
790
- }
791
- .ant-modal-close {
792
- .ant-modal-close-x {
793
- position: absolute;
794
- top: -6px;
795
- right: -6px;
796
- display: flex;
797
- align-items: center;
798
- justify-content: center;
799
- width: 34px;
800
- height: 34px;
801
- text-align: center;
802
- background-color: @white;
736
+ // Tooltip
737
+ .ant-tooltip-content {
803
738
  border-radius: 6px;
804
- box-shadow: 0px 3px 8px rgba(167, 174, 181, 0.4);
805
- svg {
806
- color: @font-paragraph-color;
739
+ .ant-tooltip-inner {
740
+ min-height: 30px;
741
+ padding: 4px 10px;
807
742
  }
808
743
  }
809
- }
810
- .ant-modal-confirm {
811
- .ant-modal-confirm-title {
812
- color: @font-color;
744
+
745
+ // Notification
746
+ .ant-notification-notice {
747
+ padding: 14px;
748
+ border-radius: 4px;
749
+ .ant-notification-notice-message {
750
+ margin-left: 28px;
751
+ color: @primary-color;
752
+ font-weight: 600;
753
+ font-size: 14px;
754
+ }
755
+ .ant-notification-notice-description {
756
+ margin-left: 28px;
757
+ color: @font-paragraph-color;
758
+ font-size: @font-paragraph-small;
759
+ }
760
+ .ant-notification-notice-close {
761
+ top: 4px;
762
+ right: 10px;
763
+ color: @font-paragraph-color;
764
+ svg {
765
+ font-size: @font-paragraph-small;
766
+ }
767
+ }
768
+ .ant-notification-notice-icon {
769
+ margin-top: -2px;
770
+ svg {
771
+ font-size: 18px;
772
+ }
773
+ }
813
774
  }
814
- .ant-modal-confirm-content {
815
- color: @font-paragraph-color;
775
+
776
+ // Modal
777
+ .ant-modal-header {
778
+ padding: 13px 26px;
779
+ border-bottom: none;
780
+ .ant-modal-title {
781
+ color: @font-color;
782
+ font-weight: 500;
783
+ }
816
784
  }
817
785
  .ant-modal-body {
818
- padding: 24px;
786
+ color: @font-paragraph-color;
819
787
  }
820
- }
821
-
822
- // List
823
- .ant-list {
824
- &:not(.ant-list-lg):not(.ant-list-sm) {
825
- .ant-list-item {
826
- padding: 12px 20px !important;
788
+ .ant-modal-footer {
789
+ padding: 15px 16px;
790
+ border-top: 1px solid #ebe9f1;
791
+ }
792
+ .ant-modal-close {
793
+ .ant-modal-close-x {
794
+ position: absolute;
795
+ top: -6px;
796
+ right: -6px;
797
+ display: flex;
798
+ align-items: center;
799
+ justify-content: center;
800
+ width: 34px;
801
+ height: 34px;
802
+ text-align: center;
803
+ background-color: @white;
804
+ border-radius: 6px;
805
+ box-shadow: 0px 3px 8px rgba(167, 174, 181, 0.4);
806
+ svg {
807
+ color: @font-paragraph-color;
808
+ }
827
809
  }
828
810
  }
829
- }
830
- .ant-list-item {
831
- color: @font-paragraph-color;
832
- &:hover {
833
- background-color: #f8f8f8;
834
- }
835
- p {
836
- color: @placeholder-color;
811
+ .ant-modal-confirm {
812
+ .ant-modal-confirm-title {
813
+ color: @font-color;
814
+ }
815
+ .ant-modal-confirm-content {
816
+ color: @font-paragraph-color;
817
+ }
818
+ .ant-modal-body {
819
+ padding: 24px;
820
+ }
837
821
  }
838
- }
839
- .ant-list-split .ant-list-item {
840
- border-bottom: 1px solid #ebe9f1;
841
- }
842
- .ant-list-bordered {
843
- border: 1px solid #ebe9f1;
844
- }
845
- .ant-list-item-meta-avatar {
846
- color: @font-paragraph-color;
847
- font-size: 16px;
848
- }
849
- .ant-list-item-meta-title {
850
- color: @font-paragraph-color;
851
- font-weight: 600;
852
- }
853
822
 
854
- // Avatar
855
- .ant-avatar-square {
856
- border-radius: 6px;
857
- }
858
- .ant-avatar-group {
859
- .ant-avatar {
860
- width: 34px;
861
- height: 34px;
862
- line-height: 34px;
863
- border: 2px solid @white;
864
- .ant-avatar-string {
865
- top: 50%;
866
- transform: scale(1) translateX(-50%) translateY(-50%) !important;
823
+ // List
824
+ .ant-list {
825
+ &:not(.ant-list-lg):not(.ant-list-sm) {
826
+ .ant-list-item {
827
+ padding: 12px 20px !important;
828
+ }
867
829
  }
868
830
  }
869
- .ant-avatar-lg {
870
- width: 52px;
871
- height: 52px;
872
- line-height: 52px;
873
- &.ant-avatar:not(:first-child) {
874
- margin-left: -13px;
831
+ .ant-list-item {
832
+ color: @font-paragraph-color;
833
+ &:hover {
834
+ background-color: #f8f8f8;
875
835
  }
876
- .ant-avatar-string {
877
- font-size: @font-heading-3;
836
+ p {
837
+ color: @placeholder-color;
878
838
  }
879
839
  }
880
- .ant-avatar-sm {
881
- width: 26px;
882
- height: 26px;
883
- line-height: 26px;
884
- &.ant-avatar:not(:first-child) {
885
- margin-left: -6.5px;
886
- }
887
- .ant-avatar-string {
888
- font-size: @font-paragraph-tiny;
889
- }
840
+ .ant-list-split .ant-list-item {
841
+ border-bottom: 1px solid #ebe9f1;
890
842
  }
891
- }
892
-
893
- // Message
894
- .ant-message-notice-content {
895
- box-shadow: none;
896
- .ant-message-success,
897
- .ant-message-error,
898
- .ant-message-info,
899
- .ant-message-warning {
900
- padding: 10px 15px;
901
- border-radius: 4px;
843
+ .ant-list-bordered {
844
+ border: 1px solid #ebe9f1;
902
845
  }
903
- .ant-message-success {
904
- color: @success-color;
905
- background-color: fade(@success-color, 12%);
846
+ .ant-list-item-meta-avatar {
847
+ color: @font-paragraph-color;
848
+ font-size: 16px;
906
849
  }
907
- .ant-message-error {
908
- color: @error-color;
909
- background-color: fade(@error-color, 12%);
850
+ .ant-list-item-meta-title {
851
+ color: @font-paragraph-color;
852
+ font-weight: 600;
910
853
  }
911
- .ant-message-info {
912
- color: @info-color;
913
- background-color: fade(@info-color, 12%);
854
+
855
+ // Avatar
856
+ .ant-avatar-square {
857
+ border-radius: 6px;
914
858
  }
915
- .ant-message-warning {
916
- color: @warning-color;
917
- background-color: fade(@warning-color, 12%);
859
+ .ant-avatar-group {
860
+ .ant-avatar {
861
+ width: 34px;
862
+ height: 34px;
863
+ line-height: 34px;
864
+ border: 2px solid @white;
865
+ .ant-avatar-string {
866
+ top: 50%;
867
+ transform: scale(1) translateX(-50%) translateY(-50%) !important;
868
+ }
869
+ }
870
+ .ant-avatar-lg {
871
+ width: 52px;
872
+ height: 52px;
873
+ line-height: 52px;
874
+ &.ant-avatar:not(:first-child) {
875
+ margin-left: -13px;
876
+ }
877
+ .ant-avatar-string {
878
+ font-size: @font-heading-3;
879
+ }
880
+ }
881
+ .ant-avatar-sm {
882
+ width: 26px;
883
+ height: 26px;
884
+ line-height: 26px;
885
+ &.ant-avatar:not(:first-child) {
886
+ margin-left: -6.5px;
887
+ }
888
+ .ant-avatar-string {
889
+ font-size: @font-paragraph-tiny;
890
+ }
891
+ }
918
892
  }
919
- }
920
893
 
921
- // Collapse
922
- .ant-collapse {
923
- background-color: transparent;
924
- border: none;
925
- border-radius: 0;
926
- > .ant-collapse-item {
927
- margin-bottom: 5px;
928
- border-bottom: 1px solid#EBE9F1 !important;
929
- &.ant-collapse-item-active {
930
- border-bottom: none !important;
894
+ // Message
895
+ .ant-message-notice-content {
896
+ box-shadow: none;
897
+ .ant-message-success,
898
+ .ant-message-error,
899
+ .ant-message-info,
900
+ .ant-message-warning {
901
+ padding: 10px 15px;
902
+ border-radius: 4px;
931
903
  }
932
- .ant-collapse-header {
933
- background-color: @white;
904
+ .ant-message-success {
905
+ color: @success-color;
906
+ background-color: fade(@success-color, 12%);
907
+ }
908
+ .ant-message-error {
909
+ color: @error-color;
910
+ background-color: fade(@error-color, 12%);
911
+ }
912
+ .ant-message-info {
913
+ color: @info-color;
914
+ background-color: fade(@info-color, 12%);
915
+ }
916
+ .ant-message-warning {
917
+ color: @warning-color;
918
+ background-color: fade(@warning-color, 12%);
934
919
  }
935
920
  }
936
- > .ant-collapse-item:last-child,
937
- > .ant-collapse-item:last-child > .ant-collapse-header {
921
+
922
+ // Collapse
923
+ .ant-collapse {
924
+ background-color: transparent;
925
+ border: none;
938
926
  border-radius: 0;
939
- }
940
- .ant-collapse-content-active {
941
- border-top: none;
942
- }
943
- }
944
- .ant-collapse.ant-collapse-shadow {
945
- padding: 10px 12px;
946
- border-radius: 6px;
947
- box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.06);
948
- > .ant-collapse-item {
949
- border-bottom: none !important;
950
- &.ant-collapse-item-active {
951
- border-radius: 4px;
952
- box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
953
- .ant-collapse-header {
954
- border-top-left-radius: 4px;
955
- border-top-right-radius: 4px;
927
+ > .ant-collapse-item {
928
+ margin-bottom: 5px;
929
+ border-bottom: 1px solid#EBE9F1 !important;
930
+ &.ant-collapse-item-active {
931
+ border-bottom: none !important;
956
932
  }
957
- .ant-collapse-content {
958
- border-bottom-right-radius: 4px;
959
- border-bottom-left-radius: 4px;
933
+ .ant-collapse-header {
934
+ background-color: @white;
960
935
  }
961
936
  }
937
+ > .ant-collapse-item:last-child,
938
+ > .ant-collapse-item:last-child > .ant-collapse-header {
939
+ border-radius: 0;
940
+ }
941
+ .ant-collapse-content-active {
942
+ border-top: none;
943
+ }
962
944
  }
963
- }
964
-
965
- // Popconfirm
966
- .ant-popover-message-title {
967
- padding-left: 0;
968
- color: @font-paragraph-color;
969
- }
970
- .ant-popover-buttons {
971
- display: flex;
972
- justify-content: space-between;
973
- button {
974
- margin: 0;
975
- }
976
- }
977
- .ant-popover-inner {
978
- border-radius: 6px;
979
- .ant-popover-inner-content {
980
- padding: 13px 17px;
945
+ .ant-collapse.ant-collapse-shadow {
946
+ padding: 10px 12px;
947
+ border-radius: 6px;
948
+ box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.06);
949
+ > .ant-collapse-item {
950
+ border-bottom: none !important;
951
+ &.ant-collapse-item-active {
952
+ border-radius: 4px;
953
+ box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
954
+ .ant-collapse-header {
955
+ border-top-left-radius: 4px;
956
+ border-top-right-radius: 4px;
957
+ }
958
+ .ant-collapse-content {
959
+ border-bottom-right-radius: 4px;
960
+ border-bottom-left-radius: 4px;
961
+ }
962
+ }
963
+ }
981
964
  }
982
- }
983
965
 
984
- // Slider
985
- .ant-slider {
986
- .ant-slider-track,
987
- .ant-slider-rail {
988
- border-radius: 3px;
989
- }
990
- .ant-slider-handle {
991
- border-radius: 8px;
966
+ // Popconfirm
967
+ .ant-popover-message-title {
968
+ padding-left: 0;
969
+ color: @font-paragraph-color;
992
970
  }
993
- &:not(.ant-slider-vertical) {
994
- .ant-slider-track,
995
- .ant-slider-rail {
996
- height: 6px;
971
+ .ant-popover-buttons {
972
+ display: flex;
973
+ justify-content: space-between;
974
+ button {
975
+ margin: 0;
997
976
  }
998
- .ant-slider-handle {
999
- margin-top: -4px;
977
+ }
978
+ .ant-popover-inner {
979
+ border-radius: 6px;
980
+ .ant-popover-inner-content {
981
+ padding: 13px 17px;
1000
982
  }
1001
983
  }
1002
- &.ant-slider-vertical {
984
+
985
+ // Slider
986
+ .ant-slider {
1003
987
  .ant-slider-track,
1004
988
  .ant-slider-rail {
1005
- width: 6px;
989
+ border-radius: 3px;
1006
990
  }
1007
991
  .ant-slider-handle {
1008
- margin-left: -4px;
992
+ border-radius: 8px;
1009
993
  }
1010
- }
1011
- .ant-slider-step {
1012
- .ant-slider-dot {
1013
- width: 10px;
1014
- height: 10px;
994
+ &:not(.ant-slider-vertical) {
995
+ .ant-slider-track,
996
+ .ant-slider-rail {
997
+ height: 6px;
998
+ }
999
+ .ant-slider-handle {
1000
+ margin-top: -4px;
1001
+ }
1015
1002
  }
1016
- }
1017
- .ant-slider-mark {
1018
- .ant-slider-mark-text {
1019
- color: fade(@font-paragraph-color, 45%);
1020
- font-size: @font-paragraph-small;
1003
+ &.ant-slider-vertical {
1004
+ .ant-slider-track,
1005
+ .ant-slider-rail {
1006
+ width: 6px;
1007
+ }
1008
+ .ant-slider-handle {
1009
+ margin-left: -4px;
1010
+ }
1021
1011
  }
1022
- .ant-slider-mark-text-active {
1023
- color: @font-paragraph-color;
1012
+ .ant-slider-step {
1013
+ .ant-slider-dot {
1014
+ width: 10px;
1015
+ height: 10px;
1016
+ }
1017
+ }
1018
+ .ant-slider-mark {
1019
+ .ant-slider-mark-text {
1020
+ color: fade(@font-paragraph-color, 45%);
1021
+ font-size: @font-paragraph-small;
1022
+ }
1023
+ .ant-slider-mark-text-active {
1024
+ color: @font-paragraph-color;
1025
+ }
1024
1026
  }
1025
1027
  }
1026
- }
1027
1028
 
1028
- // Descriptions
1029
- .ant-descriptions-title {
1030
- color: @font-color;
1031
- }
1032
- .ant-descriptions-item-label,
1033
- .ant-descriptions-item-content {
1034
- color: @font-paragraph-color;
1035
- }
1029
+ // Descriptions
1030
+ .ant-descriptions-title {
1031
+ color: @font-color;
1032
+ }
1033
+ .ant-descriptions-item-label,
1034
+ .ant-descriptions-item-content {
1035
+ color: @font-paragraph-color;
1036
+ }
1036
1037
 
1037
- // Alert
1038
- .ant-alert {
1039
- padding: 10px 15px;
1040
- border: none;
1041
- border-radius: 4px;
1042
- &.ant-alert-success {
1043
- .ant-alert-message,
1044
- .ant-alert-description {
1045
- color: @success-color;
1038
+ // Alert
1039
+ .ant-alert {
1040
+ padding: 10px 15px;
1041
+ border: none;
1042
+ border-radius: 4px;
1043
+ &.ant-alert-success {
1044
+ .ant-alert-message,
1045
+ .ant-alert-description {
1046
+ color: @success-color;
1047
+ }
1046
1048
  }
1047
- }
1048
- &.ant-alert-info {
1049
- .ant-alert-message,
1050
- .ant-alert-description {
1051
- color: @info-color;
1049
+ &.ant-alert-info {
1050
+ .ant-alert-message,
1051
+ .ant-alert-description {
1052
+ color: @info-color;
1053
+ }
1052
1054
  }
1053
- }
1054
- &.ant-alert-warning {
1055
- .ant-alert-message,
1056
- .ant-alert-description {
1057
- color: @warning-color;
1055
+ &.ant-alert-warning {
1056
+ .ant-alert-message,
1057
+ .ant-alert-description {
1058
+ color: @warning-color;
1059
+ }
1058
1060
  }
1059
- }
1060
- &.ant-alert-error {
1061
- .ant-alert-message,
1062
- .ant-alert-description {
1063
- color: @error-color;
1061
+ &.ant-alert-error {
1062
+ .ant-alert-message,
1063
+ .ant-alert-description {
1064
+ color: @error-color;
1065
+ }
1064
1066
  }
1065
1067
  }
1066
1068
  }