@patternfly/react-core 4.208.2 → 4.208.5

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.
Files changed (27) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/README.md +1 -2
  3. package/dist/esm/components/ClipboardCopy/ClipboardCopy.d.ts +2 -1
  4. package/dist/esm/components/ClipboardCopy/ClipboardCopy.d.ts.map +1 -1
  5. package/dist/esm/components/ClipboardCopy/ClipboardCopy.js.map +1 -1
  6. package/dist/esm/components/ClipboardCopy/ClipboardCopyButton.d.ts +2 -1
  7. package/dist/esm/components/ClipboardCopy/ClipboardCopyButton.d.ts.map +1 -1
  8. package/dist/esm/components/ClipboardCopy/ClipboardCopyButton.js.map +1 -1
  9. package/dist/esm/components/Tabs/Tabs.js +1 -1
  10. package/dist/esm/components/Tabs/Tabs.js.map +1 -1
  11. package/dist/js/components/ClipboardCopy/ClipboardCopy.d.ts +2 -1
  12. package/dist/js/components/ClipboardCopy/ClipboardCopy.d.ts.map +1 -1
  13. package/dist/js/components/ClipboardCopy/ClipboardCopy.js.map +1 -1
  14. package/dist/js/components/ClipboardCopy/ClipboardCopyButton.d.ts +2 -1
  15. package/dist/js/components/ClipboardCopy/ClipboardCopyButton.d.ts.map +1 -1
  16. package/dist/js/components/ClipboardCopy/ClipboardCopyButton.js.map +1 -1
  17. package/dist/js/components/Tabs/Tabs.js +1 -1
  18. package/dist/js/components/Tabs/Tabs.js.map +1 -1
  19. package/dist/umd/react-core.css +69 -69
  20. package/dist/umd/react-core.js +1 -1
  21. package/dist/umd/react-core.min.css +1001 -1001
  22. package/dist/umd/react-core.min.js +1 -1
  23. package/package.json +5 -5
  24. package/src/components/ClipboardCopy/ClipboardCopy.tsx +2 -0
  25. package/src/components/ClipboardCopy/ClipboardCopyButton.tsx +2 -0
  26. package/src/components/Tabs/Tabs.tsx +2 -2
  27. package/src/components/Wizard/examples/Wizard.md +1 -1
package/dist/umd/react-core.min.css CHANGED
@@ -9017,1184 +9017,1184 @@ label.pf-c-input-group__text {
9017
9017
  margin-left: 0;
9018
9018
  }
9019
9019
 
9020
- .pf-c-jump-links {
9021
- --pf-c-jump-links__list--Display: flex;
9022
- --pf-c-jump-links__list--Visibility: visible;
9023
- --pf-c-jump-links__list--PaddingTop: 0;
9024
- --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9025
- --pf-c-jump-links__list--PaddingBottom: 0;
9026
- --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
9027
- --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
9028
- --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
9029
- --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
9030
- --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
9031
- --pf-c-jump-links__list--FlexDirection: row;
9032
- --pf-c-jump-links--m-vertical__list--FlexDirection: column;
9033
- --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
9034
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9035
- --pf-c-jump-links__list--before--BorderRightWidth: 0;
9036
- --pf-c-jump-links__list--before--BorderBottomWidth: 0;
9037
- --pf-c-jump-links__list--before--BorderLeftWidth: 0;
9038
- --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
9039
- --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
9040
- --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
9041
- --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
9042
- --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
9043
- --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
9044
- --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
9045
- --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
9046
- --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
9047
- --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
9048
- --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
9049
- --pf-c-jump-links__link--before--BorderTopWidth: 0;
9050
- --pf-c-jump-links__link--before--BorderRightWidth: 0;
9051
- --pf-c-jump-links__link--before--BorderBottomWidth: 0;
9052
- --pf-c-jump-links__link--before--BorderLeftWidth: 0;
9053
- --pf-c-jump-links__link--before--BorderColor: transparent;
9054
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
9055
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
9056
- --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
9057
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
9058
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
9059
- --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
9060
- --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
9061
- --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
9062
- --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
9063
- --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
9064
- --pf-c-jump-links__label--Display: block;
9065
- --pf-c-jump-links__label--Visibility: visible;
9066
- --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
9067
- --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
9068
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
9069
- --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
9070
- --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
9071
- --pf-c-jump-links__toggle--Display: none;
9072
- --pf-c-jump-links__toggle--Visibility: hidden;
9073
- --pf-c-jump-links__toggle-icon--Color: currentColor;
9074
- --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
9075
- --pf-c-jump-links__toggle-icon--Rotate: 0;
9076
- --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
9077
- --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9078
- --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
9079
- --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
9080
- display: flex;
9081
- }
9082
-
9083
- .pf-c-jump-links.pf-m-center {
9084
- justify-content: center;
9085
- }
9086
-
9087
- .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9088
- align-items: center;
9089
- }
9090
-
9091
- .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
9092
- --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
9093
- --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
9094
- --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
9095
- --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
9096
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
9097
- --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
9098
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
9099
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
9100
- --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
9101
- flex-direction: column;
9102
- }
9103
-
9104
- .pf-c-jump-links.pf-m-expandable {
9105
- --pf-c-jump-links__list--Display: none;
9106
- --pf-c-jump-links__list--Visibility: hidden;
9107
- --pf-c-jump-links__toggle--Display: block;
9108
- --pf-c-jump-links__toggle--Visibility: visible;
9109
- --pf-c-jump-links__label--Display: none;
9110
- --pf-c-jump-links__label--Visibility: hidden;
9111
- }
9112
-
9113
- .pf-c-jump-links.pf-m-non-expandable {
9114
- --pf-c-jump-links__list--Display: flex;
9115
- --pf-c-jump-links__list--Visibility: visible;
9116
- --pf-c-jump-links__toggle--Display: none;
9117
- --pf-c-jump-links__toggle--Visibility: hidden;
9118
- --pf-c-jump-links__label--Display: block;
9119
- --pf-c-jump-links__label--Visibility: visible;
9120
- }
9121
-
9122
- @media (min-width: 576px) {
9123
- .pf-c-jump-links.pf-m-expandable-on-sm {
9124
- --pf-c-jump-links__list--Display: none;
9125
- --pf-c-jump-links__list--Visibility: hidden;
9126
- --pf-c-jump-links__toggle--Display: block;
9127
- --pf-c-jump-links__toggle--Visibility: visible;
9128
- --pf-c-jump-links__label--Display: none;
9129
- --pf-c-jump-links__label--Visibility: hidden;
9130
- }
9131
-
9132
- .pf-c-jump-links.pf-m-non-expandable-on-sm {
9133
- --pf-c-jump-links__list--Display: flex;
9134
- --pf-c-jump-links__list--Visibility: visible;
9135
- --pf-c-jump-links__toggle--Display: none;
9136
- --pf-c-jump-links__toggle--Visibility: hidden;
9137
- --pf-c-jump-links__label--Display: block;
9138
- --pf-c-jump-links__label--Visibility: visible;
9139
- }
9140
- }
9141
- @media (min-width: 768px) {
9142
- .pf-c-jump-links.pf-m-expandable-on-md {
9143
- --pf-c-jump-links__list--Display: none;
9144
- --pf-c-jump-links__list--Visibility: hidden;
9145
- --pf-c-jump-links__toggle--Display: block;
9146
- --pf-c-jump-links__toggle--Visibility: visible;
9147
- --pf-c-jump-links__label--Display: none;
9148
- --pf-c-jump-links__label--Visibility: hidden;
9149
- }
9150
-
9151
- .pf-c-jump-links.pf-m-non-expandable-on-md {
9152
- --pf-c-jump-links__list--Display: flex;
9153
- --pf-c-jump-links__list--Visibility: visible;
9154
- --pf-c-jump-links__toggle--Display: none;
9155
- --pf-c-jump-links__toggle--Visibility: hidden;
9156
- --pf-c-jump-links__label--Display: block;
9157
- --pf-c-jump-links__label--Visibility: visible;
9158
- }
9159
- }
9160
- @media (min-width: 992px) {
9161
- .pf-c-jump-links.pf-m-expandable-on-lg {
9162
- --pf-c-jump-links__list--Display: none;
9163
- --pf-c-jump-links__list--Visibility: hidden;
9164
- --pf-c-jump-links__toggle--Display: block;
9165
- --pf-c-jump-links__toggle--Visibility: visible;
9166
- --pf-c-jump-links__label--Display: none;
9167
- --pf-c-jump-links__label--Visibility: hidden;
9168
- }
9169
-
9170
- .pf-c-jump-links.pf-m-non-expandable-on-lg {
9171
- --pf-c-jump-links__list--Display: flex;
9172
- --pf-c-jump-links__list--Visibility: visible;
9173
- --pf-c-jump-links__toggle--Display: none;
9174
- --pf-c-jump-links__toggle--Visibility: hidden;
9175
- --pf-c-jump-links__label--Display: block;
9176
- --pf-c-jump-links__label--Visibility: visible;
9177
- }
9178
- }
9179
- @media (min-width: 1200px) {
9180
- .pf-c-jump-links.pf-m-expandable-on-xl {
9181
- --pf-c-jump-links__list--Display: none;
9182
- --pf-c-jump-links__list--Visibility: hidden;
9183
- --pf-c-jump-links__toggle--Display: block;
9184
- --pf-c-jump-links__toggle--Visibility: visible;
9185
- --pf-c-jump-links__label--Display: none;
9186
- --pf-c-jump-links__label--Visibility: hidden;
9187
- }
9188
-
9189
- .pf-c-jump-links.pf-m-non-expandable-on-xl {
9190
- --pf-c-jump-links__list--Display: flex;
9191
- --pf-c-jump-links__list--Visibility: visible;
9192
- --pf-c-jump-links__toggle--Display: none;
9193
- --pf-c-jump-links__toggle--Visibility: hidden;
9194
- --pf-c-jump-links__label--Display: block;
9195
- --pf-c-jump-links__label--Visibility: visible;
9196
- }
9197
- }
9198
- @media (min-width: 1450px) {
9199
- .pf-c-jump-links.pf-m-expandable-on-2xl {
9200
- --pf-c-jump-links__list--Display: none;
9201
- --pf-c-jump-links__list--Visibility: hidden;
9202
- --pf-c-jump-links__toggle--Display: block;
9203
- --pf-c-jump-links__toggle--Visibility: visible;
9204
- --pf-c-jump-links__label--Display: none;
9205
- --pf-c-jump-links__label--Visibility: hidden;
9206
- }
9207
-
9208
- .pf-c-jump-links.pf-m-non-expandable-on-2xl {
9209
- --pf-c-jump-links__list--Display: flex;
9210
- --pf-c-jump-links__list--Visibility: visible;
9211
- --pf-c-jump-links__toggle--Display: none;
9212
- --pf-c-jump-links__toggle--Visibility: hidden;
9213
- --pf-c-jump-links__label--Display: block;
9214
- --pf-c-jump-links__label--Visibility: visible;
9215
- }
9216
- }
9217
- .pf-c-jump-links.pf-m-expanded {
9218
- --pf-c-jump-links__list--Display: flex;
9219
- --pf-c-jump-links__list--Visibility: visible;
9220
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
9221
- --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
9222
- --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
9223
- }
9224
-
9225
- .pf-c-jump-links__list {
9020
+ .pf-c-label {
9021
+ --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
9022
+ --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
9023
+ --pf-c-label--PaddingBottom: var(--pf-global--spacer--xs);
9024
+ --pf-c-label--PaddingLeft: var(--pf-global--spacer--sm);
9025
+ --pf-c-label--BorderRadius: var(--pf-global--BorderRadius--lg);
9026
+ --pf-c-label--BackgroundColor: var(--pf-global--palette--black-150);
9027
+ --pf-c-label--Color: var(--pf-global--Color--100);
9028
+ --pf-c-label--FontSize: var(--pf-global--FontSize--sm);
9029
+ --pf-c-label__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9030
+ --pf-c-label__content--before--BorderColor: var(--pf-global--BorderColor--100);
9031
+ --pf-c-label--m-outline--BackgroundColor: var(--pf-global--BackgroundColor--100);
9032
+ --pf-c-label--m-outline__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9033
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-global--BorderColor--100);
9034
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
9035
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
9036
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--200);
9037
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--200);
9038
+ --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
9039
+ --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
9040
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9041
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9042
+ --pf-c-label--m-blue--BackgroundColor: var(--pf-global--palette--blue-50);
9043
+ --pf-c-label--m-blue__icon--Color: var(--pf-global--primary-color--100);
9044
+ --pf-c-label--m-blue__content--Color: var(--pf-global--info-color--200);
9045
+ --pf-c-label--m-blue__content--before--BorderColor: var(--pf-global--palette--blue-100);
9046
+ --pf-c-label--m-blue__content--link--hover--before--BorderColor: var(--pf-global--primary-color--100);
9047
+ --pf-c-label--m-blue__content--link--focus--before--BorderColor: var(--pf-global--primary-color--100);
9048
+ --pf-c-label--m-outline--m-blue__content--Color: var(--pf-global--primary-color--100);
9049
+ --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--BorderColor--100);
9050
+ --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9051
+ --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9052
+ --pf-c-label--m-green--BackgroundColor: var(--pf-global--palette--green-50);
9053
+ --pf-c-label--m-green__icon--Color: var(--pf-global--success-color--100);
9054
+ --pf-c-label--m-green__content--Color: var(--pf-global--success-color--200);
9055
+ --pf-c-label--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
9056
+ --pf-c-label--m-green__content--link--hover--before--BorderColor: var(--pf-global--success-color--100);
9057
+ --pf-c-label--m-green__content--link--focus--before--BorderColor: var(--pf-global--success-color--100);
9058
+ --pf-c-label--m-outline--m-green__content--Color: var(--pf-global--success-color--100);
9059
+ --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--BorderColor--100);
9060
+ --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9061
+ --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9062
+ --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--gold-50);
9063
+ --pf-c-label--m-orange__icon--Color: var(--pf-global--palette--orange-300);
9064
+ --pf-c-label--m-orange__content--Color: var(--pf-global--palette--gold-700);
9065
+ --pf-c-label--m-orange__content--before--BorderColor: var(--pf-global--palette--orange-100);
9066
+ --pf-c-label--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--orange-300);
9067
+ --pf-c-label--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--orange-300);
9068
+ --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-500);
9069
+ --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--BorderColor--100);
9070
+ --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9071
+ --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9072
+ --pf-c-label--m-red--BackgroundColor: var(--pf-global--palette--red-50);
9073
+ --pf-c-label--m-red__icon--Color: var(--pf-global--danger-color--100);
9074
+ --pf-c-label--m-red__content--Color: var(--pf-global--palette--red-300);
9075
+ --pf-c-label--m-red__content--before--BorderColor: var(--pf-global--palette--red-100);
9076
+ --pf-c-label--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
9077
+ --pf-c-label--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
9078
+ --pf-c-label--m-outline--m-red__content--Color: var(--pf-global--danger-color--100);
9079
+ --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--BorderColor--100);
9080
+ --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9081
+ --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9082
+ --pf-c-label--m-purple--BackgroundColor: var(--pf-global--palette--purple-50);
9083
+ --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-500);
9084
+ --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-700);
9085
+ --pf-c-label--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
9086
+ --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-500);
9087
+ --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-500);
9088
+ --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-500);
9089
+ --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--BorderColor--100);
9090
+ --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9091
+ --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9092
+ --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--palette--cyan-50);
9093
+ --pf-c-label--m-cyan__icon--Color: var(--pf-global--default-color--200);
9094
+ --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--300);
9095
+ --pf-c-label--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
9096
+ --pf-c-label--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--default-color--200);
9097
+ --pf-c-label--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--default-color--200);
9098
+ --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--palette--cyan-400);
9099
+ --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100);
9100
+ --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9101
+ --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9102
+ --pf-c-label--m-overflow__content--Color: var(--pf-global--link--Color);
9103
+ --pf-c-label--m-overflow__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
9104
+ --pf-c-label--m-overflow__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9105
+ --pf-c-label--m-overflow__content--before--BorderColor: var(--pf-global--BorderColor--300);
9106
+ --pf-c-label--m-overflow__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
9107
+ --pf-c-label--m-overflow__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--300);
9108
+ --pf-c-label--m-overflow__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
9109
+ --pf-c-label--m-overflow__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--300);
9110
+ --pf-c-label--m-compact--PaddingTop: 0;
9111
+ --pf-c-label--m-compact--PaddingRight: var(--pf-global--spacer--sm);
9112
+ --pf-c-label--m-compact--PaddingBottom: 0;
9113
+ --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
9114
+ --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
9115
+ --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
9116
+ --pf-c-label__content--Color: var(--pf-global--Color--100);
9117
+ --pf-c-label__content--MaxWidth: 100%;
9118
+ --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
9119
+ --pf-c-label--m-editable__content--MaxWidth: 16ch;
9120
+ --pf-c-label__text--MaxWidth: 16ch;
9121
+ --pf-c-label__icon--Color: var(--pf-global--Color--100);
9122
+ --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
9123
+ --pf-c-label__c-button--FontSize: var(--pf-global--FontSize--xs);
9124
+ --pf-c-label__c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
9125
+ --pf-c-label__c-button--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
9126
+ --pf-c-label__c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
9127
+ --pf-c-label__c-button--MarginLeft: var(--pf-global--spacer--xs);
9128
+ --pf-c-label__c-button--PaddingTop: var(--pf-global--spacer--xs);
9129
+ --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
9130
+ --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
9131
+ --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
9132
+ --pf-c-label--m-editable--Cursor: pointer;
9133
+ --pf-c-label--m-editable--TextDecoration: underline;
9134
+ --pf-c-label--m-editable--TextDecorationStyle: dashed;
9135
+ --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
9136
+ --pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
9137
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
9138
+ --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
9139
+ --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
9140
+ --pf-c-label--m-editable__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9141
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-global--BorderColor--100);
9142
+ --pf-c-label--m-editable__content--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9143
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9144
+ --pf-c-label--m-editable__content--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9145
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9146
+ --pf-c-label--m-editable--m-editable-active--Cursor: auto;
9147
+ --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
9148
+ --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
9149
+ --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
9150
+ --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
9226
9151
  position: relative;
