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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
|
.pf-v6-c-slider {
--pf-v6-c-slider--value: 0;
--pf-v6-c-slider__step--InsetInlineStart: 0;
--pf-v6-c-slider__rail--PaddingBlockStart: var(--pf-t--global--spacer--md);
--pf-v6-c-slider__rail--PaddingBlockEnd: var(--pf-t--global--spacer--md);
--pf-v6-c-slider__rail-track--Height: 0.25rem;
--pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
--pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
--pf-v6-c-slider__rail-track--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
--pf-v6-c-slider__rail-track--before--BorderColor: transparent;
--pf-v6-c-slider__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
--pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v6-c-slider--value);
--pf-v6-c-slider__steps--FontSize: var(--pf-t--global--font--size--sm);
--pf-v6-c-slider__steps--Height: var(--pf-v6-c-slider__steps--FontSize);
--pf-v6-c-slider__step-tick--InsetBlockStart: var(--pf-t--global--spacer--md);
--pf-v6-c-slider__step-tick--Width: 0.15rem;
--pf-v6-c-slider__step-tick--Height: 0.25rem;
--pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
--pf-v6-c-slider__step-tick--TranslateX: -50%;
--pf-v6-c-slider__step-tick--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
--pf-v6-c-slider__step-tick--BorderColor: transparent;
--pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--sharp);
--pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--on-brand--default);
--pf-v6-c-slider__step--first-child__step-tick--TranslateX: 0;
--pf-v6-c-slider__step--last-child__step-tick--TranslateX: -100%;
--pf-v6-c-slider__step-label--TranslateX: -50%;
--pf-v6-c-slider__step-label--InsetBlockStart: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-slider__rail-track--Height));
--pf-v6-c-slider__step--first-child__step-label--TranslateX: 0;
--pf-v6-c-slider__step--last-child__step-label--TranslateX: -100%;
--pf-v6-c-slider__thumb--InsetBlockStart: calc(var(--pf-v6-c-slider__rail-track--Height) / 2 + var(--pf-t--global--spacer--md));
--pf-v6-c-slider__thumb--Width: 1rem;
--pf-v6-c-slider__thumb--Height: 1rem;
--pf-v6-c-slider__thumb--InsetInlineStart: var(--pf-v6-c-slider--value);
--pf-v6-c-slider__thumb--BackgroundColor: var(--pf-t--global--color--brand--default);
--pf-v6-c-slider__thumb--TranslateX: -50%;
--pf-v6-c-slider__thumb--TranslateY: -50%;
--pf-v6-c-slider__thumb--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
--pf-v6-c-slider__thumb--BorderColor: transparent;
--pf-v6-c-slider__thumb--BorderRadius: var(--pf-t--global--border--radius--large);
--pf-v6-c-slider__thumb--BoxShadow--base:
0 0 0 2px var(--pf-t--global--background--color--primary--default),
0 0 0 3px var(--pf-t--global--color--brand--default);
--pf-v6-c-slider__thumb--hover--BoxShadow: var(--pf-v6-c-slider__thumb--BoxShadow--base);
--pf-v6-c-slider__thumb--focus--BoxShadow: var(--pf-v6-c-slider__thumb--BoxShadow--base);
--pf-v6-c-slider__thumb--active--BoxShadow:
var(--pf-v6-c-slider__thumb--BoxShadow--base),
0 0 2px 5px var(--pf-t--global--color--nonstatus--blue--clicked);
--pf-v6-c-slider__thumb--before--Width: 44px;
--pf-v6-c-slider__thumb--before--Height: var(--pf-v6-c-slider__thumb--before--Width);
--pf-v6-c-slider__thumb--before--BorderRadius: var(--pf-t--global--border--radius--large);
--pf-v6-c-slider__thumb--before--TranslateX: -50%;
--pf-v6-c-slider__thumb--before--TranslateY: -50%;
--pf-v6-c-slider__value--MarginInlineStart: var(--pf-t--global--spacer--md);
--pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + 1.25rem);
--pf-v6-c-slider__value--c-form-control--width-chars: 3;
--pf-v6-c-slider__value--c-form-control--Width: calc(var(--pf-v6-c-slider__value--c-form-control--width-base) + var(--pf-v6-c-slider__value--c-form-control--width-chars) * 1ch);
--pf-v6-c-slider__value--m-floating--TranslateX: -50%;
--pf-v6-c-slider__value--m-floating--TranslateY: -100%;
--pf-v6-c-slider__value--m-floating--InsetInlineStart: var(--pf-v6-c-slider--value);
--pf-v6-c-slider__value--m-floating--ZIndex: var(--pf-t--global--z-index--sm);
--pf-v6-c-slider__actions--MarginInlineEnd: var(--pf-t--global--spacer--sm);
--pf-v6-c-slider__main--actions--MarginInlineStart: var(--pf-t--global--spacer--sm);
--pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
--pf-v6-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--disabled);
--pf-v6-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
}
.pf-v6-c-slider {
--pf-v6-c-slider__rail-track--before--fill--direction: right;
display: flex;
}
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider {
--pf-v6-c-slider__rail-track--before--fill--direction: left;
}
.pf-v6-c-slider.pf-m-disabled {
--pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
--pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v6-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
--pf-v6-c-slider__thumb--BackgroundColor: var(--pf-v6-c-slider--m-disabled__thumb--BackgroundColor);
}
.pf-v6-c-slider.pf-m-disabled .pf-v6-c-slider__rail,
.pf-v6-c-slider.pf-m-disabled .pf-v6-c-slider__thumb {
cursor: not-allowed;
}
.pf-v6-c-slider.pf-m-disabled .pf-v6-c-slider__thumb {
--pf-v6-c-slider__thumb--BoxShadow: none;
}
.pf-v6-c-slider__main {
position: relative;
flex-grow: 1;
}
.pf-v6-c-slider__rail {
padding-block-start: var(--pf-v6-c-slider__rail--PaddingBlockStart);
padding-block-end: var(--pf-v6-c-slider__rail--PaddingBlockEnd);
}
.pf-v6-c-slider__rail-track {
position: relative;
height: var(--pf-v6-c-slider__rail-track--Height);
}
.pf-v6-c-slider__rail-track::before {
position: absolute;
inset: 0;
content: "";
background: linear-gradient(to var(--pf-v6-c-slider__rail-track--before--fill--direction), var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-v6-c-slider__rail-track--before--base--BackgroundColor) var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
border: var(--pf-v6-c-slider__rail-track--before--BorderWidth) solid var(--pf-v6-c-slider__rail-track--before--BorderColor);
border-radius: var(--pf-v6-c-slider__rail-track--before--BorderRadius);
}
.pf-v6-c-slider__steps {
height: var(--pf-v6-c-slider__steps--Height);
font-size: var(--pf-v6-c-slider__steps--FontSize);
line-height: 1;
}
.pf-v6-c-slider__step {
position: absolute;
inset-block-start: 0;
inset-inline-start: var(--pf-v6-c-slider__step--InsetInlineStart);
content: "";
}
.pf-v6-c-slider__step.pf-m-active {
--pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor);
}
.pf-v6-c-slider__step:first-child {
--pf-v6-c-slider__step-tick--TranslateX: var(--pf-v6-c-slider__step--first-child__step-tick--TranslateX);
--pf-v6-c-slider__step-label--TranslateX: var(--pf-v6-c-slider__step--first-child__step-label--TranslateX);
}
.pf-v6-c-slider__step:last-child {
--pf-v6-c-slider__step-tick--TranslateX: var(--pf-v6-c-slider__step--last-child__step-tick--TranslateX);
--pf-v6-c-slider__step-label--TranslateX: var(--pf-v6-c-slider__step--last-child__step-label--TranslateX);
}
.pf-v6-c-slider__step-tick {
transform: translateX(var(--pf-v6-c-slider__step-tick--TranslateX));
position: absolute;
inset-block-start: var(--pf-v6-c-slider__step-tick--InsetBlockStart);
inset-inline-start: 0;
width: var(--pf-v6-c-slider__step-tick--Width);
height: var(--pf-v6-c-slider__step-tick--Height);
background-color: var(--pf-v6-c-slider__step-tick--BackgroundColor);
border: var(--pf-v6-c-slider__step-tick--BorderWidth) solid var(--pf-v6-c-slider__step-tick--BorderColor);
border-radius: var(--pf-v6-c-slider__step-tick--BorderRadius);
}
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-tick {
transform: translateX(calc(var(--pf-v6-c-slider__step-tick--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
}
.pf-v6-c-slider__step-label {
transform: translateX(var(--pf-v6-c-slider__step-label--TranslateX));
position: absolute;
inset-block-start: var(--pf-v6-c-slider__step-label--InsetBlockStart);
word-break: normal;
}
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-label {
transform: translateX(calc(var(--pf-v6-c-slider__step-label--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
}
.pf-v6-c-slider__thumb {
transform: translate(var(--pf-v6-c-slider__thumb--TranslateX), var(--pf-v6-c-slider__thumb--TranslateY));
position: absolute;
inset-block-start: var(--pf-v6-c-slider__thumb--InsetBlockStart);
inset-inline-start: var(--pf-v6-c-slider__thumb--InsetInlineStart);
width: var(--pf-v6-c-slider__thumb--Width);
height: var(--pf-v6-c-slider__thumb--Height);
cursor: pointer;
background-color: var(--pf-v6-c-slider__thumb--BackgroundColor);
border: var(--pf-v6-c-slider__thumb--BorderWidth) solid var(--pf-v6-c-slider__thumb--BorderColor);
border-radius: var(--pf-v6-c-slider__thumb--BorderRadius);
box-shadow: var(--pf-v6-c-slider__thumb--BoxShadow);
}
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb {
transform: translate(calc(var(--pf-v6-c-slider__thumb--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--TranslateY));
}
.pf-v6-c-slider__thumb::before {
transform: translate(var(--pf-v6-c-slider__thumb--before--TranslateX), var(--pf-v6-c-slider__thumb--before--TranslateY));
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
width: var(--pf-v6-c-slider__thumb--before--Width);
height: var(--pf-v6-c-slider__thumb--before--Height);
content: "";
border-radius: var(--pf-v6-c-slider__thumb--before--BorderRadius);
}
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb::before {
transform: translate(calc(var(--pf-v6-c-slider__thumb--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--before--TranslateY));
}
.pf-v6-c-slider__thumb:hover {
--pf-v6-c-slider__thumb--BoxShadow: var(--pf-v6-c-slider__thumb--hover--BoxShadow);
}
.pf-v6-c-slider__thumb:focus {
--pf-v6-c-slider__thumb--BoxShadow: var(--pf-v6-c-slider__thumb--focus--BoxShadow);
outline: 0;
}
.pf-v6-c-slider__thumb:active {
--pf-v6-c-slider__thumb--BoxShadow: var(--pf-v6-c-slider__thumb--active--BoxShadow);
}
.pf-v6-c-slider__value {
margin-inline-start: var(--pf-v6-c-slider__value--MarginInlineStart);
}
.pf-v6-c-slider__value.pf-m-floating {
transform: translate(var(--pf-v6-c-slider__value--m-floating--TranslateX), var(--pf-v6-c-slider__value--m-floating--TranslateY));
--pf-v6-c-slider__value--MarginInlineStart: 0;
position: absolute;
inset-block-start: 0;
inset-inline-start: var(--pf-v6-c-slider__value--m-floating--InsetInlineStart);
z-index: var(--pf-v6-c-slider__value--m-floating--ZIndex);
}
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__value.pf-m-floating {
transform: translate(calc(var(--pf-v6-c-slider__value--m-floating--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__value--m-floating--TranslateY));
}
.pf-v6-c-slider__value .pf-v6-c-form-control {
width: var(--pf-v6-c-slider__value--c-form-control--Width);
}
.pf-v6-c-slider__actions {
display: flex;
margin-inline-end: var(--pf-v6-c-slider__actions--MarginInlineEnd);
}
.pf-v6-c-slider__main ~ .pf-v6-c-slider__actions {
--pf-v6-c-slider__actions--MarginInlineEnd: 0;
margin-inline-start: var(--pf-v6-c-slider__main--actions--MarginInlineStart);
}
|
