codecheck

1
// core
2
.p-button {
3
    display: inline-flex;
4
    cursor: pointer;
5
    user-select: none;
6
    align-items: center;
7
    vertical-align: bottom;
8
    text-align: center;
9
    overflow: hidden;
10
    position: relative;
11
}
12

13
.p-button-label {
14
    flex: 1 1 auto;
15
}
16

17
.p-button-icon-right {
18
    order: 1;
19
}
20

21
.p-button:disabled {
22
    cursor: default;
23
}
24

25
.p-button-icon-only {
26
    justify-content: center;
27
}
28

29
.p-button-icon-only .p-button-label {
30
    visibility: hidden;
31
    width: 0;
32
    flex: 0 0 auto;
33
}
34

35
.p-button-vertical {
36
    flex-direction: column;
37
}
38

39
.p-button-icon-bottom {
40
    order: 2;
41
}
42

43
.p-button-group .p-button {
44
    margin: 0;
45
}
46

47
.p-button-group .p-button:not(:last-child), .p-button-group .p-button:not(:last-child):hover {
48
    border-right: 0 none;
49
}
50

51
.p-button-group .p-button:not(:first-of-type):not(:last-of-type) {
52
    border-radius: 0;
53
}
54

55
.p-button-group .p-button:first-of-type:not(:only-of-type) {
56
    border-top-right-radius: 0;
57
    border-bottom-right-radius: 0;
58
}
59

60
.p-button-group .p-button:last-of-type:not(:only-of-type) {
61
    border-top-left-radius: 0;
62
    border-bottom-left-radius: 0;
63
}
64

65
.p-button-group .p-button:focus {
66
    position: relative;
67
    z-index: 1;
68
}
69

