@patternfly/react-core 4.208.5 → 4.208.6

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.
@@ -9017,356 +9017,264 @@ label.pf-c-input-group__text {
9017
9017
  margin-left: 0;
9018
9018
  }
9019
9019
 
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;
9151
- position: relative;
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);
9159
- }
9160
-
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);
9168
- }
9169
-
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);
9184
- }
9185
-
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);
9200
- }
9201
-
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);
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;
9216
9081
  }
9217
9082
 
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);
9083
+ .pf-c-jump-links.pf-m-center {
9084
+ justify-content: center;
9232
9085
  }
9233
9086
 
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);
9087
+ .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9088
+ align-items: center;
9248
9089
  }
9249
9090
 
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);
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;
9264
9102
  }
9265
9103
 
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);
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;
9274
9111
  }
9275
9112
 
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);
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;
9280
9120
  }
9281
9121
 
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);
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
+ }
9286
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
+ }
9287
9150
 
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);
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
+ }
9304
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
+ }
9305
9169
 
9306
- .pf-c-label.pf-m-editable:hover {
9307
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
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
+ }
9308
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
+ }
9309
9188
 
9310
- .pf-c-label.pf-m-editable:focus {
9311
- --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
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
+ }
9312
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
+ }
9313
9207
 
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);
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);
9318
9223
  }
9319
9224
 
9320
- .pf-c-label.pf-m-editable-active .pf-c-button {
9321
- visibility: hidden;
9225
+ .pf-c-jump-links__list {
9226
+ 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);
9322
9234
  }
9323
9235
 
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);
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);
9334
9246
  }
9335
9247
 
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);
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);
9345
9255
  }
9346
9256
 
9347
- .pf-c-label,
9348
- .pf-c-label__content {
9349
- display: inline-flex;
9350
- align-items: center;
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);
9351
9267
  }
9352
9268
 
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);
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);
9358
9271
  }
9359
9272
 
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;
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);
9367
9275
  }
9368
9276
 
9369
- .pf-c-label__content::before {
9277
+ .pf-c-jump-links__link::before {
9370
9278
  position: absolute;
9371
9279
  top: 0;
9372
9280
  right: 0;
@@ -9374,827 +9282,919 @@ label.pf-c-input-group__text {
9374
9282
  left: 0;
9375
9283
  pointer-events: none;
9376
9284
  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);
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);
9379
9288
  }
9380
9289
 
9381
- a.pf-c-label__content,
9382
- button.pf-c-label__content {
9383
- cursor: pointer;
9384
- border: none;
9290
+ .pf-c-jump-links__item {
9291
+ --pf-c-jump-links__list--before--BorderColor: transparent;
9385
9292
  }
9386
9293
 
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;
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);
9299
+ }
9300
+
9301
+ .pf-c-jump-links__link-text {
9302
+ color: var(--pf-c-jump-links__link-text--Color);
9303
+ }
9304
+
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);
9309
+ }
9310
+
9311
+ .pf-c-jump-links__main {
9312
+ display: flex;
9313
+ flex-direction: column;
9314
+ }
9315
+
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);
9392
9322
  }
9393
9323
 
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);
9324
+ .pf-c-jump-links__toggle .pf-c-button {
9325
+ display: flex;
9326
+ align-items: center;
9398
9327
  }
9399
9328
 
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);
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));
9404
9334
  }
9405
9335
 
9406
- .pf-c-label__icon {
9407
- margin-right: var(--pf-c-label__icon--MarginRight);
9408
- color: var(--pf-c-label__icon--Color);
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);
9409
9339
  }
9410
9340
 
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;
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%;
9443
9383
  }
9444
9384
 
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);
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
+ }
9453
9394
  }
9454
-
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);
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
+ }
9466
9399
  }
9467
-
9468
- .pf-c-label-group.pf-m-vertical.pf-c-label-group {
9469
- align-items: flex-start;
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;
9470
9403
  }
9471
9404
 
9472
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
9473
- flex-direction: column;
9474
- align-items: flex-start;
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);
9475
9408
  }
9476
9409
 
9477
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
9478
- flex-direction: column;
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
+ }
9479
9415
  }
9480
-
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;
9416
+ .pf-c-sidebar.pf-m-panel-right {
9417
+ --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
9483
9418
  }
9484
9419
 
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);
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
+ }
9488
9424
  }
9489
-
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;
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);
9494
9435
  }
9495
9436
 
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;
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);
9501
9447
  }
9502
9448
 
9503
- .pf-c-label-group__main {
9449
+ .pf-c-sidebar__main {
9504
9450
  display: flex;
9505
- flex: 1;
9506
- flex-wrap: wrap;
9507
- align-items: baseline;
9451
+ flex-direction: var(--pf-c-sidebar__main--FlexDirection);
9452
+ align-items: var(--pf-c-sidebar__main--AlignItems);
9508
9453
  }
9509
9454
 
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);
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);
9515
9464
  }
9516
9465
 
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);
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);
9521
9469
  }
