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
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
|
@use '../../sass-utilities' as *;
@include pf-root($slider) {
--#{$slider}--value: 0; // should always be set inline
--#{$slider}__step--InsetInlineStart: 0; // should always be set inline
// rail
--#{$slider}__rail--PaddingBlockStart: var(--pf-t--global--spacer--md);
--#{$slider}__rail--PaddingBlockEnd: var(--pf-t--global--spacer--md);
--#{$slider}__rail-track--Height: #{pf-size-prem(4px)};
--#{$slider}__rail-track--before--base--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
--#{$slider}__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
--#{$slider}__rail-track--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
--#{$slider}__rail-track--before--BorderColor: transparent;
--#{$slider}__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
--#{$slider}__rail-track--before--fill--BackgroundColor--gradient-stop: var(--#{$slider}--value);
// steps
--#{$slider}__steps--FontSize: var(--pf-t--global--font--size--sm);
--#{$slider}__steps--Height: var(--#{$slider}__steps--FontSize);
// step tick
--#{$slider}__step-tick--InsetBlockStart: var(--pf-t--global--spacer--md);
--#{$slider}__step-tick--Width: 0.15rem;
--#{$slider}__step-tick--Height: #{pf-size-prem(4px)};
--#{$slider}__step-tick--BackgroundColor: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
--#{$slider}__step-tick--TranslateX: -50%;
--#{$slider}__step-tick--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
--#{$slider}__step-tick--BorderColor: transparent;
--#{$slider}__step-tick--BorderRadius: var(--pf-t--global--border--radius--sharp);
--#{$slider}__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--on-brand--default);
--#{$slider}__step--first-child__step-tick--TranslateX: 0;
--#{$slider}__step--last-child__step-tick--TranslateX: -100%;
// step label
--#{$slider}__step-label--TranslateX: -50%;
--#{$slider}__step-label--InsetBlockStart: calc(var(--pf-t--global--spacer--xl) + var(--#{$slider}__rail-track--Height));
--#{$slider}__step--first-child__step-label--TranslateX: 0;
--#{$slider}__step--last-child__step-label--TranslateX: -100%;
// thumb
--#{$slider}__thumb--InsetBlockStart: calc(var(--#{$slider}__rail-track--Height) / 2 + var(--pf-t--global--spacer--md));
--#{$slider}__thumb--Width: #{pf-size-prem(16px)};
--#{$slider}__thumb--Height: #{pf-size-prem(16px)};
--#{$slider}__thumb--InsetInlineStart: var(--#{$slider}--value);
--#{$slider}__thumb--BackgroundColor: var(--pf-t--global--color--brand--default);
--#{$slider}__thumb--TranslateX: -50%;
--#{$slider}__thumb--TranslateY: -50%;
--#{$slider}__thumb--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
--#{$slider}__thumb--BorderColor: transparent;
--#{$slider}__thumb--BorderRadius: var(--pf-t--global--border--radius--large);
--#{$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);
--#{$slider}__thumb--hover--BoxShadow: var(--#{$slider}__thumb--BoxShadow--base);
--#{$slider}__thumb--focus--BoxShadow: var(--#{$slider}__thumb--BoxShadow--base);
--#{$slider}__thumb--active--BoxShadow:
var(--#{$slider}__thumb--BoxShadow--base),
0 0 2px 5px var(--pf-t--global--color--nonstatus--blue--clicked);
--#{$slider}__thumb--before--Width: 44px;
--#{$slider}__thumb--before--Height: var(--#{$slider}__thumb--before--Width);
--#{$slider}__thumb--before--BorderRadius: var(--pf-t--global--border--radius--large);
--#{$slider}__thumb--before--TranslateX: -50%;
--#{$slider}__thumb--before--TranslateY: -50%;
// value
--#{$slider}__value--MarginInlineStart: var(--pf-t--global--spacer--md);
--#{$slider}__value--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + #{pf-size-prem(20px)}); // form control base width + number input spinner width
--#{$slider}__value--c-form-control--width-chars: 3;
--#{$slider}__value--c-form-control--Width: calc(var(--#{$slider}__value--c-form-control--width-base) + var(--#{$slider}__value--c-form-control--width-chars) * 1ch);
--#{$slider}__value--m-floating--TranslateX: -50%;
--#{$slider}__value--m-floating--TranslateY: -100%;
--#{$slider}__value--m-floating--InsetInlineStart: var(--#{$slider}--value);
--#{$slider}__value--m-floating--ZIndex: var(--pf-t--global--z-index--sm);
// actions
--#{$slider}__actions--MarginInlineEnd: var(--pf-t--global--spacer--sm);
--#{$slider}__main--actions--MarginInlineStart: var(--pf-t--global--spacer--sm);
// disabled
--#{$slider}--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
--#{$slider}--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--disabled);
--#{$slider}--m-disabled__thumb--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
}
.#{$slider} {
@include pf-v6-bidirectional-style(
$prop: --#{$slider}__rail-track--before--fill--direction,
$ltr-val: right,
$rtl-val: left
);
display: flex;
&.pf-m-disabled {
--#{$slider}__rail-track--before--fill--BackgroundColor: var(--#{$slider}--m-disabled__rail-track--before--fill--BackgroundColor);
--#{$slider}__step--m-active__slider-tick--BackgroundColor: var(--#{$slider}--m-disabled__step--m-active__slider-tick--BackgroundColor);
--#{$slider}__thumb--BackgroundColor: var(--#{$slider}--m-disabled__thumb--BackgroundColor);
.#{$slider}__rail,
.#{$slider}__thumb {
cursor: not-allowed;
}
.#{$slider}__thumb {
--#{$slider}__thumb--BoxShadow: none;
}
}
}
.#{$slider}__main {
position: relative;
flex-grow: 1;
}
.#{$slider}__rail {
padding-block-start: var(--#{$slider}__rail--PaddingBlockStart);
padding-block-end: var(--#{$slider}__rail--PaddingBlockEnd);
}
.#{$slider}__rail-track {
position: relative;
height: var(--#{$slider}__rail-track--Height);
&::before {
position: absolute;
inset: 0;
content: "";
background:
linear-gradient(
to var(--#{$slider}__rail-track--before--fill--direction),
var(--#{$slider}__rail-track--before--fill--BackgroundColor),
var(--#{$slider}__rail-track--before--fill--BackgroundColor) var(--#{$slider}__rail-track--before--fill--BackgroundColor--gradient-stop),
var(--#{$slider}__rail-track--before--base--BackgroundColor) var(--#{$slider}__rail-track--before--fill--BackgroundColor--gradient-stop)
);
border: var(--#{$slider}__rail-track--before--BorderWidth) solid var(--#{$slider}__rail-track--before--BorderColor);
border-radius: var(--#{$slider}__rail-track--before--BorderRadius);
}
}
.#{$slider}__steps {
height: var(--#{$slider}__steps--Height);
font-size: var(--#{$slider}__steps--FontSize);
line-height: 1;
}
.#{$slider}__step {
position: absolute;
inset-block-start: 0;
inset-inline-start: var(--#{$slider}__step--InsetInlineStart); // set programmatically as an inline style
content: "";
&.pf-m-active {
--#{$slider}__step-tick--BackgroundColor: var(--#{$slider}__step--m-active__slider-tick--BackgroundColor);
}
&:first-child {
--#{$slider}__step-tick--TranslateX: var(--#{$slider}__step--first-child__step-tick--TranslateX);
--#{$slider}__step-label--TranslateX: var(--#{$slider}__step--first-child__step-label--TranslateX);
}
&:last-child {
--#{$slider}__step-tick--TranslateX: var(--#{$slider}__step--last-child__step-tick--TranslateX);
--#{$slider}__step-label--TranslateX: var(--#{$slider}__step--last-child__step-label--TranslateX);
}
}
.#{$slider}__step-tick {
@include pf-v6-bidirectional-style(
$prop: transform,
$ltr-val: translateX(var(--#{$slider}__step-tick--TranslateX)),
$rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$slider}__step-tick--TranslateX))})
);
position: absolute;
inset-block-start: var(--#{$slider}__step-tick--InsetBlockStart);
inset-inline-start: 0;
width: var(--#{$slider}__step-tick--Width);
height: var(--#{$slider}__step-tick--Height);
background-color: var(--#{$slider}__step-tick--BackgroundColor);
border: var(--#{$slider}__step-tick--BorderWidth) solid var(--#{$slider}__step-tick--BorderColor);
border-radius: var(--#{$slider}__step-tick--BorderRadius);
}
.#{$slider}__step-label {
@include pf-v6-bidirectional-style(
$prop: transform,
$ltr-val: translateX(var(--#{$slider}__step-label--TranslateX)),
$rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$slider}__step-label--TranslateX))})
);
position: absolute;
inset-block-start: var(--#{$slider}__step-label--InsetBlockStart);
word-break: normal;
}
.#{$slider}__thumb {
@include pf-v6-bidirectional-style(
$prop: transform,
$ltr-val: translate(var(--#{$slider}__thumb--TranslateX), var(--#{$slider}__thumb--TranslateY)),
$rtl-val: translate(#{pf-v6-calc-inverse(var(--#{$slider}__thumb--TranslateX))}, var(--#{$slider}__thumb--TranslateY))
);
position: absolute;
inset-block-start: var(--#{$slider}__thumb--InsetBlockStart);
inset-inline-start: var(--#{$slider}__thumb--InsetInlineStart);
width: var(--#{$slider}__thumb--Width);
height: var(--#{$slider}__thumb--Height);
cursor: pointer;
background-color: var(--#{$slider}__thumb--BackgroundColor);
border: var(--#{$slider}__thumb--BorderWidth) solid var(--#{$slider}__thumb--BorderColor);
border-radius: var(--#{$slider}__thumb--BorderRadius);
box-shadow: var(--#{$slider}__thumb--BoxShadow);
&::before {
@include pf-v6-bidirectional-style(
$prop: transform,
$ltr-val: translate(var(--#{$slider}__thumb--before--TranslateX), var(--#{$slider}__thumb--before--TranslateY)),
$rtl-val: translate(#{pf-v6-calc-inverse(var(--#{$slider}__thumb--before--TranslateX))}, var(--#{$slider}__thumb--before--TranslateY))
);
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
width: var(--#{$slider}__thumb--before--Width);
height: var(--#{$slider}__thumb--before--Height);
content: "";
border-radius: var(--#{$slider}__thumb--before--BorderRadius);
}
&:hover {
--#{$slider}__thumb--BoxShadow: var(--#{$slider}__thumb--hover--BoxShadow);
}
&:focus {
--#{$slider}__thumb--BoxShadow: var(--#{$slider}__thumb--focus--BoxShadow);
outline: 0;
}
&:active {
--#{$slider}__thumb--BoxShadow: var(--#{$slider}__thumb--active--BoxShadow);
}
}
.#{$slider}__value {
margin-inline-start: var(--#{$slider}__value--MarginInlineStart);
&.pf-m-floating {
@include pf-v6-bidirectional-style(
$prop: transform,
$ltr-val: translate(var(--#{$slider}__value--m-floating--TranslateX), var(--#{$slider}__value--m-floating--TranslateY)),
$rtl-val: translate(#{pf-v6-calc-inverse(var(--#{$slider}__value--m-floating--TranslateX))}, var(--#{$slider}__value--m-floating--TranslateY)),
);
--#{$slider}__value--MarginInlineStart: 0;
position: absolute;
inset-block-start: 0;
inset-inline-start: var(--#{$slider}__value--m-floating--InsetInlineStart);
z-index: var(--#{$slider}__value--m-floating--ZIndex);
}
.#{$form-control} {
width: var(--#{$slider}__value--c-form-control--Width);
}
}
.#{$slider}__actions {
display: flex;
margin-inline-end: var(--#{$slider}__actions--MarginInlineEnd);
.#{$slider}__main ~ & {
--#{$slider}__actions--MarginInlineEnd: 0;
margin-inline-start: var(--#{$slider}__main--actions--MarginInlineStart);
}
}
|
