@patternfly/patternfly 6.0.0-alpha.48 → 6.0.0-alpha.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/components/DataList/data-list.css +101 -158
  2. package/components/DataList/data-list.scss +95 -154
  3. package/components/Slider/slider.css +34 -30
  4. package/components/Slider/slider.scss +46 -43
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +136 -181
  7. package/patternfly-theme-dark-unversioned.css +136 -181
  8. package/patternfly.css +136 -181
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
  11. package/components/DataList/themes/dark/data-list.scss +0 -10
package/components/DataList/data-list.scss CHANGED
@@ -1,14 +1,14 @@
1
1
  // @debug $data-list; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
  @import "./data-list-grid";
3
3
 
4
- .#{$data-list} {
5
- --#{$data-list}--FontSize: 1em; // inherit font-size, update this to global variable at breaking change
6
- --#{$data-list}--LineHeight: var(--#{$pf-global}--LineHeight--md);
7
- --#{$data-list}--BorderTopColor: var(--#{$pf-global}--BorderColor--300);
8
- --#{$data-list}--BorderTopWidth: var(--#{$pf-global}--spacer--sm);
9
- --#{$data-list}--sm--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
10
- --#{$data-list}--sm--BorderTopColor: var(--#{$pf-global}--BorderColor--100);
11
- --#{$data-list}--MarginLeft: var(--#{$pf-global}--spacer--md);
4
+ :root, .#{$data-list} {
5
+ --#{$data-list}--FontSize: var( --pf-t--global--font--size--body);
6
+ --#{$data-list}--LineHeight: var(--pf-t--global--font--line-height--body);
7
+ --#{$data-list}--BorderTopColor: var(--pf-t--global--border--color--default);
8
+ --#{$data-list}--BorderTopWidth: var(--pf-t--global--spacer--sm);
9
+ --#{$data-list}--sm--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
10
+ --#{$data-list}--sm--BorderTopColor: var(--pf-t--global--border--color--default);
11
+ --#{$data-list}--MarginLeft: var(--pf-t--global--spacer--md);
12
12
 
13
13
  @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
14
14
  --#{$data-list}--BorderTopColor: var(--#{$data-list}--sm--BorderTopColor);
@@ -16,57 +16,38 @@
16
16
  }
17
17
 
18
18
  // item
19
- --#{$data-list}__item--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
20
- --#{$data-list}__item--m-selected--ZIndex: var(--#{$pf-global}--ZIndex--xs);
21
- --#{$data-list}__item--m-expanded--before--BackgroundColor: var(--#{$pf-global}--active-color--100);
22
- --#{$data-list}__item--m-selected--before--BackgroundColor: var(--#{$pf-global}--active-color--100);
23
- --#{$data-list}__item--m-selected--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top), var(--#{$pf-global}--BoxShadow--sm-bottom);
24
- --#{$data-list}__item--m-clickable--OutlineOffset: calc(-1 * var(--#{$pf-global}--spacer--xs));
25
- --#{$data-list}__item--m-clickable--hover--ZIndex: calc(var(--#{$data-list}__item--m-selected--ZIndex) + 1);
26
- --#{$data-list}__item--m-clickable--hover--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top), var(--#{$pf-global}--BoxShadow--sm-bottom);
27
- --#{$data-list}__item--m-clickable--focus--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top), var(--#{$pf-global}--BoxShadow--sm-bottom);
28
- --#{$data-list}__item--m-clickable--active--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top), var(--#{$pf-global}--BoxShadow--sm-bottom);
29
- --#{$data-list}__item--BorderBottomColor: var(--#{$pf-global}--BorderColor--300);
30
- --#{$data-list}__item--BorderBottomWidth: #{pf-size-prem(8px)};
31
- --#{$data-list}__item--m-clickable--hover--item--BorderTopColor: var(--#{$data-list}__item--BorderBottomColor);
32
- --#{$data-list}__item--m-clickable--hover--item--BorderTopWidth: var(--#{$data-list}__item--BorderBottomWidth);
33
- --#{$data-list}__item--sm--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
34
- --#{$data-list}__item--sm--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
19
+ --#{$data-list}__item--BackgroundColor: var( --pf-t--global--background--color--primary--default);
20
+ --#{$data-list}__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
21
+ --#{$data-list}__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
22
+ --#{$data-list}__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
23
+ --#{$data-list}__item--BorderBottomColor: var(--pf-t--global--border--color--default);
24
+ --#{$data-list}__item--BorderBottomWidth: var(--pf-t--global--spacer--sm);
25
+ --#{$data-list}__item--sm--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
26
+ --#{$data-list}__item--sm--BorderBottomColor: var(--pf-t--global--border--color--default);
35
27
 
36
28
  @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
37
29
  --#{$data-list}__item--BorderBottomWidth: var(--#{$data-list}__item--sm--BorderBottomWidth);
38
30
  --#{$data-list}__item--BorderBottomColor: var(--#{$data-list}__item--sm--BorderBottomColor);
39
31
  }
40
32
 
41
- // list item border left
42
- --#{$data-list}__item--before--BackgroundColor: transparent;
43
- --#{$data-list}__item--before--Width: calc(2 * var(--#{$pf-global}--BorderWidth--lg));
44
- --#{$data-list}__item--before--Transition: var(--#{$pf-global}--Transition);
45
- --#{$data-list}__item--before--Top: 0;
46
- --#{$data-list}__item--before--sm--Top: calc(var(--#{$data-list}__item--BorderBottomWidth) * -1);
47
-
48
- @media (min-width: $pf-v5-global--breakpoint--sm) {
49
- --#{$data-list}__item--before--Top: var(--#{$data-list}__item--before--sm--Top);
50
- }
51
-
52
33
  // data list item row
