1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104 | // these mixins are present to be called from pm-buttons and pm-darkmode
@import "../reusable-components/design-system-config";
@mixin button-disabled-state ($color: null) {
pointer-events: none;
@if $color == null {
background-color: $pm-global-muted;
border-color: $pm-global-border;
color: rgba( $pm-global-grey, .3 );
}
@else {
background-color: rgba($color, .2);
border-color: rgba($color, .25);
color: rgba($color, .5);
}
}
@mixin button-disabled-state-dm() {
background-color: $pm-global-grey;
color: rgba( $pm-global-muted, .3 );
pointer-events: none;
border-color: rgba( $pm-global-muted, .3 );
& svg {
fill: rgba( $pm-global-muted, .3 );
}
}
@mixin pm-button-dark {
color: $white;
background-color: $pm-global-grey;
border-color: var(--bordercolor-input, $pm-global-border);
&:focus,
&:hover,
&.is-hover {
color: $white;
background-color: rgba(0, 0, 0, 0.2);
}
&:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
&.is-active {
background-color: rgba(0, 0, 0, 0.5);
}
&[disabled],
&.is-disabled {
@include button-disabled-state-dm;
}
/* just to cancel examples */
&.is-hover:hover {
background-color: rgba(0, 0, 0, 0.2);
}
}
@mixin pm-button-blueborder-dark {
border-color: $pm-primary-light;
color: $pm-primary-light;
background-color: $pm-global-grey;
&:focus,
&:hover,
&:focus-within,
&.is-hover,
&:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
&.is-active {
background-color: rgba(0, 0, 0, 0.2);
border-color: $pm-primary-light;
color: $pm-primary-dark;
}
&:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
&.is-active {
background-color: rgba(0, 0, 0, 0.5);
}
&[disabled],
&.is-disabled {
@include button-disabled-state-dm;
}
}
@mixin pv-button-greenborder-dark {
border-color: $pv-green-light;
color: $pv-green-light;
background-color: $pm-global-grey;
&:focus,
&:hover,
&:focus-within,
&.is-hover,
&:active,
&.is-active {
background-color: rgba(0, 0, 0, 0.2);
border-color: $pv-green-dark;
color: $pv-green-dark;
}
&:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
&.is-active {
background-color: rgba(0, 0, 0, 0.5);
}
&[disabled],
&.is-disabled {
@include button-disabled-state-dm;
}
}
|