9227
- display: var(--pf-c-jump-links__list--Display);
9228
- flex-direction: var(--pf-c-jump-links__list--FlexDirection);
9229
- padding-top: var(--pf-c-jump-links__list--PaddingTop);
9230
- padding-right: var(--pf-c-jump-links__list--PaddingRight);
9231
- padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
9232
- padding-left: var(--pf-c-jump-links__list--PaddingLeft);
9233
- visibility: var(--pf-c-jump-links__list--Visibility);
9152
+ padding: var(--pf-c-label--PaddingTop) var(--pf-c-label--PaddingRight) var(--pf-c-label--PaddingBottom) var(--pf-c-label--PaddingLeft);
9153
+ font-size: var(--pf-c-label--FontSize);
9154
+ color: var(--pf-c-label--Color);
9155
+ white-space: nowrap;
9156
+ background-color: var(--pf-c-label--BackgroundColor);
9157
+ border: 0;
9158
+ border-radius: var(--pf-c-label--BorderRadius);
9234
9159
  }
9235
9160
 
9236
- .pf-c-jump-links__list::before {
9237
- position: absolute;
9238
- top: 0;
9239
- right: 0;
9240
- bottom: 0;
9241
- left: 0;
9242
- pointer-events: none;
9243
- content: "";
9244
- border: solid var(--pf-c-jump-links__list--before--BorderColor);
9245
- border-width: var(--pf-c-jump-links__list--before--BorderTopWidth) var(--pf-c-jump-links__list--before--BorderRightWidth) var(--pf-c-jump-links__list--before--BorderBottomWidth) var(--pf-c-jump-links__list--before--BorderLeftWidth);
9161
+ .pf-c-label.pf-m-compact {
9162
+ --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop);
9163
+ --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight);
9164
+ --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
9165
+ --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
9166
+ --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
9167
+ --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
9246
9168
  }
9247
9169
 
9248
- .pf-c-jump-links__list .pf-c-jump-links__list {
9249
- --pf-c-jump-links__list--PaddingTop: 0;
9250
- --pf-c-jump-links__list--PaddingBottom: 0;
9251
- --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
9252
- --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
9253
- --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
9254
- margin-top: var(--pf-c-jump-links__list__list--MarginTop);
9170
+ .pf-c-label.pf-m-blue {
9171
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
9172
+ --pf-c-label__icon--Color: var(--pf-c-label--m-blue__icon--Color);
9173
+ --pf-c-label__content--Color: var(--pf-c-label--m-blue__content--Color);
9174
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
9175
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-blue__content--link--hover--before--BorderColor);
9176
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-blue__content--link--focus--before--BorderColor);
9177
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-blue__content--Color);
9178
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--before--BorderColor);
9179
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor);
9180
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor);
9181
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
9182
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
9183
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
9255
9184
  }
9256
9185
 
9257
- .pf-c-jump-links__link {
9258
- position: relative;
9259
- display: flex;
9260
- flex: 1;
9261
- padding-top: var(--pf-c-jump-links__link--PaddingTop);
9262
- padding-right: var(--pf-c-jump-links__link--PaddingRight);
9263
- padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
9264
- padding-left: var(--pf-c-jump-links__link--PaddingLeft);
9265
- text-decoration: none;
9266
- outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
9186
+ .pf-c-label.pf-m-green {
9187
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor);
9188
+ --pf-c-label__icon--Color: var(--pf-c-label--m-green__icon--Color);
9189
+ --pf-c-label__content--Color: var(--pf-c-label--m-green__content--Color);
9190
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
9191
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-green__content--link--hover--before--BorderColor);
9192
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-green__content--link--focus--before--BorderColor);
9193
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-green__content--Color);
9194
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--before--BorderColor);
9195
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor);
9196
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor);
9197
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
9198
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
9199
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
9267
9200
  }
9268
9201
 
9269
- .pf-c-jump-links__link:hover {
9270
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
9202
+ .pf-c-label.pf-m-orange {
9203
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor);
9204
+ --pf-c-label__icon--Color: var(--pf-c-label--m-orange__icon--Color);
9205
+ --pf-c-label__content--Color: var(--pf-c-label--m-orange__content--Color);
9206
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
9207
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-orange__content--link--hover--before--BorderColor);
9208
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-orange__content--link--focus--before--BorderColor);
9209
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-orange__content--Color);
9210
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--before--BorderColor);
9211
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor);
9212
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor);
9213
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
9214
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
9215
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
9271
9216
  }
9272
9217
 
9273
- .pf-c-jump-links__link:focus {
9274
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
9218
+ .pf-c-label.pf-m-red {
9219
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor);
9220
+ --pf-c-label__icon--Color: var(--pf-c-label--m-red__icon--Color);
9221
+ --pf-c-label__content--Color: var(--pf-c-label--m-red__content--Color);
9222
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
9223
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-red__content--link--hover--before--BorderColor);
9224
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-red__content--link--focus--before--BorderColor);
9225
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-red__content--Color);
9226
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--before--BorderColor);
9227
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor);
9228
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor);
9229
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
9230
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
9231
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
9275
9232
  }
9276
9233
 