9522
9470
 
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);
9471
+ .pf-c-sidebar__panel.pf-m-static {
9472
+ --pf-c-sidebar__panel--Position: static;
9473
+ --pf-c-sidebar__panel--Top: auto;
9531
9474
  }
9532
9475
 
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);
9476
+ .pf-c-sidebar__content {
9477
+ flex-grow: 1;
9478
+ background-color: var(--pf-c-sidebar__content--BackgroundColor);
9538
9479
  }
9539
9480
 
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;
9481
+ .pf-c-sidebar__content.pf-m-no-background {
9482
+ --pf-c-sidebar__content--BackgroundColor: transparent;
9548
9483
  }
9549
9484
 
9550
- .pf-c-label-group__textarea::-webkit-scrollbar {
9551
- display: none;
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;
9489
+ }
9490
+
9491
+ .pf-c-sidebar__panel.pf-m-width-default {
9492
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9552
9493
  }
9553
9494
 
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;
9495
+ .pf-c-sidebar__panel.pf-m-width-25 {
9496
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9615
9497
  }
9616
9498
 
9617
- .pf-c-jump-links.pf-m-center {
9618
- justify-content: center;
9499
+ .pf-c-sidebar__panel.pf-m-width-33 {
9500
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9619
9501
  }
9620
9502
 
9621
- .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9622
- align-items: center;
9503
+ .pf-c-sidebar__panel.pf-m-width-50 {
9504
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9623
9505
  }
9624
9506
 
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;
9507
+ .pf-c-sidebar__panel.pf-m-width-66 {
9508
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9636
9509
  }
9637
9510
 
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;
9511
+ .pf-c-sidebar__panel.pf-m-width-75 {
9512
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9645
9513
  }
9646
9514
 
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;
9515
+ .pf-c-sidebar__panel.pf-m-width-100 {
9516
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9654
9517
  }
9655
9518
 
9656
9519
  @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;
9520
+ .pf-c-sidebar__panel.pf-m-width-default-on-sm {
9521
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9664
9522
  }
9665
9523
 
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;
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%;
9673
9546
  }
9674
9547
  }
9675
9548
  @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;
9549
+ .pf-c-sidebar__panel.pf-m-width-default-on-md {
9550
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9683
9551
  }
9684
9552
 
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;
9553
+ .pf-c-sidebar__panel.pf-m-width-25-on-md {
9554
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9692
9555
  }
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;
9556
+
9557
+ .pf-c-sidebar__panel.pf-m-width-33-on-md {
9558
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9702
9559
  }
9703
9560
 
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;
9561
+ .pf-c-sidebar__panel.pf-m-width-50-on-md {
9562
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9711
9563
  }
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;
9564
+
9565
+ .pf-c-sidebar__panel.pf-m-width-66-on-md {
9566
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9721
9567
  }
9722
9568
 
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;
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%;
9730
9575
  }
9731
9576
  }
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;
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);
9740
9580
  }
9741
9581
 
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;
9582
+ .pf-c-sidebar__panel.pf-m-width-25-on-lg {
9583
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9749
9584
  }
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);
9757
- }
9758
9585
 
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);
9768
- }
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
+
9598
+ .pf-c-sidebar__panel.pf-m-width-75-on-lg {
9599
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9600
+ }
9769
9601
 
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);
9602
+ .pf-c-sidebar__panel.pf-m-width-100-on-lg {
9603
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9604
+ }
9780
9605
  }
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
+ }
9781
9610
 
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);
9789
- }
9611
+ .pf-c-sidebar__panel.pf-m-width-25-on-xl {
9612
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9613
+ }
9790
9614
 
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
- }
9615
+ .pf-c-sidebar__panel.pf-m-width-33-on-xl {
9616
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9617
+ }
9802
9618
 
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);
9805
- }
9619
+ .pf-c-sidebar__panel.pf-m-width-50-on-xl {
9620
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9621
+ }
9806
9622
 
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);
9809
- }
9623
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
9624
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9625
+ }
9810
9626
 
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);
9822
- }
9627
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
9628
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9629
+ }
9823
9630
 
9824
- .pf-c-jump-links__item {
9825
- --pf-c-jump-links__list--before--BorderColor: transparent;
9631
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
9632
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9633
+ }
9826
9634
  }
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
+ }
9827
9639
 
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);
9833
- }
9640
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
9641
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9642
+ }
9834
9643
 
9835
- .pf-c-jump-links__link-text {
9836
- color: var(--pf-c-jump-links__link-text--Color);
9837
- }
9644
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
9645
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9646
+ }
9838
9647
 
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);
9843
- }
9648
+ .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
9649
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9650
+ }
9844
9651
 
9845
- .pf-c-jump-links__main {
9846
- display: flex;
9847
- flex-direction: column;
9848
- }
9652
+ .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
9653
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9654
+ }
9849
9655
 
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
- }
9656
+ .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
9657
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9658
+ }
9857
9659
 
