monkey-style-guide 2.0.48 → 2.0.52

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 (21) hide show
  1. package/README.md +5 -6
  2. package/assets/scss/partials/_forms.scss +8 -5
  3. package/assets/scss/partials/components/_buttons.scss +82 -223
  4. package/assets/scss/partials/components/_input.scss +17 -0
  5. package/assets/scss/partials/components/_select.scss +36 -7
  6. package/bundles/monkey-style-guide.umd.js +92 -72
  7. package/bundles/monkey-style-guide.umd.js.map +1 -1
  8. package/esm2015/lib/components/button/button.component.js +24 -6
  9. package/esm2015/lib/components/icon/icon.component.js +13 -3
  10. package/esm2015/lib/components/icon/icons.component.js +67 -67
  11. package/esm2015/lib/components/input/input.component.js +5 -5
  12. package/esm2015/lib/core/interfaces/monkey-modal-settings.js +1 -1
  13. package/esm2015/lib/core/services/snackbar/mokey-style-guide-snackbar.service.js +2 -2
  14. package/fesm2015/monkey-style-guide.js +104 -76
  15. package/fesm2015/monkey-style-guide.js.map +1 -1
  16. package/lib/components/button/button.component.d.ts +2 -0
  17. package/lib/components/icon/icon.component.d.ts +2 -0
  18. package/lib/core/interfaces/monkey-modal-settings.d.ts +5 -5
  19. package/monkey-style-guide-2.0.52.tgz +0 -0
  20. package/package.json +1 -1
  21. package/monkey-style-guide-2.0.48.tgz +0 -0
package/assets/scss/partials/components/_buttons.scss CHANGED
@@ -10,7 +10,7 @@
10
10
  padding: 16px;
11
11
  border-radius: 8px;
12
12
  border: none;
13
- display: flex;
13
+ display: inline-flex;
14
14
  flex-direction: row;
15
15
  align-content: center;
16
16
  align-items: center;
@@ -23,6 +23,18 @@
23
23
  justify-content: space-between;
24
24
  }
25
25
 
26
+ &.sm {
27
+ height: 32px;
28
+ }
29
+
30
+ &.md {
31
+ height: 40px;
32
+ }
33
+
34
+ &.lg {
35
+ height: 48px;
36
+ }
37
+
26
38
  monkey-icon {
27
39
  margin-right: 10px;
28
40
  }
@@ -30,6 +42,13 @@
30
42
  label {
31
43
  cursor: pointer;
32
44
  }
45
+
46
+ &:disabled {
47
+ color: #999999 !important;
48
+ background-color: #ebebeb !important;
49
+ border: none !important;
50
+ cursor: unset !important;
51
+ }
33
52
  }
34
53
 