9277
- .pf-c-jump-links__link::before {
9278
- position: absolute;
9279
- top: 0;
9280
- right: 0;
9281
- bottom: 0;
9282
- left: 0;
9283
- pointer-events: none;
9284
- content: "";
9285
- border-color: var(--pf-c-jump-links__link--before--BorderColor);
9286
- border-style: solid;
9287
- border-width: var(--pf-c-jump-links__link--before--BorderTopWidth) var(--pf-c-jump-links__link--before--BorderRightWidth) var(--pf-c-jump-links__link--before--BorderBottomWidth) var(--pf-c-jump-links__link--before--BorderLeftWidth);
9234
+ .pf-c-label.pf-m-purple {
9235
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor);
9236
+ --pf-c-label__icon--Color: var(--pf-c-label--m-purple__icon--Color);
9237
+ --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color);
9238
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
9239
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-purple__content--link--hover--before--BorderColor);
9240
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-purple__content--link--focus--before--BorderColor);
9241
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-purple__content--Color);
9242
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--before--BorderColor);
9243
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor);
9244
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor);
9245
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
9246
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
9247
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
9288
9248
  }
9289
9249
 
9290
- .pf-c-jump-links__item {
9291
- --pf-c-jump-links__list--before--BorderColor: transparent;
9250
+ .pf-c-label.pf-m-cyan {
9251
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor);
9252
+ --pf-c-label__icon--Color: var(--pf-c-label--m-cyan__icon--Color);
9253
+ --pf-c-label__content--Color: var(--pf-c-label--m-cyan__content--Color);
9254
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
9255
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--link--hover--before--BorderColor);
9256
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--link--focus--before--BorderColor);
9257
+ --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-cyan__content--Color);
9258
+ --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--before--BorderColor);
9259
+ --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor);
9260
+ --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor);
9261
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
9262
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
9263
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
9292
9264
  }
9293
9265
 
9294
- .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
9295
- --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
9296
- --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
9297
- --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
9298
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
9266
+ .pf-c-label.pf-m-outline {
9267
+ --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
9268
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
9269
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
9270
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor);
9271
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
9272
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
9273
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
9299
9274
  }
9300
9275
 
9301
- .pf-c-jump-links__link-text {
9302
- color: var(--pf-c-jump-links__link-text--Color);
9276
+ .pf-c-label.pf-m-overflow:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
9277
+ .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
9278
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--hover--before--BorderWidth);
9279
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--hover--before--BorderColor);
9303
9280
  }
9304
9281
 
9305
- .pf-c-jump-links__label {
9306
- display: var(--pf-c-jump-links__label--Display);
9307
- margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
9308
- visibility: var(--pf-c-jump-links__label--Visibility);
9282
+ .pf-c-label.pf-m-overflow:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
9283
+ .pf-c-label.pf-m-outline button.pf-c-label__content:focus {
9284
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--focus--before--BorderWidth);
9285
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
9309
9286
  }
9310
9287
 
9311
- .pf-c-jump-links__main {
9312
- display: flex;
9313
- flex-direction: column;
9288
+ .pf-c-label.pf-m-editable {
9289
+ text-decoration: var(--pf-c-label--m-editable--TextDecoration);
9290
+ cursor: var(--pf-c-label--m-editable--Cursor);
9291
+ text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
9292
+ text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
9293
+ text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
9294
+ text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
9295
+ --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
9296
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
9297
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
9298
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--hover--before--BorderWidth);
9299
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-editable__content--hover--before--BorderColor);
9300
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--focus--before--BorderWidth);
9301
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-editable__content--focus--before--BorderColor);
9302
+ --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
9303
+ --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
9314
9304
  }
9315
9305
 
9316
- .pf-c-jump-links__toggle {
9317
- display: var(--pf-c-jump-links__toggle--Display);
9318
- margin-top: var(--pf-c-jump-links__toggle--MarginTop);
9319
- margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
9320
- margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
9321
- visibility: var(--pf-c-jump-links__toggle--Visibility);
9306
+ .pf-c-label.pf-m-editable:hover {
9307
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
9322
9308
  }
9323
9309
 
9324
- .pf-c-jump-links__toggle .pf-c-button {
9325
- display: flex;
9326
- align-items: center;
9310
+ .pf-c-label.pf-m-editable:focus {
9311
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
9327
9312
  }
9328
9313
 
9329
- .pf-c-jump-links__toggle-icon {
9330
- display: inline-block;
9331
- color: var(--pf-c-jump-links__toggle-icon--Color);
9332
- transition: var(--pf-c-jump-links__toggle-icon--Transition);
9333
- transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
9314
+ .pf-c-label.pf-m-editable-active {
9315
+ --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
9316
+ --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
9317
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
9334
9318
  }
9335
9319
 
9336
- .pf-c-jump-links__toggle-text {
9337
- margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
9338
- color: var(--pf-c-jump-links__toggle-text--Color);
9320
+ .pf-c-label.pf-m-editable-active .pf-c-button {
9321
+ visibility: hidden;
9339
9322
  }
9340
9323
 
9341
- .pf-c-sidebar {
9342
- --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
9343
- --pf-c-sidebar__main--FlexDirection: column;
9344
- --pf-c-sidebar__main--md--FlexDirection: row;
9345
- --pf-c-sidebar__main--AlignItems: stretch;
9346
- --pf-c-sidebar__main--md--AlignItems: start;
9347
- --pf-c-sidebar__main--child--MarginTop: 0;
9348
- --pf-c-sidebar__main--child--MarginLeft: 0;
9349
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
9350
- --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
9351
- --pf-c-sidebar--m-panel-right__panel--Order: 0;
9352
- --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
9353
- --pf-c-sidebar--m-stack__main--FlexDirection: column;
9354
- --pf-c-sidebar--m-stack__main--AlignItems: stretch;
9355
- --pf-c-sidebar--m-stack__panel--Position: sticky;
9356
- --pf-c-sidebar--m-stack__panel--Top: 0;
9357
- --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9358
- --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
9359
- --pf-c-sidebar--m-split__main--AlignItems: start;
9360
- --pf-c-sidebar--m-split__main--FlexDirection: row;
9361
- --pf-c-sidebar--m-split__panel--Position: static;
9362
- --pf-c-sidebar--m-split__panel--Top: auto;
9363
- --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
9364
- --pf-c-sidebar__panel--FlexBasis--base: auto;
9365
- --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
9366
- --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9367
- --pf-c-sidebar__panel--Top: 0;
9368
- --pf-c-sidebar__panel--md--Top: auto;
9369
- --pf-c-sidebar__panel--Position: sticky;
9370
- --pf-c-sidebar__panel--md--Position: static;
9371
- --pf-c-sidebar__panel--FlexBasis-base: auto;
9372
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis-base);
9373
- --pf-c-sidebar__panel--md--FlexBasis: 15.625rem;
9374
- --pf-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
9375
- --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
9376
- --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
9377
- --pf-c-sidebar__panel--Order: 0;
9378
- --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
9379
- --pf-c-sidebar__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
9380
- --pf-c-sidebar__panel--m-sticky--Top: 0;
9381
- --pf-c-sidebar__panel--m-sticky--Position: sticky;
9382
- height: 100%;
9324
+ .pf-c-label .pf-c-button {
9325
+ --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
9326
+ --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
9327
+ --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight);
9328
+ --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom);
9329
+ --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft);
9330
+ margin-top: var(--pf-c-label__c-button--MarginTop);
9331
+ margin-right: var(--pf-c-label__c-button--MarginRight);
9332
+ margin-bottom: var(--pf-c-label__c-button--MarginBottom);
9333
+ margin-left: var(--pf-c-label__c-button--MarginLeft);
9383
9334
  }
9384
9335
 
9385
- @media (min-width: 768px) {
9386
- .pf-c-sidebar {
9387
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
9388
- --pf-c-sidebar__panel--BoxShadow: none;
9389
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
9390
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
9391
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
9392
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
9393
- }
9394
- }
9395
- @media (min-width: 1200px) {
9396
- .pf-c-sidebar {
9397
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
9398
- }
9399
- }
9400
- .pf-c-sidebar.pf-m-gutter {
9401
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9402
- --pf-c-sidebar__main--child--MarginLeft: 0;
9336
+ .pf-c-label.pf-m-overflow {
9337
+ --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
9338
+ --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
9339
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);
9340
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-overflow__content--before--BorderColor);
9341
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--hover--before--BorderWidth);
9342
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-overflow__content--link--hover--before--BorderColor);
9343
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--focus--before--BorderWidth);
9344
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-overflow__content--link--focus--before--BorderColor);
9403
9345
  }
9404
9346
 
9405
- .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
9406
- margin-top: var(--pf-c-sidebar__main--child--MarginTop);
9407
- margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
9347
+ .pf-c-label,
9348
+ .pf-c-label__content {
9349
+ display: inline-flex;
9350
+ align-items: center;
9408
9351
  }
9409
9352
 