9858
- .pf-c-jump-links__toggle .pf-c-button {
9859
- display: flex;
9860
- align-items: center;
9660
+ .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
9661
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9662
+ }
9861
9663
  }
9862
-
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));
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);
9868
9803
  }
9869
9804
 
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);
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);
9873
9812
  }
9874
9813
 
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%;
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);
9917
9828
  }
9918
9829
 
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;
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);
9937
9844
  }
9938
9845
 
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);
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);
9942
9860
  }
9943
9861
 
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);
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);
9952
9876
  }
9953
9877
 
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);
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);
9969
9892
  }
9970
9893
 
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);
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);
9981
9908
  }
9982
9909
 
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);
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);
9987
9918
  }
9988
9919
 
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);
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);
9998
9924
  }
9999
9925
 
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);
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);
10003
9930
  }
10004
9931
 
10005
- .pf-c-sidebar__panel.pf-m-static {
10006
- --pf-c-sidebar__panel--Position: static;
10007
- --pf-c-sidebar__panel--Top: auto;
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);
10008
9948
  }
10009
9949
 
10010
- .pf-c-sidebar__content {
10011
- flex-grow: 1;
10012
- background-color: var(--pf-c-sidebar__content--BackgroundColor);
9950
+ .pf-c-label.pf-m-editable:hover {
9951
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
10013
9952
  }
10014
9953
 
10015
- .pf-c-sidebar__content.pf-m-no-background {
10016
- --pf-c-sidebar__content--BackgroundColor: transparent;
9954
+ .pf-c-label.pf-m-editable:focus {
9955
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
10017
9956
  }
10018
9957
 
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;
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);
10023
9962
  }
10024
9963
 
10025
- .pf-c-sidebar__panel.pf-m-width-default {
10026
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9964
+ .pf-c-label.pf-m-editable-active .pf-c-button {
9965
+ visibility: hidden;
10027
9966
  }
10028
9967
 
10029
- .pf-c-sidebar__panel.pf-m-width-25 {
10030
- --pf-c-sidebar__panel--FlexBasis: 25%;
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);
10031
9978
  }
10032
9979
 
10033
- .pf-c-sidebar__panel.pf-m-width-33 {
10034
- --pf-c-sidebar__panel--FlexBasis: 33%;
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);
10035
9989
  }
10036
9990
 
10037
- .pf-c-sidebar__panel.pf-m-width-50 {
10038
- --pf-c-sidebar__panel--FlexBasis: 50%;
9991
+ .pf-c-label,
9992
+ .pf-c-label__content {
9993
+ display: inline-flex;
9994
+ align-items: center;
10039
9995
  }
10040
9996
 
10041
- .pf-c-sidebar__panel.pf-m-width-66 {
10042
- --pf-c-sidebar__panel--FlexBasis: 66%;
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);
10043
10002
  }
10044
10003
 
10045
- .pf-c-sidebar__panel.pf-m-width-75 {
10046
- --pf-c-sidebar__panel--FlexBasis: 75%;
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;
10047
10011
  }
10048
10012
 
10049
- .pf-c-sidebar__panel.pf-m-width-100 {
10050
- --pf-c-sidebar__panel--FlexBasis: 100%;
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);
10051
10023
  }
10052
10024
 
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
- }
10025
+ a.pf-c-label__content,
10026
+ button.pf-c-label__content {
10027
+ cursor: pointer;
10028
+ border: none;
10081
10029
  }
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
- }
10086
-
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
10030
 
10099
- .pf-c-sidebar__panel.pf-m-width-66-on-md {
10100
- --pf-c-sidebar__panel--FlexBasis: 66%;
10101
- }
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;
10036
+ }
10102
10037
 
10103
- .pf-c-sidebar__panel.pf-m-width-75-on-md {
10104
- --pf-c-sidebar__panel--FlexBasis: 75%;
10105
- }
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);
10042
+ }
10106
10043
 
10107
- .pf-c-sidebar__panel.pf-m-width-100-on-md {
10108
- --pf-c-sidebar__panel--FlexBasis: 100%;
10109
- }
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);
10110
10048
  }
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
- }
10115
10049
 
10116
- .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10117
- --pf-c-sidebar__panel--FlexBasis: 25%;
10118
- }
10050
+ .pf-c-label__icon {
10051
+ margin-right: var(--pf-c-label__icon--MarginRight);
10052
+ color: var(--pf-c-label__icon--Color);
10053
+ }
10119
10054
 
10120
- .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10121
- --pf-c-sidebar__panel--FlexBasis: 33%;
10122
- }
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;
10087
+ }
10123
10088
 
10124
- .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10125
- --pf-c-sidebar__panel--FlexBasis: 50%;
10126
- }
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);
10097
+ }
10127
10098
 
10128
- .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10129
- --pf-c-sidebar__panel--FlexBasis: 66%;
10130
- }
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);
10110
+ }
10131
10111
 