70
// theme
71
.p-button {
72
    color: $buttonTextColor;
73
    background: $buttonBg;
74
    border: $buttonBorder;
75
    padding: $buttonPadding;
76
    font-size: $fontSize;
77
    transition: $formElementTransition;
78
    border-radius: $borderRadius;
79
    outline-color: transparent;
80

81
    &:not(:disabled):hover {
82
        background: $buttonHoverBg;
83
        color: $buttonTextHoverColor;
84
        border-color: $buttonHoverBorderColor;
85
    }
86

87
    &:not(:disabled):active {
88
        background: $buttonActiveBg;
89
        color: $buttonTextActiveColor;
90
        border-color: $buttonActiveBorderColor;
91
    }
92

93
    &.p-button-outlined {
94
        background-color: transparent;
95
        color: $buttonBg;
96
        border: $outlinedButtonBorder;
97

98
        &:not(:disabled):hover {
99
            background: rgba($buttonBg, $textButtonHoverBgOpacity);
100
            color: $buttonBg;
101
            border: $outlinedButtonBorder;
102
        }
103

104
        &:not(:disabled):active {
105
            background: rgba($buttonBg, $textButtonActiveBgOpacity);
106
            color: $buttonBg;
107
            border: $outlinedButtonBorder;
108
        }
109

110
        &.p-button-plain {
111
            color: $plainButtonTextColor;
112
            border-color: $plainButtonTextColor;
113

114
            &:not(:disabled):hover {
115
                background: $plainButtonHoverBgColor;
116
                color: $plainButtonTextColor;
117
            }
118
    
119
            &:not(:disabled):active {
120
                background: $plainButtonActiveBgColor;
121
                color: $plainButtonTextColor;
122
            }
123
        }
124
    }
125

126
    &.p-button-text {
127
        background-color: transparent;
128
        color: $buttonBg;
129
        border-color: transparent;
130

131
        &:not(:disabled):hover {
132
            background: rgba($buttonBg, $textButtonHoverBgOpacity);
133
            color: $buttonBg;
134
            border-color: transparent;
135
        }
136

137
        &:not(:disabled):active {
138
            background: rgba($buttonBg, $textButtonActiveBgOpacity);
139
            color: $buttonBg;
140
            border-color: transparent;
141
        }
142

143
        &.p-button-plain {
144
            color: $plainButtonTextColor;
145

146
            &:not(:disabled):hover {
147
                background: $plainButtonHoverBgColor;
148
                color: $plainButtonTextColor;
149
            }
150
    
151
            &:not(:disabled):active {
152
                background: $plainButtonActiveBgColor;
153
                color: $plainButtonTextColor;
154
            }
155
        }
156
    }
157

158
    &:focus-visible {
159
        @include focused();
160
    }
161

162
    .p-button-label {
163
        transition-duration: $transitionDuration;
164
    }
165

166
    .p-button-icon-left {
167
         margin-right: $inlineSpacing;
168
    }
169

170
    .p-button-icon-right {
171
        margin-left: $inlineSpacing;
172
    }
173

174
    .p-button-icon-bottom {
175
        margin-top: $inlineSpacing;
176
    }
177

178
    .p-button-icon-top {
179
       margin-bottom: $inlineSpacing;
180
    }
181

182
    .p-badge {
183
        margin-left: $inlineSpacing;
184
        min-width: $fontSize;
185
        height: $fontSize;
186
        line-height: $fontSize;
187
        color: $buttonBg;
188
        background-color: $buttonTextColor;
189
    }
190

191
    &.p-button-raised {
192
        box-shadow: $raisedButtonShadow;
193
    }
194

195
    &.p-button-rounded {
196
        border-radius: $roundedButtonBorderRadius;
197
    }
198

199
    &.p-button-icon-only {
200
        width: $buttonIconOnlyWidth;
201
        padding: $buttonIconOnlyPadding;
202

203
        .p-button-icon-left,
204
        .p-button-icon-right {
205
            margin: 0;
206
        }
207

208
        &.p-button-rounded {
209
            border-radius: 50%;
210
            height: $buttonIconOnlyWidth;
211
        }
212
    }
213

214
    &.p-button-sm {
215
        @include scaledFontSize($fontSize, $scaleSM);
216
        @include scaledPadding($buttonPadding, $scaleSM);
217

218
        .p-button-icon {
219
            @include scaledFontSize($primeIconFontSize, $scaleSM);
220
        }
221
    }
222

223
    &.p-button-lg {
224
        @include scaledFontSize($fontSize, $scaleLG);
225
        @include scaledPadding($buttonPadding, $scaleLG);
226

227
        .p-button-icon {
228
            @include scaledFontSize($primeIconFontSize, $scaleLG);
229
        }
230
    }
231

232
    &.p-button-loading-label-only {
233
        .p-button-label {
234
            margin-left: $inlineSpacing;
235
        }
236

237
        .p-button-loading-icon {
238
            margin-right: 0;
239
        }
240
    }
241
}
242

243
.p-fluid {
244
    .p-button {
245
        width: 100%;
246
    }
247
    
248
    .p-button-icon-only {
249
        width: $buttonIconOnlyWidth;
250
    }
251

252
    .p-button-group {
253
        display: flex;
254
        
255
        .p-button {
256
            flex: 1;
257
        }
258
    }
259
}
260

261
.p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
262
    color: $secondaryButtonTextColor;
263
    background: $secondaryButtonBg;
264
    border: $secondaryButtonBorder;
265

266
    &:not(:disabled):hover {
267
        background: $secondaryButtonHoverBg;
268
        color: $secondaryButtonTextHoverColor;
269
        border-color: $secondaryButtonHoverBorderColor;
270
    }
271

272
    &:not(:disabled):focus {
273
        box-shadow: $secondaryButtonFocusShadow;
274
    }
275

276
    &:not(:disabled):active {
277
        background: $secondaryButtonActiveBg;
278
        color: $secondaryButtonTextActiveColor;
279
        border-color: $secondaryButtonActiveBorderColor;
280
    }
281
    