9410
- @media (min-width: 768px) {
9411
- .pf-c-sidebar.pf-m-gutter {
9412
- --pf-c-sidebar__main--child--MarginTop: 0;
9413
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9414
- }
9415
- }
9416
- .pf-c-sidebar.pf-m-panel-right {
9417
- --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
9353
+ .pf-c-label__text {
9354
+ overflow: hidden;
9355
+ text-overflow: ellipsis;
9356
+ white-space: nowrap;
9357
+ max-width: var(--pf-c-label__text--MaxWidth);
9418
9358
  }
9419
9359
 
9420
- @media (min-width: 768px) {
9421
- .pf-c-sidebar.pf-m-panel-right {
9422
- --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
9423
- }
9424
- }
9425
- .pf-c-sidebar.pf-m-stack {
9426
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
9427
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
9428
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9429
- --pf-c-sidebar__main--child--MarginLeft: 0;
9430
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
9431
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
9432
- --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
9433
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
9434
- --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
9360
+ .pf-c-label__content {
9361
+ overflow: hidden;
9362
+ text-overflow: ellipsis;
9363
+ white-space: nowrap;
9364
+ max-width: var(--pf-c-label__content--MaxWidth);
9365
+ color: var(--pf-c-label__content--Color);
9366
+ border-width: 0;
9435
9367
  }
9436
9368
 
9437
- .pf-c-sidebar.pf-m-split {
9438
- --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
9439
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
9440
- --pf-c-sidebar__main--child--MarginTop: 0;
9441
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9442
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
9443
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
9444
- --pf-c-sidebar__panel--BoxShadow: none;
9445
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
9446
- --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
9369
+ .pf-c-label__content::before {
9370
+ position: absolute;
9371
+ top: 0;
9372
+ right: 0;
9373
+ bottom: 0;
9374
+ left: 0;
9375
+ pointer-events: none;
9376
+ content: "";
9377
+ border: var(--pf-c-label__content--before--BorderWidth) solid var(--pf-c-label__content--before--BorderColor);
9378
+ border-radius: var(--pf-c-label--BorderRadius);
9447
9379
  }
9448
9380
 
9449
- .pf-c-sidebar__main {
9450
- display: flex;
9451
- flex-direction: var(--pf-c-sidebar__main--FlexDirection);
9452
- align-items: var(--pf-c-sidebar__main--AlignItems);
9381
+ a.pf-c-label__content,
9382
+ button.pf-c-label__content {
9383
+ cursor: pointer;
9384
+ border: none;
9453
9385
  }
9454
9386
 
9455
- .pf-c-sidebar__panel {
9456
- position: var(--pf-c-sidebar__panel--Position);
9457
- top: var(--pf-c-sidebar__panel--Top);
9458
- z-index: var(--pf-c-sidebar__panel--ZIndex);
9459
- flex-shrink: 0;
9460
- flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
9461
- order: var(--pf-c-sidebar__panel--Order);
9462
- background-color: var(--pf-c-sidebar__panel--BackgroundColor);
9463
- box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
9387
+ a.pf-c-label__content, a.pf-c-label__content:hover, a.pf-c-label__content:focus,
9388
+ button.pf-c-label__content,
9389
+ button.pf-c-label__content:hover,
9390
+ button.pf-c-label__content:focus {
9391
+ text-decoration: none;
9464
9392
  }
9465
9393
 
9466
- .pf-c-sidebar__panel.pf-m-sticky {
9467
- --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
9468
- --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
9394
+ a.pf-c-label__content:hover,
9395
+ button.pf-c-label__content:hover {
9396
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--hover--before--BorderWidth);
9397
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--hover--before--BorderColor);
9469
9398
  }
9470
9399
 
9471
- .pf-c-sidebar__panel.pf-m-static {
9472
- --pf-c-sidebar__panel--Position: static;
9473
- --pf-c-sidebar__panel--Top: auto;
9400
+ a.pf-c-label__content:focus,
9401
+ button.pf-c-label__content:focus {
9402
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--focus--before--BorderWidth);
9403
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--focus--before--BorderColor);
9474
9404
  }
9475
9405
 
9476
- .pf-c-sidebar__content {
9477
- flex-grow: 1;
9478
- background-color: var(--pf-c-sidebar__content--BackgroundColor);
9406
+ .pf-c-label__icon {
9407
+ margin-right: var(--pf-c-label__icon--MarginRight);
9408
+ color: var(--pf-c-label__icon--Color);
9479
9409
  }
9480
9410
 
9481
- .pf-c-sidebar__content.pf-m-no-background {
9482
- --pf-c-sidebar__content--BackgroundColor: transparent;
9411
+ .pf-c-label-group {
9412
+ --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
9413
+ --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
9414
+ --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
9415
+ --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
9416
+ --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
9417
+ --pf-c-label-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
9418
+ --pf-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-global--spacer--sm);
9419
+ --pf-c-label-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
9420
+ --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
9421
+ --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
9422
+ --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
9423
+ --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
9424
+ --pf-c-label-group__label--MarginBottom: 0;
9425
+ --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
9426
+ --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
9427
+ --pf-c-label-group__label--MaxWidth: 18ch;
9428
+ --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
9429
+ --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
9430
+ --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
9431
+ --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
9432
+ --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
9433
+ --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
9434
+ --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
9435
+ --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
9436
+ --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
9437
+ --pf-c-label-group__textarea--MinWidth: 12.5rem;
9438
+ --pf-c-label-group__textarea--PaddingTop: 0.125rem;
9439
+ --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
9440
+ --pf-c-label-group__textarea--PaddingBottom: 0;
9441
+ --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
9442
+ display: inline-flex;
9483
9443
  }
9484
9444
 
9485
- .pf-c-sidebar.pf-m-no-background,
9486
- .pf-c-sidebar__panel.pf-m-no-background,
9487
- .pf-c-sidebar__content.pf-m-no-background {
9488
- background-color: transparent;
9445
+ .pf-c-label-group.pf-m-category {
9446
+ padding-top: var(--pf-c-label-group--m-category--PaddingTop);
9447
+ padding-right: var(--pf-c-label-group--m-category--PaddingRight);
9448
+ padding-bottom: var(--pf-c-label-group--m-category--PaddingBottom);
9449
+ padding-left: var(--pf-c-label-group--m-category--PaddingLeft);
9450
+ background-color: var(--pf-c-label-group--m-category--BackgroundColor);
9451
+ border: var(--pf-c-label-group--m-category--BorderWidth) solid var(--pf-c-label-group--m-category--BorderColor);
9452
+ border-radius: var(--pf-c-label-group--m-category--BorderRadius);
9489
9453
  }
9490
9454
 
9491
- .pf-c-sidebar__panel.pf-m-width-default {
9492
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9455
+ .pf-c-label-group.pf-m-vertical {
9456
+ --pf-c-label-group__list--MarginRight: 0;
9457
+ --pf-c-label-group__list--MarginBottom: 0;
9458
+ --pf-c-label-group__list-item--MarginRight: 0;
9459
+ --pf-c-label-group__label--MarginRight: 0;
9460
+ --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
9461
+ --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
9462
+ --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
9463
+ --pf-c-label-group__close--MarginBottom: 0;
9464
+ --pf-c-label-group__close--MarginRight: var(--pf-c-label-group--m-vertical__close--MarginRight);
9465
+ --pf-c-label-group--m-category--PaddingRight: var(--pf-c-label-group--m-vertical--m-category--PaddingRight);
9493
9466
  }
9494
9467
 
9495
- .pf-c-sidebar__panel.pf-m-width-25 {
9496
- --pf-c-sidebar__panel--FlexBasis: 25%;
9468
+ .pf-c-label-group.pf-m-vertical.pf-c-label-group {
9469
+ align-items: flex-start;
9497
9470
  }
9498
9471
 
9499
- .pf-c-sidebar__panel.pf-m-width-33 {
9500
- --pf-c-sidebar__panel--FlexBasis: 33%;
9472
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
9473
+ flex-direction: column;
9474
+ align-items: flex-start;
9501
9475
  }
9502
9476
 
9503
- .pf-c-sidebar__panel.pf-m-width-50 {
9504
- --pf-c-sidebar__panel--FlexBasis: 50%;
9477
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
9478
+ flex-direction: column;
9505
9479
  }
9506
9480
 
9507
- .pf-c-sidebar__panel.pf-m-width-66 {
9508
- --pf-c-sidebar__panel--FlexBasis: 66%;
9481
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
9482
+ --pf-c-label-group__list-item--MarginBottom: 0;
9509
9483
  }
9510
9484
 
9511
- .pf-c-sidebar__panel.pf-m-width-75 {
9512
- --pf-c-sidebar__panel--FlexBasis: 75%;
9485
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
9486
+ --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
9487
+ --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
9513
9488
  }
9514
9489
 
9515
- .pf-c-sidebar__panel.pf-m-width-100 {
9516
- --pf-c-sidebar__panel--FlexBasis: 100%;
9490
+ .pf-c-label-group.pf-m-editable,
9491
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
9492
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list {
9493
+ display: flex;
9517
9494
  }
9518
9495
 
9519
- @media (min-width: 576px) {
9520
- .pf-c-sidebar__panel.pf-m-width-default-on-sm {
9521
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9522
- }
9523
-
9524
- .pf-c-sidebar__panel.pf-m-width-25-on-sm {
9525
- --pf-c-sidebar__panel--FlexBasis: 25%;
9526
- }
9527
-
9528
- .pf-c-sidebar__panel.pf-m-width-33-on-sm {
9529
- --pf-c-sidebar__panel--FlexBasis: 33%;
9530
- }
9531
-
9532
- .pf-c-sidebar__panel.pf-m-width-50-on-sm {
9533
- --pf-c-sidebar__panel--FlexBasis: 50%;
9534
- }
9535
-
9536
- .pf-c-sidebar__panel.pf-m-width-66-on-sm {
9537
- --pf-c-sidebar__panel--FlexBasis: 66%;
9538
- }
9539
-
9540
- .pf-c-sidebar__panel.pf-m-width-75-on-sm {
9541
- --pf-c-sidebar__panel--FlexBasis: 75%;
9542
- }
9543
-
9544
- .pf-c-sidebar__panel.pf-m-width-100-on-sm {
9545
- --pf-c-sidebar__panel--FlexBasis: 100%;
9546
- }
9496
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
9497
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list,
9498
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list-item.pf-m-textarea,
9499
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__textarea {
9500
+ flex: 1;
9547
9501
  }
9548
- @media (min-width: 768px) {
9549
- .pf-c-sidebar__panel.pf-m-width-default-on-md {
9550
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9551
- }
9552
-
9553
- .pf-c-sidebar__panel.pf-m-width-25-on-md {
9554
- --pf-c-sidebar__panel--FlexBasis: 25%;
9555
- }
9556
-
9557
- .pf-c-sidebar__panel.pf-m-width-33-on-md {
9558
- --pf-c-sidebar__panel--FlexBasis: 33%;
9559
- }
9560
-
9561
- .pf-c-sidebar__panel.pf-m-width-50-on-md {
9562
- --pf-c-sidebar__panel--FlexBasis: 50%;
9563
- }
9564
-
9565
- .pf-c-sidebar__panel.pf-m-width-66-on-md {
9566
- --pf-c-sidebar__panel--FlexBasis: 66%;
9567
- }
9568
9502
 
9569
- .pf-c-sidebar__panel.pf-m-width-75-on-md {
9570
- --pf-c-sidebar__panel--FlexBasis: 75%;
9571
- }
9572
-
9573
- .pf-c-sidebar__panel.pf-m-width-100-on-md {
9574
- --pf-c-sidebar__panel--FlexBasis: 100%;
9575
- }
9503
+ .pf-c-label-group__main {
9504
+ display: flex;
9505
+ flex: 1;
9506
+ flex-wrap: wrap;
9507
+ align-items: baseline;
9576
9508
  }
9577
- @media (min-width: 992px) {
9578
- .pf-c-sidebar__panel.pf-m-width-default-on-lg {
9579
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9580
- }
9581
-
9582
- .pf-c-sidebar__panel.pf-m-width-25-on-lg {
9583
- --pf-c-sidebar__panel--FlexBasis: 25%;
9584
- }
9585
-
9586
- .pf-c-sidebar__panel.pf-m-width-33-on-lg {
9587
- --pf-c-sidebar__panel--FlexBasis: 33%;
9588
- }
9589
-
9590
- .pf-c-sidebar__panel.pf-m-width-50-on-lg {
9591
- --pf-c-sidebar__panel--FlexBasis: 50%;
9592
- }
9593
-
9594
- .pf-c-sidebar__panel.pf-m-width-66-on-lg {
9595
- --pf-c-sidebar__panel--FlexBasis: 66%;
9596
- }
9597
9509
 
9598
- .pf-c-sidebar__panel.pf-m-width-75-on-lg {
9599
- --pf-c-sidebar__panel--FlexBasis: 75%;
9600
- }
9601
-
9602
- .pf-c-sidebar__panel.pf-m-width-100-on-lg {
9603
- --pf-c-sidebar__panel--FlexBasis: 100%;
9604
- }
9510
+ .pf-c-label-group__list {
9511
+ display: inline-flex;
9512
+ flex-wrap: wrap;
9513
+ margin-right: var(--pf-c-label-group__list--MarginRight);
9514
+ margin-bottom: var(--pf-c-label-group__list--MarginBottom);
9605
9515
  }
9606
- @media (min-width: 1200px) {
9607
- .pf-c-sidebar__panel.pf-m-width-default-on-xl {
9608
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9609
- }
9610
-
9611
- .pf-c-sidebar__panel.pf-m-width-25-on-xl {
9612
- --pf-c-sidebar__panel--FlexBasis: 25%;
9613
- }
9614
-
9615
- .pf-c-sidebar__panel.pf-m-width-33-on-xl {
9616
- --pf-c-sidebar__panel--FlexBasis: 33%;
9617
- }
9618
-
9619
- .pf-c-sidebar__panel.pf-m-width-50-on-xl {
9620
- --pf-c-sidebar__panel--FlexBasis: 50%;
9621
- }
9622
-
9623
- .pf-c-sidebar__panel.pf-m-width-66-on-xl {
9624
- --pf-c-sidebar__panel--FlexBasis: 66%;
9625
- }
9626
9516
 
9627
- .pf-c-sidebar__panel.pf-m-width-75-on-xl {
9628
- --pf-c-sidebar__panel--FlexBasis: 75%;
9629
- }
9517
+ .pf-c-label-group__list-item {
9518
+ display: inline-flex;
9519
+ margin-right: var(--pf-c-label-group__list-item--MarginRight);
9520
+ margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
9521
+ }
9630
9522
 
9631
- .pf-c-sidebar__panel.pf-m-width-100-on-xl {
9632
- --pf-c-sidebar__panel--FlexBasis: 100%;
9633
- }
9523
+ .pf-c-label-group__label {
9524
+ overflow: hidden;
9525
+ text-overflow: ellipsis;
9526
+ white-space: nowrap;
9527
+ max-width: var(--pf-c-label-group__label--MaxWidth);
9528
+ margin-right: var(--pf-c-label-group__label--MarginRight);
9529
+ margin-bottom: var(--pf-c-label-group__label--MarginBottom);
9530
+ font-size: var(--pf-c-label-group__label--FontSize);
9634
9531
  }
9635
- @media (min-width: 1450px) {
9636
- .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
9637
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9638
- }
9639
9532
 
9640
- .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
9641
- --pf-c-sidebar__panel--FlexBasis: 25%;
9642
- }
9533
+ .pf-c-label-group__close {
9534
+ margin-top: var(--pf-c-label-group__close--MarginTop);
9535
+ margin-right: var(--pf-c-label-group__close--MarginRight);
9536
+ margin-bottom: var(--pf-c-label-group__close--MarginBottom);
9537
+ margin-left: var(--pf-c-label-group__close--MarginLeft);
9538
+ }
9643
9539
 
9644
- .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
9645
- --pf-c-sidebar__panel--FlexBasis: 33%;
9646
- }
9540
+ .pf-c-label-group__textarea {
9541
+ min-width: var(--pf-c-label-group__textarea--MinWidth);
9542
+ padding: var(--pf-c-label-group__textarea--PaddingTop) var(--pf-c-label-group__textarea--PaddingRight) var(--pf-c-label-group__textarea--PaddingBottom) var(--pf-c-label-group__textarea--PaddingLeft);
9543
+ white-space: nowrap;
9544
+ resize: none;
9545
+ border: 0;
9546
+ -ms-overflow-style: none;
9547
+ scrollbar-width: none;
9548
+ }
9647
9549
 
9648
- .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
9649
- --pf-c-sidebar__panel--FlexBasis: 50%;
9650
- }
9550
+ .pf-c-label-group__textarea::-webkit-scrollbar {
9551
+ display: none;
9552
+ }
9651
9553
 
9652
- .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
9653
- --pf-c-sidebar__panel--FlexBasis: 66%;
9654
- }
9554
+ .pf-c-jump-links {
9555
+ --pf-c-jump-links__list--Display: flex;
9556
+ --pf-c-jump-links__list--Visibility: visible;
9557
+ --pf-c-jump-links__list--PaddingTop: 0;
9558
+ --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9559
+ --pf-c-jump-links__list--PaddingBottom: 0;
9560
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
9561
+ --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
9562
+ --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
9563
+ --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
9564
+ --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
9565
+ --pf-c-jump-links__list--FlexDirection: row;
9566
+ --pf-c-jump-links--m-vertical__list--FlexDirection: column;
9567
+ --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
9568
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9569
+ --pf-c-jump-links__list--before--BorderRightWidth: 0;
9570
+ --pf-c-jump-links__list--before--BorderBottomWidth: 0;
9571
+ --pf-c-jump-links__list--before--BorderLeftWidth: 0;
9572
+ --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
9573
+ --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
9574
+ --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
9575
+ --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
9576
+ --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
9577
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
9578
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
9579
+ --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
9580
+ --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
9581
+ --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
9582
+ --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
9583
+ --pf-c-jump-links__link--before--BorderTopWidth: 0;
9584
+ --pf-c-jump-links__link--before--BorderRightWidth: 0;
9585
+ --pf-c-jump-links__link--before--BorderBottomWidth: 0;
9586
+ --pf-c-jump-links__link--before--BorderLeftWidth: 0;
9587
+ --pf-c-jump-links__link--before--BorderColor: transparent;
9588
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
9589
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
9590
+ --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
9591
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
9592
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
9593
+ --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
9594
+ --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
9595
+ --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
9596
+ --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
9597
+ --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
9598
+ --pf-c-jump-links__label--Display: block;
9599
+ --pf-c-jump-links__label--Visibility: visible;
9600
+ --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
9601
+ --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
9602
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
9603
+ --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
9604
+ --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
9605
+ --pf-c-jump-links__toggle--Display: none;
9606
+ --pf-c-jump-links__toggle--Visibility: hidden;
9607
+ --pf-c-jump-links__toggle-icon--Color: currentColor;
9608
+ --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
9609
+ --pf-c-jump-links__toggle-icon--Rotate: 0;
9610
+ --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
9611
+ --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9612
+ --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
9613
+ --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
9614
+ display: flex;
9615
+ }
9655
9616
 
9656
- .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
9657
- --pf-c-sidebar__panel--FlexBasis: 75%;
9658
- }
9617
+ .pf-c-jump-links.pf-m-center {
9618
+ justify-content: center;
9619
+ }
9659
9620
 
9660
- .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
9661
- --pf-c-sidebar__panel--FlexBasis: 100%;
9662
- }
9621
+ .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9622
+ align-items: center;
9663
9623
  }
9664
- .pf-c-label {
9665
- --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
9666
- --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
9667
- --pf-c-label--PaddingBottom: var(--pf-global--spacer--xs);
9668
- --pf-c-label--PaddingLeft: var(--pf-global--spacer--sm);
9669
- --pf-c-label--BorderRadius: var(--pf-global--BorderRadius--lg);
9670
- --pf-c-label--BackgroundColor: var(--pf-global--palette--black-150);
9671
- --pf-c-label--Color: var(--pf-global--Color--100);
9672
- --pf-c-label--FontSize: var(--pf-global--FontSize--sm);
9673
- --pf-c-label__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9674
- --pf-c-label__content--before--BorderColor: var(--pf-global--BorderColor--100);
9675
- --pf-c-label--m-outline--BackgroundColor: var(--pf-global--BackgroundColor--100);
9676
- --pf-c-label--m-outline__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9677
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-global--BorderColor--100);
9678
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
9679
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
9680
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--200);
9681
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--200);
9682
- --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
9683
- --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
9684
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9685
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9686
- --pf-c-label--m-blue--BackgroundColor: var(--pf-global--palette--blue-50);
9687
- --pf-c-label--m-blue__icon--Color: var(--pf-global--primary-color--100);
9688
- --pf-c-label--m-blue__content--Color: var(--pf-global--info-color--200);
9689
- --pf-c-label--m-blue__content--before--BorderColor: var(--pf-global--palette--blue-100);
9690
- --pf-c-label--m-blue__content--link--hover--before--BorderColor: var(--pf-global--primary-color--100);
9691
- --pf-c-label--m-blue__content--link--focus--before--BorderColor: var(--pf-global--primary-color--100);
9692
- --pf-c-label--m-outline--m-blue__content--Color: var(--pf-global--primary-color--100);
9693
- --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--BorderColor--100);
9694
- --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9695
- --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9696
- --pf-c-label--m-green--BackgroundColor: var(--pf-global--palette--green-50);
9697
- --pf-c-label--m-green__icon--Color: var(--pf-global--success-color--100);
9698
- --pf-c-label--m-green__content--Color: var(--pf-global--success-color--200);
9699
- --pf-c-label--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
9700
- --pf-c-label--m-green__content--link--hover--before--BorderColor: var(--pf-global--success-color--100);
9701
- --pf-c-label--m-green__content--link--focus--before--BorderColor: var(--pf-global--success-color--100);
9702
- --pf-c-label--m-outline--m-green__content--Color: var(--pf-global--success-color--100);
9703
- --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--BorderColor--100);
9704
- --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9705
- --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9706
- --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--gold-50);
9707
- --pf-c-label--m-orange__icon--Color: var(--pf-global--palette--orange-300);
9708
- --pf-c-label--m-orange__content--Color: var(--pf-global--palette--gold-700);
9709
- --pf-c-label--m-orange__content--before--BorderColor: var(--pf-global--palette--orange-100);
9710
- --pf-c-label--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--orange-300);
9711
- --pf-c-label--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--orange-300);
9712
- --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-500);
9713
- --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--BorderColor--100);
9714
- --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9715
- --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9716
- --pf-c-label--m-red--BackgroundColor: var(--pf-global--palette--red-50);
9717
- --pf-c-label--m-red__icon--Color: var(--pf-global--danger-color--100);
9718
- --pf-c-label--m-red__content--Color: var(--pf-global--palette--red-300);
9719
- --pf-c-label--m-red__content--before--BorderColor: var(--pf-global--palette--red-100);
9720
- --pf-c-label--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
9721
- --pf-c-label--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
9722
- --pf-c-label--m-outline--m-red__content--Color: var(--pf-global--danger-color--100);
9723
- --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--BorderColor--100);
9724
- --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9725
- --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9726
- --pf-c-label--m-purple--BackgroundColor: var(--pf-global--palette--purple-50);
9727
- --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-500);
9728
- --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-700);
9729
- --pf-c-label--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
9730
- --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-500);
9731
- --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-500);
9732
- --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-500);
9733
- --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--BorderColor--100);
9734
- --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9735
- --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9736
- --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--palette--cyan-50);
9737
- --pf-c-label--m-cyan__icon--Color: var(--pf-global--default-color--200);
9738
- --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--300);
9739
- --pf-c-label--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
9740
- --pf-c-label--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--default-color--200);
9741
- --pf-c-label--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--default-color--200);
9742
- --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--palette--cyan-400);
9743
- --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100);
9744
- --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9745
- --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9746
- --pf-c-label--m-overflow__content--Color: var(--pf-global--link--Color);
9747
- --pf-c-label--m-overflow__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
9748
- --pf-c-label--m-overflow__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9749
- --pf-c-label--m-overflow__content--before--BorderColor: var(--pf-global--BorderColor--300);
9750
- --pf-c-label--m-overflow__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
9751
- --pf-c-label--m-overflow__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--300);
9752
- --pf-c-label--m-overflow__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
9753
- --pf-c-label--m-overflow__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--300);
9754
- --pf-c-label--m-compact--PaddingTop: 0;
9755
- --pf-c-label--m-compact--PaddingRight: var(--pf-global--spacer--sm);
9756
- --pf-c-label--m-compact--PaddingBottom: 0;
9757
- --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
9758
- --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
9759
- --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
9760
- --pf-c-label__content--Color: var(--pf-global--Color--100);
9761
- --pf-c-label__content--MaxWidth: 100%;
9762
- --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
9763
- --pf-c-label--m-editable__content--MaxWidth: 16ch;
9764
- --pf-c-label__text--MaxWidth: 16ch;
9765
- --pf-c-label__icon--Color: var(--pf-global--Color--100);
9766
- --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
9767
- --pf-c-label__c-button--FontSize: var(--pf-global--FontSize--xs);
9768
- --pf-c-label__c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
9769
- --pf-c-label__c-button--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
9770
- --pf-c-label__c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
9771
- --pf-c-label__c-button--MarginLeft: var(--pf-global--spacer--xs);
9772
- --pf-c-label__c-button--PaddingTop: var(--pf-global--spacer--xs);
9773
- --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
9774
- --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
9775
- --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
9776
- --pf-c-label--m-editable--Cursor: pointer;
9777
- --pf-c-label--m-editable--TextDecoration: underline;
9778
- --pf-c-label--m-editable--TextDecorationStyle: dashed;
9779
- --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
9780
- --pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
9781
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
9782
- --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
9783
- --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
9784
- --pf-c-label--m-editable__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9785
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-global--BorderColor--100);
9786
- --pf-c-label--m-editable__content--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9787
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-global--BorderColor--100);
9788
- --pf-c-label--m-editable__content--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
9789
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-global--BorderColor--100);
9790
- --pf-c-label--m-editable--m-editable-active--Cursor: auto;
9791
- --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
9792
- --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
9793
- --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
9794
- --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
9795
- position: relative;
9796
- padding: var(--pf-c-label--PaddingTop) var(--pf-c-label--PaddingRight) var(--pf-c-label--PaddingBottom) var(--pf-c-label--PaddingLeft);
9797
- font-size: var(--pf-c-label--FontSize);
9798
- color: var(--pf-c-label--Color);
9799
- white-space: nowrap;
9800
- background-color: var(--pf-c-label--BackgroundColor);
9801
- border: 0;
9802
- border-radius: var(--pf-c-label--BorderRadius);
9624
+
9625
+ .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
9626
+ --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
9627
+ --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
9628
+ --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
9629
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
9630
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
9631
+ --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
9632
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
9633
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
9634
+ --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
9635
+ flex-direction: column;
9803
9636
  }