53
- --#{$data-list}__item-row--PaddingRight: var(--#{$pf-global}--spacer--md);
54
- --#{$data-list}__item-row--PaddingLeft: var(--#{$pf-global}--spacer--md);
55
- --#{$data-list}__item-row--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
56
- --#{$data-list}__item-row--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
34
+ --#{$data-list}__item-row--PaddingRight: var(--pf-t--global--spacer--md);
35
+ --#{$data-list}__item-row--PaddingLeft: var(--pf-t--global--spacer--md);
36
+ --#{$data-list}__item-row--xl--PaddingRight: var(--pf-t--global--spacer--lg);
37
+ --#{$data-list}__item-row--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
57
38
 
58
39
  // data list item content
59
- --#{$data-list}__item-content--md--PaddingBottom: var(--#{$pf-global}--spacer--lg);
40
+ --#{$data-list}__item-content--md--PaddingBottom: var(--pf-t--global--spacer--lg);
60
41
 
61
42
  // cell
62
- --#{$data-list}__cell--PaddingTop: var(--#{$pf-global}--spacer--lg);
63
- --#{$data-list}__cell--PaddingBottom: var(--#{$pf-global}--spacer--lg);
64
- --#{$data-list}__cell--MarginRight: var(--#{$pf-global}--spacer--xl);
43
+ --#{$data-list}__cell--PaddingTop: var(--pf-t--global--spacer--lg);
44
+ --#{$data-list}__cell--PaddingBottom: var(--pf-t--global--spacer--lg);
45
+ --#{$data-list}__cell--MarginRight: var(--pf-t--global--spacer--xl);
65
46
  --#{$data-list}__cell--md--PaddingBottom: 0;
66
- --#{$data-list}__cell--m-icon--MarginRight: var(--#{$pf-global}--spacer--md);
47
+ --#{$data-list}__cell--m-icon--MarginRight: var(--pf-t--global--spacer--md);
67
48
  --#{$data-list}__cell--cell--PaddingTop: 0;
68
- --#{$data-list}__cell--cell--md--PaddingTop: var(--#{$pf-global}--spacer--lg);
69
- --#{$data-list}__cell--m-icon--cell--PaddingTop: var(--#{$pf-global}--spacer--lg);
49
+ --#{$data-list}__cell--cell--md--PaddingTop: var(--pf-t--global--spacer--lg);
50
+ --#{$data-list}__cell--m-icon--cell--PaddingTop: var(--pf-t--global--spacer--lg);
70
51
  --#{$data-list}--cell--MinWidth: initial;
71
52
  --#{$data-list}--cell--Overflow: visible;
72
53
  --#{$data-list}--cell--TextOverflow: clip;
@@ -75,9 +56,9 @@
75
56
  --#{$data-list}--cell--m-truncate--MinWidth: 5ch;
76
57
 
77
58
  // toggle
78
- --#{$data-list}__toggle--MarginLeft: calc(var(--#{$pf-global}--spacer--sm) * -1); // offset toggle to align left
79
- --#{$data-list}__toggle--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
80
- --#{$data-list}__toggle--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
59
+ --#{$data-list}__toggle--MarginLeft: calc(var(--pf-t--global--spacer--sm) * -1); // offset toggle to align left
60
+ --#{$data-list}__toggle--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1); // updating to spacer--sm (8x) as spacer--form-element (6px) doesn't exist
61
+ --#{$data-list}__toggle--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1); // former form-element
81
62
  --#{$data-list}__toggle-icon--Height: calc(var(--#{$data-list}--FontSize) * var(--#{$data-list}--LineHeight));
82
63
  --#{$data-list}__toggle-icon--Transition: .2s ease-in 0s;
83
64
  --#{$data-list}__toggle-icon--Rotate: 0;
@@ -85,26 +66,26 @@
85
66
 
86
67
  // draggable button/icon
87
68
  --#{$data-list}__item-draggable-button--BackgroundColor: transparent;
88
- --#{$data-list}__item-draggable-button--PaddingLeft: var(--#{$pf-global}--spacer--md);
89
- --#{$data-list}__item-draggable-button--PaddingRight: var(--#{$pf-global}--spacer--md);
90
- --#{$data-list}__item-draggable-button--MarginTop: calc(var(--#{$pf-global}--spacer--lg) * -1);
91
- --#{$data-list}__item-draggable-button--MarginBottom: calc(var(--#{$pf-global}--spacer--lg) * -1);
92
- --#{$data-list}__item-draggable-button--PaddingTop: var(--#{$pf-global}--spacer--lg);
93
- --#{$data-list}__item-draggable-button--PaddingBottom: var(--#{$pf-global}--spacer--lg);
94
- --#{$data-list}__item-draggable-button--MarginLeft: calc(var(--#{$pf-global}--spacer--md) * -1);
95
- --#{$data-list}__item-draggable-button-icon--Color: var(--#{$pf-global}--icon--Color--light);
96
- --#{$data-list}__item-draggable-button--m-disabled__draggable-icon--Color: var(--#{$pf-global}--disabled-color--200);
97
- --#{$data-list}__item-draggable-button--hover__draggable-icon--Color: var(--#{$pf-global}--icon--Color--dark);
98
- --#{$data-list}__item-draggable-button--focus__draggable-icon--Color: var(--#{$pf-global}--icon--Color--dark);
99
- --#{$data-list}__item--m-ghost-row--after--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
69
+ --#{$data-list}__item-draggable-button--PaddingLeft: var(--pf-t--global--spacer--md);
70
+ --#{$data-list}__item-draggable-button--PaddingRight: var(--pf-t--global--spacer--md);
71
+ --#{$data-list}__item-draggable-button--MarginTop: calc(var(--pf-t--global--spacer--lg) * -1);
72
+ --#{$data-list}__item-draggable-button--MarginBottom: calc(var(--pf-t--global--spacer--lg) * -1);
73
+ --#{$data-list}__item-draggable-button--PaddingTop: var(--pf-t--global--spacer--lg);
74
+ --#{$data-list}__item-draggable-button--PaddingBottom: var(--pf-t--global--spacer--lg);
75
+ --#{$data-list}__item-draggable-button--MarginLeft: calc(var(--pf-t--global--spacer--md) * -1);
76
+ --#{$data-list}__item-draggable-button-icon--Color: var(--pf-t--global--icon--color--subtle);
77
+ --#{$data-list}__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-t--global--icon--color--disabled);
78
+ --#{$data-list}__item-draggable-button--hover__draggable-icon--Color: var(--pf-t--global--icon--color--regular);
79
+ --#{$data-list}__item-draggable-button--focus__draggable-icon--Color: var(--pf-t--global--icon--color--regular);
80
+ --#{$data-list}__item--m-ghost-row--after--BackgroundColor: var(--pf-t--global--background--color--primary--default);
100
81
  --#{$data-list}__item--m-ghost-row--after--Opacity: .6;
