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
|
.pf-v6-c-toggle-group {
--pf-v6-c-toggle-group__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
--pf-v6-c-toggle-group__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
--pf-v6-c-toggle-group__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
--pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-t--global--spacer--md);
--pf-v6-c-toggle-group__button--FontSize: var(--pf-t--global--font--size--body--default);
--pf-v6-c-toggle-group__button--LineHeight: var(--pf-t--global--font--line-height--body);
--pf-v6-c-toggle-group__button--Color: var(--pf-t--global--text--color--regular);
--pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
--pf-v6-c-toggle-group__button--ZIndex: auto;
--pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
--pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
--pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
--pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
--pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
--pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
--pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--tiny);
--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--tiny);
--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--tiny);
--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--tiny);
--pf-v6-c-toggle-group__icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
--pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
--pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
--pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
--pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
--pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
--pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
--pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
--pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
--pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
--pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
--pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
--pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
--pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: 0;
--pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
--pf-v6-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
}
.pf-v6-c-toggle-group {
display: flex;
}
.pf-v6-c-toggle-group.pf-m-compact {
--pf-v6-c-toggle-group__button--PaddingBlockStart: var(--pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart);
--pf-v6-c-toggle-group__button--PaddingInlineEnd: var(--pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd);
--pf-v6-c-toggle-group__button--PaddingBlockEnd: var(--pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd);
--pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart);
--pf-v6-c-toggle-group__button--FontSize: var(--pf-v6-c-toggle-group--m-compact__button--FontSize);
}
.pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);
}
.pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button {
border-start-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius);
border-end-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius);
}
.pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button {
border-start-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius);
border-end-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius);
}
.pf-v6-c-toggle-group__button {
position: relative;
z-index: var(--pf-v6-c-toggle-group__button--ZIndex);
display: inline-flex;
padding-block-start: var(--pf-v6-c-toggle-group__button--PaddingBlockStart);
padding-block-end: var(--pf-v6-c-toggle-group__button--PaddingBlockEnd);
padding-inline-start: var(--pf-v6-c-toggle-group__button--PaddingInlineStart);
padding-inline-end: var(--pf-v6-c-toggle-group__button--PaddingInlineEnd);
font-size: var(--pf-v6-c-toggle-group__button--FontSize);
line-height: var(--pf-v6-c-toggle-group__button--LineHeight);
color: var(--pf-v6-c-toggle-group__button--Color);
background-color: var(--pf-v6-c-toggle-group__button--BackgroundColor);
border: 0;
}
.pf-v6-c-toggle-group__button::before, .pf-v6-c-toggle-group__button::after {
position: absolute;
inset: 0;
pointer-events: none;
content: "";
border-style: solid;
border-radius: inherit;
}
.pf-v6-c-toggle-group__button::before {
border-width: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
border-block-start-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
border-block-end-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
border-inline-start-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
border-inline-end-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
}
.pf-v6-c-toggle-group__button::after {
inset: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
border-color: var(--pf-v6-c-toggle-group__button--after--BorderColor, transparent);
border-width: var(--pf-v6-c-toggle-group__button--after--BorderWidth, 0);
}
.pf-v6-c-toggle-group__button:is(:hover, :focus) {
--pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
--pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
--pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
--pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--hover--after--BorderWidth);
text-decoration-line: none;
}
.pf-v6-c-toggle-group__button.pf-m-selected {
--pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--m-selected--BackgroundColor);
--pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit);
--pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--m-selected--ZIndex);
--pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderColor);
--pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth);
}
.pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) {
--pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--disabled--BackgroundColor);
--pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--disabled--Color);
--pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--disabled--ZIndex);
--pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--disabled--before--BorderColor);
pointer-events: none;
}
.pf-v6-c-toggle-group__item:has(.pf-m-selected) + .pf-v6-c-toggle-group__item:has(.pf-m-selected) {
--pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor);
}
.pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
--pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor);
}
.pf-v6-c-toggle-group__icon + .pf-v6-c-toggle-group__text,
.pf-v6-c-toggle-group__text + .pf-v6-c-toggle-group__icon {
margin-inline-start: var(--pf-v6-c-toggle-group__icon--text--MarginInlineStart);
}
|