282
    &.p-button-outlined {
283
        background-color: transparent;
284
        color: $secondaryButtonBg;
285
        border: $outlinedButtonBorder;
286

287
        &:not(:disabled):hover {
288
            background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
289
            color: $secondaryButtonBg;
290
            border: $outlinedButtonBorder;
291
        }
292

293
        &:not(:disabled):active {
294
            background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
295
            color: $secondaryButtonBg;
296
            border: $outlinedButtonBorder;
297
        }
298
    }
299

300
    &.p-button-text {
301
        background-color: transparent;
302
        color: $secondaryButtonBg;
303
        border-color: transparent;
304

305
        &:not(:disabled):hover {
306
            background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
307
            border-color: transparent;
308
            color: $secondaryButtonBg;
309
        }
310

311
        &:not(:disabled):active {
312
            background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
313
            border-color: transparent;
314
            color: $secondaryButtonBg;
315
        }
316
    }
317
}
318

319
.p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button {
320
    color: $infoButtonTextColor;
321
    background: $infoButtonBg;
322
    border: $infoButtonBorder;
323

324
    &:not(:disabled):hover {
325
        background: $infoButtonHoverBg;
326
        color: $infoButtonTextHoverColor;
327
        border-color: $infoButtonHoverBorderColor;
328
    }
329

330
    &:not(:disabled):focus {
331
        box-shadow: $infoButtonFocusShadow;
332
    }
333

334
    &:not(:disabled):active {
335
        background: $infoButtonActiveBg;
336
        color: $infoButtonTextActiveColor;
337
        border-color: $infoButtonActiveBorderColor;
338
    }
339

340
    &.p-button-outlined {
341
        background-color: transparent;
342
        color: $infoButtonBg;
343
        border: $outlinedButtonBorder;
344

345
        &:not(:disabled):hover {
346
            background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
347
            color: $infoButtonBg;
348
            border: $outlinedButtonBorder;
349
        }
350

351
        &:not(:disabled):active {
352
            background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
353
            color: $infoButtonBg;
354
            border: $outlinedButtonBorder;
355
        }
356
    }
357

358
    &.p-button-text {
359
        background-color: transparent;
360
        color: $infoButtonBg;
361
        border-color: transparent;
362

363
        &:not(:disabled):hover {
364
            background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
365
            border-color: transparent;
366
            color: $infoButtonBg;
367
        }
368

369
        &:not(:disabled):active {
370
            background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
371
            border-color: transparent;
372
            color: $infoButtonBg;
373
        }
374
    }
375
}
376

377
.p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button {
378
    color: $successButtonTextColor;
379
    background: $successButtonBg;
380
    border: $successButtonBorder;
381

382
    &:not(:disabled):hover {
383
        background: $successButtonHoverBg;
384
        color: $successButtonTextHoverColor;
385
        border-color: $successButtonHoverBorderColor;
386
    }
387

388
    &:not(:disabled):focus {
389
        box-shadow: $successButtonFocusShadow;
390
    }
391

392
    &:not(:disabled):active {
393
        background: $successButtonActiveBg;
394
        color: $successButtonTextActiveColor;
395
        border-color: $successButtonActiveBorderColor;
396
    }
397

398
    &.p-button-outlined {
399
        background-color: transparent;
400
        color: $successButtonBg;
401
        border: $outlinedButtonBorder;
402

403
        &:not(:disabled):hover {
404
            background: rgba($successButtonBg, $textButtonHoverBgOpacity);
405
            color: $successButtonBg;
406
            border: $outlinedButtonBorder;
407
        }
408

409
        &:not(:disabled):active {
410
            background: rgba($successButtonBg, $textButtonActiveBgOpacity);
411
            color: $successButtonBg;
412
            border: $outlinedButtonBorder;
413
        }
414
    }
415

416
    &.p-button-text {
417
        background-color: transparent;
418
        color: $successButtonBg;
419
        border-color: transparent;
420

421
        &:not(:disabled):hover {
422
            background: rgba($successButtonBg, $textButtonHoverBgOpacity);
423
            border-color: transparent;
424
            color: $successButtonBg;
425
        }
426

427
        &:not(:disabled):active {
428
            background: rgba($successButtonBg, $textButtonActiveBgOpacity);
429
            border-color: transparent;
430
            color: $successButtonBg;
431
        }
432
    }
433
}
434

