@patternfly/documentation-framework 6.0.0-alpha.1 → 6.0.0-alpha.11
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/CHANGELOG.md +107 -0
- package/components/autoLinkHeader/autoLinkHeader.css +2 -2
- package/components/cssVariables/cssVariables.css +4 -4
- package/components/example/example.css +29 -29
- package/components/footer/footer.css +16 -16
- package/components/gdprBanner/gdprBanner.css +2 -2
- package/components/sectionGallery/sectionGallery.css +12 -12
- package/components/sectionGallery/sectionGalleryToolbar.js +1 -1
- package/components/sideNav/sideNav.css +12 -12
- package/components/sideNav/sideNav.js +2 -2
- package/components/tableOfContents/tableOfContents.css +23 -23
- package/layouts/sideNavLayout/sideNavLayout.css +14 -14
- package/layouts/sideNavLayout/sideNavLayout.js +28 -1
- package/package.json +8 -8
- package/pages/404/404.css +2 -2
- package/pages/404/index.js +1 -1
- package/pages/global-css-variables.md +16 -16
- package/scripts/writeScreenshots.js +1 -1
- package/templates/mdx.css +156 -156
- package/templates/mdx.js +6 -6
- package/versions.json +8 -7
|
@@ -260,7 +260,34 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
|
|
|
260
260
|
<MastheadMain>
|
|
261
261
|
<MastheadBrand href={prurl || '/'}>
|
|
262
262
|
{prnum ? `PR #${prnum}` : (
|
|
263
|
-
<
|
|
263
|
+
<svg height="40px" viewBox="0 0 679 158">
|
|
264
|
+
<title>PF-HorizontalLogo-Color</title>
|
|
265
|
+
<defs>
|
|
266
|
+
<linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-website-masthead">
|
|
267
|
+
<stop stopColor="#2B9AF3" offset="0%"></stop>
|
|
268
|
+
<stop stopColor="#73BCF7" stopOpacity="0.502212631" offset="100%"></stop>
|
|
269
|
+
</linearGradient>
|
|
270
|
+
</defs>
|
|
271
|
+
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
|
|
272
|
+
<g transform="translate(206.000000, 45.750000)" fill="var(--pf-t--global--text--color--regular)" fillRule="nonzero">
|
|
273
|
+
<path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"></path>
|
|
274
|
+
<path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"></path>
|
|
275
|
+
<path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"></path>
|
|
276
|
+
<path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"></path>
|
|
277
|
+
<path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"></path>
|
|
278
|
+
<path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"></path>
|
|
279
|
+
<path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"></path>
|
|
280
|
+
<polygon points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon>
|
|
281
|
+
<polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
|
|
282
|
+
<path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"></path>
|
|
283
|
+
</g>
|
|
284
|
+
<g transform="translate(0.000000, 0.000000)">
|
|
285
|
+
<path d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z" fill='var(--pf-t--color--blue--50)'></path>
|
|
286
|
+
<path d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z" fill="url(#linearGradient-website-masthead)"></path>
|
|
287
|
+
<path d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z" fill="url(#linearGradient-website-masthead)" transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "></path>
|
|
288
|
+
</g>
|
|
289
|
+
</g>
|
|
290
|
+
</svg>
|
|
264
291
|
)}
|
|
265
292
|
</MastheadBrand>
|
|
266
293
|
</MastheadMain>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/documentation-framework",
|
|
3
3
|
"description": "A framework to build documentation for PatternFly.",
|
|
4
|
-
"version": "6.0.0-alpha.
|
|
4
|
+
"version": "6.0.0-alpha.11",
|
|
5
5
|
"author": "Red Hat",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"private": false,
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"@babel/plugin-transform-react-jsx": "7.17.12",
|
|
18
18
|
"@babel/preset-env": "7.18.2",
|
|
19
19
|
"@mdx-js/util": "1.6.16",
|
|
20
|
-
"@patternfly/ast-helpers": "^1.
|
|
20
|
+
"@patternfly/ast-helpers": "^1.4.0-alpha.0",
|
|
21
21
|
"@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
|
|
22
22
|
"autoprefixer": "9.8.6",
|
|
23
23
|
"babel-loader": "9.1.2",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"postcss": "8.4.32",
|
|
52
52
|
"postcss-loader": "7.1.0",
|
|
53
53
|
"process": "^0.11.10",
|
|
54
|
-
"puppeteer": "19.
|
|
54
|
+
"puppeteer": "19.11.1",
|
|
55
55
|
"puppeteer-cluster": "0.23.0",
|
|
56
56
|
"react-docgen": "5.3.1",
|
|
57
57
|
"react-monaco-editor": "^0.51.0",
|
|
@@ -80,12 +80,12 @@
|
|
|
80
80
|
"webpack-merge": "5.8.0"
|
|
81
81
|
},
|
|
82
82
|
"peerDependencies": {
|
|
83
|
-
"@patternfly/patternfly": "6.0.0-alpha.
|
|
84
|
-
"@patternfly/react-code-editor": "6.0.0-alpha.
|
|
85
|
-
"@patternfly/react-core": "6.0.0-alpha.
|
|
86
|
-
"@patternfly/react-table": "6.0.0-alpha.
|
|
83
|
+
"@patternfly/patternfly": "6.0.0-alpha.91",
|
|
84
|
+
"@patternfly/react-code-editor": "6.0.0-alpha.36",
|
|
85
|
+
"@patternfly/react-core": "6.0.0-alpha.36",
|
|
86
|
+
"@patternfly/react-table": "6.0.0-alpha.36",
|
|
87
87
|
"react": "^17.0.0 || ^18.0.0",
|
|
88
88
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
89
89
|
},
|
|
90
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "2a33a74588f8d36056f17ab08bd43472fca841a2"
|
|
91
91
|
}
|
package/pages/404/404.css
CHANGED
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.ws-404-card-header {
|
|
8
|
-
padding: var(--pf-
|
|
8
|
+
padding: var(--pf-v6-global--spacer--lg);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
div.ws-404-button-wrapper {
|
|
12
12
|
width: 100%;
|
|
13
13
|
display: flex;
|
|
14
14
|
justify-content: center;
|
|
15
|
-
padding: var(--pf-
|
|
15
|
+
padding: var(--pf-v6-global--spacer--xl);
|
|
16
16
|
}
|
package/pages/404/index.js
CHANGED
|
@@ -73,7 +73,7 @@ const Page404 = () => {
|
|
|
73
73
|
<Title headingLevel="h1" size="2xl">
|
|
74
74
|
404: That page no longer exists
|
|
75
75
|
</Title>
|
|
76
|
-
<p style={{ marginTop: 'var(--pf-
|
|
76
|
+
<p style={{ marginTop: 'var(--pf-v6-global--spacer--sm)' }}>
|
|
77
77
|
Another page might have the information you need, so try searching PatternFly.
|
|
78
78
|
</p>
|
|
79
79
|
<EmptyStateBody>
|
|
@@ -16,7 +16,7 @@ Global variables define and enforce global style elements (like values for color
|
|
|
16
16
|
|
|
17
17
|
Global variables follow this formula:
|
|
18
18
|
|
|
19
|
-
`--pf-
|
|
19
|
+
`--pf-v6-global--concept--PropertyCamelCase--modifier--state`
|
|
20
20
|
|
|
21
21
|
Where...
|
|
22
22
|
|
|
@@ -30,8 +30,8 @@ Example:
|
|
|
30
30
|
```css
|
|
31
31
|
:root {
|
|
32
32
|
/* Default & hovered link colors */
|
|
33
|
-
--pf-
|
|
34
|
-
--pf-
|
|
33
|
+
--pf-v6-global--link--Color: #06c;
|
|
34
|
+
--pf-v6-global--link--Color--hover: #004080;
|
|
35
35
|
}
|
|
36
36
|
```
|
|
37
37
|
|
|
@@ -44,33 +44,33 @@ Component variables are used to define custom properties at the component-level.
|
|
|
44
44
|
|
|
45
45
|
Component variables follow this formula:
|
|
46
46
|
|
|
47
|
-
`--pf-
|
|
47
|
+
`--pf-v6-c-block__element--modifier--state--breakpoint--['child'|tag|c-component]pseudo-element--PropertyCamelCase`
|
|
48
48
|
|
|
49
49
|
Where...
|
|
50
50
|
|
|
51
|
-
- `pf-
|
|
51
|
+
- `pf-v6-c-block` refers to the block, usually the component or layout name, like `pf-v6-c-alert`.
|
|
52
52
|
- `__element` refers to the element inside of the block, like `__title`.
|
|
53
53
|
- `modifier` is prefixed with`-m` and refers to a modifier class such as `.pf-m-danger`.
|
|
54
54
|
- `state` is something like `hover` or `active`.
|
|
55
|
-
- `breakpoint` is a media query breakpoint such as `sm` for `$pf-
|
|
55
|
+
- `breakpoint` is a media query breakpoint such as `sm` for `$pf-v6-global--breakpoint--xs`.
|
|
56
56
|
- `pseudo-element` is either `before` or `after`.
|
|
57
57
|
- `child`, `tag`, or `c-component` refers to a child element. It could be a tag or component name, like `svg` or `c-menu`, or it could use `child` to refer to any child element. If any modifiers, states, breakpoints, or pseudo-elements are on the child, include those after this portion of the name.
|
|
58
58
|
|
|
59
59
|
Example:
|
|
60
60
|
- Note: component variables are scoped to the top-level component selector
|
|
61
61
|
```css
|
|
62
|
-
.pf-
|
|
62
|
+
.pf-v6-c-button {
|
|
63
63
|
/* Default, primary, and primary hovered button background colors */
|
|
64
|
-
--pf-
|
|
65
|
-
--pf-
|
|
66
|
-
--pf-
|
|
64
|
+
--pf-v6-c-button--BackgroundColor: transparent;
|
|
65
|
+
--pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-global--primary-color--100);
|
|
66
|
+
--pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-v6-global--primary-color--200);
|
|
67
67
|
}
|
|
68
68
|
```
|
|
69
69
|
|
|
70
70
|
<br/>
|
|
71
71
|
Component variables are listed at the bottom of each component page (for example, [button css variables](/components/button#css-variables)).
|
|
72
72
|
|
|
73
|
-
Note that all component variables are declared at the top component level (for example, `.pf-
|
|
73
|
+
Note that all component variables are declared at the top component level (for example, `.pf-v6-c-button`). The component variable table linked above also shows all usages of each variable and the values they evaluate to in each case - expand any component variable row to view the global variable it is mapped to.
|
|
74
74
|
|
|
75
75
|
|
|
76
76
|
|
|
@@ -78,25 +78,25 @@ Note that all component variables are declared at the top component level (for e
|
|
|
78
78
|
|
|
79
79
|
PatternFly defines a number of standard breakpoints. These are always used as a `min-width` breakpoint; i.e. using the `-md` breakpoint would apply to everything at the `-md` width and wider. (There is one exception to this, which is in the responsive behavior of the [table component](/components/table).)
|
|
80
80
|
|
|
81
|
-
Breakpoint suffixes are used in utility classes and layouts as well as in many components as a way to apply class styles at a specified breakpoint. When available, `{-on-[breakpoint]}` will be shown as an available suffix for the class in the usage section of the documentation. The breakpoint suffix is optional and if not specified, the base class will be used. There are breakpoints for `sm`, `md`, `lg`, `xl`, and `2xl`, and the values for the corresponding breakpoints are defined below in the global variables `—pf-
|
|
81
|
+
Breakpoint suffixes are used in utility classes and layouts as well as in many components as a way to apply class styles at a specified breakpoint. When available, `{-on-[breakpoint]}` will be shown as an available suffix for the class in the usage section of the documentation. The breakpoint suffix is optional and if not specified, the base class will be used. There are breakpoints for `sm`, `md`, `lg`, `xl`, and `2xl`, and the values for the corresponding breakpoints are defined below in the global variables `—pf-v6-global—breakpoint—[breakpoint]`.
|
|
82
82
|
|
|
83
83
|
### Using the variable system
|
|
84
84
|
|
|
85
85
|
PatternFly 4 styles provide a default starting point. You can use the variable system to make adjustments to that default styling. When you change one or more elements, you should package those values into a new SCSS stylesheet to replace the default styling.
|
|
86
86
|
|
|
87
|
-
Overrides to PatternFly variables should be made at the `:root` level for global variables or at the top-level component selector for component variables (for example, `.pf-
|
|
87
|
+
Overrides to PatternFly variables should be made at the `:root` level for global variables or at the top-level component selector for component variables (for example, `.pf-v6-c-button`), as these overrides will cascade down to children elements accordingly.
|
|
88
88
|
|
|
89
89
|
Example:
|
|
90
90
|
- Change the global primary color to red, but keep the original primary blue color as the background for primary buttons.
|
|
91
91
|
```css
|
|
92
92
|
/* Override global primary color 100 to red */
|
|
93
93
|
:root {
|
|
94
|
-
--pf-
|
|
94
|
+
--pf-v6-global--primary-color--100: var(--pf-v6-global--palette--red-400);
|
|
95
95
|
}
|
|
96
96
|
|
|
97
97
|
/* Override the above override for only the primary button background color */
|
|
98
|
-
.pf-
|
|
99
|
-
--pf-
|
|
98
|
+
.pf-v6-c-button {
|
|
99
|
+
--pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-global--palette--blue-400);
|
|
100
100
|
}
|
|
101
101
|
```
|
|
102
102
|
|
|
@@ -11,7 +11,7 @@ sharp.cache(false);
|
|
|
11
11
|
async function writeScreenshot({ page, data: { url, urlPrefix } }) {
|
|
12
12
|
await page.goto(url);
|
|
13
13
|
await page.addStyleTag({content: '*,*::before,*::after{animation-delay:-1ms !important;animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:0s !important;transition-delay:0s !important;}'}); // disable animations/transitions so they don't interfere with screenshot tool
|
|
14
|
-
await page.waitForSelector('.pf-
|
|
14
|
+
await page.waitForSelector('.pf-v6-u-h-100');
|
|
15
15
|
const outfile = path.join(
|
|
16
16
|
screenshotBase,
|
|
17
17
|
url.replace(`${urlPrefix}/`, '') + '.png'
|
package/templates/mdx.css
CHANGED
|
@@ -5,49 +5,49 @@
|
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.ws-release-notes-toc {
|
|
8
|
-
margin-bottom: var(--pf-
|
|
8
|
+
margin-bottom: var(--pf-v6-global--spacer--lg);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
.ws-release-notes-toc .pf-
|
|
11
|
+
.ws-release-notes-toc .pf-v6-c-card {
|
|
12
12
|
height: 100%;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
.ws-release-notes-toc .pf-
|
|
16
|
-
padding-bottom: var(--pf-
|
|
15
|
+
.ws-release-notes-toc .pf-v6-c-card__title {
|
|
16
|
+
padding-bottom: var(--pf-v6-global--spacer--xs);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
.ws-release-notes-toc .pf-
|
|
19
|
+
.ws-release-notes-toc .pf-v6-c-card__title .pf-v6-c-title {
|
|
20
20
|
display: inline;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
.ws-release-notes-toc .pf-
|
|
24
|
-
margin-right: var(--pf-
|
|
23
|
+
.ws-release-notes-toc .pf-v6-c-card__title a {
|
|
24
|
+
margin-right: var(--pf-v6-global--spacer--sm);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
.ws-release-notes-toc .pf-
|
|
27
|
+
.ws-release-notes-toc .pf-v6-c-card__title .pf-v6-c-badge {
|
|
28
28
|
vertical-align: text-top;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
.ws-release-notes-toc .pf-
|
|
31
|
+
.ws-release-notes-toc .pf-v6-c-card__body {
|
|
32
32
|
color: #72767B;
|
|
33
|
-
font-family: var(--pf-
|
|
34
|
-
font-size: var(--pf-
|
|
33
|
+
font-family: var(--pf-v6-global--FontFamily--text);
|
|
34
|
+
font-size: var(--pf-v6-global--FontSize--md);
|
|
35
35
|
font-weight: 400;
|
|
36
36
|
line-height: 1.5;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
.ws-code {
|
|
40
40
|
display: inline-block;
|
|
41
|
-
background-color: var(--pf-
|
|
42
|
-
padding: 1px var(--pf-
|
|
43
|
-
border: var(--pf-
|
|
41
|
+
background-color: var(--pf-v6-global--BackgroundColor--100);
|
|
42
|
+
padding: 1px var(--pf-v6-global--spacer--sm);
|
|
43
|
+
border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--BorderColor--300);
|
|
44
44
|
white-space: pre-wrap;
|
|
45
|
-
font-size: var(--pf-
|
|
46
|
-
font-family: var(--pf-
|
|
45
|
+
font-size: var(--pf-v6-global--FontSize--sm);
|
|
46
|
+
font-family: var(--pf-v6-global--FontFamily--monospace);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
.ws-p + .ws-code {
|
|
50
|
-
margin-bottom: var(--pf-
|
|
50
|
+
margin-bottom: var(--pf-v6-c-content--MarginBottom);
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
/* Table styles */
|
|
@@ -78,86 +78,86 @@
|
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
/*
|
|
81
|
-
* Copied from pf-
|
|
81
|
+
* Copied from pf-v6-c-content.
|
|
82
82
|
*/
|
|
83
83
|
:root {
|
|
84
|
-
--pf-
|
|
85
|
-
--pf-
|
|
86
|
-
--pf-
|
|
87
|
-
--pf-
|
|
88
|
-
--pf-
|
|
89
|
-
--pf-
|
|
90
|
-
--pf-
|
|
91
|
-
--pf-
|
|
92
|
-
--pf-
|
|
93
|
-
--pf-
|
|
94
|
-
--pf-
|
|
95
|
-
--pf-
|
|
96
|
-
--pf-
|
|
97
|
-
--pf-
|
|
98
|
-
--pf-
|
|
99
|
-
--pf-
|
|
100
|
-
--pf-
|
|
101
|
-
--pf-
|
|
102
|
-
--pf-
|
|
103
|
-
--pf-
|
|
104
|
-
--pf-
|
|
105
|
-
--pf-
|
|
106
|
-
--pf-
|
|
107
|
-
--pf-
|
|
108
|
-
--pf-
|
|
109
|
-
--pf-
|
|
110
|
-
--pf-
|
|
111
|
-
--pf-
|
|
112
|
-
--pf-
|
|
113
|
-
--pf-
|
|
114
|
-
--pf-
|
|
115
|
-
--pf-
|
|
116
|
-
--pf-
|
|
117
|
-
--pf-
|
|
118
|
-
--pf-
|
|
119
|
-
--pf-
|
|
120
|
-
--pf-
|
|
121
|
-
--pf-
|
|
122
|
-
--pf-
|
|
123
|
-
--pf-
|
|
124
|
-
--pf-
|
|
125
|
-
--pf-
|
|
126
|
-
--pf-
|
|
127
|
-
--pf-
|
|
128
|
-
--pf-
|
|
129
|
-
--pf-
|
|
130
|
-
--pf-
|
|
131
|
-
--pf-
|
|
132
|
-
--pf-
|
|
133
|
-
--pf-
|
|
134
|
-
--pf-
|
|
135
|
-
--pf-
|
|
136
|
-
--pf-
|
|
137
|
-
--pf-
|
|
138
|
-
--pf-
|
|
139
|
-
--pf-
|
|
140
|
-
--pf-
|
|
141
|
-
--pf-
|
|
142
|
-
--pf-
|
|
143
|
-
--pf-
|
|
144
|
-
--pf-
|
|
145
|
-
--pf-
|
|
146
|
-
--pf-
|
|
147
|
-
--pf-
|
|
148
|
-
--pf-
|
|
149
|
-
--pf-
|
|
150
|
-
--pf-
|
|
151
|
-
--pf-
|
|
152
|
-
--pf-
|
|
153
|
-
--pf-
|
|
154
|
-
--pf-
|
|
155
|
-
--pf-
|
|
156
|
-
font-size: var(--pf-
|
|
157
|
-
line-height: var(--pf-
|
|
158
|
-
color: var(--pf-
|
|
84
|
+
--pf-v6-c-content--MarginBottom: var(--pf-v6-global--spacer--md);
|
|
85
|
+
--pf-v6-c-content--LineHeight: var(--pf-v6-global--LineHeight--md);
|
|
86
|
+
--pf-v6-c-content--FontSize: var(--pf-v6-global--FontSize--md);
|
|
87
|
+
--pf-v6-c-content--FontWeight: var(--pf-v6-global--FontWeight--normal);
|
|
88
|
+
--pf-v6-c-content--Color: var(--pf-v6-global--Color--100);
|
|
89
|
+
--pf-v6-c-content--heading--FontFamily: var(--pf-v6-global--FontFamily--heading);
|
|
90
|
+
--pf-v6-c-content--h1--MarginTop: var(--pf-v6-global--spacer--lg);
|
|
91
|
+
--pf-v6-c-content--h1--MarginBottom: var(--pf-v6-global--spacer--sm);
|
|
92
|
+
--pf-v6-c-content--h1--LineHeight: var(--pf-v6-global--LineHeight--sm);
|
|
93
|
+
--pf-v6-c-content--h1--FontSize: var(--pf-v6-global--FontSize--2xl);
|
|
94
|
+
--pf-v6-c-content--h1--FontWeight: var(--pf-v6-global--FontWeight--normal);
|
|
95
|
+
--pf-v6-c-content--h2--MarginTop: var(--pf-v6-global--spacer--lg);
|
|
96
|
+
--pf-v6-c-content--h2--MarginBottom: var(--pf-v6-global--spacer--sm);
|
|
97
|
+
--pf-v6-c-content--h2--LineHeight: var(--pf-v6-global--LineHeight--sm);
|
|
98
|
+
--pf-v6-c-content--h2--FontSize: var(--pf-v6-global--FontSize--xl);
|
|
99
|
+
--pf-v6-c-content--h2--FontWeight: var(--pf-v6-global--FontWeight--normal);
|
|
100
|
+
--pf-v6-c-content--h3--MarginTop: var(--pf-v6-global--spacer--lg);
|
|
101
|
+
--pf-v6-c-content--h3--MarginBottom: var(--pf-v6-global--spacer--sm);
|
|
102
|
+
--pf-v6-c-content--h3--LineHeight: var(--pf-v6-global--LineHeight--md);
|
|
103
|
+
--pf-v6-c-content--h3--FontSize: var(--pf-v6-global--FontSize--lg);
|
|
104
|
+
--pf-v6-c-content--h3--FontWeight: var(--pf-v6-global--FontWeight--normal);
|
|
105
|
+
--pf-v6-c-content--h4--MarginTop: var(--pf-v6-global--spacer--lg);
|
|
106
|
+
--pf-v6-c-content--h4--MarginBottom: var(--pf-v6-global--spacer--sm);
|
|
107
|
+
--pf-v6-c-content--h4--LineHeight: var(--pf-v6-global--LineHeight--md);
|
|
108
|
+
--pf-v6-c-content--h4--FontSize: var(--pf-v6-global--FontSize--md);
|
|
109
|
+
--pf-v6-c-content--h4--FontWeight: var(--pf-v6-global--FontWeight--semi-bold);
|
|
110
|
+
--pf-v6-c-content--h5--MarginTop: var(--pf-v6-global--spacer--lg);
|
|
111
|
+
--pf-v6-c-content--h5--MarginBottom: var(--pf-v6-global--spacer--sm);
|
|
112
|
+
--pf-v6-c-content--h5--LineHeight: var(--pf-v6-global--LineHeight--md);
|
|
113
|
+
--pf-v6-c-content--h5--FontSize: var(--pf-v6-global--FontSize--md);
|
|
114
|
+
--pf-v6-c-content--h5--FontWeight: var(--pf-v6-global--FontWeight--semi-bold);
|
|
115
|
+
--pf-v6-c-content--h6--MarginTop: var(--pf-v6-global--spacer--lg);
|
|
116
|
+
--pf-v6-c-content--h6--MarginBottom: var(--pf-v6-global--spacer--sm);
|
|
117
|
+
--pf-v6-c-content--h6--LineHeight: var(--pf-v6-global--LineHeight--md);
|
|
118
|
+
--pf-v6-c-content--h6--FontSize: var(--pf-v6-global--FontSize--md);
|
|
119
|
+
--pf-v6-c-content--h6--FontWeight: var(--pf-v6-global--FontWeight--semi-bold);
|
|
120
|
+
--pf-v6-c-content--small--MarginBottom: var(--pf-v6-global--spacer--md);
|
|
121
|
+
--pf-v6-c-content--small--LineHeight: var(--pf-v6-global--LineHeight--md);
|
|
122
|
+
--pf-v6-c-content--small--FontSize: var(--pf-v6-global--FontSize--sm);
|
|
123
|
+
--pf-v6-c-content--small--Color: var(--pf-v6-global--Color--200);
|
|
124
|
+
--pf-v6-c-content--small--FontWeight: var(--pf-v6-global--FontWeight--semi-bold);
|
|
125
|
+
--pf-v6-c-content--a--Color: var(--pf-v6-global--link--Color);
|
|
126
|
+
--pf-v6-c-content--a--TextDecoration: var(--pf-v6-global--link--TextDecoration);
|
|
127
|
+
--pf-v6-c-content--a--hover--Color: var(--pf-v6-global--link--Color--hover);
|
|
128
|
+
--pf-v6-c-content--a--hover--TextDecoration: var(--pf-v6-global--link--TextDecoration--hover);
|
|
129
|
+
--pf-v6-c-content--blockquote--PaddingTop: var(--pf-v6-global--spacer--md);
|
|
130
|
+
--pf-v6-c-content--blockquote--PaddingRight: var(--pf-v6-global--spacer--md);
|
|
131
|
+
--pf-v6-c-content--blockquote--PaddingBottom: var(--pf-v6-global--spacer--md);
|
|
132
|
+
--pf-v6-c-content--blockquote--PaddingLeft: var(--pf-v6-global--spacer--md);
|
|
133
|
+
--pf-v6-c-content--blockquote--FontWeight: var(--pf-v6-global--FontWeight--light);
|
|
134
|
+
--pf-v6-c-content--blockquote--Color: var(--pf-v6-global--Color--200);
|
|
135
|
+
--pf-v6-c-content--blockquote--BorderLeftColor: var(--pf-v6-global--BorderColor--100);
|
|
136
|
+
--pf-v6-c-content--blockquote--BorderLeftWidth: var(--pf-v6-global--BorderWidth--lg);
|
|
137
|
+
--pf-v6-c-content--ol--PaddingLeft: var(--pf-v6-global--spacer--lg);
|
|
138
|
+
--pf-v6-c-content--ol--MarginTop: var(--pf-v6-global--spacer--md);
|
|
139
|
+
--pf-v6-c-content--ol--MarginLeft: var(--pf-v6-global--spacer--lg);
|
|
140
|
+
--pf-v6-c-content--ol--nested--MarginTop: var(--pf-v6-global--spacer--sm);
|
|
141
|
+
--pf-v6-c-content--ol--nested--MarginLeft: var(--pf-v6-global--spacer--sm);
|
|
142
|
+
--pf-v6-c-content--ul--PaddingLeft: var(--pf-v6-global--spacer--lg);
|
|
143
|
+
--pf-v6-c-content--ul--MarginTop: var(--pf-v6-global--spacer--md);
|
|
144
|
+
--pf-v6-c-content--ul--MarginLeft: var(--pf-v6-global--spacer--lg);
|
|
145
|
+
--pf-v6-c-content--ul--nested--MarginTop: var(--pf-v6-global--spacer--sm);
|
|
146
|
+
--pf-v6-c-content--ul--nested--MarginLeft: var(--pf-v6-global--spacer--sm);
|
|
147
|
+
--pf-v6-c-content--ul--ListStyle: var(--pf-v6-global--ListStyle);
|
|
148
|
+
--pf-v6-c-content--li--MarginTop: var(--pf-v6-global--spacer--sm);
|
|
149
|
+
--pf-v6-c-content--dl--ColumnGap: var(--pf-v6-global--spacer--2xl);
|
|
150
|
+
--pf-v6-c-content--dl--RowGap: var(--pf-v6-global--spacer--md);
|
|
151
|
+
--pf-v6-c-content--dt--FontWeight: var(--pf-v6-global--FontWeight--semi-bold);
|
|
152
|
+
--pf-v6-c-content--dt--MarginTop: var(--pf-v6-global--spacer--md);
|
|
153
|
+
--pf-v6-c-content--dt--sm--MarginTop: 0;
|
|
154
|
+
--pf-v6-c-content--hr--Height: var(--pf-v6-global--BorderWidth--sm);
|
|
155
|
+
--pf-v6-c-content--hr--BackgroundColor: var(--pf-v6-global--BorderColor--100);
|
|
156
|
+
font-size: var(--pf-v6-c-content--FontSize);
|
|
157
|
+
line-height: var(--pf-v6-c-content--LineHeight);
|
|
158
|
+
color: var(--pf-v6-c-content--Color); }
|
|
159
159
|
.ws-li + li {
|
|
160
|
-
margin-top: var(--pf-
|
|
160
|
+
margin-top: var(--pf-v6-c-content--li--MarginTop); }
|
|
161
161
|
.ws-p:not(:last-child),
|
|
162
162
|
.ws-dl:not(:last-child),
|
|
163
163
|
.ws-ol:not(:last-child),
|
|
@@ -168,7 +168,7 @@
|
|
|
168
168
|
.ws-hr:not(:last-child),
|
|
169
169
|
.ws-table:not(:last-child),
|
|
170
170
|
.ws-content-table:not(:last-child) {
|
|
171
|
-
margin-bottom: var(--pf-
|
|
171
|
+
margin-bottom: var(--pf-v6-c-content--MarginBottom); }
|
|
172
172
|
.ws-h1,
|
|
173
173
|
.ws-h2,
|
|
174
174
|
.ws-h3,
|
|
@@ -176,103 +176,103 @@
|
|
|
176
176
|
.ws-h5,
|
|
177
177
|
.ws-h6 {
|
|
178
178
|
margin: 0;
|
|
179
|
-
font-family: var(--pf-
|
|
179
|
+
font-family: var(--pf-v6-c-content--heading--FontFamily); }
|
|
180
180
|
.ws-ol,
|
|
181
181
|
.ws-ul {
|
|
182
182
|
margin: 0; }
|
|
183
183
|
.ws-h1 {
|
|
184
|
-
margin-bottom: var(--pf-
|
|
185
|
-
font-size: var(--pf-
|
|
186
|
-
font-weight: var(--pf-
|
|
187
|
-
line-height: var(--pf-
|
|
184
|
+
margin-bottom: var(--pf-v6-c-content--h1--MarginBottom);
|
|
185
|
+
font-size: var(--pf-v6-c-content--h1--FontSize);
|
|
186
|
+
font-weight: var(--pf-v6-c-content--h1--FontWeight);
|
|
187
|
+
line-height: var(--pf-v6-c-content--h1--LineHeight); }
|
|
188
188
|
.ws-h1:not(:first-child) {
|
|
189
|
-
margin-top: var(--pf-
|
|
189
|
+
margin-top: var(--pf-v6-c-content--h1--MarginTop); }
|
|
190
190
|
.ws-h2 {
|
|
191
|
-
margin-bottom: var(--pf-
|
|
192
|
-
font-size: var(--pf-
|
|
193
|
-
font-weight: var(--pf-
|
|
194
|
-
line-height: var(--pf-
|
|
195
|
-
margin-top: var(--pf-
|
|
191
|
+
margin-bottom: var(--pf-v6-c-content--h2--MarginBottom);
|
|
192
|
+
font-size: var(--pf-v6-c-content--h2--FontSize);
|
|
193
|
+
font-weight: var(--pf-v6-c-content--h2--FontWeight);
|
|
194
|
+
line-height: var(--pf-v6-c-content--h2--LineHeight);
|
|
195
|
+
margin-top: var(--pf-v6-c-content--h2--MarginTop); }
|
|
196
196
|
.ws-h3 {
|
|
197
|
-
margin-bottom: var(--pf-
|
|
198
|
-
font-size: var(--pf-
|
|
199
|
-
font-weight: var(--pf-
|
|
200
|
-
line-height: var(--pf-
|
|
197
|
+
margin-bottom: var(--pf-v6-c-content--h3--MarginBottom);
|
|
198
|
+
font-size: var(--pf-v6-c-content--h3--FontSize);
|
|
199
|
+
font-weight: var(--pf-v6-c-content--h3--FontWeight);
|
|
200
|
+
line-height: var(--pf-v6-c-content--h3--LineHeight); }
|
|
201
201
|
.ws-h3:not(:first-child) {
|
|
202
|
-
margin-top: var(--pf-
|
|
202
|
+
margin-top: var(--pf-v6-c-content--h3--MarginTop); }
|
|
203
203
|
.ws-h4 {
|
|
204
|
-
margin-bottom: var(--pf-
|
|
205
|
-
font-size: var(--pf-
|
|
206
|
-
font-weight: var(--pf-
|
|
207
|
-
line-height: var(--pf-
|
|
204
|
+
margin-bottom: var(--pf-v6-c-content--h4--MarginBottom);
|
|
205
|
+
font-size: var(--pf-v6-c-content--h4--FontSize);
|
|
206
|
+
font-weight: var(--pf-v6-c-content--h4--FontWeight);
|
|
207
|
+
line-height: var(--pf-v6-c-content--h4--LineHeight); }
|
|
208
208
|
.ws-h4:not(:first-child) {
|
|
209
|
-
margin-top: var(--pf-
|
|
209
|
+
margin-top: var(--pf-v6-c-content--h4--MarginTop); }
|
|
210
210
|
.ws-h5 {
|
|
211
|
-
margin-bottom: var(--pf-
|
|
212
|
-
font-size: var(--pf-
|
|
213
|
-
font-weight: var(--pf-
|
|
214
|
-
line-height: var(--pf-
|
|
211
|
+
margin-bottom: var(--pf-v6-c-content--h5--MarginBottom);
|
|
212
|
+
font-size: var(--pf-v6-c-content--h5--FontSize);
|
|
213
|
+
font-weight: var(--pf-v6-c-content--h5--FontWeight);
|
|
214
|
+
line-height: var(--pf-v6-c-content--h5--LineHeight); }
|
|
215
215
|
.ws-h5:not(:first-child) {
|
|
216
|
-
margin-top: var(--pf-
|
|
216
|
+
margin-top: var(--pf-v6-c-content--h5--MarginTop); }
|
|
217
217
|
.ws-h6 {
|
|
218
|
-
margin-bottom: var(--pf-
|
|
219
|
-
font-size: var(--pf-
|
|
220
|
-
font-weight: var(--pf-
|
|
221
|
-
line-height: var(--pf-
|
|
218
|
+
margin-bottom: var(--pf-v6-c-content--h6--MarginBottom);
|
|
219
|
+
font-size: var(--pf-v6-c-content--h6--FontSize);
|
|
220
|
+
font-weight: var(--pf-v6-c-content--h6--FontWeight);
|
|
221
|
+
line-height: var(--pf-v6-c-content--h6--LineHeight); }
|
|
222
222
|
.ws-h6:not(:first-child) {
|
|
223
|
-
margin-top: var(--pf-
|
|
223
|
+
margin-top: var(--pf-v6-c-content--h6--MarginTop); }
|
|
224
224
|
.ws-small {
|
|
225
225
|
display: block;
|
|
226
|
-
font-size: var(--pf-
|
|
227
|
-
line-height: var(--pf-
|
|
228
|
-
color: var(--pf-
|
|
226
|
+
font-size: var(--pf-v6-c-content--small--FontSize);
|
|
227
|
+
line-height: var(--pf-v6-c-content--small--LineHeight);
|
|
228
|
+
color: var(--pf-v6-c-content--small--Color); }
|
|
229
229
|
.ws-small:not(:last-child) {
|
|
230
|
-
margin-bottom: var(--pf-
|
|
230
|
+
margin-bottom: var(--pf-v6-c-content--small--MarginBottom); }
|
|
231
231
|
.ws-blockquote {
|
|
232
|
-
padding: var(--pf-
|
|
233
|
-
font-weight: var(--pf-
|
|
234
|
-
color: var(--pf-
|
|
235
|
-
border-left: var(--pf-
|
|
232
|
+
padding: var(--pf-v6-c-content--blockquote--PaddingTop) var(--pf-v6-c-content--blockquote--PaddingRight) var(--pf-v6-c-content--blockquote--PaddingBottom) var(--pf-v6-c-content--blockquote--PaddingLeft);
|
|
233
|
+
font-weight: var(--pf-v6-c-content--blockquote--FontWeight);
|
|
234
|
+
color: var(--pf-v6-c-content--blockquote--Color);
|
|
235
|
+
border-left: var(--pf-v6-c-content--blockquote--BorderLeftWidth) solid var(--pf-v6-c-content--blockquote--BorderLeftColor); }
|
|
236
236
|
.ws-hr {
|
|
237
|
-
height: var(--pf-
|
|
238
|
-
background-color: var(--pf-
|
|
237
|
+
height: var(--pf-v6-c-content--hr--Height);
|
|
238
|
+
background-color: var(--pf-v6-c-content--hr--BackgroundColor);
|
|
239
239
|
border: none; }
|
|
240
240
|
.ws-ol {
|
|
241
|
-
padding-left: var(--pf-
|
|
242
|
-
margin-top: var(--pf-
|
|
243
|
-
margin-left: var(--pf-
|
|
241
|
+
padding-left: var(--pf-v6-c-content--ol--PaddingLeft);
|
|
242
|
+
margin-top: var(--pf-v6-c-content--ol--MarginTop);
|
|
243
|
+
margin-left: var(--pf-v6-c-content--ol--MarginLeft); }
|
|
244
244
|
.ws-ol ul {
|
|
245
|
-
--pf-
|
|
246
|
-
--pf-
|
|
245
|
+
--pf-v6-c-content--ul--MarginTop: var(--pf-v6-c-content--ul--nested--MarginTop);
|
|
246
|
+
--pf-v6-c-content--ul--MarginLeft: var(--pf-v6-c-content--ul--nested--MarginLeft); }
|
|
247
247
|
.ws-ol ol {
|
|
248
|
-
--pf-
|
|
249
|
-
--pf-
|
|
248
|
+
--pf-v6-c-content--ol--MarginTop: var(--pf-v6-c-content--ol--nested--MarginTop);
|
|
249
|
+
--pf-v6-c-content--ol--MarginLeft: var(--pf-v6-c-content--ol--nested--MarginLeft); }
|
|
250
250
|
.ws-ul {
|
|
251
|
-
padding-left: var(--pf-
|
|
252
|
-
margin-top: var(--pf-
|
|
253
|
-
margin-left: var(--pf-
|
|
254
|
-
list-style: var(--pf-
|
|
251
|
+
padding-left: var(--pf-v6-c-content--ul--PaddingLeft);
|
|
252
|
+
margin-top: var(--pf-v6-c-content--ul--MarginTop);
|
|
253
|
+
margin-left: var(--pf-v6-c-content--ul--MarginLeft);
|
|
254
|
+
list-style: var(--pf-v6-c-content--ul--ListStyle); }
|
|
255
255
|
.ws-ul ul {
|
|
256
|
-
--pf-
|
|
257
|
-
--pf-
|
|
256
|
+
--pf-v6-c-content--ul--MarginTop: var(--pf-v6-c-content--ul--nested--MarginTop);
|
|
257
|
+
--pf-v6-c-content--ul--MarginLeft: var(--pf-v6-c-content--ul--nested--MarginLeft); }
|
|
258
258
|
.ws-ul ol {
|
|
259
|
-
--pf-
|
|
260
|
-
--pf-
|
|
259
|
+
--pf-v6-c-content--ol--MarginTop: var(--pf-v6-c-content--ol--nested--MarginTop);
|
|
260
|
+
--pf-v6-c-content--ol--MarginLeft: var(--pf-v6-c-content--ol--nested--MarginLeft); }
|
|
261
261
|
.ws-dl {
|
|
262
262
|
display: grid;
|
|
263
263
|
grid-template-columns: 1fr; }
|
|
264
264
|
@media screen and (min-width: 576px) {
|
|
265
265
|
.ws-dl {
|
|
266
266
|
grid-template: auto / auto 1fr;
|
|
267
|
-
grid-column-gap: var(--pf-
|
|
268
|
-
grid-row-gap: var(--pf-
|
|
267
|
+
grid-column-gap: var(--pf-v6-c-content--dl--ColumnGap);
|
|
268
|
+
grid-row-gap: var(--pf-v6-c-content--dl--RowGap); } }
|
|
269
269
|
.ws-dt {
|
|
270
|
-
font-weight: var(--pf-
|
|
270
|
+
font-weight: var(--pf-v6-c-content--dt--FontWeight); }
|
|
271
271
|
.ws-dt:not(:first-child) {
|
|
272
|
-
margin-top: var(--pf-
|
|
272
|
+
margin-top: var(--pf-v6-c-content--dt--MarginTop); }
|
|
273
273
|
@media screen and (min-width: 576px) {
|
|
274
274
|
.ws-dt:not(:first-child) {
|
|
275
|
-
--pf-
|
|
275
|
+
--pf-v6-c-content--dt--MarginTop: var(--pf-v6-c-content--dt--sm--MarginTop); } }
|
|
276
276
|
@media screen and (min-width: 576px) {
|
|
277
277
|
.ws-dt {
|
|
278
278
|
grid-column: 1; } }
|