10132
- .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10133
- --pf-c-sidebar__panel--FlexBasis: 75%;
10134
- }
10112
+ .pf-c-label-group.pf-m-vertical.pf-c-label-group {
10113
+ align-items: flex-start;
10114
+ }
10135
10115
 
10136
- .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10137
- --pf-c-sidebar__panel--FlexBasis: 100%;
10138
- }
10116
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
10117
+ flex-direction: column;
10118
+ align-items: flex-start;
10139
10119
  }
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
10120
 
10145
- .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10146
- --pf-c-sidebar__panel--FlexBasis: 25%;
10147
- }
10121
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
10122
+ flex-direction: column;
10123
+ }
10148
10124
 
10149
- .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10150
- --pf-c-sidebar__panel--FlexBasis: 33%;
10151
- }
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;
10127
+ }
10152
10128
 
10153
- .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10154
- --pf-c-sidebar__panel--FlexBasis: 50%;
10155
- }
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);
10132
+ }
10156
10133
 
10157
- .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10158
- --pf-c-sidebar__panel--FlexBasis: 66%;
10159
- }
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;
10138
+ }
10160
10139
 
10161
- .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10162
- --pf-c-sidebar__panel--FlexBasis: 75%;
10163
- }
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;
10145
+ }
10164
10146
 
10165
- .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10166
- --pf-c-sidebar__panel--FlexBasis: 100%;
10167
- }
10147
+ .pf-c-label-group__main {
10148
+ display: flex;
10149
+ flex: 1;
10150
+ flex-wrap: wrap;
10151
+ align-items: baseline;
10168
10152
  }
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
10153
 
10174
- .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10175
- --pf-c-sidebar__panel--FlexBasis: 25%;
10176
- }
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);
10159
+ }
10177
10160
 
10178
- .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10179
- --pf-c-sidebar__panel--FlexBasis: 33%;
10180
- }
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);
10165
+ }
10181
10166
 
10182
- .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10183
- --pf-c-sidebar__panel--FlexBasis: 50%;
10184
- }
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);
10175
+ }
10185
10176
 
10186
- .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10187
- --pf-c-sidebar__panel--FlexBasis: 66%;
10188
- }
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);
10182
+ }
10189
10183
 
10190
- .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10191
- --pf-c-sidebar__panel--FlexBasis: 75%;
10192
- }
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;
10192
+ }
10193
10193
 
10194
- .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10195
- --pf-c-sidebar__panel--FlexBasis: 100%;
10196
- }
10194
+ .pf-c-label-group__textarea::-webkit-scrollbar {
10195
+ display: none;
10197
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);
@@ -15920,236 +15920,57 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
15920
15920
  padding: var(--pf-c-popover__content--PaddingTop) var(--pf-c-popover__content--PaddingRight) var(--pf-c-popover__content--PaddingBottom) var(--pf-c-popover__content--PaddingLeft);
15921
15921
  background-color: var(--pf-c-popover__content--BackgroundColor);
15922
15922
  }
