@patternfly/patternfly 6.0.0-alpha.34 → 6.0.0-alpha.38
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/CODE_OF_CONDUCT.md +1 -2
- package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
- package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
- package/assets/images/PF-IconLogo-color.svg +17 -0
- package/components/Backdrop/backdrop.css +6 -2
- package/components/Backdrop/backdrop.scss +5 -2
- package/components/Banner/banner.css +4 -0
- package/components/Banner/banner.scss +5 -0
- package/components/Card/card.css +3 -0
- package/components/Card/card.scss +8 -0
- package/components/Form/form.css +6 -0
- package/components/Form/form.scss +4 -1
- package/components/MenuToggle/menu-toggle.css +1 -0
- package/components/MenuToggle/menu-toggle.scss +2 -0
- package/components/Popover/popover.css +0 -2
- package/components/Popover/popover.scss +2 -2
- package/components/SimpleList/simple-list.css +35 -52
- package/components/SimpleList/simple-list.scss +41 -51
- package/components/Table/table.scss +1 -0
- package/components/Tooltip/tooltip.css +0 -2
- package/components/Tooltip/tooltip.scss +3 -3
- package/components/Truncate/truncate.css +4 -0
- package/components/Truncate/truncate.scss +3 -0
- package/docs/components/Accordion/examples/Accordion.md +6 -6
- package/docs/components/Alert/examples/Alert.md +2 -2
- package/docs/components/Brand/examples/Brand.md +9 -33
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
- package/docs/components/Card/examples/Card.md +18 -20
- package/docs/components/Check/examples/Check.md +1 -0
- package/docs/components/Content/examples/Content.md +5 -5
- package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
- package/docs/components/Label/examples/Label.md +11 -11
- package/docs/components/Nav/examples/Navigation.css +18 -2
- package/docs/components/Nav/examples/Navigation.md +1 -1
- package/docs/components/Radio/examples/Radio.md +1 -1
- package/docs/components/SimpleList/examples/SimpleList.md +3 -3
- package/docs/components/Table/examples/Table.md +8 -8
- package/docs/components/Truncate/examples/Truncate.css +2 -2
- package/docs/layouts/Flex/examples/Flex.md +11 -11
- package/package.json +32 -32
- package/patternfly-no-globals.css +59 -62
- package/patternfly-theme-dark-unversioned.css +59 -62
- package/patternfly.css +59 -62
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/components/SimpleList/themes/dark/simple-list.scss +0 -14
package/CODE_OF_CONDUCT.md
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
This project is governed by the [Contributor Covenant version 1.4][1]. All contributors and participants agree to abide by its terms. To report violations, send an email to [patternfly@redhat.com][2].
|
|
2
2
|
|
|
3
3
|
[1]: https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
|
|
4
|
-
[2]: mailto:patternfly@redhat.com
|
|
5
|
-
|
|
4
|
+
[2]: mailto:patternfly@redhat.com
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<svg width="679px" height="158px" viewBox="0 0 679 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
3
|
+
<title>PF-HorizontalLogo-Color </title>
|
|
4
|
+
<defs>
|
|
5
|
+
<linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-1">
|
|
6
|
+
<stop stop-color="#2B9AF3" offset="0%"></stop>
|
|
7
|
+
<stop stop-color="#73BCF7" stop-opacity="0.502212631" offset="100%"></stop>
|
|
8
|
+
</linearGradient>
|
|
9
|
+
</defs>
|
|
10
|
+
<g id="PF-HorizontalLogo-Color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
11
|
+
<g id="PatternFly-Copy-11" transform="translate(206.000000, 45.750000)" fill="#151515" fill-rule="nonzero">
|
|
12
|
+
<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" id="Shape"></path>
|
|
13
|
+
<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" id="Shape"></path>
|
|
14
|
+
<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" id="Path"></path>
|
|
15
|
+
<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" id="Path"></path>
|
|
16
|
+
<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" id="Shape"></path>
|
|
17
|
+
<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" id="Path"></path>
|
|
18
|
+
<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" id="Path"></path>
|
|
19
|
+
<polygon id="Path" 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>
|
|
20
|
+
<polygon id="Path" points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
|
|
21
|
+
<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" id="Path"></path>
|
|
22
|
+
</g>
|
|
23
|
+
<g id="Logo" transform="translate(0.000000, 0.000000)">
|
|
24
|
+
<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" id="Rectangle-Copy-17" fill="#0066CC"></path>
|
|
25
|
+
<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" id="Path-2" fill="url(#linearGradient-1)"></path>
|
|
26
|
+
<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" id="Path-2" fill="url(#linearGradient-1)" transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "></path>
|
|
27
|
+
</g>
|
|
28
|
+
</g>
|
|
29
|
+
</svg>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<svg width="679px" height="158px" viewBox="0 0 679 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
3
|
+
<title>PF-HorizontalLogo-Reverse </title>
|
|
4
|
+
<defs>
|
|
5
|
+
<linearGradient x1="100%" y1="1.31838984e-13%" x2="40.4021492%" y2="59.4473677%" id="linearGradient-1">
|
|
6
|
+
<stop stop-color="#FFFFFF" offset="0%"></stop>
|
|
7
|
+
<stop stop-color="#FFFFFF" stop-opacity="0.498497596" offset="100%"></stop>
|
|
8
|
+
</linearGradient>
|
|
9
|
+
</defs>
|
|
10
|
+
<g id="PF-HorizontalLogo-Reverse" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
11
|
+
<g id="Group" transform="translate(-0.000000, 0.000000)">
|
|
12
|
+
<path d="M61.7658863,0 L157.846154,0 L157.846154,96.0802676 C104.782487,96.0802676 61.7658863,53.0636665 61.7658863,0 L61.7658863,0 L61.7658863,0 Z" id="Rectangle-Copy-15" fill="#FFFFFF" opacity="0.401297433"></path>
|
|
13
|
+
<path d="M158,1.84777167 L158,138 C158,149.045695 149.045695,158 138,158 L66.3656919,158 L158,1.84777167 Z M156.152228,3.55271368e-13 L-9.37916411e-13,91.6343081 L-9.37916411e-13,20 C-9.09494702e-13,8.954305 8.954305,3.55271368e-13 20,3.41060513e-13 L156.152228,3.55271368e-13 Z" id="Combined-Shape-Copy-4" fill="url(#linearGradient-1)"></path>
|
|
14
|
+
</g>
|
|
15
|
+
<g id="PatternFly-Copy-11" transform="translate(206.000000, 45.750000)" fill="#FFFFFF" fill-rule="nonzero">
|
|
16
|
+
<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" id="Shape"></path>
|
|
17
|
+
<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" id="Shape"></path>
|
|
18
|
+
<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" id="Path"></path>
|
|
19
|
+
<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" id="Path"></path>
|
|
20
|
+
<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" id="Shape"></path>
|
|
21
|
+
<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" id="Path"></path>
|
|
22
|
+
<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" id="Path"></path>
|
|
23
|
+
<polygon id="Path" 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>
|
|
24
|
+
<polygon id="Path" points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
|
|
25
|
+
<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" id="Path"></path>
|
|
26
|
+
</g>
|
|
27
|
+
</g>
|
|
28
|
+
</svg>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<svg width="158px" height="158px" viewBox="0 0 158 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
3
|
+
<title>PF-IconLogo-color </title>
|
|
4
|
+
<defs>
|
|
5
|
+
<linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-1">
|
|
6
|
+
<stop stop-color="#2B9AF3" offset="0%"></stop>
|
|
7
|
+
<stop stop-color="#73BCF7" stop-opacity="0.502212631" offset="100%"></stop>
|
|
8
|
+
</linearGradient>
|
|
9
|
+
</defs>
|
|
10
|
+
<g id="PF-IconLogo-color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
11
|
+
<g id="Logo">
|
|
12
|
+
<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" id="Rectangle-Copy-17" fill="#0066CC"></path>
|
|
13
|
+
<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" id="Path-2" fill="url(#linearGradient-1)"></path>
|
|
14
|
+
<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" id="Path-2" fill="url(#linearGradient-1)" transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "></path>
|
|
15
|
+
</g>
|
|
16
|
+
</g>
|
|
17
|
+
</svg>
|
|
@@ -1,7 +1,11 @@
|
|
|
1
|
+
:root,
|
|
1
2
|
.pf-v5-c-backdrop {
|
|
2
3
|
--pf-v5-c-backdrop--Position: fixed;
|
|
3
|
-
--pf-v5-c-backdrop--ZIndex: var(--pf-
|
|
4
|
-
--pf-v5-c-backdrop--BackgroundColor: var(--pf-
|
|
4
|
+
--pf-v5-c-backdrop--ZIndex: var(--pf-t--global--Zindex--lg);
|
|
5
|
+
--pf-v5-c-backdrop--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.pf-v5-c-backdrop {
|
|
5
9
|
position: var(--pf-v5-c-backdrop--Position);
|
|
6
10
|
inset-block-start: 0;
|
|
7
11
|
inset-inline-start: 0;
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
// @debug $backdrop; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
|
|
2
2
|
|
|
3
|
+
:root,
|
|
3
4
|
.#{$backdrop} {
|
|
4
5
|
--#{$backdrop}--Position: fixed;
|
|
5
|
-
--#{$backdrop}--ZIndex: var(
|
|
6
|
-
--#{$backdrop}--BackgroundColor: var(
|
|
6
|
+
--#{$backdrop}--ZIndex: var(--pf-t--global--Zindex--lg);
|
|
7
|
+
--#{$backdrop}--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
|
|
8
|
+
}
|
|
7
9
|
|
|
10
|
+
.#{$backdrop} {
|
|
8
11
|
position: var(--#{$backdrop}--Position);
|
|
9
12
|
inset-block-start: 0;
|
|
10
13
|
inset-inline-start: 0;
|
|
@@ -77,6 +77,10 @@
|
|
|
77
77
|
--pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-info--BackgroundColor);
|
|
78
78
|
--pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-info--Color);
|
|
79
79
|
}
|
|
80
|
+
.pf-v5-c-banner.pf-m-custom {
|
|
81
|
+
--pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-custom--BackgroundColor);
|
|
82
|
+
--pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-custom--Color);
|
|
83
|
+
}
|
|
80
84
|
.pf-v5-c-banner.pf-m-red {
|
|
81
85
|
--pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-red--BackgroundColor);
|
|
82
86
|
--pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-red--Color);
|
|
@@ -90,6 +90,11 @@
|
|
|
90
90
|
--#{$banner}--Color: var(--#{$banner}--m-info--Color);
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
+
&.pf-m-custom {
|
|
94
|
+
--#{$banner}--BackgroundColor: var(--#{$banner}--m-custom--BackgroundColor);
|
|
95
|
+
--#{$banner}--Color: var(--#{$banner}--m-custom--Color);
|
|
96
|
+
}
|
|
97
|
+
|
|
93
98
|
&.pf-m-red {
|
|
94
99
|
--#{$banner}--BackgroundColor: var(--#{$banner}--m-red--BackgroundColor);
|
|
95
100
|
--#{$banner}--Color: var(--#{$banner}--m-red--Color);
|
package/components/Card/card.css
CHANGED
|
@@ -105,6 +105,9 @@
|
|
|
105
105
|
background-color: var(--pf-v5-c-card--BackgroundColor);
|
|
106
106
|
box-shadow: var(--pf-v5-c-card--BoxShadow);
|
|
107
107
|
}
|
|
108
|
+
.pf-v5-c-card.pf-m-selectable .pf-v5-c-card__selectable-actions :is(.pf-v5-c-check, .pf-v5-c-radio) {
|
|
109
|
+
gap: 0;
|
|
110
|
+
}
|
|
108
111
|
.pf-v5-c-card.pf-m-selectable, .pf-v5-c-card.pf-m-clickable {
|
|
109
112
|
isolation: isolate;
|
|
110
113
|
box-shadow: none;
|
|
@@ -149,6 +149,14 @@
|
|
|
149
149
|
box-shadow: var(--#{$card}--BoxShadow);
|
|
150
150
|
|
|
151
151
|
// SELECTABLE CARDS, CLICKABLE CARDS
|
|
152
|
+
&.pf-m-selectable {
|
|
153
|
+
// disables the gap since these have an empty label
|
|
154
|
+
// TODO - update/refactor selectable check/radio to use the standalone varioation with a <label> on the outer parent component class element
|
|
155
|
+
.#{$card}__selectable-actions :is(.#{$check}, .#{$radio}) {
|
|
156
|
+
gap: 0;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
152
160
|
&.pf-m-selectable,
|
|
153
161
|
&.pf-m-clickable {
|
|
154
162
|
isolation: isolate;
|
package/components/Form/form.css
CHANGED
|
@@ -247,6 +247,9 @@
|
|
|
247
247
|
max-width: var(--pf-v5-c-form--m-limit-width--MaxWidth);
|
|
248
248
|
}
|
|
249
249
|
|
|
250
|
+
.pf-v5-c-form__group {
|
|
251
|
+
min-width: 0;
|
|
252
|
+
}
|
|
250
253
|
.pf-v5-c-form__group.pf-m-action {
|
|
251
254
|
margin-block-start: var(--pf-v5-c-form__group--m-action--MarginTop);
|
|
252
255
|
overflow: hidden;
|
|
@@ -335,6 +338,9 @@
|
|
|
335
338
|
--pf-v5-c-form__group-label-help--Color: var(--pf-v5-c-form__group-label-help--focus--Color);
|
|
336
339
|
}
|
|
337
340
|
|
|
341
|
+
.pf-v5-c-form__group-control {
|
|
342
|
+
min-width: 0;
|
|
343
|
+
}
|
|
338
344
|
.pf-v5-c-form__group-control.pf-m-inline {
|
|
339
345
|
display: flex;
|
|
340
346
|
flex-flow: row wrap;
|
|
@@ -221,6 +221,8 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
|
|
|
221
221
|
}
|
|
222
222
|
|
|
223
223
|
.#{$form}__group {
|
|
224
|
+
min-width: 0;
|
|
225
|
+
|
|
224
226
|
&.pf-m-action {
|
|
225
227
|
margin-block-start: var(--#{$form}__group--m-action--MarginTop);
|
|
226
228
|
overflow: hidden; // keeps the negative bottom margin bottom on .#{$form}__actions from triggering overflow
|
|
@@ -320,8 +322,9 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
|
|
|
320
322
|
}
|
|
321
323
|
}
|
|
322
324
|
|
|
323
|
-
|
|
324
325
|
.#{$form}__group-control {
|
|
326
|
+
min-width: 0;
|
|
327
|
+
|
|
325
328
|
&.pf-m-inline {
|
|
326
329
|
display: flex;
|
|
327
330
|
flex-flow: row wrap;
|
|
@@ -273,6 +273,7 @@
|
|
|
273
273
|
align-self: stretch;
|
|
274
274
|
}
|
|
275
275
|
.pf-v5-c-menu-toggle.pf-m-split-button > .pf-v5-c-check .pf-v5-c-check__input {
|
|
276
|
+
--pf-v5-c-check__input--TranslateY: 0;
|
|
276
277
|
align-self: center;
|
|
277
278
|
}
|
|
278
279
|
.pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *::after {
|
|
@@ -157,12 +157,10 @@
|
|
|
157
157
|
|
|
158
158
|
.pf-v5-c-popover__arrow {
|
|
159
159
|
position: absolute;
|
|
160
|
-
/* stylelint-disable liberty/use-logical-spec */
|
|
161
160
|
top: var(--pf-v5-c-popover__arrow--Top, auto);
|
|
162
161
|
right: var(--pf-v5-c-popover__arrow--Right, auto);
|
|
163
162
|
bottom: var(--pf-v5-c-popover__arrow--Bottom, auto);
|
|
164
163
|
left: var(--pf-v5-c-popover__arrow--Left, auto);
|
|
165
|
-
/* stylelint-enable */
|
|
166
164
|
width: var(--pf-v5-c-popover__arrow--Width);
|
|
167
165
|
height: var(--pf-v5-c-popover__arrow--Height);
|
|
168
166
|
pointer-events: none;
|
|
@@ -215,12 +215,12 @@
|
|
|
215
215
|
|
|
216
216
|
.#{$popover}__arrow {
|
|
217
217
|
position: absolute;
|
|
218
|
-
|
|
218
|
+
// stylelint-disable liberty/use-logical-spec
|
|
219
219
|
top: var(--#{$popover}__arrow--Top, auto);
|
|
220
220
|
right: var(--#{$popover}__arrow--Right, auto);
|
|
221
221
|
bottom: var(--#{$popover}__arrow--Bottom, auto);
|
|
222
222
|
left: var(--#{$popover}__arrow--Left, auto);
|
|
223
|
-
|
|
223
|
+
// stylelint-enable
|
|
224
224
|
width: var(--#{$popover}__arrow--Width);
|
|
225
225
|
height: var(--#{$popover}__arrow--Height);
|
|
226
226
|
pointer-events: none;
|
|
@@ -1,31 +1,28 @@
|
|
|
1
|
-
.pf-v5-c-simple-list {
|
|
2
|
-
--pf-v5-c-simple-list__item-link--PaddingTop: var(--pf-
|
|
3
|
-
--pf-v5-c-simple-list__item-link--PaddingRight: var(--pf-
|
|
4
|
-
--pf-v5-c-simple-list__item-link--PaddingBottom: var(--pf-
|
|
5
|
-
--pf-v5-c-simple-list__item-link--PaddingLeft: var(--pf-
|
|
6
|
-
--pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-
|
|
7
|
-
--pf-v5-c-simple-list__item-link--Color: var(--pf-
|
|
8
|
-
--pf-v5-c-simple-list__item-link--FontSize: var(--pf-
|
|
9
|
-
--pf-v5-c-simple-list__item-link--
|
|
10
|
-
--pf-v5-c-simple-list__item-link--m-current--
|
|
11
|
-
--pf-v5-c-simple-list__item-link--
|
|
12
|
-
--pf-v5-c-simple-list__item-link--
|
|
13
|
-
--pf-v5-c-simple-list__item-link--
|
|
14
|
-
--pf-v5-c-simple-list__item-link--
|
|
15
|
-
--pf-v5-c-simple-list__item-link--
|
|
16
|
-
--pf-v5-c-simple-list__item-link--
|
|
17
|
-
--pf-v5-c-simple-list__item-link--
|
|
18
|
-
--pf-v5-c-simple-
|
|
19
|
-
--pf-v5-c-simple-
|
|
20
|
-
--pf-v5-c-simple-
|
|
21
|
-
--pf-v5-c-simple-list__title--
|
|
22
|
-
--pf-v5-c-simple-list__title--
|
|
23
|
-
--pf-v5-c-simple-list__title--
|
|
24
|
-
--pf-v5-c-simple-list__title--
|
|
25
|
-
--pf-v5-c-simple-
|
|
26
|
-
--pf-v5-c-simple-list__title--Color: var(--pf-v5-global--Color--dark-200);
|
|
27
|
-
--pf-v5-c-simple-list__title--FontWeight: var(--pf-v5-global--FontWeight--bold);
|
|
28
|
-
--pf-v5-c-simple-list__section--section--MarginTop: var(--pf-v5-global--spacer--sm);
|
|
1
|
+
:root, .pf-v5-c-simple-list {
|
|
2
|
+
--pf-v5-c-simple-list__item-link--PaddingTop: var(--pf-t--global--spacer--xs);
|
|
3
|
+
--pf-v5-c-simple-list__item-link--PaddingRight: var(--pf-t--global--spacer--md);
|
|
4
|
+
--pf-v5-c-simple-list__item-link--PaddingBottom: var(--pf-t--global--spacer--xs);
|
|
5
|
+
--pf-v5-c-simple-list__item-link--PaddingLeft: var(--pf-t--global--spacer--md);
|
|
6
|
+
--pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
7
|
+
--pf-v5-c-simple-list__item-link--Color: var(--pf-t--global--text--color--subtle);
|
|
8
|
+
--pf-v5-c-simple-list__item-link--FontSize: var(--pf-t--global--font--size--body);
|
|
9
|
+
--pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-t--global--text--color--regular);
|
|
10
|
+
--pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--selected);
|
|
11
|
+
--pf-v5-c-simple-list__item-link--hover--Color: var(--pf-t--global--text--color--subtle);
|
|
12
|
+
--pf-v5-c-simple-list__item-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
13
|
+
--pf-v5-c-simple-list__item-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
|
|
14
|
+
--pf-v5-c-simple-list__item-link--BorderRadius: var(--pf-t--global--border--radius--tiny);
|
|
15
|
+
--pf-v5-c-simple-list__item-link--m-link--Color: var(--pf-t--global--text--color--link--default);
|
|
16
|
+
--pf-v5-c-simple-list__item-link--m-link--m-current--Color: var(--pf-t--global--text--color--link--hover);
|
|
17
|
+
--pf-v5-c-simple-list__item-link--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
|
|
18
|
+
--pf-v5-c-simple-list__title--PaddingTop: var(--pf-t--global--spacer--sm);
|
|
19
|
+
--pf-v5-c-simple-list__title--PaddingRight: var(--pf-t--global--spacer--md);
|
|
20
|
+
--pf-v5-c-simple-list__title--PaddingBottom: var(--pf-t--global--spacer--sm);
|
|
21
|
+
--pf-v5-c-simple-list__title--PaddingLeft: var(--pf-t--global--spacer--md);
|
|
22
|
+
--pf-v5-c-simple-list__title--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
23
|
+
--pf-v5-c-simple-list__title--Color: var(--pf-t--global--text--color--regular);
|
|
24
|
+
--pf-v5-c-simple-list__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
25
|
+
--pf-v5-c-simple-list__section--section--MarginTop: var(--pf-t--global--spacer--sm);
|
|
29
26
|
}
|
|
30
27
|
|
|
31
28
|
.pf-v5-c-simple-list__item-link {
|
|
@@ -36,31 +33,28 @@
|
|
|
36
33
|
padding-inline-start: var(--pf-v5-c-simple-list__item-link--PaddingLeft);
|
|
37
34
|
padding-inline-end: var(--pf-v5-c-simple-list__item-link--PaddingRight);
|
|
38
35
|
font-size: var(--pf-v5-c-simple-list__item-link--FontSize);
|
|
39
|
-
font-weight: var(--pf-v5-c-simple-list__item-link--FontWeight);
|
|
40
36
|
color: var(--pf-v5-c-simple-list__item-link--Color);
|
|
41
37
|
text-align: start;
|
|
38
|
+
text-decoration: none;
|
|
42
39
|
background-color: var(--pf-v5-c-simple-list__item-link--BackgroundColor);
|
|
43
40
|
border: none;
|
|
41
|
+
border-radius: var(--pf-v5-c-simple-list__item-link--BorderRadius);
|
|
42
|
+
}
|
|
43
|
+
.pf-v5-c-simple-list__item-link.pf-m-link {
|
|
44
|
+
--pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--m-link--Color);
|
|
45
|
+
--pf-v5-c-simple-list__item-link--hover--Color: var(--pf-v5-c-simple-list__item-link--m-link--m-current--Color);
|
|
46
|
+
--pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-v5-c-simple-list__item-link--m-link--hover--Color);
|
|
44
47
|
}
|
|
45
|
-
.pf-v5-c-simple-list__item-link:hover {
|
|
48
|
+
.pf-v5-c-simple-list__item-link:hover, .pf-v5-c-simple-list__item-link:focus {
|
|
46
49
|
--pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--hover--BackgroundColor);
|
|
47
50
|
--pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--hover--Color);
|
|
48
51
|
text-decoration: none;
|
|
49
|
-
|
|
50
|
-
.pf-v5-c-simple-list__item-link:focus {
|
|
51
|
-
--pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-c-simple-list__item-link--focus--FontWeight);
|
|
52
|
-
--pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--focus--BackgroundColor);
|
|
53
|
-
--pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--focus--Color);
|
|
54
|
-
}
|
|
55
|
-
.pf-v5-c-simple-list__item-link:active {
|
|
56
|
-
--pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-c-simple-list__item-link--active--FontWeight);
|
|
57
|
-
--pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--active--BackgroundColor);
|
|
58
|
-
--pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--active--Color);
|
|
52
|
+
mix-blend-mode: var(--pf-v5-c-simple-list__item-link--MixBlendMode);
|
|
59
53
|
}
|
|
60
54
|
.pf-v5-c-simple-list__item-link.pf-m-current {
|
|
61
|
-
--pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-c-simple-list__item-link--m-current--FontWeight);
|
|
62
55
|
--pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--m-current--BackgroundColor);
|
|
63
56
|
--pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--m-current--Color);
|
|
57
|
+
mix-blend-mode: var(--pf-v5-c-simple-list__item-link--MixBlendMode);
|
|
64
58
|
}
|
|
65
59
|
|
|
66
60
|
.pf-v5-c-simple-list__title {
|
|
@@ -75,15 +69,4 @@
|
|
|
75
69
|
|
|
76
70
|
.pf-v5-c-simple-list__section + .pf-v5-c-simple-list__section {
|
|
77
71
|
margin-block-start: var(--pf-v5-c-simple-list__section--section--MarginTop);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-simple-list {
|
|
81
|
-
--pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-v5-global--active-color--100);
|
|
82
|
-
--pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
|
|
83
|
-
--pf-v5-c-simple-list__item-link--hover--Color: var(--pf-v5-global--Color--100);
|
|
84
|
-
--pf-v5-c-simple-list__item-link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
|
|
85
|
-
--pf-v5-c-simple-list__item-link--focus--Color: var(--pf-v5-global--Color--100);
|
|
86
|
-
--pf-v5-c-simple-list__item-link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
|
|
87
|
-
--pf-v5-c-simple-list__item-link--active--Color: var(--pf-v5-global--Color--100);
|
|
88
|
-
--pf-v5-c-simple-list__item-link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
|
|
89
72
|
}
|
|
@@ -1,38 +1,37 @@
|
|
|
1
1
|
// @debug $simple-list; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
|
|
2
2
|
|
|
3
|
-
.#{$simple-list} {
|
|
3
|
+
:root, .#{$simple-list} {
|
|
4
4
|
// Simple list item link
|
|
5
|
-
--#{$simple-list}__item-link--PaddingTop: var(
|
|
6
|
-
--#{$simple-list}__item-link--PaddingRight: var(
|
|
7
|
-
--#{$simple-list}__item-link--PaddingBottom: var(
|
|
8
|
-
--#{$simple-list}__item-link--PaddingLeft: var(
|
|
9
|
-
--#{$simple-list}__item-link--BackgroundColor: var(
|
|
10
|
-
--#{$simple-list}__item-link--Color: var(
|
|
11
|
-
--#{$simple-list}__item-link--FontSize: var(
|
|
12
|
-
--#{$simple-list}__item-link--
|
|
13
|
-
--#{$simple-list}__item-link--m-current--
|
|
14
|
-
--#{$simple-list}__item-link--
|
|
15
|
-
--#{$simple-list}__item-link--
|
|
16
|
-
--#{$simple-list}__item-link--
|
|
17
|
-
--#{$simple-list}__item-link--
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
--#{$simple-list}__item-link--
|
|
21
|
-
--#{$simple-list}__item-link--
|
|
22
|
-
--#{$simple-list}__item-link--
|
|
23
|
-
--#{$simple-list}__item-link--active--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
|
|
5
|
+
--#{$simple-list}__item-link--PaddingTop: var(--pf-t--global--spacer--xs);
|
|
6
|
+
--#{$simple-list}__item-link--PaddingRight: var(--pf-t--global--spacer--md);
|
|
7
|
+
--#{$simple-list}__item-link--PaddingBottom: var(--pf-t--global--spacer--xs);
|
|
8
|
+
--#{$simple-list}__item-link--PaddingLeft: var(--pf-t--global--spacer--md);
|
|
9
|
+
--#{$simple-list}__item-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
10
|
+
--#{$simple-list}__item-link--Color: var(--pf-t--global--text--color--subtle);
|
|
11
|
+
--#{$simple-list}__item-link--FontSize: var(--pf-t--global--font--size--body);
|
|
12
|
+
--#{$simple-list}__item-link--m-current--Color: var(--pf-t--global--text--color--regular);
|
|
13
|
+
--#{$simple-list}__item-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--selected);
|
|
14
|
+
--#{$simple-list}__item-link--hover--Color: var(--pf-t--global--text--color--subtle);
|
|
15
|
+
--#{$simple-list}__item-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
16
|
+
--#{$simple-list}__item-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
|
|
17
|
+
--#{$simple-list}__item-link--BorderRadius: var(--pf-t--global--border--radius--tiny);
|
|
18
|
+
|
|
19
|
+
// Simple list item link
|
|
20
|
+
--#{$simple-list}__item-link--m-link--Color: var(--pf-t--global--text--color--link--default);
|
|
21
|
+
--#{$simple-list}__item-link--m-link--m-current--Color: var(--pf-t--global--text--color--link--hover);
|
|
22
|
+
--#{$simple-list}__item-link--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
|
|
24
23
|
|
|
25
24
|
// Simple list title
|
|
26
|
-
--#{$simple-list}__title--PaddingTop: var(
|
|
27
|
-
--#{$simple-list}__title--PaddingRight: var(
|
|
28
|
-
--#{$simple-list}__title--PaddingBottom: var(
|
|
29
|
-
--#{$simple-list}__title--PaddingLeft: var(
|
|
30
|
-
--#{$simple-list}__title--FontSize: var(
|
|
31
|
-
--#{$simple-list}__title--Color: var(
|
|
32
|
-
--#{$simple-list}__title--FontWeight: var(
|
|
25
|
+
--#{$simple-list}__title--PaddingTop: var(--pf-t--global--spacer--sm);
|
|
26
|
+
--#{$simple-list}__title--PaddingRight: var(--pf-t--global--spacer--md);
|
|
27
|
+
--#{$simple-list}__title--PaddingBottom: var(--pf-t--global--spacer--sm);
|
|
28
|
+
--#{$simple-list}__title--PaddingLeft: var(--pf-t--global--spacer--md);
|
|
29
|
+
--#{$simple-list}__title--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
30
|
+
--#{$simple-list}__title--Color: var(--pf-t--global--text--color--regular);
|
|
31
|
+
--#{$simple-list}__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
33
32
|
|
|
34
33
|
// Simple list section
|
|
35
|
-
--#{$simple-list}__section--section--MarginTop: var(
|
|
34
|
+
--#{$simple-list}__section--section--MarginTop: var(--pf-t--global--spacer--sm);
|
|
36
35
|
}
|
|
37
36
|
|
|
38
37
|
.#{$simple-list}__item-link {
|
|
@@ -43,35 +42,33 @@
|
|
|
43
42
|
padding-inline-start: var(--#{$simple-list}__item-link--PaddingLeft);
|
|
44
43
|
padding-inline-end: var(--#{$simple-list}__item-link--PaddingRight);
|
|
45
44
|
font-size: var(--#{$simple-list}__item-link--FontSize);
|
|
46
|
-
font-weight: var(--#{$simple-list}__item-link--FontWeight);
|
|
47
45
|
color: var(--#{$simple-list}__item-link--Color);
|
|
48
46
|
text-align: start;
|
|
47
|
+
text-decoration: none;
|
|
49
48
|
background-color: var(--#{$simple-list}__item-link--BackgroundColor);
|
|
50
49
|
border: none;
|
|
50
|
+
border-radius: var(--#{$simple-list}__item-link--BorderRadius);
|
|
51
|
+
|
|
52
|
+
&.pf-m-link {
|
|
53
|
+
--#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--m-link--Color);
|
|
54
|
+
--#{$simple-list}__item-link--hover--Color: var(--#{$simple-list}__item-link--m-link--m-current--Color);
|
|
55
|
+
--#{$simple-list}__item-link--m-current--Color: var(--#{$simple-list}__item-link--m-link--hover--Color);
|
|
56
|
+
}
|
|
51
57
|
|
|
52
|
-
&:hover
|
|
58
|
+
&:hover,
|
|
59
|
+
&:focus {
|
|
53
60
|
--#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--hover--BackgroundColor);
|
|
54
61
|
--#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--hover--Color);
|
|
55
62
|
|
|
56
63
|
text-decoration: none;
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
&:focus {
|
|
60
|
-
--#{$simple-list}__item-link--FontWeight: var(--#{$simple-list}__item-link--focus--FontWeight);
|
|
61
|
-
--#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--focus--BackgroundColor);
|
|
62
|
-
--#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--focus--Color);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
&:active {
|
|
66
|
-
--#{$simple-list}__item-link--FontWeight: var(--#{$simple-list}__item-link--active--FontWeight);
|
|
67
|
-
--#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--active--BackgroundColor);
|
|
68
|
-
--#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--active--Color);
|
|
64
|
+
mix-blend-mode: var(--#{$simple-list}__item-link--MixBlendMode);
|
|
69
65
|
}
|
|
70
66
|
|
|
71
67
|
&.pf-m-current {
|
|
72
|
-
--#{$simple-list}__item-link--FontWeight: var(--#{$simple-list}__item-link--m-current--FontWeight);
|
|
73
68
|
--#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--m-current--BackgroundColor);
|
|
74
69
|
--#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--m-current--Color);
|
|
70
|
+
|
|
71
|
+
mix-blend-mode: var(--#{$simple-list}__item-link--MixBlendMode);
|
|
75
72
|
}
|
|
76
73
|
}
|
|
77
74
|
|
|
@@ -87,11 +84,4 @@
|
|
|
87
84
|
|
|
88
85
|
.#{$simple-list}__section + .#{$simple-list}__section {
|
|
89
86
|
margin-block-start: var(--#{$simple-list}__section--section--MarginTop);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
// stylelint-disable no-invalid-position-at-import-rule
|
|
93
|
-
@import "themes/dark/simple-list";
|
|
94
|
-
|
|
95
|
-
@include pf-v5-theme-dark {
|
|
96
|
-
@include pf-v5-theme-dark-simple-list;
|
|
97
|
-
}
|
|
87
|
+
}
|
|
@@ -986,6 +986,7 @@
|
|
|
986
986
|
margin-block-end: calc(var(--#{$table}--cell--PaddingBottom) * -1);
|
|
987
987
|
margin-inline-start: calc(var(--#{$table}--cell--PaddingLeft) * -1);
|
|
988
988
|
margin-inline-end: calc(var(--#{$table}--cell--PaddingRight) * -1);
|
|
989
|
+
|
|
989
990
|
}
|
|
990
991
|
|
|
991
992
|
@at-root .#{$table}__thead .#{$check}.pf-m-standalone {
|
|
@@ -108,12 +108,10 @@
|
|
|
108
108
|
|
|
109
109
|
.pf-v5-c-tooltip__arrow {
|
|
110
110
|
position: absolute;
|
|
111
|
-
/* stylelint-disable liberty/use-logical-spec */
|
|
112
111
|
top: var(--pf-v5-c-tooltip__arrow--Top, auto);
|
|
113
112
|
right: var(--pf-v5-c-tooltip__arrow--Right, auto);
|
|
114
113
|
bottom: var(--pf-v5-c-tooltip__arrow--Bottom, auto);
|
|
115
114
|
left: var(--pf-v5-c-tooltip__arrow--Left, auto);
|
|
116
|
-
/* stylelint-enable */
|
|
117
115
|
width: var(--pf-v5-c-tooltip__arrow--Width);
|
|
118
116
|
height: var(--pf-v5-c-tooltip__arrow--Height);
|
|
119
117
|
pointer-events: none;
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
.pf-m-bottom,
|
|
55
55
|
.pf-m-bottom-left,
|
|
56
56
|
.pf-m-bottom-right
|
|
57
|
-
|
|
57
|
+
) {
|
|
58
58
|
--#{$tooltip}__arrow--Top: var(--#{$tooltip}--m-bottom--Top, 0);
|
|
59
59
|
--#{$tooltip}__arrow--Left: var(--#{$tooltip}--m-bottom--Left, 50%);
|
|
60
60
|
--#{$tooltip}__arrow--TranslateX: var(--#{$tooltip}__arrow--m-bottom--TranslateX);
|
|
@@ -139,12 +139,12 @@
|
|
|
139
139
|
|
|
140
140
|
.#{$tooltip}__arrow {
|
|
141
141
|
position: absolute;
|
|
142
|
-
|
|
142
|
+
// stylelint-disable liberty/use-logical-spec
|
|
143
143
|
top: var(--#{$tooltip}__arrow--Top, auto);
|
|
144
144
|
right: var(--#{$tooltip}__arrow--Right, auto);
|
|
145
145
|
bottom: var(--#{$tooltip}__arrow--Bottom, auto);
|
|
146
146
|
left: var(--#{$tooltip}__arrow--Left, auto);
|
|
147
|
-
|
|
147
|
+
// stylelint-enable
|
|
148
148
|
width: var(--#{$tooltip}__arrow--Width);
|
|
149
149
|
height: var(--#{$tooltip}__arrow--Height);
|
|
150
150
|
pointer-events: none;
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
// @debug $truncate; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
|
|
2
2
|
|
|
3
|
+
:root,
|
|
3
4
|
.#{$truncate} {
|
|
4
5
|
--#{$truncate}--MinWidth: 12ch;
|
|
5
6
|
--#{$truncate}__start--MinWidth: 6ch;
|
|
7
|
+
}
|
|
6
8
|
|
|
9
|
+
.#{$truncate} {
|
|
7
10
|
display: inline-grid;
|
|
8
11
|
grid-auto-flow: column;
|
|
9
12
|
align-items: baseline;
|
|
@@ -694,17 +694,17 @@ cssPrefix: pf-v5-c-accordion
|
|
|
694
694
|
|
|
695
695
|
There are two variations to build the accordion component. The first is to use `<div>` and `<h1 - h6>` tags:
|
|
696
696
|
|
|
697
|
-
*
|
|
698
|
-
*
|
|
699
|
-
*
|
|
697
|
+
* `.pf-v5-c-accordion` is placed on a `<div>`,
|
|
698
|
+
* `.pf-v5-c-accordion__toggle` is placed on a `<button>` that is inside a `<h1-h6>`, and
|
|
699
|
+
* `.pf-v5-c-accordion__expandable-content` is placed on a `<div>`.
|
|
700
700
|
|
|
701
701
|
The heading level that you use should fit within the rest of the headings outlined on your page.
|
|
702
702
|
|
|
703
703
|
Another variation is using the definition list:
|
|
704
704
|
|
|
705
|
-
*
|
|
706
|
-
*
|
|
707
|
-
*
|
|
705
|
+
* `.pf-v5-c-accordion` is placed on a `<dl>`,
|
|
706
|
+
* `.pf-v5-c-accordion__toggle` is placed on a `<button>` that is inside a `<dt>`, and
|
|
707
|
+
* `.pf-v5-c-accordion__expandable-content` is placed on a `<dd>`.
|
|
708
708
|
|
|
709
709
|
### Usage
|
|
710
710
|
|