benivo-ui-library 1.8.90 → 1.8.91

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 (5) hide show
  1. package/button.less +315 -281
  2. package/buttonOld.less +485 -0
  3. package/index.js +1 -1
  4. package/package.json +1 -1
  5. package/variables.less +14 -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: 40px;
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-sm.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,248 @@
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);
368
296
 
369
- .bn-spinner {
370
- div {
371
- border-color: var(--white) transparent transparent transparent;
372
- }
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);
373
307
  }
374
308
  }
375
- }
376
309
 
377
- .bn-spinner {
378
- div {
379
- border-color: var(--white) transparent transparent transparent;
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
+ }
380
325
  }
381
- }
382
- }
383
326
 
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
- }
327
+ &.btn-color-warning {
328
+ color: var(--white);
329
+ background: var(--warning-main);
391
330
 
392
- .btn-icon {
393
- background: color-mix(in srgb, black 10%, var(--primary));
394
- color: var(--white);
395
- }
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
+ }
396
343
 
397
- &:not(.no-hover) {
344
+ &.btn-color-ghost {
345
+ color: var(--primary);
346
+ background: var(--primary-light);
398
347
 
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);
348
+ &:hover {
349
+ background: color-mix(in srgb, white 85%, var(--primary));
407
350
  }
408
351
 
409
- .btn-icon {
410
- background: color-mix(in srgb, black 10%, var(--primary));
411
- color: var(--white);
352
+ &.disabled,
353
+ &.disable,
354
+ &:disabled,
355
+ &[disabled] {
356
+ background: var(--bg-200);
357
+ color: var(--text-400);
412
358
  }
413
359
  }
414
- }
415
360
 
416
- .bn-spinner {
417
- div {
418
- border-color: var(--white) transparent transparent transparent;
361
+ &.btn-color-grey {
362
+ color: var(--text-600);
363
+ background: var(--bg-50);
364
+
365
+ &:hover {
366
+ background: var(--bg-100);
367
+ }
368
+
369
+ &.disabled,
370
+ &.disable,
371
+ &:disabled,
372
+ &[disabled] {
373
+ background: var(--bg-200);
374
+ color: var(--text-400);
375
+ }
419
376
  }
420
- }
421
- }
422
377
 
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);
428
378
 
429
- &:not(.no-hover) {
379
+ &.btn-color-link {
380
+ background: transparent;
381
+ border: none;
382
+ color: var(--primary);
383
+ padding: 0;
430
384
 
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);
385
+ &:hover {
386
+ text-decoration: underline;
387
+ }
388
+
389
+ &:focus-visible {
390
+ outline: 'none';
391
+ }
439
392
  }
440
393
  }
441
394
 
442
- .bn-spinner {
443
- div {
444
- border-color: var(--white) transparent transparent transparent;
395
+ &.btn-variant-outlined {
396
+ background: transparent;
397
+
398
+ &.btn-color-primary {
399
+ color: var(--primary);
400
+ border: 1px solid var(--primary);
401
+
402
+ &:hover {
403
+ background: var(--primary-light);
404
+ }
445
405
  }
446
- }
447
- }
448
406
 
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
- }
407
+ &.btn-color-danger {
408
+ color: var(--error-main);
409
+ border: 1px solid var(--error-main);
455
410
 
456
- .btn-icon {
457
- background: color-mix(in srgb, black 10%, var(--primary));
458
- color: var(--white);
459
- }
411
+ &:hover {
412
+ background: var(--error-light);
413
+ }
414
+ }
460
415
 
461
- &:not(.no-hover) {
416
+ &.btn-color-success {
417
+ color: var(--success-main);
418
+ border: 1px solid var(--success-main);
462
419
 
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);
420
+ &:hover {
421
+ background: var(--success-light);
471
422
  }
423
+ }
472
424
 
473
- .btn-icon {
474
- background: color-mix(in srgb, black 10%, var(--primary));
475
- color: var(--white);
425
+ &.btn-color-warning {
426
+ color: var(--warning-main);
427
+ border: 1px solid var(--warning-main);
428
+
429
+ &:hover {
430
+ background: var(--warning-light);
431
+ }
432
+ }
433
+
434
+ &.btn-color-ghost {
435
+ color: var(--primary);
436
+ background: var(--primary-light);
437
+ border: 1px solid var(--primary-light);
438
+
439
+ &:hover {
440
+ background: color-mix(in srgb, white 85%, var(--primary));
441
+ }
442
+ }
443
+
444
+ &.btn-color-grey {
445
+ color: var(--text-600);
446
+ border: 1px solid var(--border-200);
447
+
448
+ &:hover {
449
+ background: var(--bg-50);
450
+ }
451
+ }
452
+
453
+ &.btn-color-link {
454
+ background: transparent;
455
+ border: none;
456
+ color: var(--primary);
457
+ padding: 0;
458
+
459
+ &:hover {
460
+ text-decoration: underline;
461
+ }
462
+
463
+ &:focus-visible {
464
+ outline: 'none';
476
465
  }
477
466
  }
478
467
  }
479
468
 
480
- .bn-spinner {
481
- div {
482
- border-color: var(--white) transparent transparent transparent;
469
+ &.btn-variant-text {
470
+ background: transparent;
471
+ border: none;
472
+ padding: 0;
473
+ height: auto;
474
+
475
+ &.btn-color-primary {
476
+ color: var(--primary);
477
+ }
478
+
479
+ &.btn-color-danger {
480
+ color: var(--error-main);
481
+ }
482
+
483
+ &.btn-color-success {
484
+ color: var(--success-main);
485
+ }
486
+
487
+ &.btn-color-warning {
488
+ color: var(--warning-main);
489
+ }
490
+
491
+ &.btn-color-ghost {
492
+ color: var(--primary);
493
+ }
494
+
495
+ &.btn-color-grey {
496
+ color: var(--text-600);
497
+ }
498
+
499
+ &.btn-color-link {
500
+ color: var(--primary);
501
+
502
+ &:hover {
503
+ text-decoration: underline;
504
+ }
505
+
506
+ &:focus-visible {
507
+ outline: 'none';
508
+ }
509
+ }
510
+
511
+ &:not(.disabled):not([disabled]):not(.disable):not(:disabled):hover {
512
+ text-decoration: underline;
483
513
  }
484
514
  }
515
+
516
+ &.has-error {
517
+ border-color: var(--error-main) !important;
518
+ }
485
519
  }