@patternfly/patternfly 4.163.0 → 4.164.0

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 (15) hide show
  1. package/components/Form/form.css +121 -1
  2. package/components/Form/form.scss +26 -1
  3. package/components/MultipleFileUpload/multiple-file-upload.css +180 -0
  4. package/components/MultipleFileUpload/multiple-file-upload.scss +214 -0
  5. package/components/Truncate/truncate.css +46 -0
  6. package/components/Truncate/truncate.scss +56 -0
  7. package/components/_all.scss +2 -0
  8. package/docs/components/Form/examples/Form.md +69 -41
  9. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +685 -0
  10. package/docs/components/Truncate/examples/Truncate.md +71 -0
  11. package/package.json +1 -1
  12. package/patternfly-no-reset.css +348 -1
  13. package/patternfly.css +348 -1
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
package/components/Form/form.css CHANGED
@@ -100,7 +100,7 @@
100
100
  .pf-c-form.pf-m-horizontal.pf-m-align-right .pf-c-form__label {
101
101
  text-align: right;
102
102
  }
103
- @media (min-width: 768px) {
103
+ @media screen and (min-width: 768px) {
104
104
  .pf-c-form.pf-m-horizontal {
105
105
  --pf-c-form__group-label--PaddingBottom: 0;
106
106
  }
@@ -120,6 +120,126 @@
120
120
  grid-column: 2;
121
121
  }
122
122
  }
123
+ @media screen and (min-width: 0) {
124
+ .pf-c-form.pf-m-horizontal-on-xs {
125
+ --pf-c-form__group-label--PaddingBottom: 0;
126
+ }
127
+ .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group {
128
+ display: grid;
129
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
130
+ grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
131
+ }
132
+ .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-label {
133
+ padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
134
+ }
135
+ .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-label.pf-m-no-padding-top {
136
+ --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
137
+ transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
138
+ }
139
+ .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-control {
140
+ grid-column: 2;
141
+ }
142
+ }
143
+ @media (min-width: 576px) {
144
+ .pf-c-form.pf-m-horizontal-on-sm {
145
+ --pf-c-form__group-label--PaddingBottom: 0;
146
+ }
147
+ .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group {
148
+ display: grid;
149
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
150
+ grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
151
+ }
152
+ .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-label {
153
+ padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
154
+ }
155
+ .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-label.pf-m-no-padding-top {
156
+ --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
157
+ transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
158
+ }
159
+ .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-control {
160
+ grid-column: 2;
161
+ }
162
+ }
163
+ @media (min-width: 768px) {
164
+ .pf-c-form.pf-m-horizontal-on-md {
165
+ --pf-c-form__group-label--PaddingBottom: 0;
166
+ }
167
+ .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group {
168
+ display: grid;
169
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
170
+ grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
171
+ }
172
+ .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-label {
173
+ padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
174
+ }
175
+ .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-label.pf-m-no-padding-top {
176
+ --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
177
+ transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
178
+ }
179
+ .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-control {
180
+ grid-column: 2;
181
+ }
182
+ }
183
+ @media (min-width: 992px) {
184
+ .pf-c-form.pf-m-horizontal-on-lg {
185
+ --pf-c-form__group-label--PaddingBottom: 0;
186
+ }
187
+ .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group {
188
+ display: grid;
189
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
190
+ grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
191
+ }
192
+ .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-label {
193
+ padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
194
+ }
195
+ .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-label.pf-m-no-padding-top {
196
+ --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
197
+ transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
198
+ }
199
+ .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-control {
200
+ grid-column: 2;
201
+ }
202
+ }
203
+ @media (min-width: 1200px) {
204
+ .pf-c-form.pf-m-horizontal-on-xl {
205
+ --pf-c-form__group-label--PaddingBottom: 0;
206
+ }
207
+ .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group {
208
+ display: grid;
209
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
210
+ grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
211
+ }
212
+ .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-label {
213
+ padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
214
+ }
215
+ .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-label.pf-m-no-padding-top {
216
+ --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
217
+ transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
218
+ }
219
+ .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-control {
220
+ grid-column: 2;
221
+ }
222
+ }
223
+ @media (min-width: 1450px) {
224
+ .pf-c-form.pf-m-horizontal-on-2xl {
225
+ --pf-c-form__group-label--PaddingBottom: 0;
226
+ }
227
+ .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group {
228
+ display: grid;
229
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
230
+ grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
231
+ }
232
+ .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-label {
233
+ padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
234
+ }
235
+ .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-label.pf-m-no-padding-top {
236
+ --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
237
+ transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
238
+ }
239
+ .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-control {
240
+ grid-column: 2;
241
+ }
242
+ }
123
243
  .pf-c-form.pf-m-limit-width {
124
244
  max-width: var(--pf-c-form--m-limit-width--MaxWidth);
125
245
  }