435
.p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button {
436
    color: $warningButtonTextColor;
437
    background: $warningButtonBg;
438
    border: $warningButtonBorder;
439
    
440
    &:not(:disabled):hover {
441
        background: $warningButtonHoverBg;
442
        color: $warningButtonTextHoverColor;
443
        border-color: $warningButtonHoverBorderColor;
444
    }
445

446
    &:not(:disabled):focus {
447
        box-shadow: $warningButtonFocusShadow;
448
    }
449

450
    &:not(:disabled):active {
451
        background: $warningButtonActiveBg;
452
        color: $warningButtonTextActiveColor;
453
        border-color: $warningButtonActiveBorderColor;
454
    }
455

456
    &.p-button-outlined {
457
        background-color: transparent;
458
        color: $warningButtonBg;
459
        border: $outlinedButtonBorder;
460

461
        &:not(:disabled):hover {
462
            background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
463
            color: $warningButtonBg;
464
            border: $outlinedButtonBorder;
465
        }
466

467
        &:not(:disabled):active {
468
            background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
469
            color: $warningButtonBg;
470
            border: $outlinedButtonBorder;
471
        }
472
    }
473

474
    &.p-button-text {
475
        background-color: transparent;
476
        color: $warningButtonBg;
477
        border-color: transparent;
478

479
        &:not(:disabled):hover {
480
            background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
481
            border-color: transparent;
482
            color: $warningButtonBg;
483
        }
484

485
        &:not(:disabled):active {
486
            background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
487
            border-color: transparent;
488
            color: $warningButtonBg;
489
        }
490
    }
491
}
492

493
.p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button {
494
    color: $helpButtonTextColor;
495
    background: $helpButtonBg;
496
    border: $helpButtonBorder;
497

498
    &:not(:disabled):hover {
499
        background: $helpButtonHoverBg;
500
        color: $helpButtonTextHoverColor;
501
        border-color: $helpButtonHoverBorderColor;
502
    }
503

504
    &:not(:disabled):focus {
505
        box-shadow: $helpButtonFocusShadow;
506
    }
507

508
    &:not(:disabled):active {
509
        background: $helpButtonActiveBg;
510
        color: $helpButtonTextActiveColor;
511
        border-color: $helpButtonActiveBorderColor;
512
    }
513

514
    &.p-button-outlined {
515
        background-color: transparent;
516
        color: $helpButtonBg;
517
        border: $outlinedButtonBorder;
518

519
        &:not(:disabled):hover {
520
            background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
521
            color: $helpButtonBg;
522
            border: $outlinedButtonBorder;
523
        }
524

525
        &:not(:disabled):active {
526
            background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
527
            color: $helpButtonBg;
528
            border: $outlinedButtonBorder;
529
        }
530
    }
531

532
    &.p-button-text {
533
        background-color: transparent;
534
        color: $helpButtonBg;
535
        border-color: transparent;
536

537
        &:not(:disabled):hover {
538
            background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
539
            border-color: transparent;
540
            color: $helpButtonBg;
541
        }
542

543
        &:not(:disabled):active {
544
            background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
545
            border-color: transparent;
546
            color: $helpButtonBg;
547
        }
548
    }
549
}
550

