@patternfly/patternfly 6.0.0-alpha.10 → 6.0.0-alpha.12
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/Drawer/drawer.css +0 -1
- package/components/Drawer/drawer.scss +2 -1
- package/components/Page/page.css +51 -160
- package/components/Page/page.scss +53 -147
- package/components/Table/table.css +1 -11
- package/components/Table/table.scss +1 -11
- package/docs/components/Page/examples/Page.css +0 -8
- package/docs/components/Page/examples/Page.md +22 -21
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -0
- package/package.json +1 -1
- package/patternfly-no-globals.css +101 -306
- package/patternfly-theme-dark-unversioned.css +101 -306
- package/patternfly.css +101 -306
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/components/Page/themes/dark/page.scss +0 -69
|
@@ -56,19 +56,9 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
56
56
|
--#{$page}__header-tools-group--Display: flex;
|
|
57
57
|
--#{$page}__header-tools-item--Display: block;
|
|
58
58
|
|
|
59
|
-
// Header tools notification badge
|
|
60
|
-
--#{$page}__header-tools-item--c-notification-badge--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-200);
|
|
61
|
-
--#{$page}__header-tools--c-button--notification-badge--m-unread--after--BackgroundColor: var(--#{$pf-global}--primary-color--200);
|
|
62
|
-
--#{$page}__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor: var(--#{$pf-global}--danger-color--200);
|
|
63
|
-
--#{$page}__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor: var(--#{$pf-global}--primary-color--200);
|
|
64
|
-
--#{$page}__header-tools--c-button--m-selected--notification-badge--m-attention--after--BackgroundColor: var(--#{$pf-global}--danger-color--200);
|
|
65
|
-
|
|
66
59
|
// Header tools group button
|
|
67
60
|
--#{$page}__header-tools--c-button--m-selected--before--Width: auto;
|
|
68
61
|
--#{$page}__header-tools--c-button--m-selected--before--Height: auto;
|
|
69
|
-
--#{$page}__header-tools--c-button--m-selected--before--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-200);
|
|
70
|
-
--#{$page}__header-tools--c-button--m-selected--before--BorderRadius: var(--#{$pf-global}--BorderRadius--sm); // remove at breaking change
|
|
71
|
-
--#{$page}__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor: transparent; // remove at breaking change
|
|
72
62
|
|
|
73
63
|
@media screen and (min-width: $pf-v5-global--breakpoint--xl) {
|
|
74
64
|
--#{$page}__header-tools--MarginRight: var(--#{$page}__header-tools--xl--MarginRight);
|
|
@@ -78,15 +68,16 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
78
68
|
--#{$page}__sidebar--ZIndex: var(--#{$pf-global}--ZIndex--sm);
|
|
79
69
|
--#{$page}__sidebar--Width: #{pf-size-prem(290px)};
|
|
80
70
|
--#{$page}__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
81
|
-
--#{$page}__sidebar--m-light--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
|
|
82
|
-
--#{$page}__sidebar--m-light--BorderRightWidth: var(--#{$pf-global}--BorderWidth--sm);
|
|
83
|
-
--#{$page}__sidebar--m-light--BorderRightColor: var(--#{$pf-global}--BorderColor--100);
|
|
84
71
|
--#{$page}__sidebar--BoxShadow: none;
|
|
85
72
|
--#{$page}__sidebar--Transition: var(--#{$pf-global}--Transition);
|
|
86
73
|
--#{$page}__sidebar--TranslateX: -100%;
|
|
87
74
|
--#{$page}__sidebar--TranslateZ: 0;
|
|
88
75
|
--#{$page}__sidebar--m-expanded--TranslateX: 0;
|
|
89
76
|
--#{$page}__sidebar--xl--TranslateX: 0;
|
|
77
|
+
--#{$page}__sidebar--MarginRight: 0;
|
|
78
|
+
--#{$page}__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
|
|
79
|
+
--#{$page}__sidebar--PaddingInlineStart: var(--pf-t--global--spacer--lg);
|
|
80
|
+
|
|
90
81
|
|
|
91
82
|
// Sidebar header
|
|
92
83
|
--#{$page}__sidebar-header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
|
|
@@ -103,9 +94,10 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
103
94
|
--#{$page}__sidebar-body--PaddingLeft: 0;
|
|
104
95
|
--#{$page}__sidebar-body--m-page-insets--PaddingRight: var(--#{$page}--inset);
|
|
105
96
|
--#{$page}__sidebar-body--m-page-insets--PaddingLeft: var(--#{$page}--inset);
|
|
106
|
-
--#{$page}__sidebar-body--m-menu--
|
|
107
|
-
--#{$page}__sidebar-body--m-menu--
|
|
108
|
-
--#{$page}__sidebar-body--m-menu--
|
|
97
|
+
--#{$page}__sidebar-body--m-menu--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
98
|
+
--#{$page}__sidebar-body--m-menu--BorderTopColor: var(--pf-t--global--border--color--default);
|
|
99
|
+
--#{$page}__sidebar-body--m-menu--BorderTopWidth: var(--pf-t--global--border--width--button--default);
|
|
100
|
+
--#{$page}__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-t--global--border--color--default);
|
|
109
101
|
|
|
110
102
|
@media screen and (min-width: $pf-v5-global--breakpoint--xl) {
|
|
111
103
|
--#{$page}__sidebar--TranslateX: var(--#{$page}__sidebar--xl--TranslateX);
|
|
@@ -113,19 +105,23 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
113
105
|
|
|
114
106
|
// Main
|
|
115
107
|
--#{$page}__main--ZIndex: var(--#{$pf-global}--ZIndex--xs);
|
|
108
|
+
--#{$page}__main--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
|
|
109
|
+
--#{$page}__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
110
|
+
--#{$page}__main--MarginInlineStart: var(--pf-t--global--spacer--lg);
|
|
111
|
+
--#{$page}__main--MarginInlineEnd: var(--pf-t--global--spacer--lg);
|
|
112
|
+
--#{$page}__main--BorderRadius: var(--pf-t--global--border--radius--large);
|
|
113
|
+
--#{$page}__main--BorderWidth: var(--pf-t--global--spacer--sm); // TODO Change to be a page outline token
|
|
114
|
+
--#{$page}__main--BorderColor: var(--#{$page}__main--BackgroundColor); // TODO Border should match the background to blend in - change to be a page outline token
|
|
116
115
|
|
|
117
116
|
// Main section
|
|
118
117
|
--#{$page}__main-section--MarginTop: var(--pf-t--global--spacer--md);
|
|
119
118
|
--#{$page}__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
|
|
120
|
-
--#{$page}__main-section--PaddingRight: var(--pf-t--global--spacer--lg);
|
|
119
|
+
--#{$page}__main-section--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth)); // subtract the border of the main section
|
|
121
120
|
--#{$page}__main-section--PaddingBottom: 0;
|
|
122
|
-
--#{$page}__main-section--PaddingLeft: var(--pf-t--global--spacer--lg);
|
|
121
|
+
--#{$page}__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth)); // subtract the border of the main section
|
|
123
122
|
--#{$page}__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
|
|
124
|
-
--#{$page}__main-section--BackgroundColor:
|
|
125
|
-
--#{$page}__main-section--m-
|
|
126
|
-
--#{$page}__main-section--m-light-100--BackgroundColor: transparent;
|
|
127
|
-
--#{$page}__main-section--m-dark-100--BackgroundColor: transparent;
|
|
128
|
-
--#{$page}__main-section--m-dark-200--BackgroundColor: transparent;
|
|
123
|
+
--#{$page}__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
124
|
+
--#{$page}__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
129
125
|
--#{$page}__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
|
|
130
126
|
--#{$page}__main-nav--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
|
|
131
127
|
|
|
@@ -134,53 +130,53 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
134
130
|
|
|
135
131
|
// Sticky
|
|
136
132
|
--#{$page}--section--m-sticky-top--ZIndex: var(--#{$pf-global}--ZIndex--md);
|
|
137
|
-
--#{$page}--section--m-sticky-top--BoxShadow: var(
|
|
133
|
+
--#{$page}--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
|
|
138
134
|
--#{$page}--section--m-sticky-bottom--ZIndex: var(--#{$pf-global}--ZIndex--md);
|
|
139
|
-
--#{$page}--section--m-sticky-bottom--BoxShadow: var(
|
|
135
|
+
--#{$page}--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm-top);
|
|
140
136
|
|
|
141
137
|
// Shadows
|
|
142
|
-
--#{$page}--section--m-shadow-bottom--BoxShadow: var(
|
|
138
|
+
--#{$page}--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm-bottom);
|
|
143
139
|
--#{$page}--section--m-shadow-bottom--ZIndex: var(--#{$pf-global}--ZIndex--xs);
|
|
144
|
-
--#{$page}--section--m-shadow-top--BoxShadow: var(
|
|
140
|
+
--#{$page}--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm-top);
|
|
145
141
|
--#{$page}--section--m-shadow-top--ZIndex: var(--#{$pf-global}--ZIndex--xs);
|
|
146
142
|
|
|
147
143
|
// Main section horizontal nav
|
|
148
|
-
--#{$page}__main-nav--BackgroundColor: var(
|
|
149
|
-
--#{$page}__main-nav--PaddingTop: var(
|
|
144
|
+
--#{$page}__main-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
145
|
+
--#{$page}__main-nav--PaddingTop: var(--pf-t--global--spacer--md);
|
|
150
146
|
--#{$page}__main-nav--PaddingRight: 0;
|
|
151
147
|
--#{$page}__main-nav--PaddingLeft: 0;
|
|
152
|
-
--#{$page}__main-nav--m-sticky-top--PaddingBottom: var(
|
|
153
|
-
--#{$page}__main-nav--xl--PaddingRight: var(
|
|
154
|
-
--#{$page}__main-nav--xl--PaddingLeft: var(
|
|
148
|
+
--#{$page}__main-nav--m-sticky-top--PaddingBottom: var(--pf-t--global--spacer--md);
|
|
149
|
+
--#{$page}__main-nav--xl--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
150
|
+
--#{$page}__main-nav--xl--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
155
151
|
|
|
156
152
|
// Main section horizontal subnav
|
|
157
|
-
--#{$page}__main-subnav--BackgroundColor: var(
|
|
158
|
-
--#{$page}__main-subnav--BorderTopWidth: var(
|
|
159
|
-
--#{$page}__main-subnav--BorderTopColor: var(
|
|
153
|
+
--#{$page}__main-subnav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
154
|
+
--#{$page}__main-subnav--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
|
|
155
|
+
--#{$page}__main-subnav--BorderTopColor: var(--pf-t--global--border--color--default);
|
|
160
156
|
--#{$page}__main-subnav--BorderLeftWidth: 0;
|
|
161
|
-
--#{$page}__main-subnav--BorderLeftColor: var(
|
|
162
|
-
--#{$page}__sidebar--main__main-subnav--BorderLeftWidth: var(
|
|
157
|
+
--#{$page}__main-subnav--BorderLeftColor: var(--pf-t--global--border--color--default);
|
|
158
|
+
--#{$page}__sidebar--main__main-subnav--BorderLeftWidth: var(--pf-t--global--border--width--divider--default);
|
|
163
159
|
--#{$page}__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth: 0;
|
|
164
160
|
|
|
165
161
|
|
|
166
162
|
// Main section breadcrumb
|
|
167
163
|
--#{$page}__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);
|
|
168
|
-
--#{$page}__main-breadcrumb--PaddingRight: var(--pf-t--global--spacer--
|
|
164
|
+
--#{$page}__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth)); // subtract the border of the main section
|
|
169
165
|
--#{$page}__main-breadcrumb--PaddingBottom: 0;
|
|
170
|
-
--#{$page}__main-breadcrumb--PaddingLeft: var(--pf-t--global--spacer--lg);
|
|
166
|
+
--#{$page}__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth)); // subtract the border of the main section
|
|
167
|
+
--#{$page}__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
171
168
|
|
|
172
169
|
// Main section tabs
|
|
173
170
|
--#{$page}__main-tabs--PaddingTop: 0;
|
|
174
171
|
--#{$page}__main-tabs--PaddingRight: 0;
|
|
175
172
|
--#{$page}__main-tabs--PaddingBottom: 0;
|
|
176
|
-
--#{$page}__main-tabs--
|
|
173
|
+
--#{$page}__main-tabs--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
177
174
|
|
|
178
175
|
// Wizard main section
|
|
179
|
-
--#{$page}__main-wizard--BackgroundColor: var(
|
|
180
|
-
--#{$page}__main-wizard--BorderTopColor: var(
|
|
181
|
-
--#{$page}__main-wizard--BorderTopWidth: var(
|
|
182
|
-
|
|
183
|
-
}
|
|
176
|
+
--#{$page}__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
177
|
+
--#{$page}__main-wizard--BorderTopColor: var(--pf-t--global--border--color--default);
|
|
178
|
+
--#{$page}__main-wizard--BorderTopWidth: var(--pf-t--global--border--width--button--default);
|
|
179
|
+
}
|
|
184
180
|
|
|
185
181
|
.#{$page} {
|
|
186
182
|
// Base
|
|
@@ -211,8 +207,6 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
211
207
|
}
|
|
212
208
|
|
|
213
209
|
.#{$page}__header {
|
|
214
|
-
@include pf-v5-t-dark; // force the container to follow the dark theme
|
|
215
|
-
|
|
216
210
|
display: grid;
|
|
217
211
|
grid-template-columns: auto auto;
|
|
218
212
|
align-items: center;
|
|
@@ -317,58 +311,6 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
317
311
|
|
|
318
312
|
.#{$page}__header-tools-item {
|
|
319
313
|
@include pf-v5-hidden-visible(var(--#{$page}__header-tools-item--Display));
|
|
320
|
-
|
|
321
|
-
.#{$notification-badge} {
|
|
322
|
-
&.pf-m-read {
|
|
323
|
-
&:hover {
|
|
324
|
-
--#{$notification-badge}--after--BackgroundColor: var(--#{$page}__header-tools-item--c-notification-badge--hover--BackgroundColor);
|
|
325
|
-
}
|
|
326
|
-
}
|
|
327
|
-
}
|
|
328
|
-
|
|
329
|
-
&.pf-m-selected {
|
|
330
|
-
.#{$button} {
|
|
331
|
-
background-color: var(--#{$page}__header-tools--c-button--m-selected--before--BackgroundColor); // update at breaking change
|
|
332
|
-
border-radius: var(--#{$page}__header-tools--c-button--m-selected--before--BorderRadius); // update at breaking change
|
|
333
|
-
|
|
334
|
-
// remove at breaking change
|
|
335
|
-
&::before {
|
|
336
|
-
position: absolute;
|
|
337
|
-
inset: 0;
|
|
338
|
-
width: var(--#{$page}__header-tools--c-button--m-selected--before--Width); // remove at breaking change
|
|
339
|
-
height: var(--#{$page}__header-tools--c-button--m-selected--before--Height); // remove at breaking change
|
|
340
|
-
content: "";
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
// stylelint-disable
|
|
344
|
-
.#{$notification-badge} {
|
|
345
|
-
&.pf-m-unread {
|
|
346
|
-
--#{$notification-badge}--after--BackgroundColor: var(--#{$page}__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor);
|
|
347
|
-
|
|
348
|
-
&::after {
|
|
349
|
-
border-color: var(--#{$page}__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor);
|
|
350
|
-
}
|
|
351
|
-
}
|
|
352
|
-
|
|
353
|
-
&.pf-m-attention {
|
|
354
|
-
--#{$notification-badge}--after--BackgroundColor: var(--#{$pf-global}--danger-color--200);
|
|
355
|
-
}
|
|
356
|
-
}
|
|
357
|
-
// stylelint-enable
|
|
358
|
-
}
|
|
359
|
-
}
|
|
360
|
-
|
|
361
|
-
.#{$button}:focus {
|
|
362
|
-
.#{$notification-badge} {
|
|
363
|
-
&.pf-m-unread {
|
|
364
|
-
--#{$notification-badge}--after--BackgroundColor: var(--#{$page}__header-tools--c-button--notification-badge--m-unread--after--BackgroundColor);
|
|
365
|
-
}
|
|
366
|
-
|
|
367
|
-
&.pf-m-attention {
|
|
368
|
-
--#{$notification-badge}--after--BackgroundColor: var(--#{$page}__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor);
|
|
369
|
-
}
|
|
370
|
-
}
|
|
371
|
-
}
|
|
372
314
|
}
|
|
373
315
|
|
|
374
316
|
// Sidebar
|
|
@@ -383,7 +325,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
383
325
|
padding-block-start: 0;
|
|
384
326
|
padding-block-end: var(--pf-t--global--spacer--lg);
|
|
385
327
|
padding-inline-start: var(--pf-t--global--spacer--lg);
|
|
386
|
-
margin-inline-end: var(--#{$page}__sidebar--MarginRight);
|
|
328
|
+
margin-inline-end: var(--#{$page}__sidebar--MarginRight);
|
|
387
329
|
overflow-x: hidden;
|
|
388
330
|
overflow-y: auto;
|
|
389
331
|
-webkit-overflow-scrolling: touch;
|
|
@@ -414,14 +356,6 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
414
356
|
max-width: 0;
|
|
415
357
|
overflow: hidden;
|
|
416
358
|
}
|
|
417
|
-
|
|
418
|
-
&.pf-m-light {
|
|
419
|
-
@include pf-v5-t-light;
|
|
420
|
-
|
|
421
|
-
--#{$page}__sidebar--BackgroundColor: var(--#{$page}__sidebar--m-light--BackgroundColor);
|
|
422
|
-
|
|
423
|
-
border-inline-end: var(--#{$page}__sidebar--m-light--BorderRightWidth) solid var(--#{$page}__sidebar--m-light--BorderRightColor);
|
|
424
|
-
}
|
|
425
359
|
}
|
|
426
360
|
|
|
427
361
|
.#{$page}__sidebar-header {
|
|
@@ -446,7 +380,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
446
380
|
}
|
|
447
381
|
|
|
448
382
|
&.pf-m-menu {
|
|
449
|
-
background-color: var(--#{$
|
|
383
|
+
background-color: var(--#{$page}__sidebar-body--m-menu--BackgroundColor);
|
|
450
384
|
border-block-start: var(--#{$page}__sidebar-body--m-menu--BorderTopWidth) solid var(--#{$page}__sidebar-body--m-menu--BorderTopColor);
|
|
451
385
|
|
|
452
386
|
& + & {
|
|
@@ -543,7 +477,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
543
477
|
|
|
544
478
|
&.pf-m-sticky-top#{$breakpoint-name} {
|
|
545
479
|
position: sticky;
|
|
546
|
-
|
|
480
|
+
inset-block-start: 0;
|
|
547
481
|
z-index: var(--#{$page}--section--m-sticky-top--ZIndex);
|
|
548
482
|
box-shadow: var(--#{$page}--section--m-sticky-top--BoxShadow);
|
|
549
483
|
}
|
|
@@ -560,16 +494,14 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
560
494
|
|
|
561
495
|
// Main & Drawer
|
|
562
496
|
.#{$page}__main {
|
|
497
|
+
align-self: start;
|
|
498
|
+
max-height: var(--#{$page}__main--MaxHeight);
|
|
563
499
|
margin-block-start: 0;
|
|
564
|
-
margin-inline-start: var(--
|
|
565
|
-
margin-inline-end: var(--
|
|
566
|
-
}
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
padding-block-end: var(--pf-t--global--spacer--lg);
|
|
570
|
-
margin-block-end: var(--pf-t--global--spacer--lg);
|
|
571
|
-
background-color: var(--pf-t--global--background--color--primary--default);
|
|
572
|
-
border-radius: var(--pf-t--global--border--radius--large);
|
|
500
|
+
margin-inline-start: var(--#{$page}__main--MarginInlineStart);
|
|
501
|
+
margin-inline-end: var(--#{$page}__main--MarginInlineEnd);
|
|
502
|
+
background: var(--#{$page}__main--BackgroundColor);
|
|
503
|
+
border: var(--#{$page}__main--BorderWidth) solid var(--#{$page}__main--BorderColor);
|
|
504
|
+
border-radius: var(--#{$page}__main--BorderRadius);
|
|
573
505
|
}
|
|
574
506
|
|
|
575
507
|
.#{$page}__main,
|
|
@@ -691,24 +623,8 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
691
623
|
padding-inline-end: var(--#{$page}__main-section--PaddingRight);
|
|
692
624
|
background-color: var(--#{$page}__main-section--BackgroundColor);
|
|
693
625
|
|
|
694
|
-
&.pf-m-
|
|
695
|
-
--#{$page}__main-section--BackgroundColor: var(--#{$page}__main-section--m-
|
|
696
|
-
}
|
|
697
|
-
|
|
698
|
-
&.pf-m-light-100 {
|
|
699
|
-
--#{$page}__main-section--BackgroundColor: var(--#{$page}__main-section--m-light-100--BackgroundColor);
|
|
700
|
-
}
|
|
701
|
-
|
|
702
|
-
&[class*="pf-m-dark-"] {
|
|
703
|
-
@include pf-v5-t-dark; // force the container to follow the dark theme
|
|
704
|
-
}
|
|
705
|
-
|
|
706
|
-
&.pf-m-dark-100 {
|
|
707
|
-
--#{$page}__main-section--BackgroundColor: var(--#{$page}__main-section--m-dark-100--BackgroundColor);
|
|
708
|
-
}
|
|
709
|
-
|
|
710
|
-
&.pf-m-dark-200 {
|
|
711
|
-
--#{$page}__main-section--BackgroundColor: var(--#{$page}__main-section--m-dark-200--BackgroundColor);
|
|
626
|
+
&.pf-m-secondary {
|
|
627
|
+
--#{$page}__main-section--BackgroundColor: var(--#{$page}__main-section--m-secondary--BackgroundColor);
|
|
712
628
|
}
|
|
713
629
|
|
|
714
630
|
@each $breakpoint, $breakpoint-value in $pf-page-v5--breakpoint-map {
|
|
@@ -754,10 +670,6 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
754
670
|
&:first-child {
|
|
755
671
|
--#{$page}__main-wizard--BorderTopWidth: 0;
|
|
756
672
|
}
|
|
757
|
-
|
|
758
|
-
&.pf-m-light-200 {
|
|
759
|
-
--#{$page}__main-wizard--BackgroundColor: var(--#{$page}__main-wizard--m-light-200--BackgroundColor);
|
|
760
|
-
}
|
|
761
673
|
}
|
|
762
674
|
|
|
763
675
|
.#{$page}__main-wizard .#{$page}__main-body {
|
|
@@ -805,9 +717,3 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
805
717
|
}
|
|
806
718
|
}
|
|
807
719
|
|
|
808
|
-
// stylelint-disable no-invalid-position-at-import-rule
|
|
809
|
-
@import "themes/dark/page";
|
|
810
|
-
|
|
811
|
-
@include pf-v5-theme-dark {
|
|
812
|
-
@include pf-v5-theme-dark-page;
|
|
813
|
-
}
|
|
@@ -220,7 +220,6 @@
|
|
|
220
220
|
--pf-v5-c-table__tr--m-clickable--BoxShadow--top: var(--pf-v5-c-table__tr--BoxShadow--top--base);
|
|
221
221
|
--pf-v5-c-table__tr--m-clickable--BackgroundColor: transparent;
|
|
222
222
|
--pf-v5-c-table__tr--m-clickable--BoxShadow: none;
|
|
223
|
-
--pf-v5-c-table__tr--m-clickable--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
224
223
|
--pf-v5-c-table__tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
|
|
225
224
|
--pf-v5-c-table__tr--m-clickable--hover--BoxShadow: var(--pf-v5-c-table__tr--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
|
|
226
225
|
--pf-v5-c-table__tr--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
|
|
@@ -518,18 +517,9 @@
|
|
|
518
517
|
.pf-v5-c-table tr.pf-m-clickable:last-child {
|
|
519
518
|
border-block-end-color: transparent;
|
|
520
519
|
}
|
|
521
|
-
.pf-v5-c-table tr:where(.pf-v5-c-table__tr) {
|
|
522
|
-
position: relative;
|
|
523
|
-
}
|
|
524
|
-
.pf-v5-c-table tr:where(.pf-v5-c-table__tr)::before {
|
|
525
|
-
position: absolute;
|
|
526
|
-
inset: 0;
|
|
527
|
-
content: "";
|
|
528
|
-
background-color: var(--pf-v5-c-table__tr--m-clickable--BackgroundColor);
|
|
529
|
-
border-radius: var(--pf-v5-c-table__tr--m-clickable--BorderRadius);
|
|
530
|
-
}
|
|
531
520
|
.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable {
|
|
532
521
|
cursor: pointer;
|
|
522
|
+
background-color: var(--pf-v5-c-table__tr--m-clickable--BackgroundColor);
|
|
533
523
|
outline-offset: var(--pf-v5-c-table__tr--m-clickable--OutlineOffset);
|
|
534
524
|
box-shadow: var(--pf-v5-c-table__tr--m-clickable--BoxShadow);
|
|
535
525
|
}
|
|
@@ -252,7 +252,6 @@
|
|
|
252
252
|
--#{$table}__tr--m-clickable--BoxShadow--top: var(--#{$table}__tr--BoxShadow--top--base);
|
|
253
253
|
--#{$table}__tr--m-clickable--BackgroundColor: transparent;
|
|
254
254
|
--#{$table}__tr--m-clickable--BoxShadow: none;
|
|
255
|
-
--#{$table}__tr--m-clickable--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
256
255
|
--#{$table}__tr--m-clickable--OutlineOffset: calc(-1 * var(--#{$pf-global}--spacer--xs));
|
|
257
256
|
|
|
258
257
|
// TODO Shadow tokens START HERE AGAIN
|
|
@@ -690,18 +689,9 @@
|
|
|
690
689
|
|
|
691
690
|
// tr clickable
|
|
692
691
|
tr:where(.#{$table}__tr) {
|
|
693
|
-
position: relative;
|
|
694
|
-
|
|
695
|
-
&::before {
|
|
696
|
-
position: absolute;
|
|
697
|
-
inset:0;
|
|
698
|
-
content: "";
|
|
699
|
-
background-color: var(--#{$table}__tr--m-clickable--BackgroundColor);
|
|
700
|
-
border-radius: var(--#{$table}__tr--m-clickable--BorderRadius);
|
|
701
|
-
}
|
|
702
|
-
|
|
703
692
|
&.pf-m-clickable {
|
|
704
693
|
cursor: pointer;
|
|
694
|
+
background-color: var(--#{$table}__tr--m-clickable--BackgroundColor);
|
|
705
695
|
outline-offset: var(--#{$table}__tr--m-clickable--OutlineOffset);
|
|
706
696
|
box-shadow: var(--#{$table}__tr--m-clickable--BoxShadow);
|
|
707
697
|
|
|
@@ -1,11 +1,3 @@
|
|
|
1
|
-
.ws-core-c-page :is(.pf-v5-c-page__sidebar, .pf-v5-c-page__main-subnav) {
|
|
2
|
-
color: var(--pf-v5-global--Color--light-100);
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
.ws-core-c-page .pf-v5-c-page__main-section.pf-m-dark-200 {
|
|
6
|
-
color: var(--pf-v5-global--Color--dark-100);
|
|
7
|
-
}
|
|
8
|
-
|
|
9
1
|
#ws-core-c-page-with-or-without-fill .ws-preview-html,
|
|
10
2
|
#ws-core-c-page-multiple-sidebar-body-elements-padding-and-fill .ws-preview-html {
|
|
11
3
|
height: 500px;
|
|
@@ -32,20 +32,14 @@ wrapperTag: div
|
|
|
32
32
|
<div class="pf-v5-c-page__sidebar-body">Navigation</div>
|
|
33
33
|
</div>
|
|
34
34
|
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
35
|
-
<section class="pf-v5-c-page__main-section
|
|
36
|
-
This
|
|
37
|
-
<code>.pf-v5-c-page__main-section</code
|
|
38
|
-
<code>.pf-m-dark-100</code>.
|
|
39
|
-
</section>
|
|
40
|
-
<section class="pf-v5-c-page__main-section pf-m-dark-200">
|
|
41
|
-
This
|
|
42
|
-
<code>.pf-v5-c-page__main-section</code> uses
|
|
43
|
-
<code>.pf-m-dark-200</code>.
|
|
35
|
+
<section class="pf-v5-c-page__main-section">
|
|
36
|
+
This is a default
|
|
37
|
+
<code>.pf-v5-c-page__main-section</code>.
|
|
44
38
|
</section>
|
|
45
|
-
<section class="pf-v5-c-page__main-section pf-m-
|
|
39
|
+
<section class="pf-v5-c-page__main-section pf-m-secondary">
|
|
46
40
|
This
|
|
47
41
|
<code>.pf-v5-c-page__main-section</code> uses
|
|
48
|
-
<code>.pf-m-
|
|
42
|
+
<code>.pf-m-secondary</code>.
|
|
49
43
|
</section>
|
|
50
44
|
<section class="pf-v5-c-page__main-section">
|
|
51
45
|
This is a default
|
|
@@ -78,10 +72,19 @@ wrapperTag: div
|
|
|
78
72
|
</div>
|
|
79
73
|
</header>
|
|
80
74
|
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
81
|
-
<section class="pf-v5-c-page__main-section
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
75
|
+
<section class="pf-v5-c-page__main-section">
|
|
76
|
+
This is a default
|
|
77
|
+
<code>.pf-v5-c-page__main-section</code>.
|
|
78
|
+
</section>
|
|
79
|
+
<section class="pf-v5-c-page__main-section pf-m-secondary">
|
|
80
|
+
This
|
|
81
|
+
<code>.pf-v5-c-page__main-section</code> uses
|
|
82
|
+
<code>.pf-m-secondary</code>.
|
|
83
|
+
</section>
|
|
84
|
+
<section class="pf-v5-c-page__main-section">
|
|
85
|
+
This is a default
|
|
86
|
+
<code>.pf-v5-c-page__main-section</code>.
|
|
87
|
+
</section>
|
|
85
88
|
</main>
|
|
86
89
|
</div>
|
|
87
90
|
|
|
@@ -116,7 +119,7 @@ wrapperTag: div
|
|
|
116
119
|
<div class="pf-v5-c-page__sidebar-body pf-m-page-insets">footer content</div>
|
|
117
120
|
</div>
|
|
118
121
|
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
119
|
-
<section class="pf-v5-c-page__main-section
|
|
122
|
+
<section class="pf-v5-c-page__main-section"></section>
|
|
120
123
|
</main>
|
|
121
124
|
</div>
|
|
122
125
|
|
|
@@ -144,14 +147,12 @@ wrapperTag: div
|
|
|
144
147
|
</div>
|
|
145
148
|
</header>
|
|
146
149
|
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
147
|
-
<section
|
|
148
|
-
class="pf-v5-c-page__main-section pf-m-light"
|
|
149
|
-
>A regular page section.</section>
|
|
150
|
+
<section class="pf-v5-c-page__main-section">A regular page section.</section>
|
|
150
151
|
<section class="pf-v5-c-page__main-section pf-m-fill">
|
|
151
152
|
This section uses
|
|
152
153
|
<code>.pf-m-fill</code> to fill the available space.
|
|
153
154
|
</section>
|
|
154
|
-
<section class="pf-v5-c-page__main-section pf-m-
|
|
155
|
+
<section class="pf-v5-c-page__main-section pf-m-no-fill">
|
|
155
156
|
This section uses
|
|
156
157
|
<code>.pf-m-no-fill</code> to not fill the available space.
|
|
157
158
|
</section>
|
|
@@ -189,7 +190,7 @@ wrapperTag: div
|
|
|
189
190
|
This
|
|
190
191
|
<code>.pf-v5-c-page__main-section</code> has default padding.
|
|
191
192
|
</section>
|
|
192
|
-
<section class="pf-v5-c-page__main-section pf-m-no-padding
|
|
193
|
+
<section class="pf-v5-c-page__main-section pf-m-no-padding">
|
|
193
194
|
This
|
|
194
195
|
<code>.pf-v5-c-page__main-section</code> uses
|
|
195
196
|
<code>.pf-m-no-padding</code> to remove all padding.
|
|
@@ -237,6 +237,7 @@ section: components
|
|
|
237
237
|
<div class="pf-v5-c-drawer__content">
|
|
238
238
|
<div class="pf-v5-c-drawer__body">
|
|
239
239
|
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
240
|
+
// TODO should this be a page-main-list so there is not a duplicate main tag?
|
|
240
241
|
<section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
|
|
241
242
|
<div class="pf-v5-c-page__main-body">
|
|
242
243
|
<nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
|
|
@@ -1238,6 +1239,7 @@ section: components
|
|
|
1238
1239
|
<div class="pf-v5-c-drawer__content">
|
|
1239
1240
|
<div class="pf-v5-c-drawer__body">
|
|
1240
1241
|
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
1242
|
+
// TODO should this be a page-main-list so there is not a duplicate main tag?
|
|
1241
1243
|
<section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
|
|
1242
1244
|
<div class="pf-v5-c-page__main-body">
|
|
1243
1245
|
<nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
|
|
@@ -2239,6 +2241,7 @@ section: components
|
|
|
2239
2241
|
<div class="pf-v5-c-drawer__content">
|
|
2240
2242
|
<div class="pf-v5-c-drawer__body">
|
|
2241
2243
|
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
2244
|
+
// TODO should this be a page-main-list so there is not a duplicate main tag?
|
|
2242
2245
|
<section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
|
|
2243
2246
|
<div class="pf-v5-c-page__main-body">
|
|
2244
2247
|
<nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
|
|
@@ -3243,6 +3246,7 @@ section: components
|
|
|
3243
3246
|
<div class="pf-v5-c-drawer__content">
|
|
3244
3247
|
<div class="pf-v5-c-drawer__body">
|
|
3245
3248
|
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
3249
|
+
// TODO should this be a page-main-list so there is not a duplicate main tag?
|
|
3246
3250
|
<section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
|
|
3247
3251
|
<div class="pf-v5-c-page__main-body">
|
|
3248
3252
|
<nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
|
|
@@ -4246,6 +4250,7 @@ section: components
|
|
|
4246
4250
|
<div class="pf-v5-c-drawer__content">
|
|
4247
4251
|
<div class="pf-v5-c-drawer__body">
|
|
4248
4252
|
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
4253
|
+
// TODO should this be a page-main-list so there is not a duplicate main tag?
|
|
4249
4254
|
<section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
|
|
4250
4255
|
<div class="pf-v5-c-page__main-body">
|
|
4251
4256
|
<nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
|