package/components/Form/form.scss CHANGED
@@ -1,3 +1,28 @@
1
+ $pf-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "lg", "xl", "2xl");
2
+
3
+ @mixin pf-c-form--m-horizontal {
4
+ // default horizontal styles applied at medium breakpoint
5
+ @media screen and (min-width: $pf-global--breakpoint--md) {
6
+ @content;
7
+ }
8
+
9
+ // custom xs style since this isn't in our maps - maps are based on mobile first design. This may not even be a valid option based on design but I guess it doesn't hurt to add.
10
+ &-on-xs {
11
+ @media screen and (min-width: $pf-global--breakpoint--xs) {
12
+ @content;
13
+ }
14
+ }
15
+
16
+ // loop to build the rest of the breakpoints
17
+ @each $breakpoint, $breakpoint-value in $pf-c-form--m-horizontal--breakpoint-map {
18
+ &-on-#{$breakpoint} {
19
+ @include pf-apply-breakpoint($breakpoint) {
20
+ @content;
21
+ }
22
+ }
23
+ }
24
+ }
25
+
1
26
  .pf-c-form {
2
27
  --pf-c-form--GridGap: var(--pf-global--gutter--md);
3
28
 
@@ -160,7 +185,7 @@
160
185
  }
161
186
  }
162
187
 