15923
-
15924
- .pf-c-popover__content > .pf-c-title {
15925
- margin-bottom: var(--pf-c-popover--c-title--MarginBottom);
15926
- }
15927
-
15928
- .pf-c-popover__content > .pf-c-button {
15929
- position: absolute;
15930
- top: var(--pf-c-popover--c-button--Top);
15931
- right: var(--pf-c-popover--c-button--Right);
15932
- }
15933
-
15934
- .pf-c-popover__content > .pf-c-button + * {
15935
- padding-right: var(--pf-c-popover--c-button--sibling--PaddingRight);
15936
- }
15937
-
15938
- .pf-c-popover__arrow {
15939
- position: absolute;
15940
- width: var(--pf-c-popover__arrow--Width);
15941
- height: var(--pf-c-popover__arrow--Height);
15942
- pointer-events: none;
15943
- background-color: var(--pf-c-popover__arrow--BackgroundColor);
15944
- box-shadow: var(--pf-c-popover__arrow--BoxShadow);
15945
- }
15946
-
15947
- .pf-c-popover__title {
15948
- flex: 0 0 auto;
15949
- margin-bottom: var(--pf-c-popover__title--MarginBottom);
15950
- font-family: var(--pf-c-popover__title--FontFamily);
15951
- font-size: var(--pf-c-popover__title--FontSize);
15952
- line-height: var(--pf-c-popover__title--LineHeight);
15953
- }
15954
-
15955
- .pf-c-popover__title.pf-m-icon {
15956
- display: flex;
15957
- }
15958
-
15959
- .pf-c-popover__title-icon {
15960
- margin-right: var(--pf-c-popover__title-icon--MarginRight);
15961
- color: var(--pf-c-popover__title-icon--Color);
15962
- }
15963
-
15964
- .pf-c-popover__title-text {
15965
- color: var(--pf-c-popover__title-text--Color, inherit);
15966
- }
15967
-
15968
- .pf-c-popover__body {
15969
- word-wrap: break-word;
15970
- }
15971
-
15972
- .pf-c-popover__footer {
15973
- margin-top: var(--pf-c-popover__footer--MarginTop);
15974
- }
15975
-
15976
- .pf-c-progress {
15977
- --pf-c-progress--GridGap: var(--pf-global--spacer--md);
15978
- --pf-c-progress__bar--before--BackgroundColor: var(--pf-global--primary-color--100);
15979
- --pf-c-progress__bar--Height: var(--pf-global--spacer--md);
15980
- --pf-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
15981
- --pf-c-progress__measure--m-static-width--MinWidth: 4.5ch;
15982
- --pf-c-progress__status-icon--Color: var(--pf-global--Color--100);
15983
- --pf-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm);
15984
- --pf-c-progress__bar--before--Opacity: .2;
15985
- --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
15986
- --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
15987
- --pf-c-progress--m-success__bar--BackgroundColor: var(--pf-global--success-color--100);
15988
- --pf-c-progress--m-warning__bar--BackgroundColor: var(--pf-global--warning-color--100);
15989
- --pf-c-progress--m-danger__bar--BackgroundColor: var(--pf-global--danger-color--100);
15990
- --pf-c-progress--m-success__status-icon--Color: var(--pf-global--success-color--100);
15991
- --pf-c-progress--m-warning__status-icon--Color: var(--pf-global--warning-color--100);
15992
- --pf-c-progress--m-danger__status-icon--Color: var(--pf-global--danger-color--100);
15993
- --pf-c-progress--m-inside__indicator--MinWidth: var(--pf-global--spacer--xl);
15994
- --pf-c-progress--m-inside__measure--Color: var(--pf-global--Color--light-100);
15995
- --pf-c-progress--m-success--m-inside__measure--Color: var(--pf-global--Color--light-100);
15996
- --pf-c-progress--m-warning--m-inside__measure--Color: var(--pf-global--Color--dark-100);
15997
- --pf-c-progress--m-inside__measure--FontSize: var(--pf-global--FontSize--sm);
15998
- --pf-c-progress--m-outside__measure--FontSize: var(--pf-global--FontSize--sm);
15999
- --pf-c-progress--m-sm__bar--Height: var(--pf-global--spacer--sm);
16000
- --pf-c-progress--m-sm__description--FontSize: var(--pf-global--FontSize--sm);
16001
- --pf-c-progress--m-sm__measure--FontSize: var(--pf-global--FontSize--sm);
16002
- --pf-c-progress--m-lg__bar--Height: var(--pf-global--spacer--lg);
16003
- display: grid;
16004
- align-items: end;
16005
- grid-gap: var(--pf-c-progress--GridGap);
16006
- grid-template-columns: auto auto;
16007
- grid-template-rows: 1fr auto;
16008
- }
16009
-
16010
- .pf-c-progress.pf-m-sm {
16011
- --pf-c-progress__bar--Height: var(--pf-c-progress--m-sm__bar--Height);
16012
- }
16013
-
16014
- .pf-c-progress.pf-m-sm .pf-c-progress__description {
16015
- font-size: var(--pf-c-progress--m-sm__description--FontSize);
16016
- }
16017
-
16018
- .pf-c-progress.pf-m-sm .pf-c-progress__measure {
16019
- font-size: var(--pf-c-progress--m-sm__measure--FontSize);
16020
- }
16021
-
16022
- .pf-c-progress.pf-m-lg {
16023
- --pf-c-progress__bar--Height: var(--pf-c-progress--m-lg__bar--Height);
16024
- }
16025
-
16026
- .pf-c-progress.pf-m-inside .pf-c-progress__indicator {
16027
- display: flex;
16028
- align-items: center;
16029
- justify-content: center;
16030
- min-width: var(--pf-c-progress--m-inside__indicator--MinWidth);
16031
- }
16032
-
16033
- .pf-c-progress.pf-m-inside .pf-c-progress__measure {
16034
- font-size: var(--pf-c-progress--m-inside__measure--FontSize);
16035
- color: var(--pf-c-progress--m-inside__measure--Color);
16036
- text-align: center;
16037
- }
16038
-
16039
- .pf-c-progress.pf-m-outside .pf-c-progress__description {
16040
- grid-column: 1/3;
16041
- }
16042
-
16043
- .pf-c-progress.pf-m-outside .pf-c-progress__status {
16044
- grid-column: 2/3;
16045
- grid-row: 2/3;
16046
- align-self: center;
16047
- }
16048
-
16049
- .pf-c-progress.pf-m-outside .pf-c-progress__measure {
16050
- display: inline-block;
16051
- font-size: var(--pf-c-progress--m-outside__measure--FontSize);
16052
- }
16053
-
16054
- .pf-c-progress.pf-m-outside .pf-c-progress__measure.pf-m-static-width {
16055
- min-width: var(--pf-c-progress__measure--m-static-width--MinWidth);
16056
- text-align: left;
16057
- }
16058
-
16059
- .pf-c-progress.pf-m-outside .pf-c-progress__bar,
16060
- .pf-c-progress.pf-m-outside .pf-c-progress__indicator {
16061
- grid-column: 1/2;
16062
- }
16063
-
16064
- .pf-c-progress.pf-m-singleline {
16065
- grid-template-rows: 1fr;
16066
- }
16067
-
16068
- .pf-c-progress.pf-m-singleline .pf-c-progress__description {
16069
- display: none;
16070
- visibility: hidden;
16071
- }
16072
-
16073
- .pf-c-progress.pf-m-singleline .pf-c-progress__bar {
16074
- grid-row: 1/2;
16075
- grid-column: 1/2;
16076
- }
16077
-
16078
- .pf-c-progress.pf-m-singleline .pf-c-progress__status {
16079
- grid-row: 1/2;
16080
- grid-column: 2/3;
16081
- }
16082
-
16083
- .pf-c-progress.pf-m-outside, .pf-c-progress.pf-m-singleline {
16084
- grid-template-columns: 1fr fit-content(50%);
16085
- }
16086
-
16087
- .pf-c-progress.pf-m-success {
16088
- --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-success__bar--BackgroundColor);
16089
- --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-success__status-icon--Color);
16090
- --pf-c-progress--m-inside__measure--Color: var(--pf-c-progress--m-success--m-inside__measure--Color);
15923
+
15924
+ .pf-c-popover__content > .pf-c-title {
15925
+ margin-bottom: var(--pf-c-popover--c-title--MarginBottom);
16091
15926
  }