101
82
 
102
83
  // controls
103
- --#{$data-list}__item-control--PaddingTop: var(--#{$pf-global}--spacer--lg);
104
- --#{$data-list}__item-control--PaddingBottom: var(--#{$pf-global}--spacer--lg);
105
- --#{$data-list}__item-control--MarginRight: var(--#{$pf-global}--spacer--md);
106
- --#{$data-list}__item-control--md--MarginRight: var(--#{$pf-global}--spacer--xl);
107
- --#{$data-list}__item-control--not-last-child--MarginRight: var(--#{$pf-global}--spacer--md);
84
+ --#{$data-list}__item-control--PaddingTop: var(--pf-t--global--spacer--lg);
85
+ --#{$data-list}__item-control--PaddingBottom: var(--pf-t--global--spacer--lg);
86
+ --#{$data-list}__item-control--MarginRight: var(--pf-t--global--spacer--md);
87
+ --#{$data-list}__item-control--md--MarginRight: var(--pf-t--global--spacer--xl);
88
+ --#{$data-list}__item-control--not-last-child--MarginRight: var(--pf-t--global--spacer--md);
108
89
 
109
90
  // check
110
91
  --#{$data-list}__check--Height: calc(var(--#{$data-list}--FontSize) * var(--#{$data-list}--LineHeight));
@@ -113,57 +94,59 @@
113
94
 
114
95
  // actions
115
96
  --#{$data-list}__item-action--Display: flex;
116
- --#{$data-list}__item-action--PaddingTop: var(--#{$pf-global}--spacer--lg);
117
- --#{$data-list}__item-action--PaddingBottom: var(--#{$pf-global}--spacer--lg);
118
- --#{$data-list}__item-action--MarginLeft: var(--#{$pf-global}--spacer--md);
119
- --#{$data-list}__item-action--md--MarginLeft: var(--#{$pf-global}--spacer--xl);
120
- --#{$data-list}__item-action--not-last-child--MarginRight: var(--#{$pf-global}--spacer--md);
121
- --#{$data-list}__item-action__action--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
97
+ --#{$data-list}__item-action--PaddingTop: var(--pf-t--global--spacer--lg);
98
+ --#{$data-list}__item-action--PaddingBottom: var(--pf-t--global--spacer--lg);
99
+ --#{$data-list}__item-action--MarginLeft: var(--pf-t--global--spacer--md);
100
+ --#{$data-list}__item-action--md--MarginLeft: var(--pf-t--global--spacer--xl);
101
+ --#{$data-list}__item-action--not-last-child--MarginRight: var(--pf-t--global--spacer--md);
102
+ --#{$data-list}__item-action__action--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1); // former form-element
122
103
  --#{$data-list}__action--MarginTop: var(--#{$data-list}__item-action__action--MarginTop); // update at breaking change
123
- --#{$data-list}__item-action__action--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
104
+ --#{$data-list}__item-action__action--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1); // former form-element
124
105
 
125
106
  // expandable content
126
- --#{$data-list}__expandable-content--MarginRight: calc(var(--#{$data-list}__expandable-content-body--PaddingRight) * -1);
127
- --#{$data-list}__expandable-content--MarginLeft: calc(var(--#{$data-list}__expandable-content-body--PaddingLeft) * -1);
107
+ --#{$data-list}__expandable-content--BackgroundColor: var( --pf-t--global--background--color--primary--default);
108
+ --#{$data-list}__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
109
+ --#{$data-list}__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
110
+ --#{$data-list}__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
128
111
  --#{$data-list}__expandable-content--MaxHeight: #{pf-size-prem(600px)};
