@patternfly/patternfly 4.189.0 → 4.192.0
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/Divider/divider.css +159 -13
- package/components/Divider/divider.scss +74 -28
- package/components/Login/login.css +9 -1
- package/components/Login/login.scss +13 -5
- package/components/Page/page.css +4 -0
- package/components/Page/page.scss +5 -0
- package/components/Wizard/wizard.css +1 -1
- package/components/Wizard/wizard.scss +1 -1
- package/docs/components/Divider/examples/Divider.css +11 -5
- package/docs/components/Divider/examples/Divider.md +14 -0
- package/docs/components/LogViewer/examples/LogViewer.md +9 -9
- package/docs/components/Login/examples/Login.md +269 -73
- package/docs/components/Page/examples/Page.md +1 -0
- package/docs/components/Wizard/examples/Wizard.md +273 -0
- package/docs/demos/Dashboard/examples/Dashboard.md +2 -2
- package/docs/demos/Wizard/examples/Wizard.md +2626 -240
- package/package.json +1 -1
- package/patternfly-no-reset.css +173 -15
- package/patternfly.css +173 -15
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -47,24 +47,6 @@ wrapperTag: div
|
|
|
47
47
|
<p
|
|
48
48
|
class="pf-c-login__main-header-desc"
|
|
49
49
|
>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
50
|
-
<div class="pf-c-dropdown">
|
|
51
|
-
<button
|
|
52
|
-
class="pf-c-dropdown__toggle"
|
|
53
|
-
id="invalid-login-demo-dropdown-select-button"
|
|
54
|
-
aria-expanded="false"
|
|
55
|
-
type="button"
|
|
56
|
-
>
|
|
57
|
-
<span class="pf-c-dropdown__toggle-text">English</span>
|
|
58
|
-
<span class="pf-c-dropdown__toggle-icon">
|
|
59
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
60
|
-
</span>
|
|
61
|
-
</button>
|
|
62
|
-
<ul
|
|
63
|
-
class="pf-c-dropdown__menu"
|
|
64
|
-
aria-labelledby="invalid-login-demo-dropdown-select-button"
|
|
65
|
-
hidden
|
|
66
|
-
>[Panel contents here]</ul>
|
|
67
|
-
</div>
|
|
68
50
|
</header>
|
|
69
51
|
<div class="pf-c-login__main-body">
|
|
70
52
|
<form novalidate class="pf-c-form">
|
|
@@ -287,24 +269,6 @@ wrapperTag: div
|
|
|
287
269
|
<p
|
|
288
270
|
class="pf-c-login__main-header-desc"
|
|
289
271
|
>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
290
|
-
<div class="pf-c-dropdown">
|
|
291
|
-
<button
|
|
292
|
-
class="pf-c-dropdown__toggle"
|
|
293
|
-
id="invalid-login-demo-dropdown-select-button"
|
|
294
|
-
aria-expanded="false"
|
|
295
|
-
type="button"
|
|
296
|
-
>
|
|
297
|
-
<span class="pf-c-dropdown__toggle-text">English</span>
|
|
298
|
-
<span class="pf-c-dropdown__toggle-icon">
|
|
299
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
300
|
-
</span>
|
|
301
|
-
</button>
|
|
302
|
-
<ul
|
|
303
|
-
class="pf-c-dropdown__menu"
|
|
304
|
-
aria-labelledby="invalid-login-demo-dropdown-select-button"
|
|
305
|
-
hidden
|
|
306
|
-
>[Panel contents here]</ul>
|
|
307
|
-
</div>
|
|
308
272
|
</header>
|
|
309
273
|
<div class="pf-c-login__main-body">
|
|
310
274
|
<form novalidate class="pf-c-form">
|
|
@@ -533,24 +497,6 @@ wrapperTag: div
|
|
|
533
497
|
<p
|
|
534
498
|
class="pf-c-login__main-header-desc"
|
|
535
499
|
>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
536
|
-
<div class="pf-c-dropdown">
|
|
537
|
-
<button
|
|
538
|
-
class="pf-c-dropdown__toggle"
|
|
539
|
-
id="invalid-login-demo-dropdown-select-button"
|
|
540
|
-
aria-expanded="false"
|
|
541
|
-
type="button"
|
|
542
|
-
>
|
|
543
|
-
<span class="pf-c-dropdown__toggle-text">English</span>
|
|
544
|
-
<span class="pf-c-dropdown__toggle-icon">
|
|
545
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
546
|
-
</span>
|
|
547
|
-
</button>
|
|
548
|
-
<ul
|
|
549
|
-
class="pf-c-dropdown__menu"
|
|
550
|
-
aria-labelledby="invalid-login-demo-dropdown-select-button"
|
|
551
|
-
hidden
|
|
552
|
-
>[Panel contents here]</ul>
|
|
553
|
-
</div>
|
|
554
500
|
</header>
|
|
555
501
|
<div class="pf-c-login__main-body">
|
|
556
502
|
<form novalidate class="pf-c-form">
|
|
@@ -784,24 +730,6 @@ wrapperTag: div
|
|
|
784
730
|
<p
|
|
785
731
|
class="pf-c-login__main-header-desc"
|
|
786
732
|
>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
787
|
-
<div class="pf-c-dropdown">
|
|
788
|
-
<button
|
|
789
|
-
class="pf-c-dropdown__toggle"
|
|
790
|
-
id="invalid-login-demo-dropdown-select-button"
|
|
791
|
-
aria-expanded="false"
|
|
792
|
-
type="button"
|
|
793
|
-
>
|
|
794
|
-
<span class="pf-c-dropdown__toggle-text">English</span>
|
|
795
|
-
<span class="pf-c-dropdown__toggle-icon">
|
|
796
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
797
|
-
</span>
|
|
798
|
-
</button>
|
|
799
|
-
<ul
|
|
800
|
-
class="pf-c-dropdown__menu"
|
|
801
|
-
aria-labelledby="invalid-login-demo-dropdown-select-button"
|
|
802
|
-
hidden
|
|
803
|
-
>[Panel contents here]</ul>
|
|
804
|
-
</div>
|
|
805
733
|
</header>
|
|
806
734
|
<div class="pf-c-login__main-body">
|
|
807
735
|
<form novalidate class="pf-c-form">
|
|
@@ -993,6 +921,274 @@ wrapperTag: div
|
|
|
993
921
|
|
|
994
922
|
```
|
|
995
923
|
|
|
924
|
+
### With language selector
|
|
925
|
+
|
|
926
|
+
```html isFullscreen
|
|
927
|
+
<div class="pf-c-background-image">
|
|
928
|
+
<svg
|
|
929
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
930
|
+
class="pf-c-background-image__filter"
|
|
931
|
+
width="0"
|
|
932
|
+
height="0"
|
|
933
|
+
>
|
|
934
|
+
<filter id="image_overlay">
|
|
935
|
+
<feColorMatrix
|
|
936
|
+
type="matrix"
|
|
937
|
+
values="1 0 0 0 0
|
|
938
|
+
1 0 0 0 0
|
|
939
|
+
1 0 0 0 0
|
|
940
|
+
0 0 0 1 0"
|
|
941
|
+
/>
|
|
942
|
+
<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
|
|
943
|
+
<feFuncR type="table" tableValues="0.086274509803922 0.43921568627451" />
|
|
944
|
+
<feFuncG type="table" tableValues="0.086274509803922 0.43921568627451" />
|
|
945
|
+
<feFuncB type="table" tableValues="0.086274509803922 0.43921568627451" />
|
|
946
|
+
<feFuncA type="table" tableValues="0 1" />
|
|
947
|
+
</feComponentTransfer>
|
|
948
|
+
</filter>
|
|
949
|
+
</svg>
|
|
950
|
+
</div>
|
|
951
|
+
<div class="pf-c-login">
|
|
952
|
+
<div class="pf-c-login__container">
|
|
953
|
+
<header class="pf-c-login__header">
|
|
954
|
+
<img
|
|
955
|
+
class="pf-c-brand"
|
|
956
|
+
src="/assets/images/pf_logo_color.svg"
|
|
957
|
+
alt="PatternFly Logo"
|
|
958
|
+
/>
|
|
959
|
+
</header>
|
|
960
|
+
<main class="pf-c-login__main">
|
|
961
|
+
<header class="pf-c-login__main-header">
|
|
962
|
+
<h1 class="pf-c-title pf-m-3xl">Log in to your account</h1>
|
|
963
|
+
<p
|
|
964
|
+
class="pf-c-login__main-header-desc"
|
|
965
|
+
>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
966
|
+
<div class="pf-c-login__main-header-utilities">
|
|
967
|
+
<div class="pf-c-select">
|
|
968
|
+
<span id="login-select-label" hidden>Choose one</span>
|
|
969
|
+
|
|
970
|
+
<button
|
|
971
|
+
class="pf-c-select__toggle"
|
|
972
|
+
type="button"
|
|
973
|
+
id="login-select-toggle"
|
|
974
|
+
aria-haspopup="true"
|
|
975
|
+
aria-expanded="false"
|
|
976
|
+
aria-labelledby="login-select-label login-select-toggle"
|
|
977
|
+
>
|
|
978
|
+
<div class="pf-c-select__toggle-wrapper">
|
|
979
|
+
<span class="pf-c-select__toggle-text">English</span>
|
|
980
|
+
</div>
|
|
981
|
+
<span class="pf-c-select__toggle-arrow">
|
|
982
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
983
|
+
</span>
|
|
984
|
+
</button>
|
|
985
|
+
<ul
|
|
986
|
+
class="pf-c-select__menu"
|
|
987
|
+
role="listbox"
|
|
988
|
+
aria-labelledby="login-select-label"
|
|
989
|
+
hidden
|
|
990
|
+
>
|
|
991
|
+
<li role="presentation">
|
|
992
|
+
<button
|
|
993
|
+
class="pf-c-select__menu-item pf-m-selected"
|
|
994
|
+
role="option"
|
|
995
|
+
aria-selected="true"
|
|
996
|
+
>
|
|
997
|
+
English
|
|
998
|
+
<span class="pf-c-select__menu-item-icon">
|
|
999
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1000
|
+
</span>
|
|
1001
|
+
</button>
|
|
1002
|
+
</li>
|
|
1003
|
+
<li role="presentation">
|
|
1004
|
+
<button class="pf-c-select__menu-item" role="option">Español</button>
|
|
1005
|
+
</li>
|
|
1006
|
+
<li role="presentation">
|
|
1007
|
+
<button class="pf-c-select__menu-item" role="option">Français</button>
|
|
1008
|
+
</li>
|
|
1009
|
+
</ul>
|
|
1010
|
+
</div>
|
|
1011
|
+
</div>
|
|
1012
|
+
</header>
|
|
1013
|
+
<div class="pf-c-login__main-body">
|
|
1014
|
+
<form novalidate class="pf-c-form">
|
|
1015
|
+
<p class="pf-c-form__helper-text pf-m-error pf-m-hidden">
|
|
1016
|
+
<span class="pf-c-form__helper-text-icon">
|
|
1017
|
+
<i class="fas fa-exclamation-circle" aria-hidden="true"></i>
|
|
1018
|
+
</span>
|
|
1019
|
+
Invalid login credentials.
|
|
1020
|
+
</p>
|
|
1021
|
+
<div class="pf-c-form__group">
|
|
1022
|
+
<label class="pf-c-form__label" for="login-demo-form-username">
|
|
1023
|
+
<span class="pf-c-form__label-text">Username</span>
|
|
1024
|
+
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
1025
|
+
</label>
|
|
1026
|
+
|
|
1027
|
+
<input
|
|
1028
|
+
class="pf-c-form-control"
|
|
1029
|
+
required
|
|
1030
|
+
input="true"
|
|
1031
|
+
type="text"
|
|
1032
|
+
id="login-demo-form-username"
|
|
1033
|
+
name="login-demo-form-username"
|
|
1034
|
+
/>
|
|
1035
|
+
</div>
|
|
1036
|
+
<div class="pf-c-form__group">
|
|
1037
|
+
<label class="pf-c-form__label" for="login-demo-form-password">
|
|
1038
|
+
<span class="pf-c-form__label-text">Password</span>
|
|
1039
|
+
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
1040
|
+
</label>
|
|
1041
|
+
|
|
1042
|
+
<input
|
|
1043
|
+
class="pf-c-form-control"
|
|
1044
|
+
required
|
|
1045
|
+
input="true"
|
|
1046
|
+
type="password"
|
|
1047
|
+
id="login-demo-form-password"
|
|
1048
|
+
name="login-demo-form-password"
|
|
1049
|
+
/>
|
|
1050
|
+
</div>
|
|
1051
|
+
<div class="pf-c-form__group">
|
|
1052
|
+
<div class="pf-c-check">
|
|
1053
|
+
<input
|
|
1054
|
+
class="pf-c-check__input"
|
|
1055
|
+
type="checkbox"
|
|
1056
|
+
id="login-demo-checkbox"
|
|
1057
|
+
name="login-demo-checkbox"
|
|
1058
|
+
/>
|
|
1059
|
+
|
|
1060
|
+
<label
|
|
1061
|
+
class="pf-c-check__label"
|
|
1062
|
+
for="login-demo-checkbox"
|
|
1063
|
+
>Keep me logged in for 30 days.</label>
|
|
1064
|
+
</div>
|
|
1065
|
+
</div>
|
|
1066
|
+
<div class="pf-c-form__group pf-m-action">
|
|
1067
|
+
<button
|
|
1068
|
+
class="pf-c-button pf-m-primary pf-m-block"
|
|
1069
|
+
type="submit"
|
|
1070
|
+
>Log in</button>
|
|
1071
|
+
</div>
|
|
1072
|
+
</form>
|
|
1073
|
+
</div>
|
|
1074
|
+
<footer class="pf-c-login__main-footer">
|
|
1075
|
+
<ul class="pf-c-login__main-footer-links">
|
|
1076
|
+
<li class="pf-c-login__main-footer-links-item">
|
|
1077
|
+
<a
|
|
1078
|
+
href="#"
|
|
1079
|
+
class="pf-c-login__main-footer-links-item-link"
|
|
1080
|
+
aria-label="Log in with Google"
|
|
1081
|
+
>
|
|
1082
|
+
<svg
|
|
1083
|
+
aria-hidden="true"
|
|
1084
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1085
|
+
viewBox="0 0 488 512"
|
|
1086
|
+
>
|
|
1087
|
+
<path
|
|
1088
|
+
d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
|
|
1089
|
+
/>
|
|
1090
|
+
</svg>
|
|
1091
|
+
</a>
|
|
1092
|
+
</li>
|
|
1093
|
+
<li class="pf-c-login__main-footer-links-item">
|
|
1094
|
+
<a
|
|
1095
|
+
href="#"
|
|
1096
|
+
class="pf-c-login__main-footer-links-item-link"
|
|
1097
|
+
aria-label="Log in with Github"
|
|
1098
|
+
>
|
|
1099
|
+
<svg
|
|
1100
|
+
aria-hidden="true"
|
|
1101
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1102
|
+
viewBox="0 0 496 512"
|
|
1103
|
+
>
|
|
1104
|
+
<path
|
|
1105
|
+
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
|
|
1106
|
+
/>
|
|
1107
|
+
</svg>
|
|
1108
|
+
</a>
|
|
1109
|
+
</li>
|
|
1110
|
+
<li class="pf-c-login__main-footer-links-item">
|
|
1111
|
+
<a
|
|
1112
|
+
href="#"
|
|
1113
|
+
class="pf-c-login__main-footer-links-item-link"
|
|
1114
|
+
aria-label="Log in with Dropbox"
|
|
1115
|
+
>
|
|
1116
|
+
<svg
|
|
1117
|
+
aria-hidden="true"
|
|
1118
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1119
|
+
viewBox="0 0 528 512"
|
|
1120
|
+
>
|
|
1121
|
+
<path
|
|
1122
|
+
d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z"
|
|
1123
|
+
/>
|
|
1124
|
+
</svg>
|
|
1125
|
+
</a>
|
|
1126
|
+
</li>
|
|
1127
|
+
<li class="pf-c-login__main-footer-links-item">
|
|
1128
|
+
<a
|
|
1129
|
+
href="#"
|
|
1130
|
+
class="pf-c-login__main-footer-links-item-link"
|
|
1131
|
+
aria-label="Log in with Facebook"
|
|
1132
|
+
>
|
|
1133
|
+
<svg
|
|
1134
|
+
aria-hidden="true"
|
|
1135
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1136
|
+
viewBox="0 0 448 512"
|
|
1137
|
+
>
|
|
1138
|
+
<path
|
|
1139
|
+
d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"
|
|
1140
|
+
/>
|
|
1141
|
+
</svg>
|
|
1142
|
+
</a>
|
|
1143
|
+
</li>
|
|
1144
|
+
<li class="pf-c-login__main-footer-links-item">
|
|
1145
|
+
<a
|
|
1146
|
+
href="#"
|
|
1147
|
+
class="pf-c-login__main-footer-links-item-link"
|
|
1148
|
+
aria-label="Log in with Gitlab"
|
|
1149
|
+
>
|
|
1150
|
+
<svg
|
|
1151
|
+
aria-hidden="true"
|
|
1152
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1153
|
+
viewBox="0 0 512 512"
|
|
1154
|
+
>
|
|
1155
|
+
<path
|
|
1156
|
+
d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z"
|
|
1157
|
+
/>
|
|
1158
|
+
</svg>
|
|
1159
|
+
</a>
|
|
1160
|
+
</li>
|
|
1161
|
+
</ul>
|
|
1162
|
+
<div class="pf-c-login__main-footer-band">
|
|
1163
|
+
<p class="pf-c-login__main-footer-band-item">
|
|
1164
|
+
Need an account?
|
|
1165
|
+
<a href="https://www.patternfly.org/">Sign up.</a>
|
|
1166
|
+
</p>
|
|
1167
|
+
<p class="pf-c-login__main-footer-band-item">
|
|
1168
|
+
<a href="#">Forgot username or password?</a>
|
|
1169
|
+
</p>
|
|
1170
|
+
</div>
|
|
1171
|
+
</footer>
|
|
1172
|
+
</main>
|
|
1173
|
+
<footer class="pf-c-login__footer">
|
|
1174
|
+
<p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
|
|
1175
|
+
<ul class="pf-c-list pf-m-inline">
|
|
1176
|
+
<li>
|
|
1177
|
+
<a href="#">Terms of use</a>
|
|
1178
|
+
</li>
|
|
1179
|
+
<li>
|
|
1180
|
+
<a href="#">Help</a>
|
|
1181
|
+
</li>
|
|
1182
|
+
<li>
|
|
1183
|
+
<a href="#">Privacy policy</a>
|
|
1184
|
+
</li>
|
|
1185
|
+
</ul>
|
|
1186
|
+
</footer>
|
|
1187
|
+
</div>
|
|
1188
|
+
</div>
|
|
1189
|
+
|
|
1190
|
+
```
|
|
1191
|
+
|
|
996
1192
|
## Documentation
|
|
997
1193
|
|
|
998
1194
|
### Usage
|
|
@@ -1007,7 +1203,7 @@ wrapperTag: div
|
|
|
1007
1203
|
| `.pf-c-login__main-header` | `<header>` | Creates the header of the main area. **Required** |
|
|
1008
1204
|
| `.pf-c-login__main-header .pf-c-title` | `<h1>,<h2>,<h3>,<h4>,<h5>,<h6>` | Creates a title in the main header area. **Required** |
|
|
1009
1205
|
| `.pf-c-login__main-header-desc` | `<p>` | Creates the description in the main area header. |
|
|
1010
|
-
| `.pf-c-login__main-header
|
|
1206
|
+
| `.pf-c-login__main-header-utilities` | `<div>` | Creates a utilities section in the main header area. **Note:** For use with a language selector menu. |
|
|
1011
1207
|
| `.pf-c-login__main-body` | `<div>` | Creates the body of the main area. **Required** |
|
|
1012
1208
|
| `.pf-c-login__main-body .pf-c-form` | `<form>` | Creates the login form in the main body area. **Required** |
|
|
1013
1209
|
| `.pf-c-login__main-body .pf-c-form .pf-c-form-helper-text.pf-m-error` | `<form>` | Creates the error messages shown when the form has errors. When not active, apply `.pf-m-hidden.` **Required** |
|
|
@@ -215,6 +215,7 @@ This component provides the basic chrome for a page, including sidebar, header,
|
|
|
215
215
|
| `.pf-m-light` | `.pf-c-page__main-section` | Modifies a main page section to have a light theme. |
|
|
216
216
|
| `.pf-m-dark-200` | `.pf-c-page__main-section` | Modifies a main page section to have a dark theme and a dark transparent background. |
|
|
217
217
|
| `.pf-m-dark-100` | `.pf-c-page__main-section` | Modifies a main page section to have a dark theme and a darker transparent background. |
|
|
218
|
+
| `.pf-m-light-200` | `.pf-c-page__main-wizard` | Modifies a wizard page section to have a light 200 theme. |
|
|
218
219
|
| `.pf-m-no-padding`, `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-c-page__main-section` | Removes padding from the main page section at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
219
220
|
| `.pf-m-padding{-on-[breakpoint]}` | `.pf-c-page__main-section` | Modifies the main page section to add padding back in at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). Should be used with pf-m-no-padding. |
|
|
220
221
|
| `.pf-m-fill` | `.pf-c-page__main-section` | Modifies a main page section to grow to fill the available vertical space. |
|
|
@@ -461,6 +461,279 @@ wrapperTag: div
|
|
|
461
461
|
|
|
462
462
|
```
|
|
463
463
|
|
|
464
|
+
### With drawer
|
|
465
|
+
|
|
466
|
+
```html isFullscreen
|
|
467
|
+
<div class="pf-c-wizard">
|
|
468
|
+
<div class="pf-c-wizard__header">
|
|
469
|
+
<button
|
|
470
|
+
class="pf-c-button pf-m-plain pf-c-wizard__close"
|
|
471
|
+
type="button"
|
|
472
|
+
aria-label="Close"
|
|
473
|
+
>
|
|
474
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
475
|
+
</button>
|
|
476
|
+
<h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
|
|
477
|
+
|
|
478
|
+
<div class="pf-c-wizard__description">Here is where the description goes</div>
|
|
479
|
+
</div>
|
|
480
|
+
<button
|
|
481
|
+
aria-label="Wizard Header Toggle"
|
|
482
|
+
class="pf-c-wizard__toggle"
|
|
483
|
+
aria-expanded="false"
|
|
484
|
+
>
|
|
485
|
+
<span class="pf-c-wizard__toggle-list">
|
|
486
|
+
<span class="pf-c-wizard__toggle-list-item">
|
|
487
|
+
<span class="pf-c-wizard__toggle-num">2</span>
|
|
488
|
+
Configuration
|
|
489
|
+
<i
|
|
490
|
+
class="fas fa-angle-right pf-c-wizard__toggle-separator"
|
|
491
|
+
aria-hidden="true"
|
|
492
|
+
></i>
|
|
493
|
+
</span>
|
|
494
|
+
<span class="pf-c-wizard__toggle-list-item">Substep B</span>
|
|
495
|
+
</span>
|
|
496
|
+
<span class="pf-c-wizard__toggle-icon">
|
|
497
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
498
|
+
</span>
|
|
499
|
+
</button>
|
|
500
|
+
<div class="pf-c-drawer pf-m-expanded pf-m-inline">
|
|
501
|
+
<div class="pf-c-drawer__main">
|
|
502
|
+
<div class="pf-c-drawer__content">
|
|
503
|
+
<div class="pf-c-wizard__outer-wrap">
|
|
504
|
+
<div class="pf-c-wizard__inner-wrap">
|
|
505
|
+
<main class="pf-c-wizard__main" tabindex="0">
|
|
506
|
+
<div class="pf-c-wizard__main-body">
|
|
507
|
+
<nav class="pf-c-wizard__nav" aria-label="Steps">
|
|
508
|
+
<ol class="pf-c-wizard__nav-list">
|
|
509
|
+
<li class="pf-c-wizard__nav-item">
|
|
510
|
+
<button class="pf-c-wizard__nav-link">Information</button>
|
|
511
|
+
</li>
|
|
512
|
+
<li class="pf-c-wizard__nav-item">
|
|
513
|
+
<button
|
|
514
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
515
|
+
>Configuration</button>
|
|
516
|
+
<ol class="pf-c-wizard__nav-list">
|
|
517
|
+
<li class="pf-c-wizard__nav-item">
|
|
518
|
+
<button class="pf-c-wizard__nav-link">Substep A</button>
|
|
519
|
+
</li>
|
|
520
|
+
<li class="pf-c-wizard__nav-item">
|
|
521
|
+
<button
|
|
522
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
523
|
+
aria-current="page"
|
|
524
|
+
>Substep B</button>
|
|
525
|
+
</li>
|
|
526
|
+
<li class="pf-c-wizard__nav-item">
|
|
527
|
+
<button class="pf-c-wizard__nav-link">Substep C</button>
|
|
528
|
+
</li>
|
|
529
|
+
</ol>
|
|
530
|
+
</li>
|
|
531
|
+
<li class="pf-c-wizard__nav-item">
|
|
532
|
+
<button class="pf-c-wizard__nav-link">Additional</button>
|
|
533
|
+
</li>
|
|
534
|
+
<li class="pf-c-wizard__nav-item">
|
|
535
|
+
<button class="pf-c-wizard__nav-link" disabled>Review</button>
|
|
536
|
+
</li>
|
|
537
|
+
</ol>
|
|
538
|
+
</nav>
|
|
539
|
+
<form novalidate class="pf-c-form">
|
|
540
|
+
<div class="pf-c-form__group">
|
|
541
|
+
<div class="pf-c-form__group-label">
|
|
542
|
+
<label
|
|
543
|
+
class="pf-c-form__label"
|
|
544
|
+
for="wizard-with-drawer-example-form-field1"
|
|
545
|
+
>
|
|
546
|
+
<span class="pf-c-form__label-text">Field 1</span>
|
|
547
|
+
<span
|
|
548
|
+
class="pf-c-form__label-required"
|
|
549
|
+
aria-hidden="true"
|
|
550
|
+
>*</span>
|
|
551
|
+
</label>
|
|
552
|
+
</div>
|
|
553
|
+
<div class="pf-c-form__group-control">
|
|
554
|
+
<input
|
|
555
|
+
class="pf-c-form-control"
|
|
556
|
+
required
|
|
557
|
+
type="text"
|
|
558
|
+
id="wizard-with-drawer-example-form-field1"
|
|
559
|
+
name="wizard-with-drawer-example-form-field1"
|
|
560
|
+
/>
|
|
561
|
+
</div>
|
|
562
|
+
</div>
|
|
563
|
+
<div class="pf-c-form__group">
|
|
564
|
+
<div class="pf-c-form__group-label">
|
|
565
|
+
<label
|
|
566
|
+
class="pf-c-form__label"
|
|
567
|
+
for="wizard-with-drawer-example-form-field2"
|
|
568
|
+
>
|
|
569
|
+
<span class="pf-c-form__label-text">Field 2</span>
|
|
570
|
+
<span
|
|
571
|
+
class="pf-c-form__label-required"
|
|
572
|
+
aria-hidden="true"
|
|
573
|
+
>*</span>
|
|
574
|
+
</label>
|
|
575
|
+
</div>
|
|
576
|
+
<div class="pf-c-form__group-control">
|
|
577
|
+
<input
|
|
578
|
+
class="pf-c-form-control"
|
|
579
|
+
required
|
|
580
|
+
type="text"
|
|
581
|
+
id="wizard-with-drawer-example-form-field2"
|
|
582
|
+
name="wizard-with-drawer-example-form-field2"
|
|
583
|
+
/>
|
|
584
|
+
</div>
|
|
585
|
+
</div>
|
|
586
|
+
<div class="pf-c-form__group">
|
|
587
|
+
<div class="pf-c-form__group-label">
|
|
588
|
+
<label
|
|
589
|
+
class="pf-c-form__label"
|
|
590
|
+
for="wizard-with-drawer-example-form-field3"
|
|
591
|
+
>
|
|
592
|
+
<span class="pf-c-form__label-text">Field 3</span>
|
|
593
|
+
<span
|
|
594
|
+
class="pf-c-form__label-required"
|
|
595
|
+
aria-hidden="true"
|
|
596
|
+
>*</span>
|
|
597
|
+
</label>
|
|
598
|
+
</div>
|
|
599
|
+
<div class="pf-c-form__group-control">
|
|
600
|
+
<input
|
|
601
|
+
class="pf-c-form-control"
|
|
602
|
+
required
|
|
603
|
+
type="text"
|
|
604
|
+
id="wizard-with-drawer-example-form-field3"
|
|
605
|
+
name="wizard-with-drawer-example-form-field3"
|
|
606
|
+
/>
|
|
607
|
+
</div>
|
|
608
|
+
</div>
|
|
609
|
+
<div class="pf-c-form__group">
|
|
610
|
+
<div class="pf-c-form__group-label">
|
|
611
|
+
<label
|
|
612
|
+
class="pf-c-form__label"
|
|
613
|
+
for="wizard-with-drawer-example-form-field4"
|
|
614
|
+
>
|
|
615
|
+
<span class="pf-c-form__label-text">Field 4</span>
|
|
616
|
+
<span
|
|
617
|
+
class="pf-c-form__label-required"
|
|
618
|
+
aria-hidden="true"
|
|
619
|
+
>*</span>
|
|
620
|
+
</label>
|
|
621
|
+
</div>
|
|
622
|
+
<div class="pf-c-form__group-control">
|
|
623
|
+
<input
|
|
624
|
+
class="pf-c-form-control"
|
|
625
|
+
required
|
|
626
|
+
type="text"
|
|
627
|
+
id="wizard-with-drawer-example-form-field4"
|
|
628
|
+
name="wizard-with-drawer-example-form-field4"
|
|
629
|
+
/>
|
|
630
|
+
</div>
|
|
631
|
+
</div>
|
|
632
|
+
<div class="pf-c-form__group">
|
|
633
|
+
<div class="pf-c-form__group-label">
|
|
634
|
+
<label
|
|
635
|
+
class="pf-c-form__label"
|
|
636
|
+
for="wizard-with-drawer-example-form-field5"
|
|
637
|
+
>
|
|
638
|
+
<span class="pf-c-form__label-text">Field 5</span>
|
|
639
|
+
<span
|
|
640
|
+
class="pf-c-form__label-required"
|
|
641
|
+
aria-hidden="true"
|
|
642
|
+
>*</span>
|
|
643
|
+
</label>
|
|
644
|
+
</div>
|
|
645
|
+
<div class="pf-c-form__group-control">
|
|
646
|
+
<input
|
|
647
|
+
class="pf-c-form-control"
|
|
648
|
+
required
|
|
649
|
+
type="text"
|
|
650
|
+
id="wizard-with-drawer-example-form-field5"
|
|
651
|
+
name="wizard-with-drawer-example-form-field5"
|
|
652
|
+
/>
|
|
653
|
+
</div>
|
|
654
|
+
</div>
|
|
655
|
+
<div class="pf-c-form__group">
|
|
656
|
+
<div class="pf-c-form__group-label">
|
|
657
|
+
<label
|
|
658
|
+
class="pf-c-form__label"
|
|
659
|
+
for="wizard-with-drawer-example-form-field6"
|
|
660
|
+
>
|
|
661
|
+
<span class="pf-c-form__label-text">Field 6</span>
|
|
662
|
+
<span
|
|
663
|
+
class="pf-c-form__label-required"
|
|
664
|
+
aria-hidden="true"
|
|
665
|
+
>*</span>
|
|
666
|
+
</label>
|
|
667
|
+
</div>
|
|
668
|
+
<div class="pf-c-form__group-control">
|
|
669
|
+
<input
|
|
670
|
+
class="pf-c-form-control"
|
|
671
|
+
required
|
|
672
|
+
type="text"
|
|
673
|
+
id="wizard-with-drawer-example-form-field6"
|
|
674
|
+
name="wizard-with-drawer-example-form-field6"
|
|
675
|
+
/>
|
|
676
|
+
</div>
|
|
677
|
+
</div>
|
|
678
|
+
<div class="pf-c-form__group">
|
|
679
|
+
<div class="pf-c-form__group-label">
|
|
680
|
+
<label
|
|
681
|
+
class="pf-c-form__label"
|
|
682
|
+
for="wizard-with-drawer-example-form-field7"
|
|
683
|
+
>
|
|
684
|
+
<span class="pf-c-form__label-text">Field 7</span>
|
|
685
|
+
<span
|
|
686
|
+
class="pf-c-form__label-required"
|
|
687
|
+
aria-hidden="true"
|
|
688
|
+
>*</span>
|
|
689
|
+
</label>
|
|
690
|
+
</div>
|
|
691
|
+
<div class="pf-c-form__group-control">
|
|
692
|
+
<input
|
|
693
|
+
class="pf-c-form-control"
|
|
694
|
+
required
|
|
695
|
+
type="text"
|
|
696
|
+
id="wizard-with-drawer-example-form-field7"
|
|
697
|
+
name="wizard-with-drawer-example-form-field7"
|
|
698
|
+
/>
|
|
699
|
+
</div>
|
|
700
|
+
</div>
|
|
701
|
+
</form>
|
|
702
|
+
</div>
|
|
703
|
+
</main>
|
|
704
|
+
</div>
|
|
705
|
+
<footer class="pf-c-wizard__footer">
|
|
706
|
+
<button class="pf-c-button pf-m-primary" type="submit">Next</button>
|
|
707
|
+
<button class="pf-c-button pf-m-secondary" type="button">Back</button>
|
|
708
|
+
<div class="pf-c-wizard__footer-cancel">
|
|
709
|
+
<button class="pf-c-button pf-m-link" type="button">Cancel</button>
|
|
710
|
+
</div>
|
|
711
|
+
</footer>
|
|
712
|
+
</div>
|
|
713
|
+
</div>
|
|
714
|
+
<div class="pf-c-drawer__panel pf-m-light-200">
|
|
715
|
+
<div class="pf-c-drawer__body">
|
|
716
|
+
<div class="pf-c-drawer__head">
|
|
717
|
+
<div class="pf-c-drawer__actions">
|
|
718
|
+
<div class="pf-c-drawer__close">
|
|
719
|
+
<button
|
|
720
|
+
class="pf-c-button pf-m-plain"
|
|
721
|
+
type="button"
|
|
722
|
+
aria-label="Close drawer panel"
|
|
723
|
+
>
|
|
724
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
725
|
+
</button>
|
|
726
|
+
</div>
|
|
727
|
+
</div>drawer-panel
|
|
728
|
+
</div>
|
|
729
|
+
</div>
|
|
730
|
+
</div>
|
|
731
|
+
</div>
|
|
732
|
+
</div>
|
|
733
|
+
</div>
|
|
734
|
+
|
|
735
|
+
```
|
|
736
|
+
|
|
464
737
|
### Expandable collapsed
|
|
465
738
|
|
|
466
739
|
```html isFullscreen
|