@patternfly/patternfly 6.0.0-alpha.76 → 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/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 +95 -77
- package/patternfly-theme-dark-unversioned.css +95 -77
- package/patternfly.css +95 -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
|
@@ -9327,6 +9327,8 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
9327
9327
|
--pf-v5-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
9328
9328
|
--pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
|
|
9329
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);
|
|
9330
9332
|
--pf-v5-c-code-block__header--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
9331
9333
|
--pf-v5-c-code-block__header--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
9332
9334
|
--pf-v5-c-code-block__content--PaddingTop: var(--pf-t--global--spacer--md);
|
|
@@ -9344,6 +9346,8 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
9344
9346
|
|
|
9345
9347
|
.pf-v5-c-code-block__header {
|
|
9346
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);
|
|
9347
9351
|
padding-inline-start: var(--pf-v5-c-code-block__header--PaddingLeft);
|
|
9348
9352
|
padding-inline-end: var(--pf-v5-c-code-block__header--PaddingRight);
|
|
9349
9353
|
border-block-end: var(--pf-v5-c-code-block__header--BorderBottomWidth) solid var(--pf-v5-c-code-block__header--BorderBottomColor);
|
|
@@ -9372,42 +9376,58 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
9372
9376
|
font-family: var(--pf-v5-c-code-block__code--FontFamily, inherit);
|
|
9373
9377
|
}
|
|
9374
9378
|
|
|
9375
|
-
.pf-v5-c-code-editor {
|
|
9376
|
-
--pf-v5-c-code-editor__controls--
|
|
9377
|
-
--pf-v5-c-code-editor__controls--
|
|
9378
|
-
--pf-v5-c-code-
|
|
9379
|
-
--pf-v5-c-code-
|
|
9380
|
-
--pf-v5-c-code-editor__header--
|
|
9381
|
-
--pf-v5-c-code-editor__header--
|
|
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-
|
|
9387
|
-
--pf-v5-c-code-
|
|
9388
|
-
--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);
|
|
9389
9407
|
--pf-v5-c-code-editor__main--m-drag-hover--after--Opacity: .1;
|
|
9390
|
-
--pf-v5-c-code-editor__code--PaddingTop: var(--pf-
|
|
9391
|
-
--pf-v5-c-code-editor__code--PaddingRight: var(--pf-
|
|
9392
|
-
--pf-v5-c-code-editor__code--PaddingBottom: var(--pf-
|
|
9393
|
-
--pf-v5-c-code-editor__code--PaddingLeft: var(--pf-
|
|
9394
|
-
--pf-v5-c-code-editor__code-pre--FontSize: var(--pf-
|
|
9395
|
-
--pf-v5-c-code-editor__code-pre--FontFamily: var(--pf-
|
|
9396
|
-
--pf-v5-c-code-editor__header-main--PaddingRight: var(--pf-
|
|
9397
|
-
--pf-v5-c-code-editor__header-main--PaddingLeft: var(--pf-
|
|
9398
|
-
--pf-v5-c-code-editor__tab--BackgroundColor: var(--pf-
|
|
9399
|
-
--pf-v5-c-code-editor__tab--Color: var(--pf-
|
|
9400
|
-
--pf-v5-c-code-editor__tab--PaddingTop: var(--pf-
|
|
9401
|
-
--pf-v5-c-code-editor__tab--PaddingRight: var(--pf-
|
|
9402
|
-
--pf-v5-c-code-editor__tab--PaddingBottom: var(--pf-
|
|
9403
|
-
--pf-v5-c-code-editor__tab--PaddingLeft: var(--pf-
|
|
9404
|
-
--pf-v5-c-code-editor__tab--BorderTopWidth: var(--pf-
|
|
9405
|
-
--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);
|
|
9406
9424
|
--pf-v5-c-code-editor__tab--BorderBottomWidth: 0;
|
|
9407
|
-
--pf-v5-c-code-editor__tab--BorderLeftWidth: var(--pf-
|
|
9408
|
-
--pf-v5-c-code-editor__tab--BorderColor: var(--pf-
|
|
9409
|
-
--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);
|
|
9410
9429
|
}
|
|
9430
|
+
|
|
9411
9431
|
.pf-v5-c-code-editor.pf-m-read-only {
|
|
9412
9432
|
--pf-v5-c-code-editor__main--BackgroundColor: var(--pf-v5-c-code-editor--m-read-only__main--BackgroundColor);
|
|
9413
9433
|
}
|
|
@@ -9415,7 +9435,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
9415
9435
|
.pf-v5-c-code-editor__header {
|
|
9416
9436
|
position: relative;
|
|
9417
9437
|
display: flex;
|
|
9418
|
-
align-items: flex-end;
|
|
9419
9438
|
}
|
|
9420
9439
|
.pf-v5-c-code-editor__header::before {
|
|
9421
9440
|
position: absolute;
|
|
@@ -9426,54 +9445,65 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
9426
9445
|
content: "";
|
|
9427
9446
|
border-block-end: var(--pf-v5-c-code-editor__header--before--BorderBottomWidth) solid var(--pf-v5-c-code-editor__header--before--BorderBottomColor);
|
|
9428
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
|
+
}
|
|
9429
9451
|
|
|
9430
|
-
.pf-v5-c-code-
|
|
9452
|
+
.pf-v5-c-code-editor__header-content {
|
|
9431
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);
|
|
9432
9462
|
}
|
|
9433
|
-
|
|
9434
|
-
|
|
9435
|
-
|
|
9436
|
-
|
|
9437
|
-
|
|
9438
|
-
}
|
|
9439
|
-
.pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:focus {
|
|
9440
|
-
--pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--focus--Color);
|
|
9441
|
-
}
|
|
9442
|
-
.pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:disabled::after {
|
|
9443
|
-
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;
|
|
9444
9468
|
}
|
|
9445
9469
|
|
|
9446
9470
|
.pf-v5-c-code-editor__header-main {
|
|
9447
9471
|
flex-grow: 1;
|
|
9472
|
+
align-self: center;
|
|
9448
9473
|
padding-inline-start: var(--pf-v5-c-code-editor__header-main--PaddingLeft);
|
|
9449
9474
|
padding-inline-end: var(--pf-v5-c-code-editor__header-main--PaddingRight);
|
|
9450
9475
|
}
|
|
9451
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
|
+
|
|
9452
9495
|
.pf-v5-c-code-editor__main {
|
|
9453
9496
|
position: relative;
|
|
9454
9497
|
color: var(--pf-v5-c-code-editor__main--Color, inherit);
|
|
9455
9498
|
background-color: var(--pf-v5-c-code-editor__main--BackgroundColor);
|
|
9456
9499
|
border: var(--pf-v5-c-code-editor__main--BorderWidth) solid;
|
|
9457
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);
|
|
9458
9503
|
}
|
|
9459
|
-
.pf-v5-c-code-editor__main.pf-m-drag-hover
|
|
9460
|
-
|
|
9461
|
-
|
|
9462
|
-
inset-block-end: 0;
|
|
9463
|
-
inset-inline-start: 0;
|
|
9464
|
-
inset-inline-end: 0;
|
|
9465
|
-
content: "";
|
|
9466
|
-
background-color: var(--pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor);
|
|
9467
|
-
opacity: var(--pf-v5-c-code-editor__main--m-drag-hover--after--Opacity);
|
|
9468
|
-
}
|
|
9469
|
-
.pf-v5-c-code-editor__main.pf-m-drag-hover::before {
|
|
9470
|
-
position: absolute;
|
|
9471
|
-
inset-block-start: 0;
|
|
9472
|
-
inset-block-end: 0;
|
|
9473
|
-
inset-inline-start: 0;
|
|
9474
|
-
inset-inline-end: 0;
|
|
9475
|
-
content: "";
|
|
9476
|
-
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);
|
|
9477
9507
|
}
|
|
9478
9508
|
.pf-v5-c-code-editor__main .monaco-editor {
|
|
9479
9509
|
background-color: var(--pf-v5-c-code-editor__main--BackgroundColor);
|
|
@@ -9504,7 +9534,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
9504
9534
|
padding-block-end: var(--pf-v5-c-code-editor__tab--PaddingBottom);
|
|
9505
9535
|
padding-inline-start: var(--pf-v5-c-code-editor__tab--PaddingLeft);
|
|
9506
9536
|
padding-inline-end: var(--pf-v5-c-code-editor__tab--PaddingRight);
|
|
9507
|
-
margin-inline-start: auto;
|
|
9508
9537
|
color: var(--pf-v5-c-code-editor__tab--Color);
|
|
9509
9538
|
background-color: var(--pf-v5-c-code-editor__tab--BackgroundColor);
|
|
9510
9539
|
border-color: var(--pf-v5-c-code-editor__tab--BorderColor);
|
|
@@ -9513,24 +9542,13 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
9513
9542
|
border-block-end-width: var(--pf-v5-c-code-editor__tab--BorderBottomWidth);
|
|
9514
9543
|
border-inline-start-width: var(--pf-v5-c-code-editor__tab--BorderLeftWidth);
|
|
9515
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);
|
|
9516
9546
|
}
|
|
9517
9547
|
|
|
9518
9548
|
.pf-v5-c-code-editor__tab-icon + .pf-v5-c-code-editor__tab-text {
|
|
9519
9549
|
margin-inline-start: var(--pf-v5-c-code-editor__tab-icon--text--MarginLeft);
|
|
9520
9550
|
}
|
|
9521
9551
|
|
|
9522
|
-
: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 {
|
|
9523
|
-
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
|
|
9524
|
-
}
|
|
9525
|
-
|
|
9526
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-code-editor {
|
|
9527
|
-
--pf-v5-c-code-editor--m-read-only__main--Color: var(--pf-v5-global--disabled-color--300);
|
|
9528
|
-
--pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-v5-global--disabled-color--200);
|
|
9529
|
-
}
|
|
9530
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-code-editor__controls > * + * {
|
|
9531
|
-
border-inline-start: 1px solid var(--pf-v5-global--palette--black-700);
|
|
9532
|
-
}
|
|
9533
|
-
|
|
9534
9552
|
.pf-v5-c-content {
|
|
9535
9553
|
--pf-v5-c-content--MarginBottom: var(--pf-t--global--spacer--md);
|
|
9536
9554
|
--pf-v5-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
|