35
54
  .mecx-button-drop {
@@ -62,17 +81,16 @@
62
81
  &__theme {
63
82
  color: map-get(map-get($mecx-theme, contrast), main);
64
83
  background: map-get($mecx-theme, main);
65
-
66
84
  background-position: center;
67
85
 
68
- &:hover {
86
+ &:hover:not(:disabled) {
69
87
  background-position: center;
70
88
  transition: background 0.8s;
71
89
  background: map-get($mecx-theme, 400)
72
90
  radial-gradient(circle, transparent 1%, map-get($mecx-theme, 400) 1%) center/15000%;
73
91
  }
74
92
 
75
- &:active {
93
+ &:active:not(:disabled) {
76
94
  background-color: map-get($mecx-theme, 100);
77
95
  background-size: 100%;
78
96
  transition: background 0s;
@@ -82,17 +100,16 @@
82
100
  &__error {
83
101
  color: map-get(map-get($mecx-error, contrast), 400);
84
102
  background: map-get($mecx-error, main);
85
-
86
103
  background-position: center;
87
104
 
88
- &:hover {
105
+ &:hover:not(:disabled) {
89
106
  background-position: center;
90
107
  transition: background 0.8s;
91
108
  background: map-get($mecx-error, 400)
92
109
  radial-gradient(circle, transparent 1%, map-get($mecx-error, 400) 1%) center/15000%;
93
110
  }
94
111
 
95
- &:active {
112
+ &:active:not(:disabled) {
96
113
  background-color: map-get($mecx-error, 100);
97
114
  background-size: 100%;
98
115
  transition: background 0s;
@@ -102,17 +119,16 @@
102
119
  &__warning {
103
120
  color: map-get(map-get($mecx-warning, contrast), main);
104
121
  background: map-get($mecx-warning, main);
105
-
106
122
  background-position: center;
107
123
 
108
- &:hover {
124
+ &:hover:not(:disabled) {
109
125
  background-position: center;
110
126
  transition: background 0.8s;
111
127
  background: map-get($mecx-warning, 400)
112
128
  radial-gradient(circle, transparent 1%, map-get($mecx-warning, 400) 1%) center/15000%;
113
129
  }
114
130
 
115
- &:active {
131
+ &:active:not(:disabled) {
116
132
  background-color: map-get($mecx-warning, 100);
117
133
  background-size: 100%;
118
134
  transition: background 0s;
@@ -122,17 +138,16 @@
122
138
  &__success {
123
139
  color: map-get(map-get($mecx-success, contrast), main);
124
140
  background: map-get($mecx-success, main);
125
-
126
141
  background-position: center;
127
142
 
128
- &:hover {
143
+ &:hover:not(:disabled) {
129
144
  background-position: center;
130
145
  transition: background 0.8s;
131
146
  background: map-get($mecx-success, 400)
132
147
  radial-gradient(circle, transparent 1%, map-get($mecx-success, 400) 1%) center/15000%;
133
148
  }
134
149
 
135
- &:active {
150
+ &:active:not(:disabled) {
136
151
  background-color: map-get($mecx-success, 100);
137
152
  background-size: 100%;
138
153
  transition: background 0s;
@@ -145,48 +160,39 @@
145
160
 
146
161
  background-position: center;
147
162
 
148
- &:hover {
163
+ &:hover:not(:disabled) {
149
164
  background-position: center;
150
165
  transition: background 0.8s;
151
166
  background: map-get($mecx-question, 400)
152
167
  radial-gradient(circle, transparent 1%, map-get($mecx-question, 400) 1%) center/15000%;
153
168
  }
154
169
 
155
- &:active {
170
+ &:active:not(:disabled) {
156
171
  background-color: map-get($mecx-question, 100);
157
172
  background-size: 100%;
158
173
  transition: background 0s;
159
174
  }
160
175
  }
161
-
162
- &:disabled {
163
- @extend .text-muted;
164
- color: map-get($mecx-theme, main);
165
- font-weight: 500;
166
- background-color: #ebebeb;
167
- border: none;
168
- }
169
176
  }
170
177
 
171
178
  .mecx-button-secondary {
172
179
  @extend .mecx-button;
173
180
 
174
181
  &__theme {
175
- border: 1px solid map-get($mecx-theme, main);
182
+ border: 1px solid #d6d6d6;
176
183
  background-color: #ffffff;
177
184
  color: map-get($mecx-theme, main);
178
185
  box-sizing: border-box;
179
-
180
186
  background-position: center;
181
187
 
182
- &:hover {
188
+ &:hover:not(:disabled) {
183
189
  background-position: center;
184
190
  transition: background 0.8s;
185
191
  background: map-get($mecx-theme, 100)
186
192
  radial-gradient(circle, transparent 1%, map-get($mecx-theme, 100) 1%) center/15000%;
187
193
  }
188
194
 
189
- &:active {
195
+ &:active:not(:disabled) {
190
196
  background-color: map-get($mecx-theme, 400);
191
197
  background-size: 100%;
192
198
  transition: background 0s;
@@ -201,14 +207,14 @@
201
207
 
202
208
  background-position: center;
203
209
 
204
- &:hover {
210
+ &:hover:not(:disabled) {
205
211
  background-position: center;
206
212
  transition: background 0.8s;
207
213
  background: map-get($mecx-error, 100)
208
214
  radial-gradient(circle, transparent 1%, map-get($mecx-error, 100) 1%) center/15000%;
209
215
  }
210
216
 
211
- &:active {
217
+ &:active:not(:disabled) {
212
218
  background-color: map-get($mecx-error, 400);
213
219
  background-size: 100%;
214
220
  transition: background 0s;
@@ -223,14 +229,14 @@
223
229
 
224
230
  background-position: center;
225
231
 
226
- &:hover {
232
+ &:hover:not(:disabled) {
227
233
  background-position: center;
228
234
  transition: background 0.8s;
229
235
  background: map-get($mecx-warning, 100)
230
236
  radial-gradient(circle, transparent 1%, map-get($mecx-warning, 100) 1%) center/15000%;
231
237
  }
232
238
 
233
- &:active {
239
+ &:active:not(:disabled) {
234
240
  background-color: map-get($mecx-warning, 400);
235
241
  background-size: 100%;
236
242
  transition: background 0s;
@@ -245,14 +251,14 @@
245
251
 
246
252
  background-position: center;
247
253
 
248
- &:hover {
254
+ &:hover:not(:disabled) {
249
255
  background-position: center;
250
256
  transition: background 0.8s;
251
257
  background: map-get($mecx-success, 100)
252
258
  radial-gradient(circle, transparent 1%, map-get($mecx-success, 100) 1%) center/15000%;
253
259
  }
254
260
 
255
- &:active {
261
+ &:active:not(:disabled) {
256
262
  background-color: map-get($mecx-success, 400);
257
263
  background-size: 100%;
258
264
  transition: background 0s;
@@ -267,48 +273,38 @@
267
273
 
268
274
  background-position: center;
269
275
 
270
- &:hover {
276
+ &:hover:not(:disabled) {
271
277
  background-position: center;
272
278
  transition: background 0.8s;
273
279
  background: map-get($mecx-question, 100)
274
280
  radial-gradient(circle, transparent 1%, map-get($mecx-question, 100) 1%) center/15000%;
275
281
  }
276
282
 
277
- &:active {
283
+ &:active:not(:disabled) {
278
284
  background-color: map-get($mecx-question, 400);
279
285
  background-size: 100%;
280
286
  transition: background 0s;
281
287
  }
282
288
  }
283
-
284
- &:disabled {
285
- @extend .text-muted;
286
- color: map-get($mecx-theme, main);
287
- font-weight: 500;
288
- background-color: inherit;
289
- border: 1px solid #d6d6d6 !important;
290
- box-sizing: border-box;
291
- }
292
289
  }
293
290
 
294
291
  .mecx-button-tertiary {
295
292
  @extend .mecx-button;
296
293
 
297
294
  &__theme {
298
- background-color: map-get($mecx-theme, 100);
299
- color: map-get($mecx-theme, 700);
295
+ background-color: inherit;
296
+ color: map-get($mecx-theme, main);
300
297
  box-sizing: border-box;
301
-
302
298
  background-position: center;
303
299
 
304
- &:hover {
300
+ &:hover:not(:disabled) {
305
301
  background-position: center;
306
302
  transition: background 0.8s;
307
303
  background: map-get($mecx-theme, 100)
308
304
  radial-gradient(circle, transparent 1%, map-get($mecx-theme, 100) 1%) center/15000%;
309
305
  }
310
306
 
311
- &:active {
307
+ &:active:not(:disabled) {
312
308
  background-color: map-get($mecx-theme, 400);
313
309
  background-size: 100%;
314
310
  transition: background 0s;
@@ -316,20 +312,19 @@
316
312
  }
317
313
 
318
314
  &__error {
319
- background-color: map-get($mecx-error, 100);
320
- color: map-get($mecx-error, 700);
315
+ background-color: inherit;
316
+ color: map-get($mecx-error, main);
321
317
  box-sizing: border-box;
322
-
323
318
  background-position: center;
324
319
 
325
- &:hover {
320
+ &:hover:not(:disabled) {
326
321
  background-position: center;
327
322
  transition: background 0.8s;
328
323
  background: map-get($mecx-error, 100)
329
324
  radial-gradient(circle, transparent 1%, map-get($mecx-error, 100) 1%) center/15000%;
330
325
  }
331
326
 
332
- &:active {
327
+ &:active:not(:disabled) {
333
328
  background-color: map-get($mecx-error, 400);
334
329
  background-size: 100%;
335
330
  transition: background 0s;
@@ -337,20 +332,19 @@
337
332
  }
338
333
 
339
334
  &__warning {
340
- background-color: map-get($mecx-warning, 100);
341
- color: map-get($mecx-warning, 700);
335
+ background-color: inherit;
336
+ color: map-get($mecx-warning, main);
342
337
  box-sizing: border-box;
343
-
344
338
  background-position: center;
345
339
 
346
- &:hover {
340
+ &:hover:not(:disabled) {
347
341
  background-position: center;
348
342
  transition: background 0.8s;
349
343
  background: map-get($mecx-warning, 100)
350
344
  radial-gradient(circle, transparent 1%, map-get($mecx-warning, 100) 1%) center/15000%;
351
345
  }
352
346
 
353
- &:active {
347
+ &:active:not(:disabled) {
354
348
  background-color: map-get($mecx-warning, 400);
355
349
  background-size: 100%;
356
350
  transition: background 0s;
@@ -358,20 +352,19 @@
358
352
  }
359
353
 
360
354
  &__success {
361
- background-color: map-get($mecx-success, 100);
362
- color: map-get($mecx-success, 700);
355
+ background-color: inherit;
356
+ color: map-get($mecx-success, main);
363
357
  box-sizing: border-box;
364
-
365
358
  background-position: center;
366
359
 
367
- &:hover {
360
+ &:hover:not(:disabled) {
368
361
  background-position: center;
369
362
  transition: background 0.8s;
370
363
  background: map-get($mecx-success, 100)
371
364
  radial-gradient(circle, transparent 1%, map-get($mecx-success, 100) 1%) center/15000%;
372
365
  }
373
366
 
374
- &:active {
367
+ &:active:not(:disabled) {
375
368
  background-color: map-get($mecx-success, 400);
376
369
  background-size: 100%;
377
370
  transition: background 0s;
@@ -379,158 +372,24 @@
379
372
  }
380
373
 
381
374
  &__question {
382
- background-color: map-get($mecx-question, 100);
375
+ background-color: inherit;
383
376
  color: map-get($mecx-question, 700);
384
377
  box-sizing: border-box;
385
-
386
378
  background-position: center;
387
379
 
388
- &:hover {
380
+ &:hover:not(:disabled) {
389
381
  background-position: center;
390
382
  transition: background 0.8s;
391
383
  background: map-get($mecx-question, 100)
392
384
  radial-gradient(circle, transparent 1%, map-get($mecx-question, 100) 1%) center/15000%;
393
385
  }
394
386
 
395
- &:active {
387
+ &:active:not(:disabled) {
396
388
  background-color: map-get($mecx-question, 400);
397
389
  background-size: 100%;
398
390
  transition: background 0s;
399
391
  }
400
392
  }
401
-
402
- &:disabled {
403
- @extend .text-muted;
404
- color: map-get($mecx-theme, main);
405
- font-weight: 500;
406
- background-color: #ebebeb;
407
- border: none;
408
- }
409
- }
410
-
411
- .mecx-button-quaternary {
412
- @extend .mecx-button;
413
-
414
- &__theme {
415
- background-color: inherit;
416
- color: map-get($mecx-theme, main);
417
- box-sizing: border-box;
418
-
419
- background-position: center;
420
-
421
- &:hover {
422
- color: map-get(map-get($mecx-theme, contrast), 100);
423
- background-position: center;
424
- transition: background 0.8s;
425
- background: map-get($mecx-theme, 100)
426
- radial-gradient(circle, transparent 1%, map-get($mecx-theme, 100) 1%) center/15000%;
427
- }
428
-
429
- &:active {
430
- color: map-get(map-get($mecx-theme, contrast), 100);
431
- background-color: map-get($mecx-theme, 400);
432
- background-size: 100%;
433
- transition: background 0s;
434
- }
435
- }
436
-
437
- &__error {
438
- background-color: inherit;
439
- color: map-get($mecx-error, main);
440
- box-sizing: border-box;
441
-
442
- background-position: center;
443
-
444
- &:hover {
445
- color: map-get(map-get($mecx-error, contrast), main);
446
- background-position: center;
447
- transition: background 0.8s;
448
- background: map-get($mecx-error, 100)
449
- radial-gradient(circle, transparent 1%, map-get($mecx-error, 100) 1%) center/15000%;
450
- }
451
-
452
- &:active {
453
- color: map-get(map-get($mecx-error, contrast), main);
454
- background-color: map-get($mecx-error, 200);
455
- background-size: 100%;
456
- transition: background 0s;
457
- }
458
- }
459
-
460
- &__warning {
461
- background-color: inherit;
462
- color: map-get($mecx-warning, main);
463
- box-sizing: border-box;
464
-
465
- background-position: center;
466
-
467
- &:hover {
468
- color: map-get(map-get($mecx-warning, contrast), main);
469
- background-position: center;
470
- transition: background 0.8s;
471
- background: map-get($mecx-warning, 400)
472
- radial-gradient(circle, transparent 1%, map-get($mecx-warning, 400) 1%) center/15000%;
473
- }
474
-
475
- &:active {
476
- color: map-get(map-get($mecx-warning, contrast), main);
477
- background-color: map-get($mecx-warning, 100);
478
- background-size: 100%;
479
- transition: background 0s;
480
- }
481
- }
482
-
483
- &__success {
484
- background-color: inherit;
485
- color: map-get($mecx-success, main);
486
- box-sizing: border-box;
487
-
488
- background-position: center;
489
-
490
- &:hover {
491
- color: map-get(map-get($mecx-success, contrast), main);
492
- background-position: center;
493
- transition: background 0.8s;
494
- background: map-get($mecx-success, 400)
495
- radial-gradient(circle, transparent 1%, map-get($mecx-success, 400) 1%) center/15000%;
496
- }
497
-
498
- &:active {
499
- color: map-get(map-get($mecx-success, contrast), main);
500
- background-color: map-get($mecx-success, 100);
501
- background-size: 100%;
502
- transition: background 0s;
503
- }
504
- }
505
-
506
- &__question {
507
- background-color: inherit;
508
- color: map-get($mecx-question, main);
509
- box-sizing: border-box;
510
-
511
- background-position: center;
512
-
513
- &:hover {
514
- color: map-get(map-get($mecx-question, contrast), main);
515
- background-position: center;
516
- transition: background 0.8s;
517
- background: map-get($mecx-question, 400)
518
- radial-gradient(circle, transparent 1%, map-get($mecx-question, 400) 1%) center/15000%;
519
- }
520
-
521
- &:active {
522
- color: map-get(map-get($mecx-question, contrast), main);
523
- background-color: map-get($mecx-question, 100);
524
- background-size: 100%;
525
- transition: background 0s;
526
- }
527
- }
528
-
529
- &:disabled {
530
- @extend .text-muted;
531
- color: map-get($mecx-theme, main);
532
- font-weight: 500;
533
- }
534
393
  }
535
394
 
536
395
  .mecx-button-none {
@@ -546,14 +405,14 @@
546
405
  color: #4b4a53;
547
406
  background: #ebebeb;
548
407
 
549
- &:hover {
408
+ &:hover:not(:disabled) {
550
409
  color: #4b4a53;
551
410
  background-position: center;
552
411
  transition: background 0.8s;
553
412
  background: #f3f3f3 radial-gradient(circle, transparent 1%, #f3f3f3 1%) center/15000%;
554
413
  }
555
414
 
556
- &:active {
415
+ &:active:not(:disabled) {
557
416
  color: #4b4a53;
558
417
  background-color: #f3f3f3;
559
418
  background-size: 100%;
@@ -577,14 +436,14 @@
577
436
  box-sizing: border-box;
578
437
  border-radius: 8px;
579
438
 
580
- &:hover {
439
+ &:hover:not(:disabled) {
581
440
  color: #4b4a53;
582
441
  background-position: center;
583
442
  transition: background 0.8s;
584
443
  background: #f3f3f3 radial-gradient(circle, transparent 1%, #f3f3f3 1%) center/15000%;
585
444
  }
586
445
 
587
- &:active {
446
+ &:active:not(:disabled) {
588
447
  color: #4b4a53;
589
448
  background-color: #f3f3f3;
590
449
  background-size: 100%;
@@ -603,14 +462,14 @@
603
462
  justify-content: flex-start !important;
604
463
  background: inherit;
605
464
 
606
- &:hover {
465
+ &:hover:not(:disabled) {
607
466
  color: #4b4a53;
608
467
  background-position: center;
609
468
  transition: background 0.8s;
610
469
  background: #f3f3f3 radial-gradient(circle, transparent 1%, #f3f3f3 1%) center/15000%;
611
470
  }
612
471
 
613
- &:active {
472
+ &:active:not(:disabled) {
614
473
  color: map-get($mecx-theme, main);
615
474
  background-color: #f5f5f5;
616
475
  background-size: 100%;
@@ -629,14 +488,14 @@
629
488
  background: #f5f5f5;
630
489
  justify-content: flex-start !important;
631
490
 
632
- &:hover {
491
+ &:hover:not(:disabled) {
633
492
  color: map-get($mecx-theme, main);
634
493
  background-position: center;
635
494
  transition: background 0.8s;
636
495
  background: #f3f3f3 radial-gradient(circle, transparent 1%, #f3f3f3 1%) center/15000%;
637
496
  }
638
497
 
639
- &:active {
498
+ &:active:not(:disabled) {
640
499
  color: map-get($mecx-theme, main);
641
500
  background-color: #f3f3f3;
642
501
  background-size: 100%;
@@ -661,14 +520,14 @@
661
520
  color: #4b4a53;
662
521
  font-size: 14px !important;
663
522
 
664
- &:hover {
523
+ &:hover:not(:disabled) {
665
524
  color: #4b4a53;
666
525
  background-position: center;
667
526
  transition: background 0.8s;
668
527
  background: #f5f5f5 radial-gradient(circle, transparent 1%, #f5f5f5 1%) center/15000%;
669
528
  }
670
529
 
671
- &:active {
530
+ &:active:not(:disabled) {
672
531
  color: #4b4a53;
673
532
  background-color: #f5f5f5;
674
533
  background-size: 100%;
@@ -680,14 +539,14 @@
680
539
  border: 1px solid #d6d6d6;
681
540
  font-size: 14px !important;
682
541
 
683
- &:hover {
542
+ &:hover:not(:disabled) {
684
543
  color: #4b4a53;
685
544
  background-position: center;
686
545
  transition: background 0.8s;
687
546
  background: #f5f5f5 radial-gradient(circle, transparent 1%, #f5f5f5 1%) center/15000%;
688
547
  }
689
548
 
690
- &:active {
549
+ &:active:not(:disabled) {
691
550
  color: #4b4a53;
692
551
  background-color: #f5f5f5;
693
552
  background-size: 100%;
@@ -700,14 +559,14 @@
700
559
  border: none;
701
560
  font-size: 14px !important;
702
561
 
703
- &:hover {
562
+ &:hover:not(:disabled) {
704
563
  color: #4b4a53;
705
564
  background-position: center;
706
565
  transition: background 0.8s;
707
566
  background: #f5f5f5 radial-gradient(circle, transparent 1%, #f5f5f5 1%) center/15000%;
708
567
  }
709
568
 
710
- &:active {
569
+ &:active:not(:disabled) {
711
570
  color: #4b4a53;
712
571
  background-color: #f5f5f5;
713
572
  background-size: 100%;
@@ -731,14 +590,14 @@
731
590
  color: #4b4a53;
732
591
  font-size: 14px !important;
733
592
 
734
- &:hover {
593
+ &:hover:not(:disabled) {
735
594
  color: #4b4a53;
736
595
  background-position: center;
737
596
  transition: background 0.8s;
738
597
  background: #ebebeb radial-gradient(circle, transparent 1%, #ebebeb 1%) center/15000%;
739
598
  }
740
599
 
741
- &:active {
600
+ &:active:not(:disabled) {
742
601
  color: #4b4a53;
743
602
  background-color: #ebebeb;
744
603
  background-size: 100%;
@@ -750,14 +609,14 @@
750
609
  border: 1px solid #d6d6d6;
751
610
  font-size: 14px !important;
752
611
 
753
- &:hover {
612
+ &:hover:not(:disabled) {
754
613
  color: #4b4a53;
755
614
  background-position: center;
756
615
  transition: background 0.8s;
757
616
  background: #ebebeb radial-gradient(circle, transparent 1%, #ebebeb 1%) center/15000%;
758
617
  }
759
618
 
760
- &:active {
619
+ &:active:not(:disabled) {
761
620
  color: #4b4a53;
762
621
  background-color: #ebebeb;
763
622
  background-size: 100%;
@@ -770,14 +629,14 @@
770
629
  border: none;
771
630
  font-size: 14px !important;
772
631
 
773
- &:hover {
632
+ &:hover:not(:disabled) {
774
633
  color: #4b4a53;
775
634
  background-position: center;
776
635
  transition: background 0.8s;
777
636
  background: #ebebeb radial-gradient(circle, transparent 1%, #ebebeb 1%) center/15000%;
778
637
  }
779
638
 
780
- &:active {
639
+ &:active:not(:disabled) {
781
640
  color: #4b4a53;
782
641
  background-color: #ebebeb;
783
642
  background-size: 100%;
@@ -800,14 +659,14 @@
800
659
  background-color: #f5f5f5;
801
660
  color: map-get($mecx-theme, main);
802
661
 
803
- &:hover {
662
+ &:hover:not(:disabled) {
804
663
  color: map-get($mecx-theme, main);
805
664
  background-position: center;
806
665
  transition: background 0.8s;
807
666
  background: #f5f5f5 radial-gradient(circle, transparent 1%, #f5f5f5 1%) center/15000%;
808
667
  }
809
668
 
810
- &:active {
669
+ &:active:not(:disabled) {
811
670
  color: map-get($mecx-theme, main);
812
671
  background-color: #f5f5f5;
813
672
  background-size: 100%;