9804
9637
 
9805
- .pf-c-label.pf-m-compact {
9806
- --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop);
9807
- --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight);
9808
- --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
9809
- --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
9810
- --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
9811
- --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
9638
+ .pf-c-jump-links.pf-m-expandable {
9639
+ --pf-c-jump-links__list--Display: none;
9640
+ --pf-c-jump-links__list--Visibility: hidden;
9641
+ --pf-c-jump-links__toggle--Display: block;
9642
+ --pf-c-jump-links__toggle--Visibility: visible;
9643
+ --pf-c-jump-links__label--Display: none;
9644
+ --pf-c-jump-links__label--Visibility: hidden;
9812
9645
  }
9813
9646
 
9814
- .pf-c-label.pf-m-blue {
9815
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
9816
- --pf-c-label__icon--Color: var(--pf-c-label--m-blue__icon--Color);
9817
- --pf-c-label__content--Color: var(--pf-c-label--m-blue__content--Color);
9818
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
9819
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-blue__content--link--hover--before--BorderColor);
9820
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-blue__content--link--focus--before--BorderColor);
9821
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-blue__content--Color);
9822
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--before--BorderColor);
9823
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor);
9824
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor);
9825
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
9826
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
9827
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
9647
+ .pf-c-jump-links.pf-m-non-expandable {
9648
+ --pf-c-jump-links__list--Display: flex;
9649
+ --pf-c-jump-links__list--Visibility: visible;
9650
+ --pf-c-jump-links__toggle--Display: none;
9651
+ --pf-c-jump-links__toggle--Visibility: hidden;
9652
+ --pf-c-jump-links__label--Display: block;
9653
+ --pf-c-jump-links__label--Visibility: visible;
9828
9654
  }