163
- @media (min-width: $pf-global--breakpoint--md) {
188
+ @include pf-c-form--m-horizontal {
164
189
  --pf-c-form__group-label--PaddingBottom: 0;
165
190
 
166
191
  .pf-c-form__group {
package/components/MultipleFileUpload/multiple-file-upload.css ADDED
@@ -0,0 +1,180 @@
1
+ .pf-c-multiple-file-upload {
2
+ --pf-c-multiple-file-upload--GridTemplateColumns: 1fr;
3
+ --pf-c-multiple-file-upload--Gap: var(--pf-global--spacer--lg);
4
+ --pf-c-multiple-file-upload__main--TextAlign: center;
5
+ --pf-c-multiple-file-upload__main--GridTemplateColumns: auto;
6
+ --pf-c-multiple-file-upload__main--GridTemplateRows: auto;
7
+ --pf-c-multiple-file-upload__main--GridTemplateAreas:
8
+ "title"
9
+ "upload"
10
+ "info";
11
+ --pf-c-multiple-file-upload__main--Gap: var(--pf-global--spacer--md);
12
+ --pf-c-multiple-file-upload__main--PaddingTop: var(--pf-global--spacer--lg);
13
+ --pf-c-multiple-file-upload__main--PaddingRight: var(--pf-global--spacer--lg);
14
+ --pf-c-multiple-file-upload__main--PaddingBottom: var(--pf-global--spacer--xl);
15
+ --pf-c-multiple-file-upload__main--PaddingLeft: var(--pf-global--spacer--lg);
16
+ --pf-c-multiple-file-upload__main--BorderWidth: var(--pf-global--BorderWidth--sm);
17
+ --pf-c-multiple-file-upload__main--BorderStyle: dashed;
18
+ --pf-c-multiple-file-upload__main--BorderColor: var(--pf-global--BorderColor--100);
19
+ --pf-c-multiple-file-upload__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
20
+ --pf-c-multiple-file-upload__title--Display: grid;
21
+ --pf-c-multiple-file-upload__title--GridTemplateColumns: auto;
22
+ --pf-c-multiple-file-upload__title--Gap: var(--pf-global--spacer--sm);
23
+ --pf-c-multiple-file-upload__title-icon--Color: var(--pf-global--Color--200);
24
+ --pf-c-multiple-file-upload__title-text-separator--Display: block;
25
+ --pf-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-global--spacer--sm);
26
+ --pf-c-multiple-file-upload__info--FontSize: var(--pf-global--FontSize--sm);
27
+ --pf-c-multiple-file-upload__info--Color: var(--pf-global--Color--200);
28
+ --pf-c-multiple-file-upload__info--MarginTop: var(--pf-global--spacer--sm);
29
+ --pf-c-multiple-file-upload--m-drag-over__main--BorderStyle: solid;
30
+ --pf-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-global--active-color--100);
31
+ --pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor: var(--pf-global--palette--blue-50);
32
+ --pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color: var(--pf-global--active-color--100);
33
+ --pf-c-multiple-file-upload--m-drag-over__main__title-text--Color: var(--pf-global--active-color--100);
34
+ --pf-c-multiple-file-upload--m-drag-over__main__info--Color: var(--pf-global--active-color--100);
35
+ --pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
36
+ --pf-c-multiple-file-upload--m-horizontal__main--TextAlign: left;
37
+ --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns: 1fr auto;
38
+ --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas:
39
+ "title upload"
40
+ "info upload";
41
+ --pf-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-global--spacer--sm) var(--pf-global--spacer--2xl);
42
+ --pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom: var(--pf-global--spacer--lg);
43
+ --pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
44
+ --pf-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-global--spacer--xs);
45
+ --pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
46
+ --pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop: 0;
47
+ --pf-c-multiple-file-upload--m-horizontal__info--MarginTop: 0;
48
+ --pf-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
49
+ --pf-c-multiple-file-upload__status-progress--Gap: var(--pf-global--spacer--sm);
50
+ --pf-c-multiple-file-upload__status-progress-icon--Color: var(--pf-global--Color--200);
51
+ --pf-c-multiple-file-upload__status-item--PaddingTop: var(--pf-global--spacer--md);
52
+ --pf-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-global--spacer--md);
53
+ --pf-c-multiple-file-upload__status-item--first-child--PaddingTop: 0;
54
+ --pf-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
55
+ --pf-c-multiple-file-upload__status-item--Gap: var(--pf-global--spacer--sm);
56
+ --pf-c-multiple-file-upload__status-item--BorderWidth: var(--pf-global--BorderWidth--sm);
57
+ --pf-c-multiple-file-upload__status-item--BorderColor: var(--pf-global--BorderColor--100);
58
+ --pf-c-multiple-file-upload__status-item-icon--Color: var(--pf-global--Color--200);
59
+ --pf-c-multiple-file-upload__status-item-close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
60
+ --pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns: fit-content(100%) max-content;
61
+ --pf-c-multiple-file-upload__status-item-progress--Gap: var(--pf-global--spacer--sm);
62
+ --pf-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-global--primary-color--100);
63
+ --pf-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-global--Color--200);
64
+ display: grid;
65
+ gap: var(--pf-c-multiple-file-upload--Gap);
66
+ grid-template-columns: var(--pf-c-multiple-file-upload--GridTemplateColumns);
67
+ }
68
+ .pf-c-multiple-file-upload.pf-m-horizontal {
69
+ --pf-c-multiple-file-upload--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns);
70
+ --pf-c-multiple-file-upload__main--TextAlign: var(--pf-c-multiple-file-upload--m-horizontal__main--TextAlign);
71
+ --pf-c-multiple-file-upload__main--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns);
72
+ --pf-c-multiple-file-upload__main--GridTemplateAreas: var(--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas);
73
+ --pf-c-multiple-file-upload__main--Gap: var(--pf-c-multiple-file-upload--m-horizontal__main--Gap);
74
+ --pf-c-multiple-file-upload__main--PaddingBottom: var(--pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom);
75
+ --pf-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
76
+ --pf-c-multiple-file-upload__title--Gap: var(--pf-c-multiple-file-upload--m-horizontal__title--Gap);
77
+ --pf-c-multiple-file-upload__title-text-separator--Display: var(--pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
78
+ --pf-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop);
79
+ --pf-c-multiple-file-upload__info--MarginTop: var(--pf-c-multiple-file-upload--m-horizontal__info--MarginTop);
80
+ }
81
+ .pf-c-multiple-file-upload.pf-m-drag-over {
82
+ --pf-c-multiple-file-upload__main--BorderStyle: var(--pf-c-multiple-file-upload--m-drag-over__main--BorderStyle);
83
+ --pf-c-multiple-file-upload__main--BorderColor: var(--pf-c-multiple-file-upload--m-drag-over__main--BorderColor);
84
+ --pf-c-multiple-file-upload__main--BackgroundColor: var(--pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor);
85
+ --pf-c-multiple-file-upload__title-icon--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color);
86
+ --pf-c-multiple-file-upload__title-text--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__title-text--Color);
87
+ --pf-c-multiple-file-upload__info--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__info--Color);
88
+ }
89
+
90
+ .pf-c-multiple-file-upload__main {
91
+ display: grid;
92
+ padding: var(--pf-c-multiple-file-upload__main--PaddingTop) var(--pf-c-multiple-file-upload__main--PaddingRight) var(--pf-c-multiple-file-upload__main--PaddingBottom) var(--pf-c-multiple-file-upload__main--PaddingLeft);
93
+ text-align: var(--pf-c-multiple-file-upload__main--TextAlign);
94
+ background-color: var(--pf-c-multiple-file-upload__main--BackgroundColor);
95
+ border: var(--pf-c-multiple-file-upload__main--BorderWidth) var(--pf-c-multiple-file-upload__main--BorderStyle) var(--pf-c-multiple-file-upload__main--BorderColor);
96
+ grid-template-columns: var(--pf-c-multiple-file-upload__main--GridTemplateColumns);
97
+ grid-template-rows: var(--pf-c-multiple-file-upload__main--GridTemplateRows);
98
+ grid-template-areas: var(--pf-c-multiple-file-upload__main--GridTemplateAreas);
99
+ gap: var(--pf-c-multiple-file-upload__main--Gap);
100
+ }
101
+
102
+ .pf-c-multiple-file-upload__title {
103
+ display: var(--pf-c-multiple-file-upload__title--Display);
104
+ grid-template-columns: var(--pf-c-multiple-file-upload__title--GridTemplateColumns);
105
+ gap: var(--pf-c-multiple-file-upload__title--Gap);
106
+ grid-area: title;
107
+ }
108
+
109
+ .pf-c-multiple-file-upload__title-icon {
110
+ color: var(--pf-c-multiple-file-upload__title-icon--Color);
111
+ }
112
+
113
+ .pf-c-multiple-file-upload__title-text {
114
+ color: var(--pf-c-multiple-file-upload__title-text--Color, inherit);
115
+ }
116
+
117
+ .pf-c-multiple-file-upload__title-text-separator {
118
+ display: var(--pf-c-multiple-file-upload__title-text-separator--Display);
119
+ margin-top: var(--pf-c-multiple-file-upload__title-text-separator--MarginTop);
120
+ }
121
+
122
+ .pf-c-multiple-file-upload__upload {
123
+ grid-area: upload;
124
+ }
125
+
126
+ .pf-c-multiple-file-upload__info {
127
+ grid-area: info;
128
+ margin-top: var(--pf-c-multiple-file-upload__info--MarginTop);
129
+ font-size: var(--pf-c-multiple-file-upload__info--FontSize);
130
+ color: var(--pf-c-multiple-file-upload__info--Color);
131
+ }
132
+
133
+ .pf-c-multiple-file-upload__status,
134
+ .pf-c-multiple-file-upload__status-item-main {
135
+ min-width: 0;
136
+ }
137
+
138
+ .pf-c-multiple-file-upload__status-progress {
139
+ display: grid;
140
+ grid-template-columns: var(--pf-c-multiple-file-upload__status-progress--GridTemplateColumns);
141
+ gap: var(--pf-c-multiple-file-upload__status-progress--Gap);
142
+ }
143
+
144
+ .pf-c-multiple-file-upload__status-progress-icon {
145
+ color: var(--pf-c-multiple-file-upload__status-progress-icon--Color);
146
+ }
147
+
148
+ .pf-c-multiple-file-upload__status-item {
149
+ display: grid;
150
+ grid-template-columns: var(--pf-c-multiple-file-upload__status-item--GridTemplateColumns);
151
+ gap: var(--pf-c-multiple-file-upload__status-item--Gap);
152
+ padding-top: var(--pf-c-multiple-file-upload__status-item--PaddingTop);
153
+ padding-bottom: var(--pf-c-multiple-file-upload__status-item--PaddingBottom);
154
+ border-bottom: var(--pf-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-c-multiple-file-upload__status-item--BorderColor);
155
+ }
156
+ .pf-c-multiple-file-upload__status-item:first-child {
157
+ --pf-c-multiple-file-upload__status-item--PaddingTop: var(--pf-c-multiple-file-upload__status-item--first-child--PaddingTop);
158
+ }
159
+
160
+ .pf-c-multiple-file-upload__status-item-icon {
161
+ color: var(--pf-c-multiple-file-upload__status-item-icon--Color);
162
+ }
163
+
164
+ .pf-c-multiple-file-upload__status-item-close {
165
+ margin-top: var(--pf-c-multiple-file-upload__status-item-close--MarginTop);
166
+ }
167
+
168
+ .pf-c-multiple-file-upload__status-item-progress {
169
+ display: grid;
170
+ grid-template-columns: var(--pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns);
171
+ gap: var(--pf-c-multiple-file-upload__status-item-progress--Gap);
172
+ }
173
+
174
+ .pf-c-multiple-file-upload__status-item-progress-text {
175
+ color: var(--pf-c-multiple-file-upload__status-item-progress-text--Color);
176
+ }
177
+
178
+ .pf-c-multiple-file-upload__status-item-progress-size {
179
+ color: var(--pf-c-multiple-file-upload__status-item-progress-size--Color);
180
+ }
package/components/MultipleFileUpload/multiple-file-upload.scss ADDED
@@ -0,0 +1,214 @@
1
+ .pf-c-multiple-file-upload {
2
+ --pf-c-multiple-file-upload--GridTemplateColumns: 1fr;
3
+ --pf-c-multiple-file-upload--Gap: var(--pf-global--spacer--lg);
4
+
5
+ // main
6
+ --pf-c-multiple-file-upload__main--TextAlign: center;
7
+ --pf-c-multiple-file-upload__main--GridTemplateColumns: auto;
8
+ --pf-c-multiple-file-upload__main--GridTemplateRows: auto;
9
+ --pf-c-multiple-file-upload__main--GridTemplateAreas:
10
+ "title"
11
+ "upload"
12
+ "info";
13
+ --pf-c-multiple-file-upload__main--Gap: var(--pf-global--spacer--md);
14
+ --pf-c-multiple-file-upload__main--PaddingTop: var(--pf-global--spacer--lg);
15
+ --pf-c-multiple-file-upload__main--PaddingRight: var(--pf-global--spacer--lg);
16
+ --pf-c-multiple-file-upload__main--PaddingBottom: var(--pf-global--spacer--xl);
17
+ --pf-c-multiple-file-upload__main--PaddingLeft: var(--pf-global--spacer--lg);
18
+ --pf-c-multiple-file-upload__main--BorderWidth: var(--pf-global--BorderWidth--sm);
19
+ --pf-c-multiple-file-upload__main--BorderStyle: dashed;
20
+ --pf-c-multiple-file-upload__main--BorderColor: var(--pf-global--BorderColor--100);
21
+ --pf-c-multiple-file-upload__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
22
+
23
+ // title
24
+ --pf-c-multiple-file-upload__title--Display: grid;
25
+ --pf-c-multiple-file-upload__title--GridTemplateColumns: auto;
26
+ --pf-c-multiple-file-upload__title--Gap: var(--pf-global--spacer--sm);
27
+
28
+ // title icon
29
+ --pf-c-multiple-file-upload__title-icon--Color: var(--pf-global--Color--200);
30
+
31
+ // title text separator
32
+ --pf-c-multiple-file-upload__title-text-separator--Display: block;
33
+ --pf-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-global--spacer--sm);
34
+
35
+ // info
36
+ --pf-c-multiple-file-upload__info--FontSize: var(--pf-global--FontSize--sm);
37
+ --pf-c-multiple-file-upload__info--Color: var(--pf-global--Color--200);
38
+ --pf-c-multiple-file-upload__info--MarginTop: var(--pf-global--spacer--sm);
39
+
40
+ // drag-over
41
+ --pf-c-multiple-file-upload--m-drag-over__main--BorderStyle: solid;
42
+ --pf-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-global--active-color--100);
43
+ --pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor: var(--pf-global--palette--blue-50);
44
+ --pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color: var(--pf-global--active-color--100);
45
+ --pf-c-multiple-file-upload--m-drag-over__main__title-text--Color: var(--pf-global--active-color--100);
46
+ --pf-c-multiple-file-upload--m-drag-over__main__info--Color: var(--pf-global--active-color--100);
47
+
48
+ // horizontal
49
+ --pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
50
+ --pf-c-multiple-file-upload--m-horizontal__main--TextAlign: left;
51
+ --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns: 1fr auto;
52
+ --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas:
53
+ "title upload"
54
+ "info upload";
55
+ --pf-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-global--spacer--sm) var(--pf-global--spacer--2xl);
56
+ --pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom: var(--pf-global--spacer--lg);
57
+ --pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
58
+ --pf-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-global--spacer--xs);
59
+ --pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
60
+ --pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop: 0;
61
+ --pf-c-multiple-file-upload--m-horizontal__info--MarginTop: 0;
62
+
63
+ // status progress
64
+ --pf-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
65
+ --pf-c-multiple-file-upload__status-progress--Gap: var(--pf-global--spacer--sm);
66
+
67
+ // status progress icon
68
+ --pf-c-multiple-file-upload__status-progress-icon--Color: var(--pf-global--Color--200);
69
+
70
+ // status item
71
+ --pf-c-multiple-file-upload__status-item--PaddingTop: var(--pf-global--spacer--md);
72
+ --pf-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-global--spacer--md);
73
+ --pf-c-multiple-file-upload__status-item--first-child--PaddingTop: 0;
74
+ --pf-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
75
+ --pf-c-multiple-file-upload__status-item--Gap: var(--pf-global--spacer--sm);
76
+ --pf-c-multiple-file-upload__status-item--BorderWidth: var(--pf-global--BorderWidth--sm);
77
+ --pf-c-multiple-file-upload__status-item--BorderColor: var(--pf-global--BorderColor--100);
78
+
79
+ // status item icon
80
+ --pf-c-multiple-file-upload__status-item-icon--Color: var(--pf-global--Color--200);
81
+
82
+ // status item close
83
+ --pf-c-multiple-file-upload__status-item-close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
84
+
85
+ // status item progress
86
+ --pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns: fit-content(100%) max-content;
87
+ --pf-c-multiple-file-upload__status-item-progress--Gap: var(--pf-global--spacer--sm);
88
+
89
+ // status item progress text
90
+ --pf-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-global--primary-color--100);
91
+
92
+ // status item progress size
93
+ --pf-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-global--Color--200);
94
+
95
+ display: grid;
96
+ gap: var(--pf-c-multiple-file-upload--Gap);
97
+ grid-template-columns: var(--pf-c-multiple-file-upload--GridTemplateColumns);
98
+
99
+ &.pf-m-horizontal {
100
+ --pf-c-multiple-file-upload--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns);
101
+ --pf-c-multiple-file-upload__main--TextAlign: var(--pf-c-multiple-file-upload--m-horizontal__main--TextAlign);
102
+ --pf-c-multiple-file-upload__main--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns);
103
+ --pf-c-multiple-file-upload__main--GridTemplateAreas: var(--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas);
104
+ --pf-c-multiple-file-upload__main--Gap: var(--pf-c-multiple-file-upload--m-horizontal__main--Gap);
105
+ --pf-c-multiple-file-upload__main--PaddingBottom: var(--pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom);
106
+ --pf-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
107
+ --pf-c-multiple-file-upload__title--Gap: var(--pf-c-multiple-file-upload--m-horizontal__title--Gap);
108
+ --pf-c-multiple-file-upload__title-text-separator--Display: var(--pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
109
+ --pf-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop);
110
+ --pf-c-multiple-file-upload__info--MarginTop: var(--pf-c-multiple-file-upload--m-horizontal__info--MarginTop);
111
+ }
112
+
113
+ &.pf-m-drag-over {
114
+ --pf-c-multiple-file-upload__main--BorderStyle: var(--pf-c-multiple-file-upload--m-drag-over__main--BorderStyle);
115
+ --pf-c-multiple-file-upload__main--BorderColor: var(--pf-c-multiple-file-upload--m-drag-over__main--BorderColor);
116
+ --pf-c-multiple-file-upload__main--BackgroundColor: var(--pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor);
117
+ --pf-c-multiple-file-upload__title-icon--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color);
118
+ --pf-c-multiple-file-upload__title-text--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__title-text--Color);
119
+ --pf-c-multiple-file-upload__info--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__info--Color);
120
+ }
121
+ }
122
+
123
+ .pf-c-multiple-file-upload__main {
124
+ display: grid;
125
+ padding: var(--pf-c-multiple-file-upload__main--PaddingTop) var(--pf-c-multiple-file-upload__main--PaddingRight) var(--pf-c-multiple-file-upload__main--PaddingBottom) var(--pf-c-multiple-file-upload__main--PaddingLeft);
126
+ text-align: var(--pf-c-multiple-file-upload__main--TextAlign);
127
+ background-color: var(--pf-c-multiple-file-upload__main--BackgroundColor);
128
+ border: var(--pf-c-multiple-file-upload__main--BorderWidth) var(--pf-c-multiple-file-upload__main--BorderStyle) var(--pf-c-multiple-file-upload__main--BorderColor);
129
+ grid-template-columns: var(--pf-c-multiple-file-upload__main--GridTemplateColumns);
130
+ grid-template-rows: var(--pf-c-multiple-file-upload__main--GridTemplateRows);
131
+ grid-template-areas: var(--pf-c-multiple-file-upload__main--GridTemplateAreas);
132
+ gap: var(--pf-c-multiple-file-upload__main--Gap);
133
+ }
134
+
135
+ .pf-c-multiple-file-upload__title {
136
+ display: var(--pf-c-multiple-file-upload__title--Display);
137
+ grid-template-columns: var(--pf-c-multiple-file-upload__title--GridTemplateColumns);
138
+ gap: var(--pf-c-multiple-file-upload__title--Gap);
139
+ grid-area: title;
140
+ }
141
+
142
+ .pf-c-multiple-file-upload__title-icon {
143
+ color: var(--pf-c-multiple-file-upload__title-icon--Color);
144
+ }
145
+
146
+ .pf-c-multiple-file-upload__title-text {
147
+ color: var(--pf-c-multiple-file-upload__title-text--Color, inherit);
148
+ }
149
+
150
+ .pf-c-multiple-file-upload__title-text-separator {
151
+ display: var(--pf-c-multiple-file-upload__title-text-separator--Display);
152
+ margin-top: var(--pf-c-multiple-file-upload__title-text-separator--MarginTop);
153
+ }
154
+
155
+ .pf-c-multiple-file-upload__upload {
156
+ grid-area: upload;
157
+ }
158
+
159
+ .pf-c-multiple-file-upload__info {
160
+ grid-area: info;
161
+ margin-top: var(--pf-c-multiple-file-upload__info--MarginTop);
162
+ font-size: var(--pf-c-multiple-file-upload__info--FontSize);
163
+ color: var(--pf-c-multiple-file-upload__info--Color);
164
+ }
165
+
166
+ .pf-c-multiple-file-upload__status,
167
+ .pf-c-multiple-file-upload__status-item-main {
168
+ min-width: 0;
169
+ }
170
+
171
+ .pf-c-multiple-file-upload__status-progress {
172
+ display: grid;
173
+ grid-template-columns: var(--pf-c-multiple-file-upload__status-progress--GridTemplateColumns);
174
+ gap: var(--pf-c-multiple-file-upload__status-progress--Gap);
175
+ }
176
+
177
+ .pf-c-multiple-file-upload__status-progress-icon {
178
+ color: var(--pf-c-multiple-file-upload__status-progress-icon--Color);
179
+ }
180
+
181
+ .pf-c-multiple-file-upload__status-item {
182
+ display: grid;
183
+ grid-template-columns: var(--pf-c-multiple-file-upload__status-item--GridTemplateColumns);
184
+ gap: var(--pf-c-multiple-file-upload__status-item--Gap);
185
+ padding-top: var(--pf-c-multiple-file-upload__status-item--PaddingTop);
186
+ padding-bottom: var(--pf-c-multiple-file-upload__status-item--PaddingBottom);
187
+ border-bottom: var(--pf-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-c-multiple-file-upload__status-item--BorderColor);
188
+
189
+ &:first-child {
190
+ --pf-c-multiple-file-upload__status-item--PaddingTop: var(--pf-c-multiple-file-upload__status-item--first-child--PaddingTop);
191
+ }
192
+ }
193
+
194
+ .pf-c-multiple-file-upload__status-item-icon {
195
+ color: var(--pf-c-multiple-file-upload__status-item-icon--Color);
196
+ }
197
+
198
+ .pf-c-multiple-file-upload__status-item-close {
199
+ margin-top: var(--pf-c-multiple-file-upload__status-item-close--MarginTop);
200
+ }
201
+
202
+ .pf-c-multiple-file-upload__status-item-progress {
203
+ display: grid;
204
+ grid-template-columns: var(--pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns);
205
+ gap: var(--pf-c-multiple-file-upload__status-item-progress--Gap);
206
+ }
207
+
208
+ .pf-c-multiple-file-upload__status-item-progress-text {
209
+ color: var(--pf-c-multiple-file-upload__status-item-progress-text--Color);
210
+ }
211
+
212
+ .pf-c-multiple-file-upload__status-item-progress-size {
213
+ color: var(--pf-c-multiple-file-upload__status-item-progress-size--Color);
214
+ }
package/components/Truncate/truncate.css ADDED
@@ -0,0 +1,46 @@
1
+ .pf-c-truncate {
2
+ --pf-c-truncate--FontSize: var(--pf-c-truncate--FontSize, 1rem);
3
+ display: inline-flex;
4
+ flex-wrap: nowrap;
5
+ max-width: 100%;
6
+ }
7
+
8
+ .pf-c-truncate__start,
9
+ .pf-c-truncate__end {
10
+ flex-shrink: 1;
11
+ overflow: hidden;
12
+ text-overflow: ellipsis;
13
+ white-space: nowrap;
14
+ }
15
+
16
+ .pf-c-truncate__end {
17
+ direction: rtl;
18
+ text-align: left;
19
+ }
20
+
21
+ @supports (text-overflow: "") {
22
+ .pf-c-truncate__start + .pf-c-truncate__end {
23
+ text-overflow: "";
24
+ }
25
+ }
26
+ @supports not (text-overflow: "") {
27
+ .pf-c-truncate__start + .pf-c-truncate__end {
28
+ font-size: 0;
29
+ }
30
+ .pf-c-truncate__start + .pf-c-truncate__end .pf-c-truncate__text {
31
+ font-size: var(--pf-c-truncate--FontSize);
32
+ }
33
+ }
34
+ @supports (-webkit-hyphens: none) {
35
+ .pf-c-truncate {
36
+ display: inline-block;
37
+ max-width: 100%;
38
+ overflow: hidden;
39
+ text-overflow: ellipsis;
40
+ white-space: nowrap;
41
+ }
42
+
43
+ .pf-c-truncate__end {
44
+ direction: ltr;
45
+ }
46
+ }
package/components/Truncate/truncate.scss ADDED
@@ -0,0 +1,56 @@
1
+ .pf-c-truncate {
2
+ --pf-c-truncate--FontSize: var(--pf-c-truncate--FontSize, 1rem);
3
+
4
+ display: inline-flex;
5
+ flex-wrap: nowrap;
6
+ max-width: 100%;
7
+ }
8
+
9
+ // Start, end
10
+ .pf-c-truncate__start,
11
+ .pf-c-truncate__end {
12
+ flex-shrink: 1;
13
+ overflow: hidden;
14
+ text-overflow: ellipsis;
15
+ white-space: nowrap;
16
+ }
17
+
18
+ // End
19
+ .pf-c-truncate__end {
20
+ direction: rtl;
21
+ text-align: left;
22
+ }
23
+
24
+ // text-overflow: <string>
25
+ @supports (text-overflow: "") {
26
+ .pf-c-truncate__start + .pf-c-truncate__end {
27
+ text-overflow: "";
28
+ }
29
+ }
30
+
31
+ // text-overflow: ellipsis
32
+ @supports not (text-overflow: "") {
33
+ // Start + end = middle truncation
34
+ .pf-c-truncate__start + .pf-c-truncate__end {
35
+ font-size: 0; // shrink ellipsis size to zero
36
+
37
+ .pf-c-truncate__text {
38
+ font-size: var(--pf-c-truncate--FontSize);
39
+ }
40
+ }
41
+ }
42
+
43
+ // safari not supported
44
+ @supports (-webkit-hyphens: none) {
45
+ .pf-c-truncate {
46
+ display: inline-block;
47
+ max-width: 100%;
48
+ overflow: hidden;
49
+ text-overflow: ellipsis;
50
+ white-space: nowrap;
51
+ }
52
+
53
+ .pf-c-truncate__end {
54
+ direction: ltr;
55
+ }
56
+ }