129
- --#{$data-list}__expandable-content--before--Top: calc(var(--#{$data-list}__item--BorderBottomWidth) * -1);
130
- --#{$data-list}__expandable-content-body--PaddingTop: var(--#{$pf-global}--spacer--md);
131
- --#{$data-list}__expandable-content-body--PaddingRight: var(--#{$pf-global}--spacer--md);
132
- --#{$data-list}__expandable-content-body--PaddingBottom: var(--#{$pf-global}--spacer--md);
133
- --#{$data-list}__expandable-content-body--PaddingLeft: var(--#{$pf-global}--spacer--md);
134
- --#{$data-list}__expandable-content-body--md--PaddingTop: var(--#{$pf-global}--spacer--lg);
135
- --#{$data-list}__expandable-content-body--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
136
- --#{$data-list}__expandable-content-body--md--PaddingBottom: var(--#{$pf-global}--spacer--lg);
137
- --#{$data-list}__expandable-content-body--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
112
+ --#{$data-list}__expandable-content-body--PaddingTop: var(--pf-t--global--spacer--md);
113
+ --#{$data-list}__expandable-content-body--PaddingRight: var(--pf-t--global--spacer--md);
114
+ --#{$data-list}__expandable-content-body--PaddingBottom: var(--pf-t--global--spacer--md);
115
+ --#{$data-list}__expandable-content-body--PaddingLeft: var(--pf-t--global--spacer--md);
116
+ --#{$data-list}__expandable-content-body--md--PaddingTop: var(--pf-t--global--spacer--lg);
117
+ --#{$data-list}__expandable-content-body--xl--PaddingRight: var(--pf-t--global--spacer--lg);
118
+ --#{$data-list}__expandable-content-body--md--PaddingBottom: var(--pf-t--global--spacer--lg);
119
+ --#{$data-list}__expandable-content-body--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
120
+ --#{$data-list}__expandable-content-body--BorderRadius: var(--pf-t--global--border--radius--small);
138
121
 
139
122
  // compact
140
- --#{$data-list}--m-compact--FontSize: var(--#{$pf-global}--FontSize--sm);
141
- --#{$data-list}--m-compact--LineHeight: var(--#{$pf-global}--LineHeight--sm);
142
- --#{$data-list}--m-compact__check--FontSize: var(--#{$pf-global}--FontSize--md);
143
- --#{$data-list}--m-compact__cell--PaddingTop: var(--#{$pf-global}--spacer--sm);
144
- --#{$data-list}--m-compact__cell--PaddingBottom: var(--#{$pf-global}--spacer--sm);
123
+ --#{$data-list}--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
124
+ --#{$data-list}--m-compact--LineHeight: var(--pf-t--global--font--line-height--body);
125
+ --#{$data-list}--m-compact__check--FontSize: var(--pf-t--global--font--size--body--md);
126
+ --#{$data-list}--m-compact__cell--PaddingTop: var(--pf-t--global--spacer--sm);
127
+ --#{$data-list}--m-compact__cell--PaddingBottom: var(--pf-t--global--spacer--sm);
145
128
  --#{$data-list}--m-compact__cell--md--PaddingBottom: 0;
146
129
  --#{$data-list}--m-compact__cell-cell--PaddingTop: 0;
147
- --#{$data-list}--m-compact__cell-cell--md--PaddingTop: var(--#{$pf-global}--spacer--sm);
148
- --#{$data-list}--m-compact__cell--cell--MarginRight: var(--#{$pf-global}--spacer--md);
149
- --#{$data-list}--m-compact__item-control--PaddingTop: var(--#{$pf-global}--spacer--sm);
150
- --#{$data-list}--m-compact__item-control--PaddingBottom: var(--#{$pf-global}--spacer--sm);
151
- --#{$data-list}--m-compact__item-control--MarginRight: var(--#{$pf-global}--spacer--md);
152
- --#{$data-list}--m-compact__item-action--PaddingTop: var(--#{$pf-global}--spacer--sm);
153
- --#{$data-list}--m-compact__item-action--PaddingBottom: var(--#{$pf-global}--spacer--sm);
154
- --#{$data-list}--m-compact__item-action--MarginLeft: var(--#{$pf-global}--spacer--md);
130
+ --#{$data-list}--m-compact__cell-cell--md--PaddingTop: var(--pf-t--global--spacer--sm);
131
+ --#{$data-list}--m-compact__cell--cell--MarginRight: var(--pf-t--global--spacer--md);
132
+ --#{$data-list}--m-compact__item-control--PaddingTop: var(--pf-t--global--spacer--sm);
133
+ --#{$data-list}--m-compact__item-control--PaddingBottom: var(--pf-t--global--spacer--sm);
134
+ --#{$data-list}--m-compact__item-control--MarginRight: var(--pf-t--global--spacer--md);
135
+ --#{$data-list}--m-compact__item-action--PaddingTop: var(--pf-t--global--spacer--sm);
136
+ --#{$data-list}--m-compact__item-action--PaddingBottom: var(--pf-t--global--spacer--sm);
137
+ --#{$data-list}--m-compact__item-action--MarginLeft: var(--pf-t--global--spacer--md);
155
138
  --#{$data-list}--m-compact__item-action__action--MarginTop: calc(var(--#{$data-list}--m-compact__item-action--PaddingTop) * -1);
156
139
  --#{$data-list}--m-compact__item-action__action--MarginBottom: calc(var(--#{$data-list}--m-compact__item-action--PaddingBottom) * -1);
157
140
  --#{$data-list}--m-compact__action--MarginTop: var(--#{$data-list}--m-compact__item-action__action--MarginTop);
158
- --#{$data-list}--m-compact__item-content--PaddingBottom: var(--#{$pf-global}--spacer--sm);
159
- --#{$data-list}--m-compact__item-draggable-button--MarginTop: calc(var(--#{$pf-global}--spacer--sm) * -1);
160
- --#{$data-list}--m-compact__item-draggable-button--MarginBottom: calc(var(--#{$pf-global}--spacer--sm) * -1);
161
- --#{$data-list}--m-compact__item-draggable-button--PaddingTop: var(--#{$pf-global}--spacer--sm);
162
- --#{$data-list}--m-compact__item-draggable-button--PaddingBottom: var(--#{$pf-global}--spacer--sm);
163
- --#{$data-list}--m-compact__cell--m-icon--cell--PaddingTop: var(--#{$pf-global}--spacer--sm);
164
-
165
- @include pf-v5-t-light;
141
+ --#{$data-list}--m-compact__item-content--PaddingBottom: var(--pf-t--global--spacer--sm);
142
+ --#{$data-list}--m-compact__item-draggable-button--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
143
+ --#{$data-list}--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1);
144
+ --#{$data-list}--m-compact__item-draggable-button--PaddingTop: var(--pf-t--global--spacer--sm);
145
+ --#{$data-list}--m-compact__item-draggable-button--PaddingBottom: var(--pf-t--global--spacer--sm);
146
+ --#{$data-list}--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-t--global--spacer--sm);
147
+ }
166
148
 