9829
9655
 
9830
- .pf-c-label.pf-m-green {
9831
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor);
9832
- --pf-c-label__icon--Color: var(--pf-c-label--m-green__icon--Color);
9833
- --pf-c-label__content--Color: var(--pf-c-label--m-green__content--Color);
9834
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
9835
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-green__content--link--hover--before--BorderColor);
9836
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-green__content--link--focus--before--BorderColor);
9837
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-green__content--Color);
9838
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--before--BorderColor);
9839
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor);
9840
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor);
9841
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
9842
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
9843
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
9656
+ @media (min-width: 576px) {
9657
+ .pf-c-jump-links.pf-m-expandable-on-sm {
9658
+ --pf-c-jump-links__list--Display: none;
9659
+ --pf-c-jump-links__list--Visibility: hidden;
9660
+ --pf-c-jump-links__toggle--Display: block;
9661
+ --pf-c-jump-links__toggle--Visibility: visible;
9662
+ --pf-c-jump-links__label--Display: none;
9663
+ --pf-c-jump-links__label--Visibility: hidden;
9664
+ }
9665
+
9666
+ .pf-c-jump-links.pf-m-non-expandable-on-sm {
9667
+ --pf-c-jump-links__list--Display: flex;
9668
+ --pf-c-jump-links__list--Visibility: visible;
9669
+ --pf-c-jump-links__toggle--Display: none;
9670
+ --pf-c-jump-links__toggle--Visibility: hidden;
9671
+ --pf-c-jump-links__label--Display: block;
9672
+ --pf-c-jump-links__label--Visibility: visible;
9673
+ }
9844
9674
  }
9675
+ @media (min-width: 768px) {
9676
+ .pf-c-jump-links.pf-m-expandable-on-md {
9677
+ --pf-c-jump-links__list--Display: none;
9678
+ --pf-c-jump-links__list--Visibility: hidden;
9679
+ --pf-c-jump-links__toggle--Display: block;
9680
+ --pf-c-jump-links__toggle--Visibility: visible;
9681
+ --pf-c-jump-links__label--Display: none;
9682
+ --pf-c-jump-links__label--Visibility: hidden;
9683
+ }
9845
9684
 
9846
- .pf-c-label.pf-m-orange {
9847
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor);
9848
- --pf-c-label__icon--Color: var(--pf-c-label--m-orange__icon--Color);
9849
- --pf-c-label__content--Color: var(--pf-c-label--m-orange__content--Color);
9850
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
9851
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-orange__content--link--hover--before--BorderColor);
9852
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-orange__content--link--focus--before--BorderColor);
9853
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-orange__content--Color);
9854
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--before--BorderColor);
9855
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor);
9856
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor);
9857
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
9858
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
9859
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
9685
+ .pf-c-jump-links.pf-m-non-expandable-on-md {
9686
+ --pf-c-jump-links__list--Display: flex;
9687
+ --pf-c-jump-links__list--Visibility: visible;
9688
+ --pf-c-jump-links__toggle--Display: none;
9689
+ --pf-c-jump-links__toggle--Visibility: hidden;
9690
+ --pf-c-jump-links__label--Display: block;
9691
+ --pf-c-jump-links__label--Visibility: visible;
9692
+ }
9860
9693
  }
9694
+ @media (min-width: 992px) {
9695
+ .pf-c-jump-links.pf-m-expandable-on-lg {
9696
+ --pf-c-jump-links__list--Display: none;
9697
+ --pf-c-jump-links__list--Visibility: hidden;
9698
+ --pf-c-jump-links__toggle--Display: block;
9699
+ --pf-c-jump-links__toggle--Visibility: visible;
9700
+ --pf-c-jump-links__label--Display: none;
9701
+ --pf-c-jump-links__label--Visibility: hidden;
9702
+ }
9861
9703
 
9862
- .pf-c-label.pf-m-red {
9863
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor);
9864
- --pf-c-label__icon--Color: var(--pf-c-label--m-red__icon--Color);
9865
- --pf-c-label__content--Color: var(--pf-c-label--m-red__content--Color);
9866
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
9867
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-red__content--link--hover--before--BorderColor);
9868
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-red__content--link--focus--before--BorderColor);
9869
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-red__content--Color);
9870
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--before--BorderColor);
9871
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor);
9872
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor);
9873
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
9874
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
9875
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
9704
+ .pf-c-jump-links.pf-m-non-expandable-on-lg {
9705
+ --pf-c-jump-links__list--Display: flex;
9706
+ --pf-c-jump-links__list--Visibility: visible;
9707
+ --pf-c-jump-links__toggle--Display: none;
9708
+ --pf-c-jump-links__toggle--Visibility: hidden;
9709
+ --pf-c-jump-links__label--Display: block;
9710
+ --pf-c-jump-links__label--Visibility: visible;
9711
+ }
9876
9712
  }
9713
+ @media (min-width: 1200px) {
9714
+ .pf-c-jump-links.pf-m-expandable-on-xl {
9715
+ --pf-c-jump-links__list--Display: none;
9716
+ --pf-c-jump-links__list--Visibility: hidden;
9717
+ --pf-c-jump-links__toggle--Display: block;
9718
+ --pf-c-jump-links__toggle--Visibility: visible;
9719
+ --pf-c-jump-links__label--Display: none;
9720
+ --pf-c-jump-links__label--Visibility: hidden;
9721
+ }
9877
9722
 
9878
- .pf-c-label.pf-m-purple {
9879
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor);
9880
- --pf-c-label__icon--Color: var(--pf-c-label--m-purple__icon--Color);
9881
- --pf-c-label__content--Color: var(--pf-c-label--m-purple__content--Color);
9882
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
9883
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-purple__content--link--hover--before--BorderColor);
9884
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-purple__content--link--focus--before--BorderColor);
9885
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-purple__content--Color);
9886
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--before--BorderColor);
9887
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor);
9888
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor);
9889
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
9890
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
9891
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
9723
+ .pf-c-jump-links.pf-m-non-expandable-on-xl {
9724
+ --pf-c-jump-links__list--Display: flex;
9725
+ --pf-c-jump-links__list--Visibility: visible;
9726
+ --pf-c-jump-links__toggle--Display: none;
9727
+ --pf-c-jump-links__toggle--Visibility: hidden;
9728
+ --pf-c-jump-links__label--Display: block;
9729
+ --pf-c-jump-links__label--Visibility: visible;
9730
+ }
9892
9731
  }
9732
+ @media (min-width: 1450px) {
9733
+ .pf-c-jump-links.pf-m-expandable-on-2xl {
9734
+ --pf-c-jump-links__list--Display: none;
9735
+ --pf-c-jump-links__list--Visibility: hidden;
9736
+ --pf-c-jump-links__toggle--Display: block;
9737
+ --pf-c-jump-links__toggle--Visibility: visible;
9738
+ --pf-c-jump-links__label--Display: none;
9739
+ --pf-c-jump-links__label--Visibility: hidden;
9740
+ }
9893
9741
 
9894
- .pf-c-label.pf-m-cyan {
9895
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor);
9896
- --pf-c-label__icon--Color: var(--pf-c-label--m-cyan__icon--Color);
9897
- --pf-c-label__content--Color: var(--pf-c-label--m-cyan__content--Color);
9898
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
9899
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--link--hover--before--BorderColor);
9900
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--link--focus--before--BorderColor);
9901
- --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-cyan__content--Color);
9902
- --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--before--BorderColor);
9903
- --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor);
9904
- --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor);
9905
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
9906
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
9907
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
9742
+ .pf-c-jump-links.pf-m-non-expandable-on-2xl {
9743
+ --pf-c-jump-links__list--Display: flex;
9744
+ --pf-c-jump-links__list--Visibility: visible;
9745
+ --pf-c-jump-links__toggle--Display: none;
9746
+ --pf-c-jump-links__toggle--Visibility: hidden;
9747
+ --pf-c-jump-links__label--Display: block;
9748
+ --pf-c-jump-links__label--Visibility: visible;
9749
+ }
9750
+ }
9751
+ .pf-c-jump-links.pf-m-expanded {
9752
+ --pf-c-jump-links__list--Display: flex;
9753
+ --pf-c-jump-links__list--Visibility: visible;
9754
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
9755
+ --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
9756
+ --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
9908
9757
  }
9909
9758
 
9910
- .pf-c-label.pf-m-outline {
9911
- --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
9912
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
9913
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
9914
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor);
9915
- --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
9916
- --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
9917
- --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
9759
+ .pf-c-jump-links__list {
9760
+ position: relative;
9761
+ display: var(--pf-c-jump-links__list--Display);
9762
+ flex-direction: var(--pf-c-jump-links__list--FlexDirection);
9763
+ padding-top: var(--pf-c-jump-links__list--PaddingTop);
9764
+ padding-right: var(--pf-c-jump-links__list--PaddingRight);
9765
+ padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
9766
+ padding-left: var(--pf-c-jump-links__list--PaddingLeft);
9767
+ visibility: var(--pf-c-jump-links__list--Visibility);
9918
9768
  }
9919
9769
 
9920
- .pf-c-label.pf-m-overflow:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
9921
- .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
9922
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--hover--before--BorderWidth);
9923
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--hover--before--BorderColor);
9770
+ .pf-c-jump-links__list::before {
9771
+ position: absolute;
9772
+ top: 0;
9773
+ right: 0;
9774
+ bottom: 0;
9775
+ left: 0;
9776
+ pointer-events: none;
9777
+ content: "";
9778
+ border: solid var(--pf-c-jump-links__list--before--BorderColor);
9779
+ border-width: var(--pf-c-jump-links__list--before--BorderTopWidth) var(--pf-c-jump-links__list--before--BorderRightWidth) var(--pf-c-jump-links__list--before--BorderBottomWidth) var(--pf-c-jump-links__list--before--BorderLeftWidth);
9924
9780
  }
