@patternfly/patternfly 6.0.0-alpha.75 → 6.0.0-alpha.77
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.
- package/components/Alert/alert.css +2 -0
- package/components/Alert/alert.scss +2 -0
- package/components/CodeBlock/code-block.css +4 -0
- package/components/CodeBlock/code-block.scss +4 -0
- package/components/CodeEditor/code-editor.css +91 -73
- package/components/CodeEditor/code-editor.scss +99 -82
- package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
- package/package.json +1 -1
- package/patternfly-no-globals.css +97 -77
- package/patternfly-theme-dark-unversioned.css +97 -77
- package/patternfly.css +97 -77
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
|
@@ -9,30 +9,32 @@ cssPrefix: pf-v5-c-code-editor
|
|
|
9
9
|
```html
|
|
10
10
|
<div class="pf-v5-c-code-editor">
|
|
11
11
|
<div class="pf-v5-c-code-editor__header">
|
|
12
|
-
<div class="pf-v5-c-code-
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
12
|
+
<div class="pf-v5-c-code-editor__header-content">
|
|
13
|
+
<div class="pf-v5-c-code-editor__controls">
|
|
14
|
+
<button
|
|
15
|
+
class="pf-v5-c-button pf-m-plain"
|
|
16
|
+
type="button"
|
|
17
|
+
aria-label="Copy to clipboard"
|
|
18
|
+
>
|
|
19
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
20
|
+
</button>
|
|
21
|
+
<button
|
|
22
|
+
class="pf-v5-c-button pf-m-plain"
|
|
23
|
+
type="button"
|
|
24
|
+
aria-label="Download code"
|
|
25
|
+
>
|
|
26
|
+
<i class="fas fa-download"></i>
|
|
27
|
+
</button>
|
|
28
|
+
<button
|
|
29
|
+
class="pf-v5-c-button pf-m-plain"
|
|
30
|
+
type="button"
|
|
31
|
+
aria-label="Upload code"
|
|
32
|
+
>
|
|
33
|
+
<i class="fas fa-upload"></i>
|
|
34
|
+
</button>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="pf-v5-c-code-editor__header-main"></div>
|
|
34
37
|
</div>
|
|
35
|
-
<div class="pf-v5-c-code-editor__header-main"></div>
|
|
36
38
|
<div class="pf-v5-c-code-editor__tab">
|
|
37
39
|
<span class="pf-v5-c-code-editor__tab-icon">
|
|
38
40
|
<i class="fas fa-code"></i>
|
|
@@ -56,31 +58,33 @@ cssPrefix: pf-v5-c-code-editor
|
|
|
56
58
|
```html
|
|
57
59
|
<div class="pf-v5-c-code-editor pf-m-read-only">
|
|
58
60
|
<div class="pf-v5-c-code-editor__header">
|
|
59
|
-
<div class="pf-v5-c-code-
|
|
60
|
-
<
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
61
|
+
<div class="pf-v5-c-code-editor__header-content">
|
|
62
|
+
<div class="pf-v5-c-code-editor__controls">
|
|
63
|
+
<button
|
|
64
|
+
class="pf-v5-c-button pf-m-plain"
|
|
65
|
+
type="button"
|
|
66
|
+
aria-label="Copy to clipboard"
|
|
67
|
+
>
|
|
68
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
69
|
+
</button>
|
|
70
|
+
<button
|
|
71
|
+
class="pf-v5-c-button pf-m-plain"
|
|
72
|
+
type="button"
|
|
73
|
+
aria-label="Download code"
|
|
74
|
+
>
|
|
75
|
+
<i class="fas fa-download"></i>
|
|
76
|
+
</button>
|
|
77
|
+
<button
|
|
78
|
+
class="pf-v5-c-button pf-m-plain"
|
|
79
|
+
type="button"
|
|
80
|
+
aria-label="Upload code"
|
|
81
|
+
disabled
|
|
82
|
+
>
|
|
83
|
+
<i class="fas fa-upload"></i>
|
|
84
|
+
</button>
|
|
85
|
+
</div>
|
|
86
|
+
<div class="pf-v5-c-code-editor__header-main"></div>
|
|
82
87
|
</div>
|
|
83
|
-
<div class="pf-v5-c-code-editor__header-main"></div>
|
|
84
88
|
<div class="pf-v5-c-code-editor__tab">
|
|
85
89
|
<span class="pf-v5-c-code-editor__tab-icon">
|
|
86
90
|
<i class="fas fa-code"></i>
|
|
@@ -113,30 +117,32 @@ cssPrefix: pf-v5-c-code-editor
|
|
|
113
117
|
</div>
|
|
114
118
|
</div>
|
|
115
119
|
<div class="pf-v5-c-code-editor__main">
|
|
116
|
-
<div class="pf-v5-c-
|
|
117
|
-
<div class="pf-v5-c-empty-
|
|
118
|
-
<div class="pf-v5-c-empty-
|
|
119
|
-
<div class="pf-v5-c-empty-
|
|
120
|
-
<
|
|
120
|
+
<div class="pf-v5-c-code-editor__upload">
|
|
121
|
+
<div class="pf-v5-c-empty-state">
|
|
122
|
+
<div class="pf-v5-c-empty-state__content">
|
|
123
|
+
<div class="pf-v5-c-empty-state__header">
|
|
124
|
+
<div class="pf-v5-c-empty-state__icon">
|
|
125
|
+
<i class="fas fa- fa-code" aria-hidden="true"></i>
|
|
126
|
+
</div>
|
|
127
|
+
<div class="pf-v5-c-empty-state__title">
|
|
128
|
+
<h1 class="pf-v5-c-empty-state__title-text">Start editing</h1>
|
|
129
|
+
</div>
|
|
121
130
|
</div>
|
|
122
|
-
<div class="pf-v5-c-empty-state__title">
|
|
123
|
-
<h1 class="pf-v5-c-empty-state__title-text">Start editing</h1>
|
|
124
|
-
</div>
|
|
125
|
-
</div>
|
|
126
131
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
132
|
+
<div
|
|
133
|
+
class="pf-v5-c-empty-state__body"
|
|
134
|
+
>Drag a file here or browse to upload.</div>
|
|
130
135
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
136
|
+
<div class="pf-v5-c-empty-state__footer">
|
|
137
|
+
<div class="pf-v5-c-empty-state__actions">
|
|
138
|
+
<button class="pf-v5-c-button pf-m-primary" type="button">Browse</button>
|
|
139
|
+
</div>
|
|
140
|
+
<div class="pf-v5-c-empty-state__actions">
|
|
141
|
+
<button
|
|
142
|
+
class="pf-v5-c-button pf-m-link"
|
|
143
|
+
type="button"
|
|
144
|
+
>Start from scratch</button>
|
|
145
|
+
</div>
|
|
140
146
|
</div>
|
|
141
147
|
</div>
|
|
142
148
|
</div>
|
|
@@ -160,30 +166,32 @@ cssPrefix: pf-v5-c-code-editor
|
|
|
160
166
|
</div>
|
|
161
167
|
</div>
|
|
162
168
|
<div class="pf-v5-c-code-editor__main pf-m-drag-hover">
|
|
163
|
-
<div class="pf-v5-c-
|
|
164
|
-
<div class="pf-v5-c-empty-
|
|
165
|
-
<div class="pf-v5-c-empty-
|
|
166
|
-
<div class="pf-v5-c-empty-
|
|
167
|
-
<
|
|
169
|
+
<div class="pf-v5-c-code-editor__upload">
|
|
170
|
+
<div class="pf-v5-c-empty-state">
|
|
171
|
+
<div class="pf-v5-c-empty-state__content">
|
|
172
|
+
<div class="pf-v5-c-empty-state__header">
|
|
173
|
+
<div class="pf-v5-c-empty-state__icon">
|
|
174
|
+
<i class="fas fa- fa-code" aria-hidden="true"></i>
|
|
175
|
+
</div>
|
|
176
|
+
<div class="pf-v5-c-empty-state__title">
|
|
177
|
+
<h1 class="pf-v5-c-empty-state__title-text">Start editing</h1>
|
|
178
|
+
</div>
|
|
168
179
|
</div>
|
|
169
|
-
<div class="pf-v5-c-empty-state__title">
|
|
170
|
-
<h1 class="pf-v5-c-empty-state__title-text">Start editing</h1>
|
|
171
|
-
</div>
|
|
172
|
-
</div>
|
|
173
180
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
181
|
+
<div
|
|
182
|
+
class="pf-v5-c-empty-state__body"
|
|
183
|
+
>Drag a file here or browse to upload.</div>
|
|
177
184
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
185
|
+
<div class="pf-v5-c-empty-state__footer">
|
|
186
|
+
<div class="pf-v5-c-empty-state__actions">
|
|
187
|
+
<button class="pf-v5-c-button pf-m-primary" type="button">Browse</button>
|
|
188
|
+
</div>
|
|
189
|
+
<div class="pf-v5-c-empty-state__actions">
|
|
190
|
+
<button
|
|
191
|
+
class="pf-v5-c-button pf-m-link"
|
|
192
|
+
type="button"
|
|
193
|
+
>Start from scratch</button>
|
|
194
|
+
</div>
|
|
187
195
|
</div>
|
|
188
196
|
</div>
|
|
189
197
|
</div>
|
|
@@ -198,37 +206,39 @@ cssPrefix: pf-v5-c-code-editor
|
|
|
198
206
|
```html
|
|
199
207
|
<div class="pf-v5-c-code-editor">
|
|
200
208
|
<div class="pf-v5-c-code-editor__header">
|
|
201
|
-
<div class="pf-v5-c-code-
|
|
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
|
-
|
|
209
|
+
<div class="pf-v5-c-code-editor__header-content">
|
|
210
|
+
<div class="pf-v5-c-code-editor__controls">
|
|
211
|
+
<button
|
|
212
|
+
class="pf-v5-c-button pf-m-plain"
|
|
213
|
+
type="button"
|
|
214
|
+
aria-label="Copy to clipboard"
|
|
215
|
+
>
|
|
216
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
217
|
+
</button>
|
|
218
|
+
<button
|
|
219
|
+
class="pf-v5-c-button pf-m-plain"
|
|
220
|
+
type="button"
|
|
221
|
+
aria-label="Download code"
|
|
222
|
+
>
|
|
223
|
+
<i class="fas fa-download"></i>
|
|
224
|
+
</button>
|
|
225
|
+
<button
|
|
226
|
+
class="pf-v5-c-button pf-m-plain"
|
|
227
|
+
type="button"
|
|
228
|
+
aria-label="Upload code"
|
|
229
|
+
>
|
|
230
|
+
<i class="fas fa-upload"></i>
|
|
231
|
+
</button>
|
|
232
|
+
</div>
|
|
233
|
+
<div class="pf-v5-c-code-editor__header-main">Header main content</div>
|
|
234
|
+
<div class="pf-v5-c-code-editor__keyboard-shortcuts">
|
|
235
|
+
<button class="pf-v5-c-button pf-m-link" type="button">
|
|
236
|
+
<span class="pf-v5-c-button__icon pf-m-start">
|
|
237
|
+
<i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
|
|
238
|
+
</span>
|
|
239
|
+
View shortcuts
|
|
240
|
+
</button>
|
|
241
|
+
</div>
|
|
232
242
|
</div>
|
|
233
243
|
<div class="pf-v5-c-code-editor__tab">
|
|
234
244
|
<span class="pf-v5-c-code-editor__tab-icon">
|
|
@@ -252,15 +262,17 @@ cssPrefix: pf-v5-c-code-editor
|
|
|
252
262
|
|
|
253
263
|
### Usage
|
|
254
264
|
|
|
255
|
-
| Class
|
|
256
|
-
|
|
|
257
|
-
| `.pf-v5-c-code-editor`
|
|
258
|
-
| `.pf-v5-c-code-editor__header`
|
|
259
|
-
| `.pf-v5-c-code-
|
|
260
|
-
| `.pf-v5-c-code-
|
|
261
|
-
| `.pf-v5-c-code-
|
|
262
|
-
| `.pf-v5-c-code-
|
|
263
|
-
| `.pf-v5-c-code-
|
|
264
|
-
| `.pf-v5-c-code-
|
|
265
|
-
| `.pf-v5-c-code-editor__tab
|
|
266
|
-
| `.pf-v5-c-code-editor__tab-
|
|
265
|
+
| Class | Applied to | Outcome |
|
|
266
|
+
| ------------------------------------------ | ---------- | --------------------------------------------------------------------------------------------- |
|
|
267
|
+
| `.pf-v5-c-code-editor` | `<div>` | Initiates the code editor component. **Required** |
|
|
268
|
+
| `.pf-v5-c-code-editor__header` | `<div>` | Initiates the code editor header used for the controls and tab elements. **Required** |
|
|
269
|
+
| `.pf-v5-c-code-editor__header-content` | `<div>` | Initiates the code editor header content used for the controls and tab elements. **Required** |
|
|
270
|
+
| `.pf-v5-c-code-editor__main` | `<div>` | Initiates the main container for a code editor e.g. Monaco **Required** |
|
|
271
|
+
| `.pf-v5-c-code-editor__code` | `<div>` | Initiates the container for code without a JS code editor. Comes with PatternFly styling. |
|
|
272
|
+
| `.pf-v5-c-code-editor__controls` | `<div>` | Initiates the code editor controls. |
|
|
273
|
+
| `.pf-v5-c-code-editor__header-main` | `<div>` | Initiates the code editor header content area. |
|
|
274
|
+
| `.pf-v5-c-code-editor__keyboard-shortcuts` | `<div>` | Initiates the code editor header keyboard shortcuts area. |
|
|
275
|
+
| `.pf-v5-c-code-editor__tab` | `<div>` | Initiates the code editor tab. |
|
|
276
|
+
| `.pf-v5-c-code-editor__tab-text` | `<span>` | Initiates the code editor tab text. |
|
|
277
|
+
| `.pf-v5-c-code-editor__tab-icon` | `<span>` | Initiates the code editor tab icon. |
|
|
278
|
+
| `.pf-v5-c-code-editor__upload` | `<div>` | Initiates the code editor upload border. |
|
package/package.json
CHANGED
|
@@ -6629,6 +6629,7 @@ html .ws-preview {
|
|
|
6629
6629
|
--pf-v5-c-alert__icon--MarginTop: 0.25rem;
|
|
6630
6630
|
--pf-v5-c-alert__icon--MarginRight: var(--pf-t--global--spacer--sm);
|
|
6631
6631
|
--pf-v5-c-alert__icon--FontSize: var(--pf-t--global--icon--size--md);
|
|
6632
|
+
--pf-v5-c-alert__title--FontFamily: var(--pf-t--global--font--family--heading);
|
|
6632
6633
|
--pf-v5-c-alert__title--FontSize: var(--pf-t--global--font--size--heading--xs);
|
|
6633
6634
|
--pf-v5-c-alert__title--FontWeight: var(--pf-t--global--font--weight--heading);
|
|
6634
6635
|
--pf-v5-c-alert__title--LineHeight: var(--pf-t--global--font--line-height--heading);
|
|
@@ -6765,6 +6766,7 @@ html .ws-preview {
|
|
|
6765
6766
|
|
|
6766
6767
|
.pf-v5-c-alert__title {
|
|
6767
6768
|
grid-area: title;
|
|
6769
|
+
font-family: var(--pf-v5-c-alert__title--FontFamily);
|
|
6768
6770
|
font-size: var(--pf-v5-c-alert__title--FontSize);
|
|
6769
6771
|
font-weight: var(--pf-v5-c-alert__title--FontWeight);
|
|
6770
6772
|
line-height: var(--pf-v5-c-alert__title--LineHeight);
|
|
@@ -9325,6 +9327,8 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
9325
9327
|
--pf-v5-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
9326
9328
|
--pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
|
|
9327
9329
|
--pf-v5-c-code-block__header--BorderBottomColor: var(--pf-t--global--border--color--default);
|
|
9330
|
+
--pf-v5-c-code-block__header--PaddingTop: var(--pf-t--global--spacer--xs);
|
|
9331
|
+
--pf-v5-c-code-block__header--PaddingBottom: var(--pf-t--global--spacer--xs);
|
|
9328
9332
|
--pf-v5-c-code-block__header--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
9329
9333
|
--pf-v5-c-code-block__header--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
9330
9334
|
--pf-v5-c-code-block__content--PaddingTop: var(--pf-t--global--spacer--md);
|
|
@@ -9342,6 +9346,8 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
9342
9346
|
|
|
9343
9347
|
.pf-v5-c-code-block__header {
|
|
9344
9348
|
display: flex;
|
|
9349
|
+
padding-block-start: var(--pf-v5-c-code-block__header--PaddingTop);
|
|
9350
|
+
padding-block-end: var(--pf-v5-c-code-block__header--PaddingBottom);
|
|
9345
9351
|
padding-inline-start: var(--pf-v5-c-code-block__header--PaddingLeft);
|
|
9346
9352
|
padding-inline-end: var(--pf-v5-c-code-block__header--PaddingRight);
|
|
9347
9353
|
border-block-end: var(--pf-v5-c-code-block__header--BorderBottomWidth) solid var(--pf-v5-c-code-block__header--BorderBottomColor);
|
|
@@ -9370,42 +9376,58 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
9370
9376
|
font-family: var(--pf-v5-c-code-block__code--FontFamily, inherit);
|
|
9371
9377
|
}
|
|
9372
9378
|
|
|
9373
|
-
.pf-v5-c-code-editor {
|
|
9374
|
-
--pf-v5-c-code-editor__controls--
|
|
9375
|
-
--pf-v5-c-code-editor__controls--
|
|
9376
|
-
--pf-v5-c-code-
|
|
9377
|
-
--pf-v5-c-code-
|
|
9378
|
-
--pf-v5-c-code-editor__header--
|
|
9379
|
-
--pf-v5-c-code-editor__header--
|
|
9380
|
-
--pf-v5-c-code-
|
|
9381
|
-
--pf-v5-c-code-
|
|
9382
|
-
--pf-v5-c-code-
|
|
9383
|
-
--pf-v5-c-code-
|
|
9384
|
-
--pf-v5-c-code-
|
|
9385
|
-
--pf-v5-c-code-
|
|
9386
|
-
--pf-v5-c-code-
|
|
9379
|
+
:where(:root), :where(.pf-v5-c-code-editor) {
|
|
9380
|
+
--pf-v5-c-code-editor__controls--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
9381
|
+
--pf-v5-c-code-editor__controls--Gap: var(--pf-t--global--spacer--xs);
|
|
9382
|
+
--pf-v5-c-code-editor__header--before--BorderBottomWidth: var(--pf-t--global--border--width--box--default);
|
|
9383
|
+
--pf-v5-c-code-editor__header--before--BorderBottomColor: var(--pf-t--global--border--color--default);
|
|
9384
|
+
--pf-v5-c-code-editor__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
9385
|
+
--pf-v5-c-code-editor__header-content--m-plain--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
9386
|
+
--pf-v5-c-code-editor__header-content--PaddingBlockStart: var(--pf-t--global--spacer--xs);
|
|
9387
|
+
--pf-v5-c-code-editor__header-content--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
|
|
9388
|
+
--pf-v5-c-code-editor__header-content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
9389
|
+
--pf-v5-c-code-editor__header-content--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
9390
|
+
--pf-v5-c-code-editor__header-content--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
|
|
9391
|
+
--pf-v5-c-code-editor__upload--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
9392
|
+
--pf-v5-c-code-editor__upload--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
9393
|
+
--pf-v5-c-code-editor__upload--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
|
9394
|
+
--pf-v5-c-code-editor__upload--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
|
9395
|
+
--pf-v5-c-code-editor__upload--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
9396
|
+
--pf-v5-c-code-editor__main--BorderColor: var(--pf-t--global--border--color--default);
|
|
9397
|
+
--pf-v5-c-code-editor__main--BorderWidth: var(--pf-t--global--border--width--box--default);
|
|
9398
|
+
--pf-v5-c-code-editor__main--BorderEndStartRadius: var(--pf-t--global--border--radius--medium);
|
|
9399
|
+
--pf-v5-c-code-editor__main--BorderEndEndRadius: var(--pf-t--global--border--radius--medium);
|
|
9400
|
+
--pf-v5-c-code-editor__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
9401
|
+
--pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
9402
|
+
--pf-v5-c-code-editor__upload--before--BorderWidth: 0;
|
|
9403
|
+
--pf-v5-c-code-editor__upload--before--BorderColor: transparent;
|
|
9404
|
+
--pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth: var(--pf-t--global--border--width--divider--hover);
|
|
9405
|
+
--pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor: var( --pf-t--global--border--color--clicked);
|
|
9406
|
+
--pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
9387
9407
|
--pf-v5-c-code-editor__main--m-drag-hover--after--Opacity: .1;
|
|
9388
|
-
--pf-v5-c-code-editor__code--PaddingTop: var(--pf-
|
|
9389
|
-
--pf-v5-c-code-editor__code--PaddingRight: var(--pf-
|
|
9390
|
-
--pf-v5-c-code-editor__code--PaddingBottom: var(--pf-
|
|
9391
|
-
--pf-v5-c-code-editor__code--PaddingLeft: var(--pf-
|
|
9392
|
-
--pf-v5-c-code-editor__code-pre--FontSize: var(--pf-
|
|
9393
|
-
--pf-v5-c-code-editor__code-pre--FontFamily: var(--pf-
|
|
9394
|
-
--pf-v5-c-code-editor__header-main--PaddingRight: var(--pf-
|
|
9395
|
-
--pf-v5-c-code-editor__header-main--PaddingLeft: var(--pf-
|
|
9396
|
-
--pf-v5-c-code-editor__tab--BackgroundColor: var(--pf-
|
|
9397
|
-
--pf-v5-c-code-editor__tab--Color: var(--pf-
|
|
9398
|
-
--pf-v5-c-code-editor__tab--PaddingTop: var(--pf-
|
|
9399
|
-
--pf-v5-c-code-editor__tab--PaddingRight: var(--pf-
|
|
9400
|
-
--pf-v5-c-code-editor__tab--PaddingBottom: var(--pf-
|
|
9401
|
-
--pf-v5-c-code-editor__tab--PaddingLeft: var(--pf-
|
|
9402
|
-
--pf-v5-c-code-editor__tab--BorderTopWidth: var(--pf-
|
|
9403
|
-
--pf-v5-c-code-editor__tab--BorderRightWidth: var(--pf-
|
|
9408
|
+
--pf-v5-c-code-editor__code--PaddingTop: var(--pf-t--global--spacer--sm);
|
|
9409
|
+
--pf-v5-c-code-editor__code--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
9410
|
+
--pf-v5-c-code-editor__code--PaddingBottom: var(--pf-t--global--spacer--sm);
|
|
9411
|
+
--pf-v5-c-code-editor__code--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
9412
|
+
--pf-v5-c-code-editor__code-pre--FontSize: var(--pf-t--global--font--size--sm);
|
|
9413
|
+
--pf-v5-c-code-editor__code-pre--FontFamily: var(--pf-t--global--font--family--mono);
|
|
9414
|
+
--pf-v5-c-code-editor__header-main--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
9415
|
+
--pf-v5-c-code-editor__header-main--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
9416
|
+
--pf-v5-c-code-editor__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
9417
|
+
--pf-v5-c-code-editor__tab--Color: var(--pf-t--global--text--color--subtle);
|
|
9418
|
+
--pf-v5-c-code-editor__tab--PaddingTop: var(--pf-t--global--spacer--sm);
|
|
9419
|
+
--pf-v5-c-code-editor__tab--PaddingRight: var( --pf-t--global--spacer--sm);
|
|
9420
|
+
--pf-v5-c-code-editor__tab--PaddingBottom: var(--pf-t--global--spacer--sm);
|
|
9421
|
+
--pf-v5-c-code-editor__tab--PaddingLeft: var( --pf-t--global--spacer--sm);
|
|
9422
|
+
--pf-v5-c-code-editor__tab--BorderTopWidth: var(--pf-t--global--border--width--box--default);
|
|
9423
|
+
--pf-v5-c-code-editor__tab--BorderRightWidth: var(--pf-t--global--border--width--box--default);
|
|
9404
9424
|
--pf-v5-c-code-editor__tab--BorderBottomWidth: 0;
|
|
9405
|
-
--pf-v5-c-code-editor__tab--BorderLeftWidth: var(--pf-
|
|
9406
|
-
--pf-v5-c-code-editor__tab--BorderColor: var(--pf-
|
|
9407
|
-
--pf-v5-c-code-editor__tab
|
|
9425
|
+
--pf-v5-c-code-editor__tab--BorderLeftWidth: var(--pf-t--global--border--width--box--default);
|
|
9426
|
+
--pf-v5-c-code-editor__tab--BorderColor: var(--pf-t--global--border--color--default);
|
|
9427
|
+
--pf-v5-c-code-editor__tab--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
|
|
9428
|
+
--pf-v5-c-code-editor__tab-icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
|
|
9408
9429
|
}
|
|
9430
|
+
|
|
9409
9431
|
.pf-v5-c-code-editor.pf-m-read-only {
|
|
9410
9432
|
--pf-v5-c-code-editor__main--BackgroundColor: var(--pf-v5-c-code-editor--m-read-only__main--BackgroundColor);
|
|
9411
9433
|
}
|
|
@@ -9413,7 +9435,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
9413
9435
|
.pf-v5-c-code-editor__header {
|
|
9414
9436
|
position: relative;
|
|
9415
9437
|
display: flex;
|
|
9416
|
-
align-items: flex-end;
|
|
9417
9438
|
}
|
|
9418
9439
|
.pf-v5-c-code-editor__header::before {
|
|
9419
9440
|
position: absolute;
|
|
@@ -9424,54 +9445,65 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
9424
9445
|
content: "";
|
|
9425
9446
|
border-block-end: var(--pf-v5-c-code-editor__header--before--BorderBottomWidth) solid var(--pf-v5-c-code-editor__header--before--BorderBottomColor);
|
|
9426
9447
|
}
|
|
9448
|
+
.pf-v5-c-code-editor__header.pf-m-plain {
|
|
9449
|
+
--pf-v5-c-code-editor__header-content--BackgroundColor: var(--pf-v5-c-code-editor__header-content--m-plain--BackgroundColor);
|
|
9450
|
+
}
|
|
9427
9451
|
|
|
9428
|
-
.pf-v5-c-code-
|
|
9452
|
+
.pf-v5-c-code-editor__header-content {
|
|
9429
9453
|
display: flex;
|
|
9454
|
+
flex: 1;
|
|
9455
|
+
align-items: flex-end;
|
|
9456
|
+
padding-block-start: var(--pf-v5-c-code-editor__header-content--PaddingBlockStart);
|
|
9457
|
+
padding-block-end: var(--pf-v5-c-code-editor__header-content--PaddingBlockEnd);
|
|
9458
|
+
padding-inline-start: var(--pf-v5-c-code-editor__header-content--PaddingInlineStart);
|
|
9459
|
+
padding-inline-end: var(--pf-v5-c-code-editor__header-content--PaddingInlineEnd);
|
|
9460
|
+
background-color: var(--pf-v5-c-code-editor__header-content--BackgroundColor);
|
|
9461
|
+
border-start-start-radius: var(--pf-v5-c-code-editor__header-content--BorderStartStartRadius);
|
|
9430
9462
|
}
|
|
9431
|
-
|
|
9432
|
-
|
|
9433
|
-
|
|
9434
|
-
|
|
9435
|
-
|
|
9436
|
-
}
|
|
9437
|
-
.pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:focus {
|
|
9438
|
-
--pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--focus--Color);
|
|
9439
|
-
}
|
|
9440
|
-
.pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:disabled::after {
|
|
9441
|
-
border-block-end-color: var(--pf-v5-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor);
|
|
9463
|
+
|
|
9464
|
+
.pf-v5-c-code-editor__controls {
|
|
9465
|
+
display: flex;
|
|
9466
|
+
gap: var(--pf-v5-c-code-editor__controls--Gap);
|
|
9467
|
+
align-items: flex-start;
|
|
9442
9468
|
}
|
|
9443
9469
|
|
|
9444
9470
|
.pf-v5-c-code-editor__header-main {
|
|
9445
9471
|
flex-grow: 1;
|
|
9472
|
+
align-self: center;
|
|
9446
9473
|
padding-inline-start: var(--pf-v5-c-code-editor__header-main--PaddingLeft);
|
|
9447
9474
|
padding-inline-end: var(--pf-v5-c-code-editor__header-main--PaddingRight);
|
|
9448
9475
|
}
|
|
9449
9476
|
|
|
9477
|
+
.pf-v5-c-code-editor__upload {
|
|
9478
|
+
position: relative;
|
|
9479
|
+
padding-block-start: var(--pf-v5-c-code-editor__upload--PaddingBlockStart);
|
|
9480
|
+
padding-block-end: var(--pf-v5-c-code-editor__upload--PaddingBlockEnd);
|
|
9481
|
+
padding-inline-start: var(--pf-v5-c-code-editor__upload--PaddingInlineStart);
|
|
9482
|
+
padding-inline-end: var(--pf-v5-c-code-editor__upload--PaddingInlineEnd);
|
|
9483
|
+
}
|
|
9484
|
+
.pf-v5-c-code-editor__upload::before {
|
|
9485
|
+
position: absolute;
|
|
9486
|
+
inset-block-start: var(--pf-v5-c-code-editor__upload--PaddingBlockStart);
|
|
9487
|
+
inset-block-end: var(--pf-v5-c-code-editor__upload--PaddingBlockEnd);
|
|
9488
|
+
inset-inline-start: var(--pf-v5-c-code-editor__upload--PaddingInlineStart);
|
|
9489
|
+
inset-inline-end: var(--pf-v5-c-code-editor__upload--PaddingInlineEnd);
|
|
9490
|
+
content: "";
|
|
9491
|
+
border: var(--pf-v5-c-code-editor__upload--before--BorderWidth) dashed var(--pf-v5-c-code-editor__upload--before--BorderColor);
|
|
9492
|
+
border-radius: var(--pf-v5-c-code-editor__upload--BorderRadius);
|
|
9493
|
+
}
|
|
9494
|
+
|
|
9450
9495
|
.pf-v5-c-code-editor__main {
|
|
9451
9496
|
position: relative;
|
|
9452
9497
|
color: var(--pf-v5-c-code-editor__main--Color, inherit);
|
|
9453
9498
|
background-color: var(--pf-v5-c-code-editor__main--BackgroundColor);
|
|
9454
9499
|
border: var(--pf-v5-c-code-editor__main--BorderWidth) solid;
|
|
9455
9500
|
border-color: var(--pf-v5-c-code-editor__main--BorderColor);
|
|
9501
|
+
border-end-start-radius: var(--pf-v5-c-code-editor__main--BorderEndStartRadius);
|
|
9502
|
+
border-end-end-radius: var(--pf-v5-c-code-editor__main--BorderEndEndRadius);
|
|
9456
9503
|
}
|
|
9457
|
-
.pf-v5-c-code-editor__main.pf-m-drag-hover
|
|
9458
|
-
|
|
9459
|
-
|
|
9460
|
-
inset-block-end: 0;
|
|
9461
|
-
inset-inline-start: 0;
|
|
9462
|
-
inset-inline-end: 0;
|
|
9463
|
-
content: "";
|
|
9464
|
-
background-color: var(--pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor);
|
|
9465
|
-
opacity: var(--pf-v5-c-code-editor__main--m-drag-hover--after--Opacity);
|
|
9466
|
-
}
|
|
9467
|
-
.pf-v5-c-code-editor__main.pf-m-drag-hover::before {
|
|
9468
|
-
position: absolute;
|
|
9469
|
-
inset-block-start: 0;
|
|
9470
|
-
inset-block-end: 0;
|
|
9471
|
-
inset-inline-start: 0;
|
|
9472
|
-
inset-inline-end: 0;
|
|
9473
|
-
content: "";
|
|
9474
|
-
border: var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth) solid var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor);
|
|
9504
|
+
.pf-v5-c-code-editor__main.pf-m-drag-hover {
|
|
9505
|
+
--pf-v5-c-code-editor__upload--before--BorderWidth: var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth);
|
|
9506
|
+
--pf-v5-c-code-editor__upload--before--BorderColor: var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor);
|
|
9475
9507
|
}
|
|
9476
9508
|
.pf-v5-c-code-editor__main .monaco-editor {
|
|
9477
9509
|
background-color: var(--pf-v5-c-code-editor__main--BackgroundColor);
|
|
@@ -9502,7 +9534,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
9502
9534
|
padding-block-end: var(--pf-v5-c-code-editor__tab--PaddingBottom);
|
|
9503
9535
|
padding-inline-start: var(--pf-v5-c-code-editor__tab--PaddingLeft);
|
|
9504
9536
|
padding-inline-end: var(--pf-v5-c-code-editor__tab--PaddingRight);
|
|
9505
|
-
margin-inline-start: auto;
|
|
9506
9537
|
color: var(--pf-v5-c-code-editor__tab--Color);
|
|
9507
9538
|
background-color: var(--pf-v5-c-code-editor__tab--BackgroundColor);
|
|
9508
9539
|
border-color: var(--pf-v5-c-code-editor__tab--BorderColor);
|
|
@@ -9511,24 +9542,13 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
9511
9542
|
border-block-end-width: var(--pf-v5-c-code-editor__tab--BorderBottomWidth);
|
|
9512
9543
|
border-inline-start-width: var(--pf-v5-c-code-editor__tab--BorderLeftWidth);
|
|
9513
9544
|
border-inline-end-width: var(--pf-v5-c-code-editor__tab--BorderRightWidth);
|
|
9545
|
+
border-start-end-radius: var(--pf-v5-c-code-editor__tab--BorderStartEndRadius);
|
|
9514
9546
|
}
|
|
9515
9547
|
|
|
9516
9548
|
.pf-v5-c-code-editor__tab-icon + .pf-v5-c-code-editor__tab-text {
|
|
9517
9549
|
margin-inline-start: var(--pf-v5-c-code-editor__tab-icon--text--MarginLeft);
|
|
9518
9550
|
}
|
|
9519
9551
|
|
|
9520
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
|
|
9521
|
-
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
|
|
9522
|
-
}
|
|
9523
|
-
|
|
9524
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-code-editor {
|
|
9525
|
-
--pf-v5-c-code-editor--m-read-only__main--Color: var(--pf-v5-global--disabled-color--300);
|
|
9526
|
-
--pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-v5-global--disabled-color--200);
|
|
9527
|
-
}
|
|
9528
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-code-editor__controls > * + * {
|
|
9529
|
-
border-inline-start: 1px solid var(--pf-v5-global--palette--black-700);
|
|
9530
|
-
}
|
|
9531
|
-
|
|
9532
9552
|
.pf-v5-c-content {
|
|
9533
9553
|
--pf-v5-c-content--MarginBottom: var(--pf-t--global--spacer--md);
|
|
9534
9554
|
--pf-v5-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
|