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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
@use '../../sass-utilities' as *;
@include pf-root($toggle-group) {
// button
--#{$toggle-group}__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
--#{$toggle-group}__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
--#{$toggle-group}__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
--#{$toggle-group}__button--PaddingInlineStart: var(--pf-t--global--spacer--md);
--#{$toggle-group}__button--FontSize: var(--pf-t--global--font--size--body--default);
--#{$toggle-group}__button--LineHeight: var(--pf-t--global--font--line-height--body);
--#{$toggle-group}__button--Color: var(--pf-t--global--text--color--regular);
--#{$toggle-group}__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
--#{$toggle-group}__button--ZIndex: auto;
--#{$toggle-group}__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
--#{$toggle-group}__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
--#{$toggle-group}__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
--#{$toggle-group}__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
--#{$toggle-group}__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
--#{$toggle-group}__button--before--BorderColor: var(--pf-t--global--border--color--default);
// item
--#{$toggle-group}__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
--#{$toggle-group}__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--tiny);
--#{$toggle-group}__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--tiny);
--#{$toggle-group}__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--tiny);
--#{$toggle-group}__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--tiny);
// icon
--#{$toggle-group}__icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
// Selected
--#{$toggle-group}__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
--#{$toggle-group}__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
--#{$toggle-group}__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
--#{$toggle-group}__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
--#{$toggle-group}__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
--#{$toggle-group}__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
// disabled
--#{$toggle-group}__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
--#{$toggle-group}__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
--#{$toggle-group}__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
--#{$toggle-group}__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
--#{$toggle-group}__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
// Compact
--#{$toggle-group}--m-compact__button--PaddingBlockStart: 0;
--#{$toggle-group}--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
--#{$toggle-group}--m-compact__button--PaddingBlockEnd: 0;
--#{$toggle-group}--m-compact__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
--#{$toggle-group}--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
}
.#{$toggle-group} {
display: flex;
&.pf-m-compact {
--#{$toggle-group}__button--PaddingBlockStart: var(--#{$toggle-group}--m-compact__button--PaddingBlockStart);
--#{$toggle-group}__button--PaddingInlineEnd: var(--#{$toggle-group}--m-compact__button--PaddingInlineEnd);
--#{$toggle-group}__button--PaddingBlockEnd: var(--#{$toggle-group}--m-compact__button--PaddingBlockEnd);
--#{$toggle-group}__button--PaddingInlineStart: var(--#{$toggle-group}--m-compact__button--PaddingInlineStart);
--#{$toggle-group}__button--FontSize: var(--#{$toggle-group}--m-compact__button--FontSize);
}
}
.#{$toggle-group}__item {
& + & {
margin-inline-start: var(--#{$toggle-group}__item--item--MarginInlineStart);
}
&:first-child {
.#{$toggle-group}__button {
border-start-start-radius: var(--#{$toggle-group}__item--first-child__button--BorderStartStartRadius);
border-end-start-radius: var(--#{$toggle-group}__item--first-child__button--BorderEndStartRadius);
}
}
&:last-child {
.#{$toggle-group}__button {
border-start-end-radius: var(--#{$toggle-group}__item--last-child__button--BorderStartEndRadius);
border-end-end-radius: var(--#{$toggle-group}__item--last-child__button--BorderEndEndRadius);
}
}
}
.#{$toggle-group}__button {
position: relative;
z-index: var(--#{$toggle-group}__button--ZIndex);
display: inline-flex;
padding-block-start: var(--#{$toggle-group}__button--PaddingBlockStart);
padding-block-end: var(--#{$toggle-group}__button--PaddingBlockEnd);
padding-inline-start: var(--#{$toggle-group}__button--PaddingInlineStart);
padding-inline-end: var(--#{$toggle-group}__button--PaddingInlineEnd);
font-size: var(--#{$toggle-group}__button--FontSize);
line-height: var(--#{$toggle-group}__button--LineHeight);
color: var(--#{$toggle-group}__button--Color);
background-color: var(--#{$toggle-group}__button--BackgroundColor);
border: 0;
&::before,
&::after {
position: absolute;
inset: 0;
pointer-events: none;
content: "";
border-style: solid;
border-radius: inherit;
}
&::before {
border-width: var(--#{$toggle-group}__button--before--BorderWidth);
border-block-start-color: var(--#{$toggle-group}__button--before--BorderBlockStartColor, var(--#{$toggle-group}__button--before--BorderColor));
border-block-end-color: var(--#{$toggle-group}__button--before--BorderBlockEndColor, var(--#{$toggle-group}__button--before--BorderColor));
border-inline-start-color: var(--#{$toggle-group}__button--before--BorderInlineStartColor, var(--#{$toggle-group}__button--before--BorderColor));
border-inline-end-color: var(--#{$toggle-group}__button--before--BorderInlineEndColor, var(--#{$toggle-group}__button--before--BorderColor));
}
// forced-colors borders
&::after {
inset: var(--#{$toggle-group}__button--before--BorderWidth);
border-color: var(--#{$toggle-group}__button--after--BorderColor, transparent);
border-width: var(--#{$toggle-group}__button--after--BorderWidth, 0);
}
&:is(:hover, :focus) {
--#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--hover--BackgroundColor);
--#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--hover--ZIndex);
--#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--hover--before--BorderColor);
--#{$toggle-group}__button--after--BorderWidth: var(--#{$toggle-group}__button--hover--after--BorderWidth);
text-decoration-line: none;
}
&.pf-m-selected {
--#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--m-selected--BackgroundColor);
--#{$toggle-group}__button--Color: var(--#{$toggle-group}__button--m-selected--Color, inherit);
--#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--m-selected--ZIndex);
--#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--m-selected--before--BorderColor);
--#{$toggle-group}__button--after--BorderWidth: var(--#{$toggle-group}__button--m-selected--after--BorderWidth);
}
&:is(:disabled, .pf-m-disabled) {
--#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--disabled--BackgroundColor);
--#{$toggle-group}__button--Color: var(--#{$toggle-group}__button--disabled--Color);
--#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--disabled--ZIndex);
--#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--disabled--before--BorderColor);
pointer-events: none;
}
}
// For consecutive selected items, turn the left border back to what it was
.#{$toggle-group}__item:has(.pf-m-selected) + .#{$toggle-group}__item:has(.pf-m-selected) {
--#{$toggle-group}__button--before--BorderInlineStartColor: var(--#{$toggle-group}__button--m-selected-selected--before--BorderInlineStartColor);
}
// For consecutive disabled items, turn the left border back to what it was
.#{$toggle-group}__item:has(:disabled, .pf-m-disabled) + .#{$toggle-group}__item:has(:disabled, .pf-m-disabled) {
--#{$toggle-group}__button--before--BorderInlineStartColor: var(--#{$toggle-group}__button--disabled-disabled--before--BorderInlineStartColor);
}
.#{$toggle-group}__icon + .#{$toggle-group}__text,
.#{$toggle-group}__text + .#{$toggle-group}__icon {
margin-inline-start: var(--#{$toggle-group}__icon--text--MarginInlineStart);
}
|