551
.p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button {
552
    color: $dangerButtonTextColor;
553
    background: $dangerButtonBg;
554
    border: $dangerButtonBorder;
555

556
    &:not(:disabled):hover {
557
        background: $dangerButtonHoverBg;
558
        color: $dangerButtonTextHoverColor;
559
        border-color: $dangerButtonHoverBorderColor;
560
    }
561

562
    &:not(:disabled):focus {
563
        box-shadow: $dangerButtonFocusShadow;
564
    }
565

566
    &:not(:disabled):active {
567
        background: $dangerButtonActiveBg;
568
        color: $dangerButtonTextActiveColor;
569
        border-color: $dangerButtonActiveBorderColor;
570
    }
571

572
    &.p-button-outlined {
573
        background-color: transparent;
574
        color: $dangerButtonBg;
575
        border: $outlinedButtonBorder;
576

577
        &:not(:disabled):hover {
578
            background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
579
            color: $dangerButtonBg;
580
            border: $outlinedButtonBorder;
581
        }
582

583
        &:not(:disabled):active {
584
            background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
585
            color: $dangerButtonBg;
586
            border: $outlinedButtonBorder;
587
        }
588
    }
589

590
    &.p-button-text {
591
        background-color: transparent;
592
        color: $dangerButtonBg;
593
        border-color: transparent;
594

595
        &:not(:disabled):hover {
596
            background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
597
            border-color: transparent;
598
            color: $dangerButtonBg;
599
        }
600

601
        &:not(:disabled):active {
602
            background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
603
            border-color: transparent;
604
            color: $dangerButtonBg;
605
        }
606
    }
607
}
608

609
@if variable-exists(contrastButtonTextColor) {
610
    .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
611
        color: $contrastButtonTextColor;
612
        background: $contrastButtonBg;
613
        border: $contrastButtonBorder;
614
    
615
        &:not(:disabled):hover {
616
            background: $contrastButtonHoverBg;
617
            color: $contrastButtonTextHoverColor;
618
            border-color: $contrastButtonHoverBorderColor;
619
        }
620
    
621
        &:not(:disabled):focus {
622
            box-shadow: $contrastButtonFocusShadow;
623
        }
624
    
625
        &:not(:disabled):active {
626
            background: $contrastButtonActiveBg;
627
            color: $contrastButtonTextActiveColor;
628
            border-color: $contrastButtonActiveBorderColor;
629
        }
630
    
631
        &.p-button-outlined {
632
            background-color: transparent;
633
            color: $contrastButtonBg;
634
            border: $outlinedButtonBorder;
635
    
636
            &:not(:disabled):hover {
637
                background: rgba($contrastButtonBg, $textButtonHoverBgOpacity);
638
                color: $contrastButtonBg;
639
                border: $outlinedButtonBorder;
640
            }
641
    
642
            &:not(:disabled):active {
643
                background: rgba($contrastButtonBg, $textButtonActiveBgOpacity);
644
                color: $contrastButtonBg;
645
                border: $outlinedButtonBorder;
646
            }
647
        }
648
    
649
        &.p-button-text {
650
            background-color: transparent;
651
            color: $contrastButtonBg;
652
            border-color: transparent;
653
    
654
            &:not(:disabled):hover {
655
                background: rgba($contrastButtonBg, $textButtonHoverBgOpacity);
656
                border-color: transparent;
657
                color: $contrastButtonBg;
658
            }
659
    
660
            &:not(:disabled):active {
661
                background: rgba($contrastButtonBg, $textButtonActiveBgOpacity);
662
                border-color: transparent;
663
                color: $contrastButtonBg;
664
            }
665
        }
666
    }
667
}
668

669
.p-button.p-button-link {
670
    color: $linkButtonColor;
671
    background: transparent;
672
    border: transparent;
673

674
    &:not(:disabled):hover {
675
        background:  transparent;
676
        color: $linkButtonHoverColor;
677
        border-color:  transparent;
678

679
        .p-button-label {
680
            text-decoration: $linkButtonTextHoverDecoration;
681
        }
682
    }
683

684
    &:not(:disabled):focus {
685
        background: transparent;
686
        box-shadow: $linkButtonFocusShadow;
687
        border-color:  transparent;
688
    }
689

690
    &:not(:disabled):active {
691
        background:  transparent;
692
        color: $linkButtonColor;
693
        border-color:  transparent;
694
    }
695
}
696