9925
9781
 
9926
- .pf-c-label.pf-m-overflow:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
9927
- .pf-c-label.pf-m-outline button.pf-c-label__content:focus {
9928
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--focus--before--BorderWidth);
9929
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
9782
+ .pf-c-jump-links__list .pf-c-jump-links__list {
9783
+ --pf-c-jump-links__list--PaddingTop: 0;
9784
+ --pf-c-jump-links__list--PaddingBottom: 0;
9785
+ --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
9786
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
9787
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
9788
+ margin-top: var(--pf-c-jump-links__list__list--MarginTop);
9930
9789
  }
9931
9790
 
9932
- .pf-c-label.pf-m-editable {
9933
- text-decoration: var(--pf-c-label--m-editable--TextDecoration);
9934
- cursor: var(--pf-c-label--m-editable--Cursor);
9935
- text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
9936
- text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
9937
- text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
9938
- text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
9939
- --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
9940
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
9941
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
9942
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--hover--before--BorderWidth);
9943
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-editable__content--hover--before--BorderColor);
9944
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--focus--before--BorderWidth);
9945
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-editable__content--focus--before--BorderColor);
9946
- --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
9947
- --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
9791
+ .pf-c-jump-links__link {
9792
+ position: relative;
9793
+ display: flex;
9794
+ flex: 1;
9795
+ padding-top: var(--pf-c-jump-links__link--PaddingTop);
9796
+ padding-right: var(--pf-c-jump-links__link--PaddingRight);
9797
+ padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
9798
+ padding-left: var(--pf-c-jump-links__link--PaddingLeft);
9799
+ text-decoration: none;
9800
+ outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
9801
+ }
9802
+
9803
+ .pf-c-jump-links__link:hover {
9804
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
9948
9805
  }
9949
9806
 
9950
- .pf-c-label.pf-m-editable:hover {
9951
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
9807
+ .pf-c-jump-links__link:focus {
9808
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
9952
9809
  }
9953
9810
 
9954
- .pf-c-label.pf-m-editable:focus {
9955
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
9811
+ .pf-c-jump-links__link::before {
9812
+ position: absolute;
9813
+ top: 0;
9814
+ right: 0;
9815
+ bottom: 0;
9816
+ left: 0;
9817
+ pointer-events: none;
9818
+ content: "";
9819
+ border-color: var(--pf-c-jump-links__link--before--BorderColor);
9820
+ border-style: solid;
9821
+ border-width: var(--pf-c-jump-links__link--before--BorderTopWidth) var(--pf-c-jump-links__link--before--BorderRightWidth) var(--pf-c-jump-links__link--before--BorderBottomWidth) var(--pf-c-jump-links__link--before--BorderLeftWidth);
9956
9822
  }
9957
9823
 
9958
- .pf-c-label.pf-m-editable-active {
9959
- --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
9960
- --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
9961
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
9824
+ .pf-c-jump-links__item {
9825
+ --pf-c-jump-links__list--before--BorderColor: transparent;
9962
9826
  }
9963
9827
 
9964
- .pf-c-label.pf-m-editable-active .pf-c-button {
9965
- visibility: hidden;
9828
+ .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
9829
+ --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
9830
+ --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
9831
+ --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
9832
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
9966
9833
  }
9967
9834
 
9968
- .pf-c-label .pf-c-button {
9969
- --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
9970
- --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
9971
- --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight);
9972
- --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom);
9973
- --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft);
9974
- margin-top: var(--pf-c-label__c-button--MarginTop);
9975
- margin-right: var(--pf-c-label__c-button--MarginRight);
9976
- margin-bottom: var(--pf-c-label__c-button--MarginBottom);
9977
- margin-left: var(--pf-c-label__c-button--MarginLeft);
9835
+ .pf-c-jump-links__link-text {
9836
+ color: var(--pf-c-jump-links__link-text--Color);
9978
9837
  }
9979
9838
 
9980
- .pf-c-label.pf-m-overflow {
9981
- --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
9982
- --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
9983
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);
9984
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-overflow__content--before--BorderColor);
9985
- --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--hover--before--BorderWidth);
9986
- --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-overflow__content--link--hover--before--BorderColor);
9987
- --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-overflow__content--link--focus--before--BorderWidth);
9988
- --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-overflow__content--link--focus--before--BorderColor);
9839
+ .pf-c-jump-links__label {
9840
+ display: var(--pf-c-jump-links__label--Display);
9841
+ margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
9842
+ visibility: var(--pf-c-jump-links__label--Visibility);
9989
9843
  }
9990
9844
 
