benivo-ui-library 1.8.90 → 1.8.92

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.
Files changed (6) hide show
  1. package/button.less +414 -278
  2. package/buttonOld.less +485 -0
  3. package/index.js +1 -1
  4. package/package.json +1 -1
  5. package/splashScreen.less +134 -0
  6. package/variables.less +16 -9
package/button.less CHANGED
@@ -2,18 +2,6 @@
2
2
  // Buttons
3
3
  //
4
4
  .client-hub {
5
- .btn {
6
- font-family: proxima-nova, sans-serif;
7
- font-weight: 400;
8
- font-size: 0.875rem;
9
- line-height: 1;
10
- font-style: normal;
11
- text-decoration: none;
12
- text-transform: none;
13
- letter-spacing: normal;
14
- .border-radius(.25rem) !important;
15
- }
16
-
17
5
  .dropdown .btn {
18
6
  &:first-child {
19
7
  border-bottom-right-radius: 0 !important;
@@ -30,7 +18,10 @@
30
18
  .btn {
31
19
  position: relative;
32
20
  display: inline-block;
33
- min-width: @btn-min-width;
21
+ display: inline-flex;
22
+ align-items: center;
23
+ justify-content: center;
24
+ gap: .5rem;
34
25
  text-align: center;
35
26
  white-space: nowrap;
36
27
  vertical-align: middle;
@@ -40,7 +31,6 @@
40
31
  background: transparent;
41
32
  color: inherit;
42
33
  outline: none;
43
- margin-right: @btn-mrg-right;
44
34
  padding: @btn-padding;
45
35
  font-family: @btn-font-family;
46
36
  font-weight: @btn-font-weight;
@@ -56,13 +46,27 @@
56
46
  .appearance(none);
57
47
  .transition(@btn-transition);
58
48
 
59
- &:hover {
60
- text-decoration: @btn-text-decoration;
49
+ &:focus-visible {
50
+ outline: 2px solid var(--primary-light);
51
+ outline-offset: 2px;
61
52
  }
62
53
 
63
- &:last-child,
64
- &.btn-block {
65
- margin-right: 0;
54
+ &.loading {
55
+ opacity: .5;
56
+ pointer-events: none;
57
+ }
58
+
59
+ &.disabled,
60
+ &.disable,
61
+ &:disabled,
62
+ &[disabled] {
63
+ opacity: .5;
64
+ cursor: not-allowed;
65
+ pointer-events: none;
66
+
67
+ label {
68
+ cursor: not-allowed;
69
+ }
66
70
  }
67
71
 
68
72
  &.no-border {
@@ -73,173 +77,115 @@
73
77
  width: 100%;
74
78
  }
75
79
 
76
- @media @md-max {
77
- &.btn-sm-block {
78
- width: 100%;
79
- }
80
+ .btn-icon {
81
+ font-size: 1rem;
82
+ display: inline-flex;
83
+ align-items: center;
80
84
  }
81
85
 
82
- &.btn-xs {
83
- padding: @btn-lg-padding;
86
+ .btn-text {
87
+ line-height: 1;
88
+ }
84
89
 
85
- @media @lg {
86
- padding: @btn-xs-padding;
90
+ span {
91
+ &.hide {
92
+ visibility: hidden;
87
93
  }
88
94
  }
89
95
 
90
- &.btn-sm {
91
- padding: @btn-lg-padding;
96
+ .bn-spinner-overlay {
97
+ position: absolute;
98
+ top: 0;
99
+ left: 0;
100
+ .border-radius(@btn-brd-radius);
101
+ }
92
102
 
93
- @media @lg {
94
- padding: @btn-sm-padding;
103
+ .bn-spinner {
104
+ div {
105
+ border-color: var(--white) transparent transparent transparent;
95
106
  }
96
107
  }
97
108
 
98
- &.btn-md {
99
- padding: @btn-lg-padding;
100
-
101
- @media @lg {
102
- padding: @btn-md-padding;
103
- }
109
+ &.bold {
110
+ font-weight: @font-weight-bold;
104
111
  }
105
112
 
106
- &.btn-lg {
107
- padding: @btn-lg-padding;
108
- height: auto;
113
+ // size scale
114
+ &.btn-xs {
115
+ height: 36px;
116
+ padding: @btn-xs-padding;
117
+ font-size: @btn-xs-font-size;
109
118
  }
110
119
 
111
- &.btn-xl {
112
- padding: @btn-xl-padding;
113
- font-size: 1.25rem;
120
+ &.btn-sm {
121
+ height: 40px;
122
+ padding: @btn-sm-padding;
123
+ font-size: @btn-sm-font-size;
114
124
  }
115
125
 
116
- &.disabled,
117
- &.disable,
118
- &:disabled {
119
- opacity: 0.5;
120
- cursor: not-allowed;
121
- pointer-events: none;
126
+ &.btn-md {
127
+ height: 44px;
128
+ padding: @btn-md-padding;
129
+ font-size: @btn-md-font-size;
130
+ }
122
131
 
123
- label {
124
- cursor: not-allowed;
125
- }
132
+ &.btn-lg {
133
+ height: 48px;
134
+ padding: @btn-lg-padding;
135
+ font-size: @btn-lg-font-size;
126
136
  }
127
137
 
128
- &.blocked:not(.inactive) {
129
- pointer-events: none;
130
- opacity: 0.5;
138
+ &.btn-xl {
139
+ height: 60px;
140
+ padding: @btn-xl-padding;
141
+ font-size: @btn-xl-font-size;
131
142
  }
132
143
 
133
- &.loading {
134
- cursor: not-allowed;
135
- pointer-events: none;
136
- display: inline-flex !important;
144
+ &.btn-icon-only {
145
+ padding: 0;
146
+ width: 40px;
147
+ min-width: 36px;
137
148
  justify-content: center;
149
+ display: inline-flex;
138
150
  align-items: center;
139
151
 
140
- label {
141
- cursor: not-allowed;
142
- }
143
-
144
152
  .btn-text {
145
- padding-right: 0.5rem;
146
- padding-left: 0.5rem;
147
- }
148
-
149
- &.btn-with-icon {
150
- .btn-icon {
151
- display: none;
152
- }
153
+ display: none;
153
154
  }
154
155
  }
155
156
 
156
- &.btn-link {
157
- color: var(--primary);
158
- border: none;
159
-
160
- .bn-spinner {
161
- div {
162
- border-color: var(--primary) transparent transparent transparent;
163
- }
164
- }
165
-
166
- .btn-icon {
167
- color: var(--primary);
157
+ &.btn-xs.btn-icon-only {
158
+ width: 36px;
159
+ }
168
160
 
169
- &:before {
170
- color: var(--primary);
171
- }
172
- }
161
+ &.btn-sm.btn-icon-only {
162
+ width: 40px;
173
163
  }
174
164
 
175
- &.bg-grey {
176
- border: 1px solid var(--border-200) !important;
177
- background-color: var(--bg-50) !important;
178
- color: var(--white) !important;
179
- opacity: 1 !important;
165
+ &.btn-md.btn-icon-only {
166
+ width: 44px;
180
167
  }
181
168
 
182
- &.btn-grey-standard {
183
- border: 1px solid rgba(0, 0, 0, 0.12);
184
- background-color: var(--bg-50);
185
- background-image: linear-gradient(to top, var(--bg-50), var(--white)) !important;
186
- text-transform: none;
187
- text-align: center;
188
- font-family: proxima-nova, sans-serif;
189
- font-weight: @font-weight-medium;
190
- min-width: 160px;
191
- margin-right: 1.5rem;
192
- color: var(--text-600);
193
- .border-radius(4px) !important;
169
+ &.btn-lg.btn-icon-only {
170
+ width: 48px;
194
171
  }
195
172
 
196
- &.btn-grey {
197
- border: 1px solid rgba(0, 0, 0, 0.12) !important;
198
- background-color: var(--bg-50) !important;
199
- background-image: linear-gradient(to top, var(--bg-50), var(--white));
200
- text-transform: none;
201
- padding: 10px 0;
202
- text-align: center;
203
- font-family: proxima-nova, sans-serif;
204
- font-weight: @font-weight-medium;
205
- min-width: 160px;
206
- margin-right: 1.5rem;
207
- color: var(--text-600) !important;
208
- .border-radius(4px) !important;
209
-
210
- &:before {
211
- content: "";
212
- position: absolute;
213
- height: 100%;
214
- width: 1px;
215
- background: rgba(0, 0, 0, 0.12);
216
- left: 32px;
217
- top: 0;
218
- }
219
-
220
- &.btn-with-icon {
221
- .btn-icon {
222
- border-right: 0;
223
- font-size: @extra-small-font-size !important;
224
- margin: -0.5rem 0.7rem -0.5rem 0.7rem;
225
- }
173
+ &.btn-xl.btn-icon-only {
174
+ width: 60px;
175
+ }
226
176
 
227
- .btn-text {
228
- width: 100%;
229
- text-align: center;
230
- }
231
- }
177
+ &.btn-link,
178
+ &.btn-ghost {
179
+ background: transparent;
180
+ border: none;
181
+ color: var(--primary);
232
182
 
233
- &:hover {
234
- color: var(--text-600) !important;
235
- background-color: var(--bg-50);
236
- background-image: linear-gradient(to top, var(--bg-50), var(--bg-50));
183
+ &:not(.disabled):not([disabled]):hover {
184
+ text-decoration: underline;
237
185
  }
238
186
  }
239
187
 
240
188
  &.btn-with-icon {
241
- padding-left: 0;
242
- padding-right: 0;
243
189
  display: inline-flex;
244
190
  align-items: center;
245
191
  text-align: left;
@@ -264,31 +210,9 @@
264
210
  }
265
211
  }
266
212
 
267
- .bn-spinner-overlay {
268
- position: absolute;
269
- top: 0;
270
- left: 0;
271
- .border-radius(@btn-brd-radius);
272
- }
273
-
274
- span {
275
- &.hide {
276
- visibility: hidden;
277
- }
278
- }
279
-
280
- &.bold {
281
- font-weight: @font-weight-bold;
282
- }
283
-
284
- .bn-spinner {
285
- div {
286
- border-color: var(--white) transparent transparent transparent;
287
- }
288
- }
289
-
290
213
  &.btn-with-icon-place {
291
214
  padding: 0;
215
+ gap: 0;
292
216
  display: flex;
293
217
  background: transparent;
294
218
  border: none;
@@ -298,7 +222,7 @@
298
222
  width: 40px;
299
223
  height: 40px;
300
224
  .border-radius(@btn-brd-radius 0 0 @btn-brd-radius);
301
- border: solid 1px rgba(0, 0, 0, 0.1);
225
+ // border: solid 1px rgba(0, 0, 0, 0.1);
302
226
  background: color-mix(in srgb, black 10%, transparent);
303
227
  color: inherit;
304
228
  font-size: 24px;
@@ -313,7 +237,7 @@
313
237
  height: 40px;
314
238
  padding: 0 30px;
315
239
  .border-radius(0 @btn-brd-radius @btn-brd-radius 0);
316
- border: solid 1px rgba(0, 0, 0, 0.1);
240
+ // border: solid 1px rgba(0, 0, 0, 0.1);
317
241
  background: transparent;
318
242
  color: inherit;
319
243
  font-weight: @font-weight-semibold;
@@ -321,6 +245,20 @@
321
245
  white-space: nowrap;
322
246
  cursor: pointer;
323
247
  }
248
+
249
+ &.btn-icon-right {
250
+ // flex-direction: row-reverse;
251
+
252
+ .btn-icon {
253
+ .border-radius(0 @btn-brd-radius @btn-brd-radius 0);
254
+ margin-right: 0;
255
+ margin-left: -1px;
256
+ }
257
+
258
+ .btn-text {
259
+ .border-radius(@btn-brd-radius 0 0 @btn-brd-radius);
260
+ }
261
+ }
324
262
  }
325
263
 
326
264
  &.btn-reject {
@@ -334,152 +272,350 @@
334
272
  }
335
273
  }
336
274
 
337
- &.has-error {
338
- border-color: var(--error-main) !important;
339
- }
275
+ &.btn-variant-contained {
276
+ &.btn-color-primary {
277
+ color: var(--white);
278
+ background: var(--primary);
340
279
 
341
- &.btn-danger {
342
- color: var(--white) !important;
343
- border-color: var(--error-main) !important;
344
- background-color: var(--error-main) !important;
345
- }
346
- }
280
+ &:hover {
281
+ background: color-mix(in srgb, black 10%, var(--primary));
282
+ }
347
283
 
348
- #btn-card,
349
- #btn-paypal,
350
- #btn-vitesse,
351
- .btn-default:not(.btn-with-icon-place),
352
- .download-btn:not(.btn-with-icon-place) {
353
- background: var(--primary);
354
- background-image: @default-btn-bg-gradient;
355
- color: var(--white);
356
- border-color: var(--primary);
357
-
358
- &:not(.no-hover) {
359
-
360
- &:hover,
361
- &:active,
362
- &:focus-visible,
363
- &:active:focus {
364
- background: var(--primary);
365
- background-image: @default-btn-hover-bg-gradient;
284
+ &.disabled,
285
+ &.disable,
286
+ &:disabled,
287
+ &[disabled] {
288
+ background: var(--bg-200);
289
+ color: var(--text-400);
290
+ }
291
+ }
292
+
293
+ &.btn-color-danger {
366
294
  color: var(--white);
367
- border-color: var(--primary);
295
+ background: var(--error-main);
296
+
297
+ &:hover {
298
+ background: color-mix(in srgb, black 10%, var(--error-main));
299
+ }
300
+
301
+ &.disabled,
302
+ &.disable,
303
+ &:disabled,
304
+ &[disabled] {
305
+ background: var(--bg-200);
306
+ color: var(--text-400);
307
+ }
308
+ }
309
+
310
+ &.btn-color-success {
311
+ color: var(--white);
312
+ background: var(--success-main);
313
+
314
+ &:hover {
315
+ background: color-mix(in srgb, black 10%, var(--success-main));
316
+ }
317
+
318
+ &.disabled,
319
+ &.disable,
320
+ &:disabled,
321
+ &[disabled] {
322
+ background: var(--bg-200);
323
+ color: var(--text-400);
324
+ }
325
+ }
326
+
327
+ &.btn-color-warning {
328
+ color: var(--white);
329
+ background: var(--warning-main);
330
+
331
+ &:hover {
332
+ background: color-mix(in srgb, black 10%, var(--warning-main));
333
+ }
334
+
335
+ &.disabled,
336
+ &.disable,
337
+ &:disabled,
338
+ &[disabled] {
339
+ background: var(--bg-200);
340
+ color: var(--text-400);
341
+ }
342
+ }
343
+
344
+ &.btn-color-ghost {
345
+ color: var(--primary);
346
+ background: var(--primary-light);
347
+
348
+ &:hover {
349
+ background: color-mix(in srgb, white 85%, var(--primary));
350
+ }
351
+
352
+ &.disabled,
353
+ &.disable,
354
+ &:disabled,
355
+ &[disabled] {
356
+ background: var(--bg-200);
357
+ color: var(--text-400);
358
+ }
368
359
 
369
360
  .bn-spinner {
370
361
  div {
371
- border-color: var(--white) transparent transparent transparent;
362
+ border-color: var(--primary) transparent transparent transparent;
372
363
  }
373
364
  }
374
365
  }
375
- }
376
366
 
377
- .bn-spinner {
378
- div {
379
- border-color: var(--white) transparent transparent transparent;
367
+ &.btn-color-grey {
368
+ color: var(--text-600);
369
+ background: var(--bg-50);
370
+
371
+ &:hover {
372
+ background: var(--bg-100);
373
+ }
374
+
375
+ &.disabled,
376
+ &.disable,
377
+ &:disabled,
378
+ &[disabled] {
379
+ background: var(--bg-200);
380
+ color: var(--text-400);
381
+ }
382
+
383
+ .bn-spinner {
384
+ div {
385
+ border-color: var(--text-600) transparent transparent transparent;
386
+ }
387
+ }
380
388
  }
381
- }
382
- }
383
389
 
384
- .btn-default.btn-with-icon-place,
385
- .download-btn.btn-with-icon-place {
386
- .btn-text {
387
- background: var(--primary);
388
- background-image: @default-btn-bg-gradient;
389
- color: var(--white);
390
- }
391
390
 
392
- .btn-icon {
393
- background: color-mix(in srgb, black 10%, var(--primary));
394
- color: var(--white);
395
- }
391
+ &.btn-color-link {
392
+ background: transparent;
393
+ border: none;
394
+ color: var(--primary);
395
+ padding: 0;
396
396
 
397
- &:not(.no-hover) {
397
+ &:hover {
398
+ text-decoration: underline;
399
+ }
398
400
 
399
- &:hover,
400
- &:active,
401
- &:focus,
402
- &:active:focus {
403
- .btn-text {
404
- background: var(--primary);
405
- background-image: @default-btn-hover-bg-gradient;
406
- color: var(--white);
401
+ &:focus-visible {
402
+ outline: 'none';
407
403
  }
408
404
 
409
- .btn-icon {
410
- background: color-mix(in srgb, black 10%, var(--primary));
411
- color: var(--white);
405
+ .bn-spinner {
406
+ div {
407
+ border-color: var(--primary) transparent transparent transparent;
408
+ }
412
409
  }
413
410
  }
414
411
  }
415
412
 
416
- .bn-spinner {
417
- div {
418
- border-color: var(--white) transparent transparent transparent;
413
+ &.btn-variant-outlined {
414
+ background: transparent;
415
+
416
+ &.btn-color-primary {
417
+ color: var(--primary);
418
+ border: 1px solid var(--primary);
419
+
420
+ &:hover {
421
+ background: var(--primary-light);
422
+ }
423
+
424
+ .bn-spinner {
425
+ div {
426
+ border-color: var(--primary) transparent transparent transparent;
427
+ }
428
+ }
419
429
  }
420
- }
421
- }
422
430
 
423
- .btn-secondary:not(.btn-with-icon-place) {
424
- background: var(--primary);
425
- background-image: @secondary-btn-bg-gradient;
426
- border-color: var(--primary);
427
- color: var(--white);
431
+ &.btn-color-danger {
432
+ color: var(--error-main);
433
+ border: 1px solid var(--error-main);
428
434
 
429
- &:not(.no-hover) {
435
+ &:hover {
436
+ background: var(--error-light);
437
+ }
430
438
 
431
- &:hover,
432
- &:active,
433
- &:focus-visible,
434
- &:active:focus {
435
- background: var(--primary);
436
- background-image: @secondary-btn-hover-bg-gradient;
437
- border-color: var(--primary);
438
- color: var(--white);
439
+ .bn-spinner {
440
+ div {
441
+ border-color: var(--error-main) transparent transparent transparent;
442
+ }
443
+ }
439
444
  }
440
- }
441
445
 
442
- .bn-spinner {
443
- div {
444
- border-color: var(--white) transparent transparent transparent;
446
+ &.btn-color-success {
447
+ color: var(--success-main);
448
+ border: 1px solid var(--success-main);
449
+
450
+ &:hover {
451
+ background: var(--success-light);
452
+ }
453
+
454
+ .bn-spinner {
455
+ div {
456
+ border-color: var(--success-main) transparent transparent transparent;
457
+ }
458
+ }
445
459
  }
446
- }
447
- }
448
460
 
449
- .btn-secondary.btn-with-icon-place {
450
- .btn-text {
451
- background: var(--primary);
452
- background-image: @secondary-btn-bg-gradient;
453
- color: var(--white);
454
- }
461
+ &.btn-color-warning {
462
+ color: var(--warning-main);
463
+ border: 1px solid var(--warning-main);
455
464
 
456
- .btn-icon {
457
- background: color-mix(in srgb, black 10%, var(--primary));
458
- color: var(--white);
459
- }
465
+ &:hover {
466
+ background: var(--warning-light);
467
+ }
460
468
 
461
- &:not(.no-hover) {
469
+ .bn-spinner {
470
+ div {
471
+ border-color: var(--warning-main) transparent transparent transparent;
472
+ }
473
+ }
474
+ }
462
475
 
463
- &:hover,
464
- &:active,
465
- &:focus,
466
- &:active:focus {
467
- .btn-text {
468
- background: var(--primary);
469
- background-image: @secondary-btn-hover-bg-gradient;
470
- color: var(--white);
476
+ &.btn-color-ghost {
477
+ color: var(--primary);
478
+ background: var(--primary-light);
479
+ border: 1px solid var(--primary-light);
480
+
481
+ &:hover {
482
+ background: color-mix(in srgb, white 85%, var(--primary));
471
483
  }
472
484
 
473
- .btn-icon {
474
- background: color-mix(in srgb, black 10%, var(--primary));
475
- color: var(--white);
485
+ .bn-spinner {
486
+ div {
487
+ border-color: var(--primary) transparent transparent transparent;
488
+ }
489
+ }
490
+ }
491
+
492
+ &.btn-color-grey {
493
+ color: var(--text-600);
494
+ border: 1px solid var(--border-200);
495
+
496
+ &:hover {
497
+ background: var(--bg-50);
498
+ }
499
+
500
+ .bn-spinner {
501
+ div {
502
+ border-color: var(--text-600) transparent transparent transparent;
503
+ }
504
+ }
505
+ }
506
+
507
+ &.btn-color-link {
508
+ background: transparent;
509
+ border: none;
510
+ color: var(--primary);
511
+ padding: 0;
512
+
513
+ &:hover {
514
+ text-decoration: underline;
515
+ }
516
+
517
+ &:focus-visible {
518
+ outline: 'none';
519
+ }
520
+
521
+ .bn-spinner {
522
+ div {
523
+ border-color: var(--primary) transparent transparent transparent;
524
+ }
476
525
  }
477
526
  }
478
527
  }
479
528
 
480
- .bn-spinner {
481
- div {
482
- border-color: var(--white) transparent transparent transparent;
529
+ &.btn-variant-text {
530
+ background: transparent;
531
+ border: none;
532
+ padding: 0;
533
+ height: auto;
534
+
535
+ &.btn-color-primary {
536
+ color: var(--primary);
537
+
538
+ .bn-spinner {
539
+ div {
540
+ border-color: var(--primary) transparent transparent transparent;
541
+ }
542
+ }
483
543
  }
544
+
545
+ &.btn-color-danger {
546
+ color: var(--error-main);
547
+
548
+ .bn-spinner {
549
+ div {
550
+ border-color: var(--error-main) transparent transparent transparent;
551
+ }
552
+ }
553
+ }
554
+
555
+ &.btn-color-success {
556
+ color: var(--success-main);
557
+
558
+ .bn-spinner {
559
+ div {
560
+ border-color: var(--success-main) transparent transparent transparent;
561
+ }
562
+ }
563
+ }
564
+
565
+ &.btn-color-warning {
566
+ color: var(--warning-main);
567
+
568
+ .bn-spinner {
569
+ div {
570
+ border-color: var(--warning-main) transparent transparent transparent;
571
+ }
572
+ }
573
+ }
574
+
575
+ &.btn-color-ghost {
576
+ color: var(--primary);
577
+
578
+ .bn-spinner {
579
+ div {
580
+ border-color: var(--primary) transparent transparent transparent;
581
+ }
582
+ }
583
+ }
584
+
585
+ &.btn-color-grey {
586
+ color: var(--text-600);
587
+
588
+ .bn-spinner {
589
+ div {
590
+ border-color: var(--text-600) transparent transparent transparent;
591
+ }
592
+ }
593
+ }
594
+
595
+ &.btn-color-link {
596
+ color: var(--primary);
597
+
598
+ &:hover {
599
+ text-decoration: underline;
600
+ }
601
+
602
+ &:focus-visible {
603
+ outline: 'none';
604
+ }
605
+
606
+ .bn-spinner {
607
+ div {
608
+ border-color: var(--primary) transparent transparent transparent;
609
+ }
610
+ }
611
+ }
612
+
613
+ &:not(.disabled):not([disabled]):not(.disable):not(:disabled):hover {
614
+ text-decoration: underline;
615
+ }
616
+ }
617
+
618
+ &.has-error {
619
+ border-color: var(--error-main) !important;
484
620
  }
485
621
  }