benivo-ui-library 1.7.6 → 1.7.7

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 (4) hide show
  1. package/button.less +105 -13
  2. package/index.js +1 -1
  3. package/package.json +2 -2
  4. package/variables.less +13 -0
package/button.less CHANGED
@@ -59,11 +59,19 @@
59
59
  }
60
60
 
61
61
  &.btn-sm {
62
- padding: @btn-sm-padding;
62
+ padding: @btn-lg-padding;
63
+
64
+ @media @lg {
65
+ padding: @btn-sm-padding;
66
+ }
63
67
  }
64
68
 
65
69
  &.btn-md {
66
- padding: @btn-md-padding;
70
+ padding: @btn-lg-padding;
71
+
72
+ @media @lg {
73
+ padding: @btn-md-padding;
74
+ }
67
75
  }
68
76
 
69
77
  &.btn-lg {
@@ -76,7 +84,9 @@
76
84
  font-size: 1.25rem;
77
85
  }
78
86
 
79
- &.disabled {
87
+ &.disabled,
88
+ &.disable,
89
+ &:disabled {
80
90
  opacity: 0.5;
81
91
  cursor: not-allowed;
82
92
  pointer-events: none;
@@ -86,6 +96,11 @@
86
96
  }
87
97
  }
88
98
 
99
+ &.blocked:not(.inactive) {
100
+ pointer-events: none;
101
+ opacity: 0.5;
102
+ }
103
+
89
104
  &.loading {
90
105
  cursor: not-allowed;
91
106
  pointer-events: none;
@@ -109,9 +124,29 @@
109
124
  }
110
125
  }
111
126
 
127
+ &.bg-grey {
128
+ border: 1px solid #CED0DA !important;
129
+ background-color: #CED0DA !important;
130
+ color: #ffffff !important;
131
+ }
132
+
133
+ &.btn-grey-standard {
134
+ border: 1px solid rgba(0, 0, 0, 0.12);
135
+ background-color: #f2f4f7;
136
+ background-image: linear-gradient(to top, #f2f4f7, #ffffff) !important;
137
+ text-transform: none;
138
+ text-align: center;
139
+ font-family: proxima-nova, sans-serif;
140
+ font-weight: @font-weight-medium;
141
+ min-width: 160px;
142
+ margin-right: 1.5rem;
143
+ color: #4f5a65;
144
+ .border-radius(4px);
145
+ }
146
+
112
147
  &.btn-grey {
113
- border: 1px solid rgba(0, 0, 0, 0.12) !important;
114
- background-color: #f2f4f7 !important;
148
+ border: 1px solid rgba(0, 0, 0, 0.12);
149
+ background-color: #f2f4f7;
115
150
  background-image: linear-gradient(to top, #f2f4f7, #ffffff);
116
151
  text-transform: none;
117
152
  padding: 10px 0;
@@ -120,8 +155,8 @@
120
155
  font-weight: @font-weight-medium;
121
156
  min-width: 160px;
122
157
  margin-right: 1.5rem;
123
- color: #4f5a65 !important;
124
- .border-radius(4px) !important;
158
+ color: #4f5a65;
159
+ .border-radius(4px);
125
160
 
126
161
  &:before {
127
162
  content: "";
@@ -136,7 +171,7 @@
136
171
  &.btn-with-icon {
137
172
  .btn-icon {
138
173
  border-right: 0;
139
- font-size: @extra-small-font-size !important;
174
+ font-size: @extra-small-font-size !important;
140
175
  margin: -0.5rem 0.7rem -0.5rem 0.7rem;
141
176
  }
142
177
 
@@ -148,6 +183,8 @@
148
183
 
149
184
  &:hover {
150
185
  color: #4f5a65 !important;
186
+ background-color: #f3f3f3;
187
+ background-image: linear-gradient(to top, #f3f3f3, #f3f3f3);
151
188
  }
152
189
  }
153
190
 
@@ -197,7 +234,7 @@
197
234
 
198
235
  .bn-spinner {
199
236
  div {
200
- border-color: #fff transparent transparent transparent;
237
+ border-color: @default-btn-text-color transparent transparent transparent;
201
238
  }
202
239
  }
203
240
 
@@ -238,6 +275,9 @@
238
275
  }
239
276
  }
240
277
 
278
+ #btn-card,
279
+ #btn-paypal,
280
+ #btn-vitesse,
241
281
  .btn-default:not(.btn-with-icon-place),
242
282
  .download-btn:not(.btn-with-icon-place) {
243
283
  background: @default-btn-bg-color;
@@ -246,11 +286,21 @@
246
286
  border-color: @default-btn-brd-color;
247
287
 
248
288
  &:not(.no-hover) {
249
- &:hover, &:active, &:focus, &:active:focus {
289
+
290
+ &:hover,
291
+ &:active,
292
+ &:focus-visible,
293
+ &:active:focus {
250
294
  background: @default-btn-hover-bg-color;
251
295
  background-image: @default-btn-hover-bg-gradient;
252
296
  color: @default-btn-hover-text-color;
253
297
  border-color: @default-btn-hover-brd-color;
298
+
299
+ .bn-spinner {
300
+ div {
301
+ border-color: @default-btn-hover-text-color transparent transparent transparent;
302
+ }
303
+ }
254
304
  }
255
305
  }
256
306
 
@@ -275,7 +325,11 @@
275
325
  }
276
326
 
277
327
  &:not(.no-hover) {
278
- &:hover, &:active, &:focus, &:active:focus {
328
+
329
+ &:hover,
330
+ &:active,
331
+ &:focus,
332
+ &:active:focus {
279
333
  .btn-text {
280
334
  background: @default-btn-hover-bg-color;
281
335
  background-image: @default-btn-hover-bg-gradient;
@@ -303,7 +357,11 @@
303
357
  color: @secondary-btn-text-color;
304
358
 
305
359
  &:not(.no-hover) {
306
- &:hover, &:active, &:focus, &:active:focus {
360
+
361
+ &:hover,
362
+ &:active,
363
+ &:focus-visible,
364
+ &:active:focus {
307
365
  background: @secondary-btn-hover-bg;
308
366
  background-image: @secondary-btn-hover-bg-gradient;
309
367
  border-color: @secondary-btn-hover-brd-color;
@@ -331,7 +389,11 @@
331
389
  }
332
390
 
333
391
  &:not(.no-hover) {
334
- &:hover, &:active, &:focus, &:active:focus {
392
+
393
+ &:hover,
394
+ &:active,
395
+ &:focus,
396
+ &:active:focus {
335
397
  .btn-text {
336
398
  background: @secondary-btn-hover-bg;
337
399
  background-image: @secondary-btn-hover-bg-gradient;
@@ -351,3 +413,33 @@
351
413
  }
352
414
  }
353
415
  }
416
+
417
+ .mobile-fixed-btn-wrap {
418
+ @media @lg {
419
+ &.hide-on-desktop {
420
+ display: none;
421
+ }
422
+ }
423
+
424
+ @media @md-max {
425
+ z-index: @zindex-fixed-low-priority;
426
+ position: fixed;
427
+ bottom: 0;
428
+ left: 0;
429
+ width: 100%;
430
+ background-color: #ffffff;
431
+ padding: @gatter;
432
+ }
433
+
434
+ .btn {
435
+ @media @md-max {
436
+ width: 100%;
437
+ padding-left: 0;
438
+ padding-right: 0;
439
+ }
440
+ }
441
+
442
+ .dropdown-button {
443
+ width: 50%;
444
+ }
445
+ }