9991
- .pf-c-label,
9992
- .pf-c-label__content {
9993
- display: inline-flex;
9845
+ .pf-c-jump-links__main {
9846
+ display: flex;
9847
+ flex-direction: column;
9848
+ }
9849
+
9850
+ .pf-c-jump-links__toggle {
9851
+ display: var(--pf-c-jump-links__toggle--Display);
9852
+ margin-top: var(--pf-c-jump-links__toggle--MarginTop);
9853
+ margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
9854
+ margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
9855
+ visibility: var(--pf-c-jump-links__toggle--Visibility);
9856
+ }
9857
+
9858
+ .pf-c-jump-links__toggle .pf-c-button {
9859
+ display: flex;
9994
9860
  align-items: center;
9995
9861
  }
9996
9862
 
9997
- .pf-c-label__text {
9998
- overflow: hidden;
9999
- text-overflow: ellipsis;
10000
- white-space: nowrap;
10001
- max-width: var(--pf-c-label__text--MaxWidth);
9863
+ .pf-c-jump-links__toggle-icon {
9864
+ display: inline-block;
9865
+ color: var(--pf-c-jump-links__toggle-icon--Color);
9866
+ transition: var(--pf-c-jump-links__toggle-icon--Transition);
9867
+ transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
10002
9868
  }
10003
9869
 
10004
- .pf-c-label__content {
10005
- overflow: hidden;
10006
- text-overflow: ellipsis;
10007
- white-space: nowrap;
10008
- max-width: var(--pf-c-label__content--MaxWidth);
10009
- color: var(--pf-c-label__content--Color);
10010
- border-width: 0;
9870
+ .pf-c-jump-links__toggle-text {
9871
+ margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
9872
+ color: var(--pf-c-jump-links__toggle-text--Color);
10011
9873
  }
10012
9874
 
10013
- .pf-c-label__content::before {
10014
- position: absolute;
10015
- top: 0;
10016
- right: 0;
10017
- bottom: 0;
10018
- left: 0;
10019
- pointer-events: none;
10020
- content: "";
10021
- border: var(--pf-c-label__content--before--BorderWidth) solid var(--pf-c-label__content--before--BorderColor);
10022
- border-radius: var(--pf-c-label--BorderRadius);
9875
+ .pf-c-sidebar {
9876
+ --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
9877
+ --pf-c-sidebar__main--FlexDirection: column;
9878
+ --pf-c-sidebar__main--md--FlexDirection: row;
9879
+ --pf-c-sidebar__main--AlignItems: stretch;
9880
+ --pf-c-sidebar__main--md--AlignItems: start;
9881
+ --pf-c-sidebar__main--child--MarginTop: 0;
9882
+ --pf-c-sidebar__main--child--MarginLeft: 0;
9883
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
9884
+ --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
9885
+ --pf-c-sidebar--m-panel-right__panel--Order: 0;
9886
+ --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
9887
+ --pf-c-sidebar--m-stack__main--FlexDirection: column;
9888
+ --pf-c-sidebar--m-stack__main--AlignItems: stretch;
9889
+ --pf-c-sidebar--m-stack__panel--Position: sticky;
9890
+ --pf-c-sidebar--m-stack__panel--Top: 0;
9891
+ --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9892
+ --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
9893
+ --pf-c-sidebar--m-split__main--AlignItems: start;
9894
+ --pf-c-sidebar--m-split__main--FlexDirection: row;
9895
+ --pf-c-sidebar--m-split__panel--Position: static;
9896
+ --pf-c-sidebar--m-split__panel--Top: auto;
9897
+ --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
9898
+ --pf-c-sidebar__panel--FlexBasis--base: auto;
9899
+ --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
9900
+ --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
9901
+ --pf-c-sidebar__panel--Top: 0;
9902
+ --pf-c-sidebar__panel--md--Top: auto;
9903
+ --pf-c-sidebar__panel--Position: sticky;
9904
+ --pf-c-sidebar__panel--md--Position: static;
9905
+ --pf-c-sidebar__panel--FlexBasis-base: auto;
9906
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis-base);
9907
+ --pf-c-sidebar__panel--md--FlexBasis: 15.625rem;
9908
+ --pf-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
9909
+ --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
9910
+ --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
9911
+ --pf-c-sidebar__panel--Order: 0;
9912
+ --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
9913
+ --pf-c-sidebar__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
9914
+ --pf-c-sidebar__panel--m-sticky--Top: 0;
9915
+ --pf-c-sidebar__panel--m-sticky--Position: sticky;
9916
+ height: 100%;
10023
9917
  }
10024
9918
 
10025
- a.pf-c-label__content,
10026
- button.pf-c-label__content {
10027
- cursor: pointer;
10028
- border: none;
9919
+ @media (min-width: 768px) {
9920
+ .pf-c-sidebar {
9921
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
9922
+ --pf-c-sidebar__panel--BoxShadow: none;
9923
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
9924
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
9925
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
9926
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
9927
+ }
9928
+ }
9929
+ @media (min-width: 1200px) {
9930
+ .pf-c-sidebar {
9931
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
9932
+ }
9933
+ }
9934
+ .pf-c-sidebar.pf-m-gutter {
9935
+ --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9936
+ --pf-c-sidebar__main--child--MarginLeft: 0;
10029
9937
  }
10030
9938
 
10031
- a.pf-c-label__content, a.pf-c-label__content:hover, a.pf-c-label__content:focus,
10032
- button.pf-c-label__content,
10033
- button.pf-c-label__content:hover,
10034
- button.pf-c-label__content:focus {
10035
- text-decoration: none;
9939
+ .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
9940
+ margin-top: var(--pf-c-sidebar__main--child--MarginTop);
9941
+ margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
10036
9942
  }
10037
9943
 
10038
- a.pf-c-label__content:hover,
10039
- button.pf-c-label__content:hover {
10040
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--hover--before--BorderWidth);
10041
- --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--hover--before--BorderColor);
9944
+ @media (min-width: 768px) {
9945
+ .pf-c-sidebar.pf-m-gutter {
9946
+ --pf-c-sidebar__main--child--MarginTop: 0;
9947
+ --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9948
+ }
9949
+ }
9950
+ .pf-c-sidebar.pf-m-panel-right {
9951
+ --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
10042
9952
  }
10043
9953
 
10044
- a.pf-c-label__content:focus,
10045
- button.pf-c-label__content:focus {
10046
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label__content--link--focus--before--BorderWidth);
10047
- --pf-c-label__content--before--BorderColor: var(--pf-c-label__content--link--focus--before--BorderColor);
9954
+ @media (min-width: 768px) {
9955
+ .pf-c-sidebar.pf-m-panel-right {
9956
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
9957
+ }
9958
+ }
9959
+ .pf-c-sidebar.pf-m-stack {
9960
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
9961
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
9962
+ --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
9963
+ --pf-c-sidebar__main--child--MarginLeft: 0;
9964
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
9965
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
9966
+ --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
9967
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
9968
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
10048
9969
  }
10049
9970
 
10050
- .pf-c-label__icon {
10051
- margin-right: var(--pf-c-label__icon--MarginRight);
10052
- color: var(--pf-c-label__icon--Color);
9971
+ .pf-c-sidebar.pf-m-split {
9972
+ --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
9973
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
9974
+ --pf-c-sidebar__main--child--MarginTop: 0;
9975
+ --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
9976
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
9977
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
9978
+ --pf-c-sidebar__panel--BoxShadow: none;
9979
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
9980
+ --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
10053
9981
  }
10054
9982
 
10055
- .pf-c-label-group {
10056
- --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
10057
- --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
10058
- --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
10059
- --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
10060
- --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
10061
- --pf-c-label-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
10062
- --pf-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-global--spacer--sm);
10063
- --pf-c-label-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
10064
- --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
10065
- --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
10066
- --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
10067
- --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
10068
- --pf-c-label-group__label--MarginBottom: 0;
10069
- --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
10070
- --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
10071
- --pf-c-label-group__label--MaxWidth: 18ch;
10072
- --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
10073
- --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
10074
- --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10075
- --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
10076
- --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
10077
- --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
10078
- --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
10079
- --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
10080
- --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
10081
- --pf-c-label-group__textarea--MinWidth: 12.5rem;
10082
- --pf-c-label-group__textarea--PaddingTop: 0.125rem;
10083
- --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
10084
- --pf-c-label-group__textarea--PaddingBottom: 0;
10085
- --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
10086
- display: inline-flex;
9983
+ .pf-c-sidebar__main {
9984
+ display: flex;
9985
+ flex-direction: var(--pf-c-sidebar__main--FlexDirection);
9986
+ align-items: var(--pf-c-sidebar__main--AlignItems);
10087
9987
  }
10088
9988
 
10089
- .pf-c-label-group.pf-m-category {
10090
- padding-top: var(--pf-c-label-group--m-category--PaddingTop);
10091
- padding-right: var(--pf-c-label-group--m-category--PaddingRight);
10092
- padding-bottom: var(--pf-c-label-group--m-category--PaddingBottom);
10093
- padding-left: var(--pf-c-label-group--m-category--PaddingLeft);
10094
- background-color: var(--pf-c-label-group--m-category--BackgroundColor);
10095
- border: var(--pf-c-label-group--m-category--BorderWidth) solid var(--pf-c-label-group--m-category--BorderColor);
10096
- border-radius: var(--pf-c-label-group--m-category--BorderRadius);
9989
+ .pf-c-sidebar__panel {
9990
+ position: var(--pf-c-sidebar__panel--Position);
9991
+ top: var(--pf-c-sidebar__panel--Top);
9992
+ z-index: var(--pf-c-sidebar__panel--ZIndex);
9993
+ flex-shrink: 0;
9994
+ flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
9995
+ order: var(--pf-c-sidebar__panel--Order);
9996
+ background-color: var(--pf-c-sidebar__panel--BackgroundColor);
9997
+ box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
10097
9998
  }
10098
9999
 
10099
- .pf-c-label-group.pf-m-vertical {
10100
- --pf-c-label-group__list--MarginRight: 0;
10101
- --pf-c-label-group__list--MarginBottom: 0;
10102
- --pf-c-label-group__list-item--MarginRight: 0;
10103
- --pf-c-label-group__label--MarginRight: 0;
10104
- --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
10105
- --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
10106
- --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
10107
- --pf-c-label-group__close--MarginBottom: 0;
10108
- --pf-c-label-group__close--MarginRight: var(--pf-c-label-group--m-vertical__close--MarginRight);
10109
- --pf-c-label-group--m-category--PaddingRight: var(--pf-c-label-group--m-vertical--m-category--PaddingRight);
10000
+ .pf-c-sidebar__panel.pf-m-sticky {
10001
+ --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
10002
+ --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
10110
10003
  }
10111
10004
 
10112
- .pf-c-label-group.pf-m-vertical.pf-c-label-group {
10113
- align-items: flex-start;
10005
+ .pf-c-sidebar__panel.pf-m-static {
10006
+ --pf-c-sidebar__panel--Position: static;
10007
+ --pf-c-sidebar__panel--Top: auto;
10114
10008
  }
10115
10009
 
10116
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
10117
- flex-direction: column;
10118
- align-items: flex-start;
10010
+ .pf-c-sidebar__content {
10011
+ flex-grow: 1;
10012
+ background-color: var(--pf-c-sidebar__content--BackgroundColor);
10119
10013
  }
10120
10014
 
10121
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
10122
- flex-direction: column;
10015
+ .pf-c-sidebar__content.pf-m-no-background {
10016
+ --pf-c-sidebar__content--BackgroundColor: transparent;
10123
10017
  }
10124
10018
 
10125
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
10126
- --pf-c-label-group__list-item--MarginBottom: 0;
10019
+ .pf-c-sidebar.pf-m-no-background,
10020
+ .pf-c-sidebar__panel.pf-m-no-background,
10021
+ .pf-c-sidebar__content.pf-m-no-background {
10022
+ background-color: transparent;
10127
10023
  }
10128
10024
 
10129
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
10130
- --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
10131
- --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
10025
+ .pf-c-sidebar__panel.pf-m-width-default {
10026
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10132
10027
  }
10133
10028
 
10134
- .pf-c-label-group.pf-m-editable,
10135
- .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
10136
- .pf-c-label-group.pf-m-editable .pf-c-label-group__list {
10137
- display: flex;
10029
+ .pf-c-sidebar__panel.pf-m-width-25 {
10030
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10138
10031
  }
10139
10032
 
10140
- .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
10141
- .pf-c-label-group.pf-m-editable .pf-c-label-group__list,
10142
- .pf-c-label-group.pf-m-editable .pf-c-label-group__list-item.pf-m-textarea,
10143
- .pf-c-label-group.pf-m-editable .pf-c-label-group__textarea {
10144
- flex: 1;
10033
+ .pf-c-sidebar__panel.pf-m-width-33 {
10034
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10145
10035
  }
10146
10036
 
10147
- .pf-c-label-group__main {
10148
- display: flex;
10149
- flex: 1;
10150
- flex-wrap: wrap;
10151
- align-items: baseline;
10037
+ .pf-c-sidebar__panel.pf-m-width-50 {
10038
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10152
10039
  }
10153
10040
 
10154
- .pf-c-label-group__list {
10155
- display: inline-flex;
10156
- flex-wrap: wrap;
10157
- margin-right: var(--pf-c-label-group__list--MarginRight);
10158
- margin-bottom: var(--pf-c-label-group__list--MarginBottom);
10041
+ .pf-c-sidebar__panel.pf-m-width-66 {
10042
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10159
10043
  }
10160
10044
 
10161
- .pf-c-label-group__list-item {
10162
- display: inline-flex;
10163
- margin-right: var(--pf-c-label-group__list-item--MarginRight);
10164
- margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
10045
+ .pf-c-sidebar__panel.pf-m-width-75 {
10046
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10165
10047
  }
10166
10048
 
10167
- .pf-c-label-group__label {
10168
- overflow: hidden;
10169
- text-overflow: ellipsis;
10170
- white-space: nowrap;
10171
- max-width: var(--pf-c-label-group__label--MaxWidth);
10172
- margin-right: var(--pf-c-label-group__label--MarginRight);
10173
- margin-bottom: var(--pf-c-label-group__label--MarginBottom);
10174
- font-size: var(--pf-c-label-group__label--FontSize);
10049
+ .pf-c-sidebar__panel.pf-m-width-100 {
10050
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10175
10051
  }
10176
10052
 
10177
- .pf-c-label-group__close {
10178
- margin-top: var(--pf-c-label-group__close--MarginTop);
10179
- margin-right: var(--pf-c-label-group__close--MarginRight);
10180
- margin-bottom: var(--pf-c-label-group__close--MarginBottom);
10181
- margin-left: var(--pf-c-label-group__close--MarginLeft);
10053
+ @media (min-width: 576px) {
10054
+ .pf-c-sidebar__panel.pf-m-width-default-on-sm {
10055
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10056
+ }
10057
+
10058
+ .pf-c-sidebar__panel.pf-m-width-25-on-sm {
10059
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10060
+ }
10061
+
10062
+ .pf-c-sidebar__panel.pf-m-width-33-on-sm {
10063
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10064
+ }
10065
+
10066
+ .pf-c-sidebar__panel.pf-m-width-50-on-sm {
10067
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10068
+ }
10069
+
10070
+ .pf-c-sidebar__panel.pf-m-width-66-on-sm {
10071
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10072
+ }
10073
+
10074
+ .pf-c-sidebar__panel.pf-m-width-75-on-sm {
10075
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10076
+ }
10077
+
10078
+ .pf-c-sidebar__panel.pf-m-width-100-on-sm {
10079
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10080
+ }
10182
10081
  }
10082
+ @media (min-width: 768px) {
10083
+ .pf-c-sidebar__panel.pf-m-width-default-on-md {
10084
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10085
+ }
10183
10086
 
10184
- .pf-c-label-group__textarea {
10185
- min-width: var(--pf-c-label-group__textarea--MinWidth);
10186
- padding: var(--pf-c-label-group__textarea--PaddingTop) var(--pf-c-label-group__textarea--PaddingRight) var(--pf-c-label-group__textarea--PaddingBottom) var(--pf-c-label-group__textarea--PaddingLeft);
10187
- white-space: nowrap;
10188
- resize: none;
10189
- border: 0;
10190
- -ms-overflow-style: none;
10191
- scrollbar-width: none;
10087
+ .pf-c-sidebar__panel.pf-m-width-25-on-md {
10088
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10089
+ }
10090
+
10091
+ .pf-c-sidebar__panel.pf-m-width-33-on-md {
10092
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10093
+ }
10094
+
10095
+ .pf-c-sidebar__panel.pf-m-width-50-on-md {
10096
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10097
+ }
10098
+
10099
+ .pf-c-sidebar__panel.pf-m-width-66-on-md {
10100
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10101
+ }
10102
+
10103
+ .pf-c-sidebar__panel.pf-m-width-75-on-md {
10104
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10105
+ }
10106
+
10107
+ .pf-c-sidebar__panel.pf-m-width-100-on-md {
10108
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10109
+ }
10192
10110
  }
10111
+ @media (min-width: 992px) {
10112
+ .pf-c-sidebar__panel.pf-m-width-default-on-lg {
10113
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10114
+ }
10193
10115
 
10194
- .pf-c-label-group__textarea::-webkit-scrollbar {
10195
- display: none;
10116
+ .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10117
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10118
+ }
10119
+
10120
+ .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10121
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10122
+ }
10123
+
10124
+ .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10125
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10126
+ }
10127
+
10128
+ .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10129
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10130
+ }
10131
+
10132
+ .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10133
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10134
+ }
10135
+
10136
+ .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10137
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10138
+ }
10139
+ }
10140
+ @media (min-width: 1200px) {
10141
+ .pf-c-sidebar__panel.pf-m-width-default-on-xl {
10142
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10143
+ }
10144
+
10145
+ .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10146
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10147
+ }
10148
+
10149
+ .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10150
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10151
+ }
10152
+
10153
+ .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10154
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10155
+ }
10156
+
10157
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10158
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10159
+ }
10160
+
10161
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10162
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10163
+ }
10164
+
10165
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10166
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10167
+ }
10196
10168
  }
10169
+ @media (min-width: 1450px) {
10170
+ .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
10171
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10172
+ }
10173
+
10174
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10175
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10176
+ }
10177
+
10178
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10179
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10180
+ }
10197
10181
 
10182
+ .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10183
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10184
+ }
10185
+
10186
+ .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10187
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10188
+ }
10189
+
10190
+ .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10191
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10192
+ }
10193
+
10194
+ .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10195
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10196
+ }
10197
+ }
10198
10198
  .pf-c-list {
10199
10199
  --pf-c-list--PaddingLeft: var(--pf-global--spacer--lg);
10200
10200
  --pf-c-list--nested--MarginTop: var(--pf-global--spacer--sm);