16092
15927
 
16093
- .pf-c-progress.pf-m-warning {
16094
- --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-warning__bar--BackgroundColor);
16095
- --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-warning__status-icon--Color);
16096
- --pf-c-progress--m-inside__measure--Color: var(--pf-c-progress--m-warning--m-inside__measure--Color);
15928
+ .pf-c-popover__content > .pf-c-button {
15929
+ position: absolute;
15930
+ top: var(--pf-c-popover--c-button--Top);
15931
+ right: var(--pf-c-popover--c-button--Right);
16097
15932
  }
16098
15933
 
16099
- .pf-c-progress.pf-m-danger {
16100
- --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-danger__bar--BackgroundColor);
16101
- --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-danger__status-icon--Color);
15934
+ .pf-c-popover__content > .pf-c-button + * {
15935
+ padding-right: var(--pf-c-popover--c-button--sibling--PaddingRight);
16102
15936
  }
16103
15937
 
16104
- .pf-c-progress__description {
16105
- word-break: break-word;
16106
- grid-column: 1/2;
15938
+ .pf-c-popover__arrow {
15939
+ position: absolute;
15940
+ width: var(--pf-c-popover__arrow--Width);
15941
+ height: var(--pf-c-popover__arrow--Height);
15942
+ pointer-events: none;
15943
+ background-color: var(--pf-c-popover__arrow--BackgroundColor);
15944
+ box-shadow: var(--pf-c-popover__arrow--BoxShadow);
16107
15945
  }
16108
15946
 
16109
- .pf-c-progress__description.pf-m-truncate {
16110
- overflow: hidden;
16111
- text-overflow: ellipsis;
16112
- white-space: nowrap;
15947
+ .pf-c-popover__title {
15948
+ flex: 0 0 auto;
15949
+ margin-bottom: var(--pf-c-popover__title--MarginBottom);
15950
+ font-family: var(--pf-c-popover__title--FontFamily);
15951
+ font-size: var(--pf-c-popover__title--FontSize);
15952
+ line-height: var(--pf-c-popover__title--LineHeight);
16113
15953
  }
16114
15954
 
16115
- .pf-c-progress__status {
16116
- grid-column: 2/3;
16117
- grid-row: 1/2;
16118
- text-align: right;
16119
- word-break: break-word;
15955
+ .pf-c-popover__title.pf-m-icon {
15956
+ display: flex;
16120
15957
  }
16121
15958
 
16122
- .pf-c-progress__status-icon {
16123
- margin-left: var(--pf-c-progress__status-icon--MarginLeft);
16124
- color: var(--pf-c-progress__status-icon--Color);
15959
+ .pf-c-popover__title-icon {
15960
+ margin-right: var(--pf-c-popover__title-icon--MarginRight);
15961
+ color: var(--pf-c-popover__title-icon--Color);
16125
15962
  }
16126
15963
 
16127
- .pf-c-progress__bar {
16128
- position: relative;
16129
- grid-column: 1/3;
16130
- grid-row: 2/3;
16131
- align-self: center;
16132
- height: var(--pf-c-progress__bar--Height);
16133
- background-color: var(--pf-c-progress__bar--BackgroundColor);
15964
+ .pf-c-popover__title-text {
15965
+ color: var(--pf-c-popover__title-text--Color, inherit);
16134
15966
  }
16135
15967
 
16136
- .pf-c-progress__bar::before {
16137
- position: absolute;
16138
- top: 0;
16139
- left: 0;
16140
- width: 100%;
16141
- height: 100%;
16142
- content: "";
16143
- background-color: var(--pf-c-progress__bar--before--BackgroundColor);
16144
- opacity: var(--pf-c-progress__bar--before--Opacity);
15968
+ .pf-c-popover__body {
15969
+ word-wrap: break-word;
16145
15970
  }
16146
15971
 
16147
- .pf-c-progress__indicator {
16148
- position: absolute;
16149
- top: 0;
16150
- left: 0;
16151
- height: var(--pf-c-progress__indicator--Height);
16152
- background-color: var(--pf-c-progress__indicator--BackgroundColor);
15972
+ .pf-c-popover__footer {
15973
+ margin-top: var(--pf-c-popover__footer--MarginTop);
16153
15974
  }
16154
15975
 
16155
15976
  .pf-c-progress-stepper {
@@ -16493,6 +16314,185 @@ label.pf-c-radio, .pf-c-radio__label,
16493
16314
  cursor: not-allowed;
16494
16315
  }
16495
16316
 
16317
+ .pf-c-progress {
16318
+ --pf-c-progress--GridGap: var(--pf-global--spacer--md);
16319
+ --pf-c-progress__bar--before--BackgroundColor: var(--pf-global--primary-color--100);
16320
+ --pf-c-progress__bar--Height: var(--pf-global--spacer--md);
16321
+ --pf-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
16322
+ --pf-c-progress__measure--m-static-width--MinWidth: 4.5ch;
16323
+ --pf-c-progress__status-icon--Color: var(--pf-global--Color--100);
16324
+ --pf-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm);
16325
+ --pf-c-progress__bar--before--Opacity: .2;
16326
+ --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
16327
+ --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
16328
+ --pf-c-progress--m-success__bar--BackgroundColor: var(--pf-global--success-color--100);
16329
+ --pf-c-progress--m-warning__bar--BackgroundColor: var(--pf-global--warning-color--100);
16330
+ --pf-c-progress--m-danger__bar--BackgroundColor: var(--pf-global--danger-color--100);
16331
+ --pf-c-progress--m-success__status-icon--Color: var(--pf-global--success-color--100);
16332
+ --pf-c-progress--m-warning__status-icon--Color: var(--pf-global--warning-color--100);
16333
+ --pf-c-progress--m-danger__status-icon--Color: var(--pf-global--danger-color--100);
16334
+ --pf-c-progress--m-inside__indicator--MinWidth: var(--pf-global--spacer--xl);
16335
+ --pf-c-progress--m-inside__measure--Color: var(--pf-global--Color--light-100);
16336
+ --pf-c-progress--m-success--m-inside__measure--Color: var(--pf-global--Color--light-100);
16337
+ --pf-c-progress--m-warning--m-inside__measure--Color: var(--pf-global--Color--dark-100);
16338
+ --pf-c-progress--m-inside__measure--FontSize: var(--pf-global--FontSize--sm);
16339
+ --pf-c-progress--m-outside__measure--FontSize: var(--pf-global--FontSize--sm);
16340
+ --pf-c-progress--m-sm__bar--Height: var(--pf-global--spacer--sm);
16341
+ --pf-c-progress--m-sm__description--FontSize: var(--pf-global--FontSize--sm);
16342
+ --pf-c-progress--m-sm__measure--FontSize: var(--pf-global--FontSize--sm);
16343
+ --pf-c-progress--m-lg__bar--Height: var(--pf-global--spacer--lg);
16344
+ display: grid;
16345
+ align-items: end;
16346
+ grid-gap: var(--pf-c-progress--GridGap);
16347
+ grid-template-columns: auto auto;
16348
+ grid-template-rows: 1fr auto;
16349
+ }
16350
+
16351
+ .pf-c-progress.pf-m-sm {
16352
+ --pf-c-progress__bar--Height: var(--pf-c-progress--m-sm__bar--Height);
16353
+ }
16354
+
16355
+ .pf-c-progress.pf-m-sm .pf-c-progress__description {
16356
+ font-size: var(--pf-c-progress--m-sm__description--FontSize);
16357
+ }
16358
+
16359
+ .pf-c-progress.pf-m-sm .pf-c-progress__measure {
16360
+ font-size: var(--pf-c-progress--m-sm__measure--FontSize);
16361
+ }
16362
+
16363
+ .pf-c-progress.pf-m-lg {
16364
+ --pf-c-progress__bar--Height: var(--pf-c-progress--m-lg__bar--Height);
16365
+ }
16366
+
16367
+ .pf-c-progress.pf-m-inside .pf-c-progress__indicator {
16368
+ display: flex;
16369
+ align-items: center;
16370
+ justify-content: center;
16371
+ min-width: var(--pf-c-progress--m-inside__indicator--MinWidth);
16372
+ }
16373
+
16374
+ .pf-c-progress.pf-m-inside .pf-c-progress__measure {
16375
+ font-size: var(--pf-c-progress--m-inside__measure--FontSize);
16376
+ color: var(--pf-c-progress--m-inside__measure--Color);
16377
+ text-align: center;
16378
+ }
16379
+
16380
+ .pf-c-progress.pf-m-outside .pf-c-progress__description {
16381
+ grid-column: 1/3;
16382
+ }
16383
+
16384
+ .pf-c-progress.pf-m-outside .pf-c-progress__status {
16385
+ grid-column: 2/3;
16386
+ grid-row: 2/3;
16387
+ align-self: center;
16388
+ }
16389
+
16390
+ .pf-c-progress.pf-m-outside .pf-c-progress__measure {
16391
+ display: inline-block;
16392
+ font-size: var(--pf-c-progress--m-outside__measure--FontSize);
16393
+ }
16394
+
16395
+ .pf-c-progress.pf-m-outside .pf-c-progress__measure.pf-m-static-width {
16396
+ min-width: var(--pf-c-progress__measure--m-static-width--MinWidth);
16397
+ text-align: left;
16398
+ }
16399
+
16400
+ .pf-c-progress.pf-m-outside .pf-c-progress__bar,
16401
+ .pf-c-progress.pf-m-outside .pf-c-progress__indicator {
16402
+ grid-column: 1/2;
16403
+ }
16404
+
16405
+ .pf-c-progress.pf-m-singleline {
16406
+ grid-template-rows: 1fr;
16407
+ }
16408
+
16409
+ .pf-c-progress.pf-m-singleline .pf-c-progress__description {
16410
+ display: none;
16411
+ visibility: hidden;
16412
+ }
16413
+
16414
+ .pf-c-progress.pf-m-singleline .pf-c-progress__bar {
16415
+ grid-row: 1/2;
16416
+ grid-column: 1/2;
16417
+ }
16418
+
16419
+ .pf-c-progress.pf-m-singleline .pf-c-progress__status {
16420
+ grid-row: 1/2;
16421
+ grid-column: 2/3;
16422
+ }
16423
+
16424
+ .pf-c-progress.pf-m-outside, .pf-c-progress.pf-m-singleline {
16425
+ grid-template-columns: 1fr fit-content(50%);
16426
+ }
16427
+
16428
+ .pf-c-progress.pf-m-success {
16429
+ --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-success__bar--BackgroundColor);
16430
+ --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-success__status-icon--Color);
16431
+ --pf-c-progress--m-inside__measure--Color: var(--pf-c-progress--m-success--m-inside__measure--Color);
16432
+ }
16433
+
16434
+ .pf-c-progress.pf-m-warning {
16435
+ --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-warning__bar--BackgroundColor);
16436
+ --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-warning__status-icon--Color);
16437
+ --pf-c-progress--m-inside__measure--Color: var(--pf-c-progress--m-warning--m-inside__measure--Color);
16438
+ }
16439
+
16440
+ .pf-c-progress.pf-m-danger {
16441
+ --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-danger__bar--BackgroundColor);
16442
+ --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-danger__status-icon--Color);
16443
+ }
16444
+
16445
+ .pf-c-progress__description {
16446
+ word-break: break-word;
16447
+ grid-column: 1/2;
16448
+ }
16449
+
16450
+ .pf-c-progress__description.pf-m-truncate {
16451
+ overflow: hidden;
16452
+ text-overflow: ellipsis;
16453
+ white-space: nowrap;
16454
+ }
16455
+
16456
+ .pf-c-progress__status {
16457
+ grid-column: 2/3;
16458
+ grid-row: 1/2;
16459
+ text-align: right;
16460
+ word-break: break-word;
16461
+ }
16462
+
16463
+ .pf-c-progress__status-icon {
16464
+ margin-left: var(--pf-c-progress__status-icon--MarginLeft);
16465
+ color: var(--pf-c-progress__status-icon--Color);
16466
+ }
16467
+
16468
+ .pf-c-progress__bar {
16469
+ position: relative;
16470
+ grid-column: 1/3;
16471
+ grid-row: 2/3;
16472
+ align-self: center;
16473
+ height: var(--pf-c-progress__bar--Height);
16474
+ background-color: var(--pf-c-progress__bar--BackgroundColor);
16475
+ }
16476
+
16477
+ .pf-c-progress__bar::before {
16478
+ position: absolute;
16479
+ top: 0;
16480
+ left: 0;
16481
+ width: 100%;
16482
+ height: 100%;
16483
+ content: "";
16484
+ background-color: var(--pf-c-progress__bar--before--BackgroundColor);
16485
+ opacity: var(--pf-c-progress__bar--before--Opacity);
16486
+ }
16487
+
16488
+ .pf-c-progress__indicator {
16489
+ position: absolute;
16490
+ top: 0;
16491
+ left: 0;
16492
+ height: var(--pf-c-progress__indicator--Height);
16493
+ background-color: var(--pf-c-progress__indicator--BackgroundColor);
16494
+ }
16495
+
16496
16496
  .pf-c-search-input {
16497
16497
  --pf-c-search-input__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
16498
16498
  --pf-c-search-input__text--before--BorderColor: var(--pf-global--BorderColor--300);