149
+ .#{$data-list} {
167
150
  font-size: var(--#{$data-list}--FontSize);
168
151
  line-height: var(--#{$data-list}--LineHeight);
169
152
  overflow-wrap: break-word;
@@ -235,58 +218,18 @@
235
218
  background-color: var(--#{$data-list}__item--BackgroundColor);
236
219
  border-block-end: var(--#{$data-list}__item--BorderBottomWidth) solid var(--#{$data-list}__item--BorderBottomColor);
237
220
 
238
- &::before {
239
- position: absolute;
240
- inset-block-start: var(--#{$data-list}__item--before--Top);
241
- inset-block-end: 0;
242
- inset-inline-start: 0;
243
- width: var(--#{$data-list}__item--before--Width);
244
- content: "";
245
- background-color: var(--#{$data-list}__item--before--BackgroundColor);
246
- transition: var(--#{$data-list}__item--before--Transition);
247
- }
248
-
249
221
  &.pf-m-clickable {
250
222
  cursor: pointer;
251
223
  outline-offset: var(--#{$data-list}__item--m-clickable--OutlineOffset);
252
224
 
253
225
  &:hover,
254
226
  &:focus {
255
- position: relative;
256
- z-index: var(--#{$data-list}__item--m-clickable--hover--ZIndex);
257
-
258
- // stylelint-disable selector-not-notation
259
- // update to single :not() in breaking change
260
- &:not(.pf-m-selected):not(:last-child) {
261
- --#{$data-list}__item--BorderBottomWidth: 0;
262
-
263
- // stylelint-disable
264
- + .#{$data-list}__item {
265
- border-block-start: var(--#{$data-list}__item--m-clickable--hover--item--BorderTopWidth) solid var(--#{$data-list}__item--m-clickable--hover--item--BorderTopColor);
266
- }
267
- // stylelint-enable
268
- }
269
- }
270
-
271
- &:hover {
272
- box-shadow: var(--#{$data-list}__item--m-clickable--hover--BoxShadow);
273
- }
274
-
275
- &:focus {
276
- box-shadow: var(--#{$data-list}__item--m-clickable--focus--BoxShadow);
277
- }
278
-
279
- &:active {
280
- box-shadow: var(--#{$data-list}__item--m-clickable--active--BoxShadow);
227
+ background-color: var(--#{$data-list}__item--hover--BackgroundColor);
281
228
  }
282
229
  }
283
230
 
284
231
  &.pf-m-selected {
285
- --#{$data-list}__item--before--BackgroundColor: var(--#{$data-list}__item--m-selected--before--BackgroundColor);
286
-
287
- position: relative;
288
- z-index: var(--#{$data-list}__item--m-selected--ZIndex);
289
- box-shadow: var(--#{$data-list}__item--m-selected--BoxShadow);
232
+ background-color: var(--#{$data-list}__item--m-selected--BackgroundColor);
290
233
  }
291
234
 
292
235
  &.pf-m-ghost-row {
@@ -467,7 +410,12 @@
467
410
  // expandable content
468
411
  .#{$data-list}__expandable-content {
469
412
  max-height: var(--#{$data-list}__expandable-content--MaxHeight);
413
+ margin-block-end: var(--#{$data-list}__expandable-content--MarginBlockEnd);
414
+ margin-inline-start: var(--#{$data-list}__expandable-content--MarginInlineStart);
415
+ margin-inline-end: var(--#{$data-list}__expandable-content--MarginInlineEnd);
470
416
  overflow-y: auto;
417
+ background-color: var(--#{$data-list}__expandable-content--BackgroundColor);
418
+ border-radius: var(--#{$data-list}__expandable-content-body--BorderRadius);
471
419
 
472
420
  .#{$data-list}__expandable-content-body {
473
421
  padding-block-start: var(--#{$data-list}__expandable-content-body--PaddingTop);
@@ -496,10 +444,3 @@
496
444
  }
497
445
  }
498
446
  }
499
-
500
- // stylelint-disable no-invalid-position-at-import-rule
501
- @import "themes/dark/data-list";
502
-
503
- @include pf-v5-theme-dark {
504
- @include pf-v5-theme-dark-data-list;
505
- }
package/components/Slider/slider.css CHANGED
@@ -1,63 +1,67 @@
1
+ :root,
1
2
  .pf-v5-c-slider {
2
3
  --pf-v5-c-slider--value: 0;
3
4
  --pf-v5-c-slider__step--Left: 0;
4
- --pf-v5-c-slider__rail--PaddingTop: var(--pf-v5-global--spacer--md);
5
- --pf-v5-c-slider__rail--PaddingBottom: var(--pf-v5-global--spacer--md);
5
+ --pf-v5-c-slider__rail--PaddingTop: var(--pf-t--global--spacer--md);
6
+ --pf-v5-c-slider__rail--PaddingBottom: var(--pf-t--global--spacer--md);
6
7
  --pf-v5-c-slider__rail-track--Height: 0.25rem;
7
- --pf-v5-c-slider__rail-track--before--base--BackgroundColor: var(--pf-v5-global--BorderColor--100);
8
- --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-global--active-color--300);
9
- --pf-v5-c-slider__rail-track--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
8
+ --pf-v5-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--border--color--default);
9
+ --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
10
+ --pf-v5-c-slider__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
10
11
  --pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v5-c-slider--value);
11
- --pf-v5-c-slider__rail-track--before--fill--direction: right;
12
- --pf-v5-c-slider__steps--FontSize: var(--pf-v5-global--FontSize--sm);
12
+ --pf-v5-c-slider__steps--FontSize: var(--pf-t--global--font--size--sm);
13
13
  --pf-v5-c-slider__steps--Height: var(--pf-v5-c-slider__steps--FontSize);
14
- --pf-v5-c-slider__step-tick--Top: var(--pf-v5-global--spacer--md);
14
+ --pf-v5-c-slider__step-tick--Top: var(--pf-t--global--spacer--md);
15
15
  --pf-v5-c-slider__step-tick--Width: 0.25rem;
16
16
  --pf-v5-c-slider__step-tick--Height: 0.25rem;
17
- --pf-v5-c-slider__step-tick--BackgroundColor: var(--pf-v5-global--BorderColor--200);
17
+ --pf-v5-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--subtle);
18
18
  --pf-v5-c-slider__step-tick--TranslateX: -50%;
19
- --pf-v5-c-slider__step-tick--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
20
- --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-global--primary-color--100);
19
+ --pf-v5-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--large);
20
+ --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--brand--clicked);
21
21
  --pf-v5-c-slider__step--first-child__step-tick--TranslateX: 0;
22
22
  --pf-v5-c-slider__step--last-child__step-tick--TranslateX: -100%;
23
23
  --pf-v5-c-slider__step-label--TranslateX: -50%;
24
- --pf-v5-c-slider__step-label--Top: calc(var(--pf-v5-global--spacer--xl) + var(--pf-v5-c-slider__rail-track--Height));
24
+ --pf-v5-c-slider__step-label--Top: calc(var(--pf-t--global--spacer--xl) + var(--pf-v5-c-slider__rail-track--Height));
25
25
  --pf-v5-c-slider__step--first-child__step-label--TranslateX: 0;
26
26
  --pf-v5-c-slider__step--last-child__step-label--TranslateX: -100%;
27
- --pf-v5-c-slider__thumb--Top: calc(var(--pf-v5-c-slider__rail-track--Height) / 2 + var(--pf-v5-global--spacer--md));
27
+ --pf-v5-c-slider__thumb--Top: calc(var(--pf-v5-c-slider__rail-track--Height) / 2 + var(--pf-t--global--spacer--md));
28
28
  --pf-v5-c-slider__thumb--Width: 1rem;
29
29
  --pf-v5-c-slider__thumb--Height: 1rem;
30
30
  --pf-v5-c-slider__thumb--Left: var(--pf-v5-c-slider--value);
31
- --pf-v5-c-slider__thumb--BackgroundColor: var(--pf-v5-global--primary-color--100);
31
+ --pf-v5-c-slider__thumb--BackgroundColor: var(--pf-t--global--color--brand--default);
32
32
  --pf-v5-c-slider__thumb--TranslateX: -50%;
33
33
  --pf-v5-c-slider__thumb--TranslateY: -50%;
34
- --pf-v5-c-slider__thumb--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
34
+ --pf-v5-c-slider__thumb--BorderRadius: var(--pf-t--global--border--radius--large);
35
35
  --pf-v5-c-slider__thumb--BoxShadow--base:
36
- 0 0 0 2px var(--pf-v5-global--BackgroundColor--100),
37
- 0 0 0 3px var(--pf-v5-global--primary-color--100);
36
+ 0 0 0 2px var(--pf-t--global--background--color--primary--default),
37
+ 0 0 0 3px var(--pf-t--global--color--brand--default);
38
38
  --pf-v5-c-slider__thumb--hover--BoxShadow: var(--pf-v5-c-slider__thumb--BoxShadow--base);
39
39
  --pf-v5-c-slider__thumb--focus--BoxShadow: var(--pf-v5-c-slider__thumb--BoxShadow--base);
40
40
  --pf-v5-c-slider__thumb--active--BoxShadow:
41
41
  var(--pf-v5-c-slider__thumb--BoxShadow--base),
42
- 0 0 2px 5px var(--pf-v5-global--active-color--200);
43
- --pf-v5-c-slider__thumb--before--Width: var(--pf-v5-global--target-size--MinWidth);
44
- --pf-v5-c-slider__thumb--before--Height: var(--pf-v5-global--target-size--MinHeight);
45
- --pf-v5-c-slider__thumb--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
42
+ 0 0 2px 5px var(--pf-t--global--color--nonstatus--blue--clicked);
43
+ --pf-v5-c-slider__thumb--before--Width: 44px;
44
+ --pf-v5-c-slider__thumb--before--Height: var(--pf-v5-c-slider__thumb--before--Width);
45
+ --pf-v5-c-slider__thumb--before--BorderRadius: var(--pf-t--global--border--radius--large);
46
46
  --pf-v5-c-slider__thumb--before--TranslateX: -50%;
47
47
  --pf-v5-c-slider__thumb--before--TranslateY: -50%;
48
- --pf-v5-c-slider__value--MarginLeft: var(--pf-v5-global--spacer--md);
49
- --pf-v5-c-slider__value--c-form-control--width-base: 3.5ch;
48
+ --pf-v5-c-slider__value--MarginLeft: var(--pf-t--global--spacer--md);
49
+ --pf-v5-c-slider__value--c-form-control--width-base: calc(var(--pf-v5-c-form-control--PaddingLeft) + var(--pf-v5-c-form-control--PaddingRight) + 1.25rem);
50
50
  --pf-v5-c-slider__value--c-form-control--width-chars: 3;
51
- --pf-v5-c-slider__value--c-form-control--Width: calc(var(--pf-v5-c-slider__value--c-form-control--width-base) + (var(--pf-v5-c-slider__value--c-form-control--width-chars) * 1ch));
51
+ --pf-v5-c-slider__value--c-form-control--Width: calc(var(--pf-v5-c-slider__value--c-form-control--width-base) + var(--pf-v5-c-slider__value--c-form-control--width-chars) * 1ch);
52
52
  --pf-v5-c-slider__value--m-floating--TranslateX: -50%;
53
53
  --pf-v5-c-slider__value--m-floating--TranslateY: -100%;
54
54
  --pf-v5-c-slider__value--m-floating--Left: var(--pf-v5-c-slider--value);
55
- --pf-v5-c-slider__value--m-floating--ZIndex: var(--pf-v5-global--ZIndex--sm);
56
- --pf-v5-c-slider__actions--MarginRight: var(--pf-v5-global--spacer--sm);
57
- --pf-v5-c-slider__main--actions--MarginLeft: var(--pf-v5-global--spacer--sm);
58
- --pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-v5-global--palette--black-500);
59
- --pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-global--palette--black-700);
60
- --pf-v5-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-v5-global--palette--black-700);
55
+ --pf-v5-c-slider__value--m-floating--ZIndex: var(--pf-t--global--Zindex--sm);
56
+ --pf-v5-c-slider__actions--MarginRight: var(--pf-t--global--spacer--sm);
57
+ --pf-v5-c-slider__main--actions--MarginLeft: var(--pf-t--global--spacer--sm);
58
+ --pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
59
+ --pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--disabled);
60
+ --pf-v5-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
61
+ }
62
+
63
+ .pf-v5-c-slider {
64
+ --pf-v5-c-slider__rail-track--before--fill--direction: right;
61
65
  display: flex;
62
66
  }
63
67
  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider {
package/components/Slider/slider.scss CHANGED
@@ -1,87 +1,90 @@
1
1
  // @debug $slider; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
+ :root,
3
4
  .#{$slider} {
4
5
  --#{$slider}--value: 0; // should always be set inline
5
6
  --#{$slider}__step--Left: 0; // should always be set inline
6
-
7
+
7
8
  // rail
8
- --#{$slider}__rail--PaddingTop: var(--#{$pf-global}--spacer--md);
9
- --#{$slider}__rail--PaddingBottom: var(--#{$pf-global}--spacer--md);
9
+ --#{$slider}__rail--PaddingTop: var(--pf-t--global--spacer--md);
10
+ --#{$slider}__rail--PaddingBottom: var(--pf-t--global--spacer--md);
10
11
  --#{$slider}__rail-track--Height: #{pf-size-prem(4px)};
11
- --#{$slider}__rail-track--before--base--BackgroundColor: var(--#{$pf-global}--BorderColor--100);
12
- --#{$slider}__rail-track--before--fill--BackgroundColor: var(--#{$pf-global}--active-color--300);
13
- --#{$slider}__rail-track--before--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
12
+ --#{$slider}__rail-track--before--base--BackgroundColor: var(--pf-t--global--border--color--default);
13
+ --#{$slider}__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
14
+ --#{$slider}__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
14
15
  --#{$slider}__rail-track--before--fill--BackgroundColor--gradient-stop: var(--#{$slider}--value);
15
-
16
- @include pf-v5-bidirectional-style(
17
- $prop: --#{$slider}__rail-track--before--fill--direction,
18
- $ltr-val: right,
19
- $rtl-val: left
20
- );
21
-
16
+
22
17
  // steps
23
- --#{$slider}__steps--FontSize: var(--#{$pf-global}--FontSize--sm);
18
+ --#{$slider}__steps--FontSize: var(--pf-t--global--font--size--sm);
24
19
  --#{$slider}__steps--Height: var(--#{$slider}__steps--FontSize);
25
-
20
+
26
21
  // step tick
27
- --#{$slider}__step-tick--Top: var(--#{$pf-global}--spacer--md);
22
+ --#{$slider}__step-tick--Top: var(--pf-t--global--spacer--md);
28
23
  --#{$slider}__step-tick--Width: #{pf-size-prem(4px)};
29
24
  --#{$slider}__step-tick--Height: #{pf-size-prem(4px)};
30
- --#{$slider}__step-tick--BackgroundColor: var(--#{$pf-global}--BorderColor--200);
25
+ --#{$slider}__step-tick--BackgroundColor: var(--pf-t--global--icon--color--subtle);
31
26
  --#{$slider}__step-tick--TranslateX: -50%;
32
- --#{$slider}__step-tick--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
33
- --#{$slider}__step--m-active__slider-tick--BackgroundColor: var(--#{$pf-global}--primary-color--100);
27
+ --#{$slider}__step-tick--BorderRadius: var(--pf-t--global--border--radius--large);
28
+ --#{$slider}__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--brand--clicked);
34
29
  --#{$slider}__step--first-child__step-tick--TranslateX: 0;
35
30
  --#{$slider}__step--last-child__step-tick--TranslateX: -100%;
36
-
31
+
37
32
  // step label
38
33
  --#{$slider}__step-label--TranslateX: -50%;
39
- --#{$slider}__step-label--Top: calc(var(--#{$pf-global}--spacer--xl) + var(--#{$slider}__rail-track--Height));
34
+ --#{$slider}__step-label--Top: calc(var(--pf-t--global--spacer--xl) + var(--#{$slider}__rail-track--Height));
40
35
  --#{$slider}__step--first-child__step-label--TranslateX: 0;
41
36
  --#{$slider}__step--last-child__step-label--TranslateX: -100%;
42
-
37
+
43
38
  // thumb
44
- --#{$slider}__thumb--Top: calc(var(--#{$slider}__rail-track--Height) / 2 + var(--#{$pf-global}--spacer--md));
39
+ --#{$slider}__thumb--Top: calc(var(--#{$slider}__rail-track--Height) / 2 + var(--pf-t--global--spacer--md));
45
40
  --#{$slider}__thumb--Width: #{pf-size-prem(16px)};
46
41
  --#{$slider}__thumb--Height: #{pf-size-prem(16px)};
47
42
  --#{$slider}__thumb--Left: var(--#{$slider}--value);
48
- --#{$slider}__thumb--BackgroundColor: var(--#{$pf-global}--primary-color--100);
43
+ --#{$slider}__thumb--BackgroundColor: var(--pf-t--global--color--brand--default);
49
44
  --#{$slider}__thumb--TranslateX: -50%;
50
45
  --#{$slider}__thumb--TranslateY: -50%;
51
- --#{$slider}__thumb--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
46
+ --#{$slider}__thumb--BorderRadius: var(--pf-t--global--border--radius--large);
52
47
  --#{$slider}__thumb--BoxShadow--base:
53
- 0 0 0 2px var(--#{$pf-global}--BackgroundColor--100),
54
- 0 0 0 3px var(--#{$pf-global}--primary-color--100);
48
+ 0 0 0 2px var(--pf-t--global--background--color--primary--default),
49
+ 0 0 0 3px var(--pf-t--global--color--brand--default);
55
50
  --#{$slider}__thumb--hover--BoxShadow: var(--#{$slider}__thumb--BoxShadow--base);
56
51
  --#{$slider}__thumb--focus--BoxShadow: var(--#{$slider}__thumb--BoxShadow--base);
57
52
  --#{$slider}__thumb--active--BoxShadow:
58
53
  var(--#{$slider}__thumb--BoxShadow--base),
59
- 0 0 2px 5px var(--#{$pf-global}--active-color--200);
60
- --#{$slider}__thumb--before--Width: var(--#{$pf-global}--target-size--MinWidth);
61
- --#{$slider}__thumb--before--Height: var(--#{$pf-global}--target-size--MinHeight);
62
- --#{$slider}__thumb--before--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
54
+ 0 0 2px 5px var(--pf-t--global--color--nonstatus--blue--clicked);
55
+ --#{$slider}__thumb--before--Width: 44px;
56
+ --#{$slider}__thumb--before--Height: var(--#{$slider}__thumb--before--Width);
57
+ --#{$slider}__thumb--before--BorderRadius: var(--pf-t--global--border--radius--large);
63
58
  --#{$slider}__thumb--before--TranslateX: -50%;
64
59
  --#{$slider}__thumb--before--TranslateY: -50%;
65
-
60
+
66
61
  // value
67
- --#{$slider}__value--MarginLeft: var(--#{$pf-global}--spacer--md);
68
- --#{$slider}__value--c-form-control--width-base: 3.5ch;
62
+ --#{$slider}__value--MarginLeft: var(--pf-t--global--spacer--md);
63
+ --#{$slider}__value--c-form-control--width-base: calc(var(--#{$form-control}--PaddingLeft) + var(--#{$form-control}--PaddingRight) + #{pf-size-prem(20px)}); // form control base width + number input spinner width
69
64
  --#{$slider}__value--c-form-control--width-chars: 3;
70
- --#{$slider}__value--c-form-control--Width: calc(var(--#{$slider}__value--c-form-control--width-base) + (var(--#{$slider}__value--c-form-control--width-chars) * 1ch));
65
+ --#{$slider}__value--c-form-control--Width: calc(var(--#{$slider}__value--c-form-control--width-base) + var(--#{$slider}__value--c-form-control--width-chars) * 1ch);
71
66
  --#{$slider}__value--m-floating--TranslateX: -50%;
72
67
  --#{$slider}__value--m-floating--TranslateY: -100%;
73
68
  --#{$slider}__value--m-floating--Left: var(--#{$slider}--value);
74
- --#{$slider}__value--m-floating--ZIndex: var(--#{$pf-global}--ZIndex--sm);
75
-
69
+ --#{$slider}__value--m-floating--ZIndex: var(--pf-t--global--Zindex--sm);
70
+
76
71
  // actions
77
- --#{$slider}__actions--MarginRight: var(--#{$pf-global}--spacer--sm);
78
- --#{$slider}__main--actions--MarginLeft: var(--#{$pf-global}--spacer--sm);
79
-
72
+ --#{$slider}__actions--MarginRight: var(--pf-t--global--spacer--sm);
73
+ --#{$slider}__main--actions--MarginLeft: var(--pf-t--global--spacer--sm);
74
+
80
75
  // disabled
81
- --#{$slider}--m-disabled__rail-track--before--fill--BackgroundColor: var(--#{$pf-global}--palette--black-500);
82
- --#{$slider}--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--#{$pf-global}--palette--black-700);
83
- --#{$slider}--m-disabled__thumb--BackgroundColor: var(--#{$pf-global}--palette--black-700);
76
+ --#{$slider}--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
77
+ --#{$slider}--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--disabled);
78
+ --#{$slider}--m-disabled__thumb--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
79
+ }
84
80
 
81
+ .#{$slider} {
82
+ @include pf-v5-bidirectional-style(
83
+ $prop: --#{$slider}__rail-track--before--fill--direction,
84
+ $ltr-val: right,
85
+ $rtl-val: left
86
+ );
87
+
85
88
  display: flex;
86
89
 
87
90
  &.pf-m-disabled {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.48",
4
+ "version": "6.0.0-alpha.49",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {