@patternfly/react-core 4.213.6 → 4.214.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/esm/components/Tabs/TabsContext.d.ts +1 -1
  3. package/dist/esm/components/Tabs/TabsContext.d.ts.map +1 -1
  4. package/dist/js/components/Tabs/TabsContext.d.ts +1 -1
  5. package/dist/js/components/Tabs/TabsContext.d.ts.map +1 -1
  6. package/dist/umd/react-core.css +551 -551
  7. package/package.json +5 -5
  8. package/src/components/Tabs/TabsContext.ts +1 -1
package/dist/umd/react-core.css CHANGED
@@ -8880,71 +8880,6 @@ label.pf-c-check, .pf-c-check__label,
8880
8880
  color: var(--pf-c-helper-text__item-text--Color);
8881
8881
  }
8882
8882
 
8883
- .pf-c-hint {
8884
- --pf-c-hint--GridRowGap: var(--pf-global--spacer--md);
8885
- --pf-c-hint--PaddingTop: var(--pf-global--spacer--lg);
8886
- --pf-c-hint--PaddingRight: var(--pf-global--spacer--lg);
8887
- --pf-c-hint--PaddingBottom: var(--pf-global--spacer--lg);
8888
- --pf-c-hint--PaddingLeft: var(--pf-global--spacer--lg);
8889
- --pf-c-hint--BackgroundColor: var(--pf-global--palette--blue-50);
8890
- --pf-c-hint--BorderColor: var(--pf-global--palette--blue-100);
8891
- --pf-c-hint--BorderWidth: var(--pf-global--BorderWidth--sm);
8892
- --pf-c-hint--BoxShadow: var(--pf-global--BoxShadow--sm);
8893
- --pf-c-hint--Color: var(--pf-global--Color--100);
8894
- --pf-c-hint__title--FontSize: var(--pf-global--FontSize--lg);
8895
- --pf-c-hint__body--FontSize: var(--pf-global--FontSize--md);
8896
- --pf-c-hint__footer--child--MarginRight: var(--pf-global--spacer--md);
8897
- --pf-c-hint__actions--MarginLeft: var(--pf-global--spacer--2xl);
8898
- --pf-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
8899
- display: grid;
8900
- grid-template-columns: 1fr auto;
8901
- grid-row-gap: var(--pf-c-hint--GridRowGap);
8902
- padding: var(--pf-c-hint--PaddingTop) var(--pf-c-hint--PaddingRight) var(--pf-c-hint--PaddingBottom) var(--pf-c-hint--PaddingLeft);
8903
- color: var(--pf-c-hint--Color);
8904
- background-color: var(--pf-c-hint--BackgroundColor);
8905
- border: var(--pf-c-hint--BorderWidth) solid var(--pf-c-hint--BorderColor);
8906
- box-shadow: var(--pf-c-hint--BoxShadow);
8907
- }
8908
-
8909
- .pf-c-hint .pf-c-button.pf-m-link.pf-m-inline {
8910
- text-align: left;
8911
- white-space: normal;
8912
- }
8913
-
8914
- .pf-c-hint__actions {
8915
- display: inline-grid;
8916
- grid-auto-flow: column;
8917
- margin-left: var(--pf-c-hint__actions--MarginLeft);
8918
- text-align: right;
8919
- grid-column: 2;
8920
- grid-row: 1;
8921
- }
8922
-
8923
- .pf-c-hint__actions .pf-c-dropdown .pf-c-dropdown__toggle.pf-m-plain {
8924
- margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
8925
- }
8926
-
8927
- .pf-c-hint__actions + .pf-c-hint__body {
8928
- grid-column: 1;
8929
- }
8930
-
8931
- .pf-c-hint__title {
8932
- font-size: var(--pf-c-hint__title--FontSize);
8933
- }
8934
-
8935
- .pf-c-hint__body {
8936
- grid-column: 1/-1;
8937
- font-size: var(--pf-c-hint__body--FontSize);
8938
- }
8939
-
8940
- .pf-c-hint__footer {
8941
- grid-column: 1/-1;
8942
- }
8943
-
8944
- .pf-c-hint__footer > :not(:last-child) {
8945
- margin-right: var(--pf-c-hint__footer--child--MarginRight);
8946
- }
8947
-
8948
8883
  .pf-c-input-group {
8949
8884
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
8950
8885
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -9343,6 +9278,71 @@ label.pf-c-input-group__text {
9343
9278
  color: var(--pf-c-jump-links__toggle-text--Color);
9344
9279
  }
9345
9280
 
9281
+ .pf-c-hint {
9282
+ --pf-c-hint--GridRowGap: var(--pf-global--spacer--md);
9283
+ --pf-c-hint--PaddingTop: var(--pf-global--spacer--lg);
9284
+ --pf-c-hint--PaddingRight: var(--pf-global--spacer--lg);
9285
+ --pf-c-hint--PaddingBottom: var(--pf-global--spacer--lg);
9286
+ --pf-c-hint--PaddingLeft: var(--pf-global--spacer--lg);
9287
+ --pf-c-hint--BackgroundColor: var(--pf-global--palette--blue-50);
9288
+ --pf-c-hint--BorderColor: var(--pf-global--palette--blue-100);
9289
+ --pf-c-hint--BorderWidth: var(--pf-global--BorderWidth--sm);
9290
+ --pf-c-hint--BoxShadow: var(--pf-global--BoxShadow--sm);
9291
+ --pf-c-hint--Color: var(--pf-global--Color--100);
9292
+ --pf-c-hint__title--FontSize: var(--pf-global--FontSize--lg);
9293
+ --pf-c-hint__body--FontSize: var(--pf-global--FontSize--md);
9294
+ --pf-c-hint__footer--child--MarginRight: var(--pf-global--spacer--md);
9295
+ --pf-c-hint__actions--MarginLeft: var(--pf-global--spacer--2xl);
9296
+ --pf-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
9297
+ display: grid;
9298
+ grid-template-columns: 1fr auto;
9299
+ grid-row-gap: var(--pf-c-hint--GridRowGap);
9300
+ padding: var(--pf-c-hint--PaddingTop) var(--pf-c-hint--PaddingRight) var(--pf-c-hint--PaddingBottom) var(--pf-c-hint--PaddingLeft);
9301
+ color: var(--pf-c-hint--Color);
9302
+ background-color: var(--pf-c-hint--BackgroundColor);
9303
+ border: var(--pf-c-hint--BorderWidth) solid var(--pf-c-hint--BorderColor);
9304
+ box-shadow: var(--pf-c-hint--BoxShadow);
9305
+ }
9306
+
9307
+ .pf-c-hint .pf-c-button.pf-m-link.pf-m-inline {
9308
+ text-align: left;
9309
+ white-space: normal;
9310
+ }
9311
+
9312
+ .pf-c-hint__actions {
9313
+ display: inline-grid;
9314
+ grid-auto-flow: column;
9315
+ margin-left: var(--pf-c-hint__actions--MarginLeft);
9316
+ text-align: right;
9317
+ grid-column: 2;
9318
+ grid-row: 1;
9319
+ }
9320
+
9321
+ .pf-c-hint__actions .pf-c-dropdown .pf-c-dropdown__toggle.pf-m-plain {
9322
+ margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
9323
+ }
9324
+
9325
+ .pf-c-hint__actions + .pf-c-hint__body {
9326
+ grid-column: 1;
9327
+ }
9328
+
9329
+ .pf-c-hint__title {
9330
+ font-size: var(--pf-c-hint__title--FontSize);
9331
+ }
9332
+
9333
+ .pf-c-hint__body {
9334
+ grid-column: 1/-1;
9335
+ font-size: var(--pf-c-hint__body--FontSize);
9336
+ }
9337
+
9338
+ .pf-c-hint__footer {
9339
+ grid-column: 1/-1;
9340
+ }
9341
+
9342
+ .pf-c-hint__footer > :not(:last-child) {
9343
+ margin-right: var(--pf-c-hint__footer--child--MarginRight);
9344
+ }
9345
+
9346
9346
  .pf-c-sidebar {
9347
9347
  --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
9348
9348
  --pf-c-sidebar__main--FlexDirection: column;
@@ -19157,616 +19157,616 @@ svg.pf-c-spinner.pf-m-xl {
19157
19157
  --pf-c-tab-content__body--PaddingLeft: var(--pf-c-tab-content__body--m-padding--PaddingLeft);
19158
19158
  }
19159
19159
 
19160
- .pf-c-content {
19161
- --pf-c-content--MarginBottom: var(--pf-global--spacer--md);
19162
- --pf-c-content--LineHeight: var(--pf-global--LineHeight--md);
19163
- --pf-c-content--FontSize: var(--pf-global--FontSize--md);
19164
- --pf-c-content--FontWeight: var(--pf-global--FontWeight--normal);
19165
- --pf-c-content--Color: var(--pf-global--Color--100);
19166
- --pf-c-content--heading--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
19167
- --pf-c-content--h1--MarginTop: var(--pf-global--spacer--lg);
19168
- --pf-c-content--h1--MarginBottom: var(--pf-global--spacer--sm);
19169
- --pf-c-content--h1--LineHeight: var(--pf-global--LineHeight--sm);
19170
- --pf-c-content--h1--FontSize: var(--pf-global--FontSize--2xl);
19171
- --pf-c-content--h1--FontWeight: var(--pf-global--FontWeight--normal);
19172
- --pf-c-content--h2--MarginTop: var(--pf-global--spacer--lg);
19173
- --pf-c-content--h2--MarginBottom: var(--pf-global--spacer--sm);
19174
- --pf-c-content--h2--LineHeight: var(--pf-global--LineHeight--md);
19175
- --pf-c-content--h2--FontSize: var(--pf-global--FontSize--xl);
19176
- --pf-c-content--h2--FontWeight: var(--pf-global--FontWeight--normal);
19177
- --pf-c-content--h3--MarginTop: var(--pf-global--spacer--lg);
19178
- --pf-c-content--h3--MarginBottom: var(--pf-global--spacer--sm);
19179
- --pf-c-content--h3--LineHeight: var(--pf-global--LineHeight--md);
19180
- --pf-c-content--h3--FontSize: var(--pf-global--FontSize--lg);
19181
- --pf-c-content--h3--FontWeight: var(--pf-global--FontWeight--normal);
19182
- --pf-c-content--h4--MarginTop: var(--pf-global--spacer--lg);
19183
- --pf-c-content--h4--MarginBottom: var(--pf-global--spacer--sm);
19184
- --pf-c-content--h4--LineHeight: var(--pf-global--LineHeight--md);
19185
- --pf-c-content--h4--FontSize: var(--pf-global--FontSize--md);
19186
- --pf-c-content--h4--FontWeight: var(--pf-global--FontWeight--normal);
19187
- --pf-c-content--h5--MarginTop: var(--pf-global--spacer--lg);
19188
- --pf-c-content--h5--MarginBottom: var(--pf-global--spacer--sm);
19189
- --pf-c-content--h5--LineHeight: var(--pf-global--LineHeight--md);
19190
- --pf-c-content--h5--FontSize: var(--pf-global--FontSize--md);
19191
- --pf-c-content--h5--FontWeight: var(--pf-global--FontWeight--normal);
19192
- --pf-c-content--h6--MarginTop: var(--pf-global--spacer--lg);
19193
- --pf-c-content--h6--MarginBottom: var(--pf-global--spacer--sm);
19194
- --pf-c-content--h6--LineHeight: var(--pf-global--LineHeight--md);
19195
- --pf-c-content--h6--FontSize: var(--pf-global--FontSize--md);
19196
- --pf-c-content--h6--FontWeight: var(--pf-global--FontWeight--normal);
19197
- --pf-c-content--small--MarginBottom: var(--pf-global--spacer--md);
19198
- --pf-c-content--small--LineHeight: var(--pf-global--LineHeight--md);
19199
- --pf-c-content--small--FontSize: var(--pf-global--FontSize--sm);
19200
- --pf-c-content--small--Color: var(--pf-global--Color--200);
19201
- --pf-c-content--a--Color: var(--pf-global--link--Color);
19202
- --pf-c-content--a--TextDecoration: var(--pf-global--link--TextDecoration);
19203
- --pf-c-content--a--hover--Color: var(--pf-global--link--Color--hover);
19204
- --pf-c-content--a--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
19205
- --pf-c-content--a--visited--Color: var(--pf-global--link--Color--visited);
19206
- --pf-c-content--blockquote--PaddingTop: var(--pf-global--spacer--md);
19207
- --pf-c-content--blockquote--PaddingRight: var(--pf-global--spacer--md);
19208
- --pf-c-content--blockquote--PaddingBottom: var(--pf-global--spacer--md);
19209
- --pf-c-content--blockquote--PaddingLeft: var(--pf-global--spacer--md);
19210
- --pf-c-content--blockquote--Color: var(--pf-global--Color--200);
19211
- --pf-c-content--blockquote--BorderLeftColor: var(--pf-global--BorderColor--100);
19212
- --pf-c-content--blockquote--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
19213
- --pf-c-content--ol--PaddingLeft: var(--pf-global--spacer--lg);
19214
- --pf-c-content--ol--MarginLeft: var(--pf-global--spacer--lg);
19215
- --pf-c-content--ol--nested--MarginTop: var(--pf-global--spacer--sm);
19216
- --pf-c-content--ol--nested--MarginLeft: var(--pf-global--spacer--sm);
19217
- --pf-c-content--ul--PaddingLeft: var(--pf-global--spacer--lg);
19218
- --pf-c-content--ul--MarginLeft: var(--pf-global--spacer--lg);
19219
- --pf-c-content--ul--nested--MarginTop: var(--pf-global--spacer--sm);
19220
- --pf-c-content--ul--nested--MarginLeft: var(--pf-global--spacer--sm);
19221
- --pf-c-content--ul--ListStyle: var(--pf-global--ListStyle);
19222
- --pf-c-content--li--MarginTop: var(--pf-global--spacer--sm);
19223
- --pf-c-content--dl--ColumnGap: var(--pf-global--spacer--2xl);
19224
- --pf-c-content--dl--RowGap: var(--pf-global--spacer--md);
19225
- --pf-c-content--dt--FontWeight: var(--pf-global--FontWeight--semi-bold);
19226
- --pf-c-content--dt--MarginTop: var(--pf-global--spacer--md);
19227
- --pf-c-content--dt--sm--MarginTop: 0;
19228
- --pf-c-content--hr--Height: var(--pf-global--BorderWidth--sm);
19229
- --pf-c-content--hr--BackgroundColor: var(--pf-global--BorderColor--100);
19230
- font-size: var(--pf-c-content--FontSize);
19231
- line-height: var(--pf-c-content--LineHeight);
19232
- color: var(--pf-c-content--Color);
19160
+ .pf-c-tile {
19161
+ --pf-c-tile--PaddingTop: var(--pf-global--spacer--lg);
19162
+ --pf-c-tile--PaddingRight: var(--pf-global--spacer--lg);
19163
+ --pf-c-tile--PaddingBottom: var(--pf-global--spacer--lg);
19164
+ --pf-c-tile--PaddingLeft: var(--pf-global--spacer--lg);
19165
+ --pf-c-tile--BackgroundColor: var(--pf-global--BackgroundColor--100);
19166
+ --pf-c-tile--Transition: none;
19167
+ --pf-c-tile--TranslateY: 0;
19168
+ --pf-c-tile--before--BorderColor: var(--pf-global--BorderColor--100);
19169
+ --pf-c-tile--before--BorderWidth: var(--pf-global--BorderWidth--sm);
19170
+ --pf-c-tile--after--Height: var(--pf-global--BorderWidth--lg);
19171
+ --pf-c-tile--after--BackgroundColor: transparent;
19172
+ --pf-c-tile--after--Transition: none;
19173
+ --pf-c-tile--after--ScaleY: 1;
19174
+ --pf-c-tile--after--TranslateY: 0;
19175
+ --pf-c-tile__icon--MarginRight: var(--pf-global--spacer--sm);
19176
+ --pf-c-tile__icon--FontSize: var(--pf-global--icon--FontSize--md);
19177
+ --pf-c-tile__icon--Color: var(--pf-global--Color--100);
19178
+ --pf-c-tile__title--Color: var(--pf-global--Color--100);
19179
+ --pf-c-tile__body--Color: var(--pf-global--Color--100);
19180
+ --pf-c-tile__body--FontSize: var(--pf-global--FontSize--xs);
19181
+ --pf-c-tile--hover--after--BackgroundColor: var(--pf-global--active-color--400);
19182
+ --pf-c-tile--hover__icon--Color: var(--pf-global--primary-color--100);
19183
+ --pf-c-tile--hover__title--Color: var(--pf-global--primary-color--100);
19184
+ --pf-c-tile--focus--after--BackgroundColor: var(--pf-global--active-color--400);
19185
+ --pf-c-tile--focus__icon--Color: var(--pf-global--primary-color--100);
19186
+ --pf-c-tile--focus__title--Color: var(--pf-global--primary-color--100);
19187
+ --pf-c-tile--m-selected--TranslateY: calc(-1 * var(--pf-c-tile--m-selected--after--ScaleY) * var(--pf-c-tile--m-selected--after--Height));
19188
+ --pf-c-tile--m-selected--Transition: var(--pf-global--Transition);
19189
+ --pf-c-tile--m-selected--after--Height: var(--pf-global--BorderWidth--lg);
19190
+ --pf-c-tile--m-selected--after--BackgroundColor: var(--pf-global--active-color--100);
19191
+ --pf-c-tile--m-selected--after--Transition: var(--pf-global--Transition);
19192
+ --pf-c-tile--m-selected--after--ScaleY: 2;
19193
+ --pf-c-tile--m-selected__icon--Color: var(--pf-global--primary-color--100);
19194
+ --pf-c-tile--m-selected__title--Color: var(--pf-global--primary-color--100);
19195
+ --pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
19196
+ --pf-c-tile--m-disabled__icon--Color: var(--pf-global--disabled-color--100);
19197
+ --pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--100);
19198
+ --pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--100);
19199
+ --pf-c-tile__header--m-stacked__icon--MarginBottom: var(--pf-global--spacer--xs);
19200
+ --pf-c-tile__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--lg);
19201
+ --pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--xl);
19202
+ position: relative;
19203
+ display: inline-grid;
19204
+ padding: var(--pf-c-tile--PaddingTop) var(--pf-c-tile--PaddingRight) var(--pf-c-tile--PaddingBottom) var(--pf-c-tile--PaddingLeft);
19205
+ text-align: center;
19206
+ cursor: pointer;
19207
+ background-color: var(--pf-c-tile--BackgroundColor);
19208
+ grid-template-rows: min-content;
19209
+ transition: var(--pf-c-tile--Transition);
19210
+ transform: translateY(var(--pf-c-tile--TranslateY));
19233
19211
  }
19234
19212
 
19235
- .pf-c-content a {
19236
- color: var(--pf-c-content--a--Color);
19237
- text-decoration: var(--pf-c-content--a--TextDecoration);
19238
- }
19239
-
19240
- .pf-c-content a:hover {
19241
- --pf-c-content--a--Color: var(--pf-c-content--a--hover--Color);
19242
- --pf-c-content--a--TextDecoration: var(--pf-c-content--a--hover--TextDecoration);
19243
- }
19244
-
19245
- .pf-c-content.pf-m-visited a:visited,
19246
- .pf-c-content a.pf-m-visited:visited {
19247
- color: var(--pf-c-content--a--visited--Color);
19248
- }
19249
-
19250
- .pf-c-content li + li {
19251
- margin-top: var(--pf-c-content--li--MarginTop);
19252
- }
19253
-
19254
- .pf-c-content p:not(:last-child),
19255
- .pf-c-content dl:not(:last-child),
19256
- .pf-c-content ol:not(:last-child),
19257
- .pf-c-content ul:not(:last-child),
19258
- .pf-c-content blockquote:not(:last-child),
19259
- .pf-c-content small:not(:last-child),
19260
- .pf-c-content pre:not(:last-child),
19261
- .pf-c-content table:not(:last-child),
19262
- .pf-c-content hr:not(:last-child) {
19263
- margin-bottom: var(--pf-c-content--MarginBottom);
19264
- }
19265
-
19266
- .pf-c-content h1,
19267
- .pf-c-content h2,
19268
- .pf-c-content h3,
19269
- .pf-c-content h4,
19270
- .pf-c-content h5,
19271
- .pf-c-content h6 {
19272
- margin: 0;
19273
- font-family: var(--pf-c-content--heading--FontFamily);
19274
- }
19275
-
19276
- .pf-c-content h1:first-child,
19277
- .pf-c-content h2:first-child,
19278
- .pf-c-content h3:first-child,
19279
- .pf-c-content h4:first-child,
19280
- .pf-c-content h5:first-child,
19281
- .pf-c-content h6:first-child {
19282
- margin-top: 0;
19213
+ .pf-c-tile::before, .pf-c-tile::after {
19214
+ position: absolute;
19215
+ pointer-events: none;
19216
+ content: "";
19283
19217
  }
19284
19218
 
19285
- .pf-c-content h1:last-child,
19286
- .pf-c-content h2:last-child,
19287
- .pf-c-content h3:last-child,
19288
- .pf-c-content h4:last-child,
19289
- .pf-c-content h5:last-child,
19290
- .pf-c-content h6:last-child {
19291
- margin-bottom: 0;
19219
+ .pf-c-tile::before {
19220
+ top: 0;
19221
+ right: 0;
19222
+ bottom: 0;
19223
+ left: 0;
19224
+ border: var(--pf-c-tile--before--BorderWidth) solid var(--pf-c-tile--before--BorderColor);
19292
19225
  }
19293
19226
 
19294
- .pf-c-content ol,
19295
- .pf-c-content ul {
19296
- margin: 0;
19227
+ .pf-c-tile::after {
19228
+ right: 0;
19229
+ bottom: 0;
19230
+ left: 0;
19231
+ height: var(--pf-c-tile--after--Height);
19232
+ background-color: var(--pf-c-tile--after--BackgroundColor);
19233
+ transition: var(--pf-c-tile--after--Transition);
19234
+ transform: scaleY(var(--pf-c-tile--after--ScaleY)) translateY(var(--pf-c-tile--after--TranslateY));
19297
19235
  }
19298
19236
 
19299
- .pf-c-content h1 {
19300
- margin-top: var(--pf-c-content--h1--MarginTop);
19301
- margin-bottom: var(--pf-c-content--h1--MarginBottom);
19302
- font-size: var(--pf-c-content--h1--FontSize);
19303
- font-weight: var(--pf-c-content--h1--FontWeight);
19304
- line-height: var(--pf-c-content--h1--LineHeight);
19237
+ .pf-c-tile:hover {
19238
+ --pf-c-tile__title--Color: var(--pf-c-tile--hover__title--Color);
19239
+ --pf-c-tile__icon--Color: var(--pf-c-tile--hover__icon--Color);
19240
+ --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--hover--after--BackgroundColor);
19305
19241
  }
19306
19242
 
19307
- .pf-c-content h2 {
19308
- margin-top: var(--pf-c-content--h2--MarginTop);
19309
- margin-bottom: var(--pf-c-content--h2--MarginBottom);
19310
- font-size: var(--pf-c-content--h2--FontSize);
19311
- font-weight: var(--pf-c-content--h2--FontWeight);
19312
- line-height: var(--pf-c-content--h2--LineHeight);
19243
+ .pf-c-tile:focus {
19244
+ --pf-c-tile__title--Color: var(--pf-c-tile--focus__title--Color);
19245
+ --pf-c-tile__icon--Color: var(--pf-c-tile--focus__icon--Color);
19246
+ --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--focus--after--BackgroundColor);
19313
19247
  }
19314
19248
 
19315
- .pf-c-content h3 {
19316
- margin-top: var(--pf-c-content--h3--MarginTop);
19317
- margin-bottom: var(--pf-c-content--h3--MarginBottom);
19318
- font-size: var(--pf-c-content--h3--FontSize);
19319
- font-weight: var(--pf-c-content--h3--FontWeight);
19320
- line-height: var(--pf-c-content--h3--LineHeight);
19249
+ .pf-c-tile:active, .pf-c-tile.pf-m-selected {
19250
+ --pf-c-tile__title--Color: var(--pf-c-tile--m-selected__title--Color);
19251
+ --pf-c-tile__icon--Color: var(--pf-c-tile--m-selected__icon--Color);
19252
+ --pf-c-tile--TranslateY: var(--pf-c-tile--m-selected--TranslateY);
19253
+ --pf-c-tile--Transition: var(--pf-c-tile--m-selected--Transition);
19254
+ --pf-c-tile--after--Height: var(--pf-c-tile--m-selected--after--Height);
19255
+ --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--m-selected--after--BackgroundColor);
19256
+ --pf-c-tile--after--Transition: var(--pf-c-tile--m-selected--after--Transition);
19257
+ --pf-c-tile--after--ScaleY: var(--pf-c-tile--m-selected--after--ScaleY);
19321
19258
  }
19322
19259
 
19323
- .pf-c-content h4 {
19324
- margin-top: var(--pf-c-content--h4--MarginTop);
19325
- margin-bottom: var(--pf-c-content--h4--MarginBottom);
19326
- font-size: var(--pf-c-content--h4--FontSize);
19327
- font-weight: var(--pf-c-content--h4--FontWeight);
19328
- line-height: var(--pf-c-content--h4--LineHeight);
19260
+ .pf-c-tile.pf-m-disabled {
19261
+ --pf-c-tile--BackgroundColor: var(--pf-c-tile--m-disabled--BackgroundColor);
19262
+ --pf-c-tile__title--Color: var(--pf-c-tile--m-disabled__title--Color);
19263
+ --pf-c-tile__body--Color: var(--pf-c-tile--m-disabled__body--Color);
19264
+ --pf-c-tile--before--BorderWidth: 0;
19265
+ --pf-c-tile__icon--Color: var(--pf-c-tile--m-disabled__icon--Color);
19266
+ pointer-events: none;
19329
19267
  }
19330
19268
 
19331
- .pf-c-content h5 {
19332
- margin-top: var(--pf-c-content--h5--MarginTop);
19333
- margin-bottom: var(--pf-c-content--h5--MarginBottom);
19334
- font-size: var(--pf-c-content--h5--FontSize);
19335
- font-weight: var(--pf-c-content--h5--FontWeight);
19336
- line-height: var(--pf-c-content--h5--LineHeight);
19269
+ .pf-c-tile.pf-m-display-lg .pf-c-tile__header.pf-m-stacked {
19270
+ --pf-c-tile__icon--FontSize: var(--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize);
19337
19271
  }
19338
19272
 
19339
- .pf-c-content h6 {
19340
- margin-top: var(--pf-c-content--h6--MarginTop);
19341
- margin-bottom: var(--pf-c-content--h6--MarginBottom);
19342
- font-size: var(--pf-c-content--h6--FontSize);
19343
- font-weight: var(--pf-c-content--h6--FontWeight);
19344
- line-height: var(--pf-c-content--h6--LineHeight);
19273
+ .pf-c-tile__header {
19274
+ display: flex;
19275
+ align-items: center;
19276
+ justify-content: center;
19345
19277
  }
19346
19278
 
19347
- .pf-c-content small {
19348
- display: block;
19349
- font-size: var(--pf-c-content--small--FontSize);
19350
- line-height: var(--pf-c-content--small--LineHeight);
19351
- color: var(--pf-c-content--small--Color);
19279
+ .pf-c-tile__header.pf-m-stacked {
19280
+ --pf-c-tile__icon--MarginRight: 0;
19281
+ --pf-c-tile__icon--FontSize: var(--pf-c-tile__header--m-stacked__icon--FontSize);
19282
+ flex-direction: column;
19283
+ justify-content: initial;
19352
19284
  }
19353
19285
 
19354
- .pf-c-content small:not(:last-child) {
19355
- margin-bottom: var(--pf-c-content--small--MarginBottom);
19286
+ .pf-c-tile__header.pf-m-stacked .pf-c-tile__icon {
19287
+ display: flex;
19288
+ align-items: center;
19289
+ justify-content: center;
19290
+ margin-bottom: var(--pf-c-tile__header--m-stacked__icon--MarginBottom);
19356
19291
  }
19357
19292
 
19358
- .pf-c-content blockquote {
19359
- padding: var(--pf-c-content--blockquote--PaddingTop) var(--pf-c-content--blockquote--PaddingRight) var(--pf-c-content--blockquote--PaddingBottom) var(--pf-c-content--blockquote--PaddingLeft);
19360
- color: var(--pf-c-content--blockquote--Color);
19361
- border-left: var(--pf-c-content--blockquote--BorderLeftWidth) solid var(--pf-c-content--blockquote--BorderLeftColor);
19293
+ .pf-c-tile__title {
19294
+ color: var(--pf-c-tile__title--Color);
19362
19295
  }
19363
19296
 
19364
- .pf-c-content hr {
19365
- height: var(--pf-c-content--hr--Height);
19366
- background-color: var(--pf-c-content--hr--BackgroundColor);
19367
- border: none;
19297
+ .pf-c-tile__body {
19298
+ font-size: var(--pf-c-tile__body--FontSize);
19299
+ color: var(--pf-c-tile__body--Color);
19368
19300
  }
19369
19301
 
19370
- .pf-c-content ol {
19371
- padding-left: var(--pf-c-content--ol--PaddingLeft);
19372
- margin-left: var(--pf-c-content--ol--MarginLeft);
19302
+ .pf-c-tile__icon {
19303
+ margin-right: var(--pf-c-tile__icon--MarginRight);
19304
+ font-size: var(--pf-c-tile__icon--FontSize);
19305
+ color: var(--pf-c-tile__icon--Color);
19373
19306
  }
19374
19307
 
19375
- .pf-c-content ol ul {
19376
- margin-top: var(--pf-c-content--ul--nested--MarginTop);
19377
- --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft);
19308
+ .pf-c-title {
19309
+ --pf-c-title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
19310
+ --pf-c-title--m-4xl--LineHeight: var(--pf-global--LineHeight--sm);
19311
+ --pf-c-title--m-4xl--FontSize: var(--pf-global--FontSize--4xl);
19312
+ --pf-c-title--m-4xl--FontWeight: var(--pf-global--FontWeight--normal);
19313
+ --pf-c-title--m-3xl--LineHeight: var(--pf-global--LineHeight--sm);
19314
+ --pf-c-title--m-3xl--FontSize: var(--pf-global--FontSize--3xl);
19315
+ --pf-c-title--m-3xl--FontWeight: var(--pf-global--FontWeight--normal);
19316
+ --pf-c-title--m-2xl--LineHeight: var(--pf-global--LineHeight--sm);
19317
+ --pf-c-title--m-2xl--FontSize: var(--pf-global--FontSize--2xl);
19318
+ --pf-c-title--m-2xl--FontWeight: var(--pf-global--FontWeight--normal);
19319
+ --pf-c-title--m-xl--LineHeight: var(--pf-global--LineHeight--md);
19320
+ --pf-c-title--m-xl--FontSize: var(--pf-global--FontSize--xl);
19321
+ --pf-c-title--m-xl--FontWeight: var(--pf-global--FontWeight--normal);
19322
+ --pf-c-title--m-lg--LineHeight: var(--pf-global--LineHeight--md);
19323
+ --pf-c-title--m-lg--FontSize: var(--pf-global--FontSize--lg);
19324
+ --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--normal);
19325
+ --pf-c-title--m-md--LineHeight: var(--pf-global--LineHeight--md);
19326
+ --pf-c-title--m-md--FontSize: var(--pf-global--FontSize--md);
19327
+ --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--normal);
19328
+ font-family: var(--pf-c-title--FontFamily);
19329
+ word-break: break-word;
19378
19330
  }
19379
19331
 
19380
- .pf-c-content ol ol {
19381
- margin-top: var(--pf-c-content--ol--nested--MarginTop);
19382
- --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft);
19332
+ .pf-c-title.pf-m-4xl {
19333
+ font-size: var(--pf-c-title--m-4xl--FontSize);
19334
+ font-weight: var(--pf-c-title--m-4xl--FontWeight);
19335
+ line-height: var(--pf-c-title--m-4xl--LineHeight);
19383
19336
  }
19384
19337
 
19385
- .pf-c-content ul {
19386
- padding-left: var(--pf-c-content--ul--PaddingLeft);
19387
- margin-left: var(--pf-c-content--ul--MarginLeft);
19388
- list-style: var(--pf-c-content--ul--ListStyle);
19338
+ .pf-c-title.pf-m-3xl {
19339
+ font-size: var(--pf-c-title--m-3xl--FontSize);
19340
+ font-weight: var(--pf-c-title--m-3xl--FontWeight);
19341
+ line-height: var(--pf-c-title--m-3xl--LineHeight);
19389
19342
  }
19390
19343
 
19391
- .pf-c-content ul ul {
19392
- margin-top: var(--pf-c-content--ul--nested--MarginTop);
19393
- --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft);
19344
+ .pf-c-title.pf-m-2xl {
19345
+ font-size: var(--pf-c-title--m-2xl--FontSize);
19346
+ font-weight: var(--pf-c-title--m-2xl--FontWeight);
19347
+ line-height: var(--pf-c-title--m-2xl--LineHeight);
19394
19348
  }
19395
19349
 
19396
- .pf-c-content ul ol {
19397
- margin-top: var(--pf-c-content--ol--nested--MarginTop);
19398
- --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft);
19350
+ .pf-c-title.pf-m-xl {
19351
+ font-size: var(--pf-c-title--m-xl--FontSize);
19352
+ font-weight: var(--pf-c-title--m-xl--FontWeight);
19353
+ line-height: var(--pf-c-title--m-xl--LineHeight);
19399
19354
  }
19400
19355
 
19401
- .pf-c-content dl {
19402
- display: grid;
19403
- grid-template-columns: 1fr;
19356
+ .pf-c-title.pf-m-lg {
19357
+ font-size: var(--pf-c-title--m-lg--FontSize);
19358
+ font-weight: var(--pf-c-title--m-lg--FontWeight);
19359
+ line-height: var(--pf-c-title--m-lg--LineHeight);
19404
19360
  }
19405
19361
 
19406
- @media screen and (min-width: 576px) {
19407
- .pf-c-content dl {
19408
- grid-template: auto/auto 1fr;
19409
- grid-column-gap: var(--pf-c-content--dl--ColumnGap);
19410
- grid-row-gap: var(--pf-c-content--dl--RowGap);
19411
- }
19412
- }
19413
- .pf-c-content dt {
19414
- font-weight: var(--pf-c-content--dt--FontWeight);
19362
+ .pf-c-title.pf-m-md {
19363
+ font-size: var(--pf-c-title--m-md--FontSize);
19364
+ font-weight: var(--pf-c-title--m-md--FontWeight);
19365
+ line-height: var(--pf-c-title--m-md--LineHeight);
19415
19366
  }
19416
19367
 
19417
- .pf-c-content dt:not(:first-child) {
19418
- margin-top: var(--pf-c-content--dt--MarginTop);
19368
+ .pf-m-overpass-font .pf-c-title {
19369
+ --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--semi-bold);
19370
+ --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--semi-bold);
19419
19371
  }
19420
19372
 
19421
- @media screen and (min-width: 576px) {
19422
- .pf-c-content dt:not(:first-child) {
19423
- --pf-c-content--dt--MarginTop: var(--pf-c-content--dt--sm--MarginTop);
19424
- }
19373
+ .pf-c-toggle-group {
19374
+ --pf-c-toggle-group__button--PaddingTop: var(--pf-global--spacer--form-element);
19375
+ --pf-c-toggle-group__button--PaddingRight: var(--pf-global--spacer--md);
19376
+ --pf-c-toggle-group__button--PaddingBottom: var(--pf-global--spacer--form-element);
19377
+ --pf-c-toggle-group__button--PaddingLeft: var(--pf-global--spacer--md);
19378
+ --pf-c-toggle-group__button--FontSize: var(--pf-global--FontSize--sm);
19379
+ --pf-c-toggle-group__button--LineHeight: calc(var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md));
19380
+ --pf-c-toggle-group__button--Color: var(--pf-global--Color--100);
19381
+ --pf-c-toggle-group__button--BackgroundColor: var(--pf-global--BackgroundColor--100);
19382
+ --pf-c-toggle-group__button--ZIndex: auto;
19383
+ --pf-c-toggle-group__button--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
19384
+ --pf-c-toggle-group__button--hover--ZIndex: var(--pf-global--ZIndex--xs);
19385
+ --pf-c-toggle-group__button--hover--before--BorderColor: var(--pf-global--BorderColor--200);
19386
+ --pf-c-toggle-group__button--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
19387
+ --pf-c-toggle-group__button--focus--ZIndex: var(--pf-global--ZIndex--xs);
19388
+ --pf-c-toggle-group__button--focus--before--BorderColor: var(--pf-global--BorderColor--200);
19389
+ --pf-c-toggle-group__button--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
19390
+ --pf-c-toggle-group__button--disabled--Color: var(--pf-global--disabled-color--100);
19391
+ --pf-c-toggle-group__button--before--BorderWidth: var(--pf-global--BorderWidth--sm);
19392
+ --pf-c-toggle-group__button--before--BorderColor: var(--pf-global--BorderColor--100);
19393
+ --pf-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-global--BorderWidth--sm));
19394
+ --pf-c-toggle-group__item--first-child__button--BorderTopLeftRadius: var(--pf-global--BorderRadius--sm);
19395
+ --pf-c-toggle-group__item--first-child__button--BorderBottomLeftRadius: var(--pf-global--BorderRadius--sm);
19396
+ --pf-c-toggle-group__item--last-child__button--BorderTopRightRadius: var(--pf-global--BorderRadius--sm);
19397
+ --pf-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-global--BorderRadius--sm);
19398
+ --pf-c-toggle-group__icon--text--MarginLeft: var(--pf-global--spacer--sm);
19399
+ --pf-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-global--palette--blue-50);
19400
+ --pf-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-global--primary-color--100);
19401
+ --pf-c-toggle-group__button--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
19402
+ --pf-c-toggle-group--m-compact__button--PaddingTop: 0;
19403
+ --pf-c-toggle-group--m-compact__button--PaddingRight: var(--pf-global--spacer--sm);
19404
+ --pf-c-toggle-group--m-compact__button--PaddingBottom: 0;
19405
+ --pf-c-toggle-group--m-compact__button--PaddingLeft: var(--pf-global--spacer--sm);
19406
+ --pf-c-toggle-group--m-compact__button--FontSize: var(--pf-global--FontSize--xs);
19407
+ display: flex;
19425
19408
  }
19426
- @media screen and (min-width: 576px) {
19427
- .pf-c-content dt {
19428
- grid-column: 1;
19429
- }
19409
+
19410
+ .pf-c-toggle-group.pf-m-compact {
19411
+ --pf-c-toggle-group__button--PaddingTop: var(--pf-c-toggle-group--m-compact__button--PaddingTop);
19412
+ --pf-c-toggle-group__button--PaddingRight: var(--pf-c-toggle-group--m-compact__button--PaddingRight);
19413
+ --pf-c-toggle-group__button--PaddingBottom: var(--pf-c-toggle-group--m-compact__button--PaddingBottom);
19414
+ --pf-c-toggle-group__button--PaddingLeft: var(--pf-c-toggle-group--m-compact__button--PaddingLeft);
19415
+ --pf-c-toggle-group__button--FontSize: var(--pf-c-toggle-group--m-compact__button--FontSize);
19430
19416
  }
19431
- @media screen and (min-width: 576px) {
19432
- .pf-c-content dd {
19433
- grid-column: 2;
19434
- }
19417
+
19418
+ .pf-c-toggle-group__item + .pf-c-toggle-group__item {
19419
+ margin-left: var(--pf-c-toggle-group__item--item--MarginLeft);
19435
19420
  }
19436
- .pf-m-overpass-font .pf-c-content {
19437
- --pf-c-content--h2--LineHeight: var(--pf-global--LineHeight--sm);
19438
- --pf-c-content--h4--FontWeight: var(--pf-global--FontWeight--semi-bold);
19439
- --pf-c-content--h5--FontWeight: var(--pf-global--FontWeight--semi-bold);
19440
- --pf-c-content--h6--FontWeight: var(--pf-global--FontWeight--semi-bold);
19421
+
19422
+ .pf-c-toggle-group__item:first-child .pf-c-toggle-group__button, .pf-c-toggle-group__item:first-child .pf-c-toggle-group__button::before {
19423
+ border-top-left-radius: var(--pf-c-toggle-group__item--first-child__button--BorderTopLeftRadius);
19424
+ border-bottom-left-radius: var(--pf-c-toggle-group__item--first-child__button--BorderBottomLeftRadius);
19441
19425
  }
19442
19426
 
19443
- .pf-m-overpass-font .pf-c-content blockquote {
19444
- font-weight: var(--pf-global--FontWeight--light);
19427
+ .pf-c-toggle-group__item:last-child .pf-c-toggle-group__button, .pf-c-toggle-group__item:last-child .pf-c-toggle-group__button::before {
19428
+ border-top-right-radius: var(--pf-c-toggle-group__item--last-child__button--BorderTopRightRadius);
19429
+ border-bottom-right-radius: var(--pf-c-toggle-group__item--last-child__button--BorderBottomRightRadius);
19445
19430
  }
19446
19431
 
19447
- .pf-c-tile {
19448
- --pf-c-tile--PaddingTop: var(--pf-global--spacer--lg);
19449
- --pf-c-tile--PaddingRight: var(--pf-global--spacer--lg);
19450
- --pf-c-tile--PaddingBottom: var(--pf-global--spacer--lg);
19451
- --pf-c-tile--PaddingLeft: var(--pf-global--spacer--lg);
19452
- --pf-c-tile--BackgroundColor: var(--pf-global--BackgroundColor--100);
19453
- --pf-c-tile--Transition: none;
19454
- --pf-c-tile--TranslateY: 0;
19455
- --pf-c-tile--before--BorderColor: var(--pf-global--BorderColor--100);
19456
- --pf-c-tile--before--BorderWidth: var(--pf-global--BorderWidth--sm);
19457
- --pf-c-tile--after--Height: var(--pf-global--BorderWidth--lg);
19458
- --pf-c-tile--after--BackgroundColor: transparent;
19459
- --pf-c-tile--after--Transition: none;
19460
- --pf-c-tile--after--ScaleY: 1;
19461
- --pf-c-tile--after--TranslateY: 0;
19462
- --pf-c-tile__icon--MarginRight: var(--pf-global--spacer--sm);
19463
- --pf-c-tile__icon--FontSize: var(--pf-global--icon--FontSize--md);
19464
- --pf-c-tile__icon--Color: var(--pf-global--Color--100);
19465
- --pf-c-tile__title--Color: var(--pf-global--Color--100);
19466
- --pf-c-tile__body--Color: var(--pf-global--Color--100);
19467
- --pf-c-tile__body--FontSize: var(--pf-global--FontSize--xs);
19468
- --pf-c-tile--hover--after--BackgroundColor: var(--pf-global--active-color--400);
19469
- --pf-c-tile--hover__icon--Color: var(--pf-global--primary-color--100);
19470
- --pf-c-tile--hover__title--Color: var(--pf-global--primary-color--100);
19471
- --pf-c-tile--focus--after--BackgroundColor: var(--pf-global--active-color--400);
19472
- --pf-c-tile--focus__icon--Color: var(--pf-global--primary-color--100);
19473
- --pf-c-tile--focus__title--Color: var(--pf-global--primary-color--100);
19474
- --pf-c-tile--m-selected--TranslateY: calc(-1 * var(--pf-c-tile--m-selected--after--ScaleY) * var(--pf-c-tile--m-selected--after--Height));
19475
- --pf-c-tile--m-selected--Transition: var(--pf-global--Transition);
19476
- --pf-c-tile--m-selected--after--Height: var(--pf-global--BorderWidth--lg);
19477
- --pf-c-tile--m-selected--after--BackgroundColor: var(--pf-global--active-color--100);
19478
- --pf-c-tile--m-selected--after--Transition: var(--pf-global--Transition);
19479
- --pf-c-tile--m-selected--after--ScaleY: 2;
19480
- --pf-c-tile--m-selected__icon--Color: var(--pf-global--primary-color--100);
19481
- --pf-c-tile--m-selected__title--Color: var(--pf-global--primary-color--100);
19482
- --pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
19483
- --pf-c-tile--m-disabled__icon--Color: var(--pf-global--disabled-color--100);
19484
- --pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--100);
19485
- --pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--100);
19486
- --pf-c-tile__header--m-stacked__icon--MarginBottom: var(--pf-global--spacer--xs);
19487
- --pf-c-tile__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--lg);
19488
- --pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--xl);
19432
+ .pf-c-toggle-group__button {
19489
19433
  position: relative;
19490
- display: inline-grid;
19491
- padding: var(--pf-c-tile--PaddingTop) var(--pf-c-tile--PaddingRight) var(--pf-c-tile--PaddingBottom) var(--pf-c-tile--PaddingLeft);
19492
- text-align: center;
19493
- cursor: pointer;
19494
- background-color: var(--pf-c-tile--BackgroundColor);
19495
- grid-template-rows: min-content;
19496
- transition: var(--pf-c-tile--Transition);
19497
- transform: translateY(var(--pf-c-tile--TranslateY));
19434
+ z-index: var(--pf-c-toggle-group__button--ZIndex);
19435
+ display: inline-flex;
19436
+ padding: var(--pf-c-toggle-group__button--PaddingTop) var(--pf-c-toggle-group__button--PaddingRight) var(--pf-c-toggle-group__button--PaddingBottom) var(--pf-c-toggle-group__button--PaddingLeft);
19437
+ font-size: var(--pf-c-toggle-group__button--FontSize);
19438
+ line-height: var(--pf-c-toggle-group__button--LineHeight);
19439
+ color: var(--pf-c-toggle-group__button--Color);
19440
+ background-color: var(--pf-c-toggle-group__button--BackgroundColor);
19441
+ border: 0;
19498
19442
  }
19499
19443
 
19500
- .pf-c-tile::before, .pf-c-tile::after {
19444
+ .pf-c-toggle-group__button::before {
19501
19445
  position: absolute;
19502
- pointer-events: none;
19503
- content: "";
19504
- }
19505
-
19506
- .pf-c-tile::before {
19507
19446
  top: 0;
19508
19447
  right: 0;
19509
19448
  bottom: 0;
19510
19449
  left: 0;
19511
- border: var(--pf-c-tile--before--BorderWidth) solid var(--pf-c-tile--before--BorderColor);
19450
+ pointer-events: none;
19451
+ content: "";
19452
+ border: var(--pf-c-toggle-group__button--before--BorderWidth) solid var(--pf-c-toggle-group__button--before--BorderColor);
19512
19453
  }
19513
19454
 
19514
- .pf-c-tile::after {
19515
- right: 0;
19516
- bottom: 0;
19517
- left: 0;
19518
- height: var(--pf-c-tile--after--Height);
19519
- background-color: var(--pf-c-tile--after--BackgroundColor);
19520
- transition: var(--pf-c-tile--after--Transition);
19521
- transform: scaleY(var(--pf-c-tile--after--ScaleY)) translateY(var(--pf-c-tile--after--TranslateY));
19455
+ .pf-c-toggle-group__button:hover {
19456
+ --pf-c-toggle-group__button--BackgroundColor: var(--pf-c-toggle-group__button--hover--BackgroundColor);
19457
+ --pf-c-toggle-group__button--ZIndex: var(--pf-c-toggle-group__button--hover--ZIndex);
19458
+ --pf-c-toggle-group__button--before--BorderColor: var(--pf-c-toggle-group__button--hover--before--BorderColor);
19459
+ text-decoration: none;
19522
19460
  }
19523
19461
 
19524
- .pf-c-tile:hover {
19525
- --pf-c-tile__title--Color: var(--pf-c-tile--hover__title--Color);
19526
- --pf-c-tile__icon--Color: var(--pf-c-tile--hover__icon--Color);
19527
- --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--hover--after--BackgroundColor);
19462
+ .pf-c-toggle-group__button:focus {
19463
+ --pf-c-toggle-group__button--BackgroundColor: var(--pf-c-toggle-group__button--focus--BackgroundColor);
19464
+ --pf-c-toggle-group__button--ZIndex: var(--pf-c-toggle-group__button--focus--ZIndex);
19465
+ --pf-c-toggle-group__button--before--BorderColor: var(--pf-c-toggle-group__button--focus--before--BorderColor);
19528
19466
  }
19529
19467
 
19530
- .pf-c-tile:focus {
19531
- --pf-c-tile__title--Color: var(--pf-c-tile--focus__title--Color);
19532
- --pf-c-tile__icon--Color: var(--pf-c-tile--focus__icon--Color);
19533
- --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--focus--after--BackgroundColor);
19468
+ .pf-c-toggle-group__button.pf-m-selected {
19469
+ --pf-c-toggle-group__button--BackgroundColor: var(--pf-c-toggle-group__button--m-selected--BackgroundColor);
19470
+ --pf-c-toggle-group__button--ZIndex: var(--pf-c-toggle-group__button--m-selected--ZIndex);
19471
+ --pf-c-toggle-group__button--before--BorderColor: var(--pf-c-toggle-group__button--m-selected--before--BorderColor);
19534
19472
  }
19535
19473
 
19536
- .pf-c-tile:active, .pf-c-tile.pf-m-selected {
19537
- --pf-c-tile__title--Color: var(--pf-c-tile--m-selected__title--Color);
19538
- --pf-c-tile__icon--Color: var(--pf-c-tile--m-selected__icon--Color);
19539
- --pf-c-tile--TranslateY: var(--pf-c-tile--m-selected--TranslateY);
19540
- --pf-c-tile--Transition: var(--pf-c-tile--m-selected--Transition);
19541
- --pf-c-tile--after--Height: var(--pf-c-tile--m-selected--after--Height);
19542
- --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--m-selected--after--BackgroundColor);
19543
- --pf-c-tile--after--Transition: var(--pf-c-tile--m-selected--after--Transition);
19544
- --pf-c-tile--after--ScaleY: var(--pf-c-tile--m-selected--after--ScaleY);
19474
+ .pf-c-toggle-group__button:disabled, .pf-c-toggle-group__button.pf-m-disabled {
19475
+ --pf-c-toggle-group__button--BackgroundColor: var(--pf-c-toggle-group__button--disabled--BackgroundColor);
19476
+ --pf-c-toggle-group__button--Color: var(--pf-c-toggle-group__button--disabled--Color);
19477
+ pointer-events: none;
19545
19478
  }
19546
19479
 
19547
- .pf-c-tile.pf-m-disabled {
19548
- --pf-c-tile--BackgroundColor: var(--pf-c-tile--m-disabled--BackgroundColor);
19549
- --pf-c-tile__title--Color: var(--pf-c-tile--m-disabled__title--Color);
19550
- --pf-c-tile__body--Color: var(--pf-c-tile--m-disabled__body--Color);
19551
- --pf-c-tile--before--BorderWidth: 0;
19552
- --pf-c-tile__icon--Color: var(--pf-c-tile--m-disabled__icon--Color);
19553
- pointer-events: none;
19480
+ .pf-c-toggle-group__icon + .pf-c-toggle-group__text,
19481
+ .pf-c-toggle-group__text + .pf-c-toggle-group__icon {
19482
+ margin-left: var(--pf-c-toggle-group__icon--text--MarginLeft);
19554
19483
  }
19555
19484
 
19556
- .pf-c-tile.pf-m-display-lg .pf-c-tile__header.pf-m-stacked {
19557
- --pf-c-tile__icon--FontSize: var(--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize);
19485
+ .pf-c-content {
19486
+ --pf-c-content--MarginBottom: var(--pf-global--spacer--md);
19487
+ --pf-c-content--LineHeight: var(--pf-global--LineHeight--md);
19488
+ --pf-c-content--FontSize: var(--pf-global--FontSize--md);
19489
+ --pf-c-content--FontWeight: var(--pf-global--FontWeight--normal);
19490
+ --pf-c-content--Color: var(--pf-global--Color--100);
19491
+ --pf-c-content--heading--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
19492
+ --pf-c-content--h1--MarginTop: var(--pf-global--spacer--lg);
19493
+ --pf-c-content--h1--MarginBottom: var(--pf-global--spacer--sm);
19494
+ --pf-c-content--h1--LineHeight: var(--pf-global--LineHeight--sm);
19495
+ --pf-c-content--h1--FontSize: var(--pf-global--FontSize--2xl);
19496
+ --pf-c-content--h1--FontWeight: var(--pf-global--FontWeight--normal);
19497
+ --pf-c-content--h2--MarginTop: var(--pf-global--spacer--lg);
19498
+ --pf-c-content--h2--MarginBottom: var(--pf-global--spacer--sm);
19499
+ --pf-c-content--h2--LineHeight: var(--pf-global--LineHeight--md);
19500
+ --pf-c-content--h2--FontSize: var(--pf-global--FontSize--xl);
19501
+ --pf-c-content--h2--FontWeight: var(--pf-global--FontWeight--normal);
19502
+ --pf-c-content--h3--MarginTop: var(--pf-global--spacer--lg);
19503
+ --pf-c-content--h3--MarginBottom: var(--pf-global--spacer--sm);
19504
+ --pf-c-content--h3--LineHeight: var(--pf-global--LineHeight--md);
19505
+ --pf-c-content--h3--FontSize: var(--pf-global--FontSize--lg);
19506
+ --pf-c-content--h3--FontWeight: var(--pf-global--FontWeight--normal);
19507
+ --pf-c-content--h4--MarginTop: var(--pf-global--spacer--lg);
19508
+ --pf-c-content--h4--MarginBottom: var(--pf-global--spacer--sm);
19509
+ --pf-c-content--h4--LineHeight: var(--pf-global--LineHeight--md);
19510
+ --pf-c-content--h4--FontSize: var(--pf-global--FontSize--md);
19511
+ --pf-c-content--h4--FontWeight: var(--pf-global--FontWeight--normal);
19512
+ --pf-c-content--h5--MarginTop: var(--pf-global--spacer--lg);
19513
+ --pf-c-content--h5--MarginBottom: var(--pf-global--spacer--sm);
19514
+ --pf-c-content--h5--LineHeight: var(--pf-global--LineHeight--md);
19515
+ --pf-c-content--h5--FontSize: var(--pf-global--FontSize--md);
19516
+ --pf-c-content--h5--FontWeight: var(--pf-global--FontWeight--normal);
19517
+ --pf-c-content--h6--MarginTop: var(--pf-global--spacer--lg);
19518
+ --pf-c-content--h6--MarginBottom: var(--pf-global--spacer--sm);
19519
+ --pf-c-content--h6--LineHeight: var(--pf-global--LineHeight--md);
19520
+ --pf-c-content--h6--FontSize: var(--pf-global--FontSize--md);
19521
+ --pf-c-content--h6--FontWeight: var(--pf-global--FontWeight--normal);
19522
+ --pf-c-content--small--MarginBottom: var(--pf-global--spacer--md);
19523
+ --pf-c-content--small--LineHeight: var(--pf-global--LineHeight--md);
19524
+ --pf-c-content--small--FontSize: var(--pf-global--FontSize--sm);
19525
+ --pf-c-content--small--Color: var(--pf-global--Color--200);
19526
+ --pf-c-content--a--Color: var(--pf-global--link--Color);
19527
+ --pf-c-content--a--TextDecoration: var(--pf-global--link--TextDecoration);
19528
+ --pf-c-content--a--hover--Color: var(--pf-global--link--Color--hover);
19529
+ --pf-c-content--a--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
19530
+ --pf-c-content--a--visited--Color: var(--pf-global--link--Color--visited);
19531
+ --pf-c-content--blockquote--PaddingTop: var(--pf-global--spacer--md);
19532
+ --pf-c-content--blockquote--PaddingRight: var(--pf-global--spacer--md);
19533
+ --pf-c-content--blockquote--PaddingBottom: var(--pf-global--spacer--md);
19534
+ --pf-c-content--blockquote--PaddingLeft: var(--pf-global--spacer--md);
19535
+ --pf-c-content--blockquote--Color: var(--pf-global--Color--200);
19536
+ --pf-c-content--blockquote--BorderLeftColor: var(--pf-global--BorderColor--100);
19537
+ --pf-c-content--blockquote--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
19538
+ --pf-c-content--ol--PaddingLeft: var(--pf-global--spacer--lg);
19539
+ --pf-c-content--ol--MarginLeft: var(--pf-global--spacer--lg);
19540
+ --pf-c-content--ol--nested--MarginTop: var(--pf-global--spacer--sm);
19541
+ --pf-c-content--ol--nested--MarginLeft: var(--pf-global--spacer--sm);
19542
+ --pf-c-content--ul--PaddingLeft: var(--pf-global--spacer--lg);
19543
+ --pf-c-content--ul--MarginLeft: var(--pf-global--spacer--lg);
19544
+ --pf-c-content--ul--nested--MarginTop: var(--pf-global--spacer--sm);
19545
+ --pf-c-content--ul--nested--MarginLeft: var(--pf-global--spacer--sm);
19546
+ --pf-c-content--ul--ListStyle: var(--pf-global--ListStyle);
19547
+ --pf-c-content--li--MarginTop: var(--pf-global--spacer--sm);
19548
+ --pf-c-content--dl--ColumnGap: var(--pf-global--spacer--2xl);
19549
+ --pf-c-content--dl--RowGap: var(--pf-global--spacer--md);
19550
+ --pf-c-content--dt--FontWeight: var(--pf-global--FontWeight--semi-bold);
19551
+ --pf-c-content--dt--MarginTop: var(--pf-global--spacer--md);
19552
+ --pf-c-content--dt--sm--MarginTop: 0;
19553
+ --pf-c-content--hr--Height: var(--pf-global--BorderWidth--sm);
19554
+ --pf-c-content--hr--BackgroundColor: var(--pf-global--BorderColor--100);
19555
+ font-size: var(--pf-c-content--FontSize);
19556
+ line-height: var(--pf-c-content--LineHeight);
19557
+ color: var(--pf-c-content--Color);
19558
19558
  }
19559
19559
 
19560
- .pf-c-tile__header {
19561
- display: flex;
19562
- align-items: center;
19563
- justify-content: center;
19560
+ .pf-c-content a {
19561
+ color: var(--pf-c-content--a--Color);
19562
+ text-decoration: var(--pf-c-content--a--TextDecoration);
19564
19563
  }
19565
19564
 
19566
- .pf-c-tile__header.pf-m-stacked {
19567
- --pf-c-tile__icon--MarginRight: 0;
19568
- --pf-c-tile__icon--FontSize: var(--pf-c-tile__header--m-stacked__icon--FontSize);
19569
- flex-direction: column;
19570
- justify-content: initial;
19565
+ .pf-c-content a:hover {
19566
+ --pf-c-content--a--Color: var(--pf-c-content--a--hover--Color);
19567
+ --pf-c-content--a--TextDecoration: var(--pf-c-content--a--hover--TextDecoration);
19571
19568
  }
19572
19569
 
19573
- .pf-c-tile__header.pf-m-stacked .pf-c-tile__icon {
19574
- display: flex;
19575
- align-items: center;
19576
- justify-content: center;
19577
- margin-bottom: var(--pf-c-tile__header--m-stacked__icon--MarginBottom);
19570
+ .pf-c-content.pf-m-visited a:visited,
19571
+ .pf-c-content a.pf-m-visited:visited {
19572
+ color: var(--pf-c-content--a--visited--Color);
19573
+ }
19574
+
19575
+ .pf-c-content li + li {
19576
+ margin-top: var(--pf-c-content--li--MarginTop);
19577
+ }
19578
+
19579
+ .pf-c-content p:not(:last-child),
19580
+ .pf-c-content dl:not(:last-child),
19581
+ .pf-c-content ol:not(:last-child),
19582
+ .pf-c-content ul:not(:last-child),
19583
+ .pf-c-content blockquote:not(:last-child),
19584
+ .pf-c-content small:not(:last-child),
19585
+ .pf-c-content pre:not(:last-child),
19586
+ .pf-c-content table:not(:last-child),
19587
+ .pf-c-content hr:not(:last-child) {
19588
+ margin-bottom: var(--pf-c-content--MarginBottom);
19589
+ }
19590
+
19591
+ .pf-c-content h1,
19592
+ .pf-c-content h2,
19593
+ .pf-c-content h3,
19594
+ .pf-c-content h4,
19595
+ .pf-c-content h5,
19596
+ .pf-c-content h6 {
19597
+ margin: 0;
19598
+ font-family: var(--pf-c-content--heading--FontFamily);
19599
+ }
19600
+
19601
+ .pf-c-content h1:first-child,
19602
+ .pf-c-content h2:first-child,
19603
+ .pf-c-content h3:first-child,
19604
+ .pf-c-content h4:first-child,
19605
+ .pf-c-content h5:first-child,
19606
+ .pf-c-content h6:first-child {
19607
+ margin-top: 0;
19608
+ }
19609
+
19610
+ .pf-c-content h1:last-child,
19611
+ .pf-c-content h2:last-child,
19612
+ .pf-c-content h3:last-child,
19613
+ .pf-c-content h4:last-child,
19614
+ .pf-c-content h5:last-child,
19615
+ .pf-c-content h6:last-child {
19616
+ margin-bottom: 0;
19578
19617
  }
19579
19618
 
19580
- .pf-c-tile__title {
19581
- color: var(--pf-c-tile__title--Color);
19619
+ .pf-c-content ol,
19620
+ .pf-c-content ul {
19621
+ margin: 0;
19582
19622
  }
19583
19623
 
19584
- .pf-c-tile__body {
19585
- font-size: var(--pf-c-tile__body--FontSize);
19586
- color: var(--pf-c-tile__body--Color);
19624
+ .pf-c-content h1 {
19625
+ margin-top: var(--pf-c-content--h1--MarginTop);
19626
+ margin-bottom: var(--pf-c-content--h1--MarginBottom);
19627
+ font-size: var(--pf-c-content--h1--FontSize);
19628
+ font-weight: var(--pf-c-content--h1--FontWeight);
19629
+ line-height: var(--pf-c-content--h1--LineHeight);
19587
19630
  }
19588
19631
 
19589
- .pf-c-tile__icon {
19590
- margin-right: var(--pf-c-tile__icon--MarginRight);
19591
- font-size: var(--pf-c-tile__icon--FontSize);
19592
- color: var(--pf-c-tile__icon--Color);
19632
+ .pf-c-content h2 {
19633
+ margin-top: var(--pf-c-content--h2--MarginTop);
19634
+ margin-bottom: var(--pf-c-content--h2--MarginBottom);
19635
+ font-size: var(--pf-c-content--h2--FontSize);
19636
+ font-weight: var(--pf-c-content--h2--FontWeight);
19637
+ line-height: var(--pf-c-content--h2--LineHeight);
19593
19638
  }
19594
19639
 
19595
- .pf-c-title {
19596
- --pf-c-title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
19597
- --pf-c-title--m-4xl--LineHeight: var(--pf-global--LineHeight--sm);
19598
- --pf-c-title--m-4xl--FontSize: var(--pf-global--FontSize--4xl);
19599
- --pf-c-title--m-4xl--FontWeight: var(--pf-global--FontWeight--normal);
19600
- --pf-c-title--m-3xl--LineHeight: var(--pf-global--LineHeight--sm);
19601
- --pf-c-title--m-3xl--FontSize: var(--pf-global--FontSize--3xl);
19602
- --pf-c-title--m-3xl--FontWeight: var(--pf-global--FontWeight--normal);
19603
- --pf-c-title--m-2xl--LineHeight: var(--pf-global--LineHeight--sm);
19604
- --pf-c-title--m-2xl--FontSize: var(--pf-global--FontSize--2xl);
19605
- --pf-c-title--m-2xl--FontWeight: var(--pf-global--FontWeight--normal);
19606
- --pf-c-title--m-xl--LineHeight: var(--pf-global--LineHeight--md);
19607
- --pf-c-title--m-xl--FontSize: var(--pf-global--FontSize--xl);
19608
- --pf-c-title--m-xl--FontWeight: var(--pf-global--FontWeight--normal);
19609
- --pf-c-title--m-lg--LineHeight: var(--pf-global--LineHeight--md);
19610
- --pf-c-title--m-lg--FontSize: var(--pf-global--FontSize--lg);
19611
- --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--normal);
19612
- --pf-c-title--m-md--LineHeight: var(--pf-global--LineHeight--md);
19613
- --pf-c-title--m-md--FontSize: var(--pf-global--FontSize--md);
19614
- --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--normal);
19615
- font-family: var(--pf-c-title--FontFamily);
19616
- word-break: break-word;
19640
+ .pf-c-content h3 {
19641
+ margin-top: var(--pf-c-content--h3--MarginTop);
19642
+ margin-bottom: var(--pf-c-content--h3--MarginBottom);
19643
+ font-size: var(--pf-c-content--h3--FontSize);
19644
+ font-weight: var(--pf-c-content--h3--FontWeight);
19645
+ line-height: var(--pf-c-content--h3--LineHeight);
19617
19646
  }
19618
19647
 
19619
- .pf-c-title.pf-m-4xl {
19620
- font-size: var(--pf-c-title--m-4xl--FontSize);
19621
- font-weight: var(--pf-c-title--m-4xl--FontWeight);
19622
- line-height: var(--pf-c-title--m-4xl--LineHeight);
19648
+ .pf-c-content h4 {
19649
+ margin-top: var(--pf-c-content--h4--MarginTop);
19650
+ margin-bottom: var(--pf-c-content--h4--MarginBottom);
19651
+ font-size: var(--pf-c-content--h4--FontSize);
19652
+ font-weight: var(--pf-c-content--h4--FontWeight);
19653
+ line-height: var(--pf-c-content--h4--LineHeight);
19623
19654
  }
19624
19655
 
19625
- .pf-c-title.pf-m-3xl {
19626
- font-size: var(--pf-c-title--m-3xl--FontSize);
19627
- font-weight: var(--pf-c-title--m-3xl--FontWeight);
19628
- line-height: var(--pf-c-title--m-3xl--LineHeight);
19656
+ .pf-c-content h5 {
19657
+ margin-top: var(--pf-c-content--h5--MarginTop);
19658
+ margin-bottom: var(--pf-c-content--h5--MarginBottom);
19659
+ font-size: var(--pf-c-content--h5--FontSize);
19660
+ font-weight: var(--pf-c-content--h5--FontWeight);
19661
+ line-height: var(--pf-c-content--h5--LineHeight);
19629
19662
  }
19630
19663
 
19631
- .pf-c-title.pf-m-2xl {
19632
- font-size: var(--pf-c-title--m-2xl--FontSize);
19633
- font-weight: var(--pf-c-title--m-2xl--FontWeight);
19634
- line-height: var(--pf-c-title--m-2xl--LineHeight);
19664
+ .pf-c-content h6 {
19665
+ margin-top: var(--pf-c-content--h6--MarginTop);
19666
+ margin-bottom: var(--pf-c-content--h6--MarginBottom);
19667
+ font-size: var(--pf-c-content--h6--FontSize);
19668
+ font-weight: var(--pf-c-content--h6--FontWeight);
19669
+ line-height: var(--pf-c-content--h6--LineHeight);
19635
19670
  }
19636
19671
 
19637
- .pf-c-title.pf-m-xl {
19638
- font-size: var(--pf-c-title--m-xl--FontSize);
19639
- font-weight: var(--pf-c-title--m-xl--FontWeight);
19640
- line-height: var(--pf-c-title--m-xl--LineHeight);
19672
+ .pf-c-content small {
19673
+ display: block;
19674
+ font-size: var(--pf-c-content--small--FontSize);
19675
+ line-height: var(--pf-c-content--small--LineHeight);
19676
+ color: var(--pf-c-content--small--Color);
19641
19677
  }
19642
19678
 
19643
- .pf-c-title.pf-m-lg {
19644
- font-size: var(--pf-c-title--m-lg--FontSize);
19645
- font-weight: var(--pf-c-title--m-lg--FontWeight);
19646
- line-height: var(--pf-c-title--m-lg--LineHeight);
19679
+ .pf-c-content small:not(:last-child) {
19680
+ margin-bottom: var(--pf-c-content--small--MarginBottom);
19647
19681
  }
19648
19682
 
19649
- .pf-c-title.pf-m-md {
19650
- font-size: var(--pf-c-title--m-md--FontSize);
19651
- font-weight: var(--pf-c-title--m-md--FontWeight);
19652
- line-height: var(--pf-c-title--m-md--LineHeight);
19683
+ .pf-c-content blockquote {
19684
+ padding: var(--pf-c-content--blockquote--PaddingTop) var(--pf-c-content--blockquote--PaddingRight) var(--pf-c-content--blockquote--PaddingBottom) var(--pf-c-content--blockquote--PaddingLeft);
19685
+ color: var(--pf-c-content--blockquote--Color);
19686
+ border-left: var(--pf-c-content--blockquote--BorderLeftWidth) solid var(--pf-c-content--blockquote--BorderLeftColor);
19653
19687
  }
19654
19688
 
19655
- .pf-m-overpass-font .pf-c-title {
19656
- --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--semi-bold);
19657
- --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--semi-bold);
19689
+ .pf-c-content hr {
19690
+ height: var(--pf-c-content--hr--Height);
19691
+ background-color: var(--pf-c-content--hr--BackgroundColor);
19692
+ border: none;
19658
19693
  }
19659
19694
 
19660
- .pf-c-toggle-group {
19661
- --pf-c-toggle-group__button--PaddingTop: var(--pf-global--spacer--form-element);
19662
- --pf-c-toggle-group__button--PaddingRight: var(--pf-global--spacer--md);
19663
- --pf-c-toggle-group__button--PaddingBottom: var(--pf-global--spacer--form-element);
19664
- --pf-c-toggle-group__button--PaddingLeft: var(--pf-global--spacer--md);
19665
- --pf-c-toggle-group__button--FontSize: var(--pf-global--FontSize--sm);
19666
- --pf-c-toggle-group__button--LineHeight: calc(var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md));
19667
- --pf-c-toggle-group__button--Color: var(--pf-global--Color--100);
19668
- --pf-c-toggle-group__button--BackgroundColor: var(--pf-global--BackgroundColor--100);
19669
- --pf-c-toggle-group__button--ZIndex: auto;
19670
- --pf-c-toggle-group__button--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
19671
- --pf-c-toggle-group__button--hover--ZIndex: var(--pf-global--ZIndex--xs);
19672
- --pf-c-toggle-group__button--hover--before--BorderColor: var(--pf-global--BorderColor--200);
19673
- --pf-c-toggle-group__button--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
19674
- --pf-c-toggle-group__button--focus--ZIndex: var(--pf-global--ZIndex--xs);
19675
- --pf-c-toggle-group__button--focus--before--BorderColor: var(--pf-global--BorderColor--200);
19676
- --pf-c-toggle-group__button--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
19677
- --pf-c-toggle-group__button--disabled--Color: var(--pf-global--disabled-color--100);
19678
- --pf-c-toggle-group__button--before--BorderWidth: var(--pf-global--BorderWidth--sm);
19679
- --pf-c-toggle-group__button--before--BorderColor: var(--pf-global--BorderColor--100);
19680
- --pf-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-global--BorderWidth--sm));
19681
- --pf-c-toggle-group__item--first-child__button--BorderTopLeftRadius: var(--pf-global--BorderRadius--sm);
19682
- --pf-c-toggle-group__item--first-child__button--BorderBottomLeftRadius: var(--pf-global--BorderRadius--sm);
19683
- --pf-c-toggle-group__item--last-child__button--BorderTopRightRadius: var(--pf-global--BorderRadius--sm);
19684
- --pf-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-global--BorderRadius--sm);
19685
- --pf-c-toggle-group__icon--text--MarginLeft: var(--pf-global--spacer--sm);
19686
- --pf-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-global--palette--blue-50);
19687
- --pf-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-global--primary-color--100);
19688
- --pf-c-toggle-group__button--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
19689
- --pf-c-toggle-group--m-compact__button--PaddingTop: 0;
19690
- --pf-c-toggle-group--m-compact__button--PaddingRight: var(--pf-global--spacer--sm);
19691
- --pf-c-toggle-group--m-compact__button--PaddingBottom: 0;
19692
- --pf-c-toggle-group--m-compact__button--PaddingLeft: var(--pf-global--spacer--sm);
19693
- --pf-c-toggle-group--m-compact__button--FontSize: var(--pf-global--FontSize--xs);
19694
- display: flex;
19695
+ .pf-c-content ol {
19696
+ padding-left: var(--pf-c-content--ol--PaddingLeft);
19697
+ margin-left: var(--pf-c-content--ol--MarginLeft);
19695
19698
  }
19696
19699
 
19697
- .pf-c-toggle-group.pf-m-compact {
19698
- --pf-c-toggle-group__button--PaddingTop: var(--pf-c-toggle-group--m-compact__button--PaddingTop);
19699
- --pf-c-toggle-group__button--PaddingRight: var(--pf-c-toggle-group--m-compact__button--PaddingRight);
19700
- --pf-c-toggle-group__button--PaddingBottom: var(--pf-c-toggle-group--m-compact__button--PaddingBottom);
19701
- --pf-c-toggle-group__button--PaddingLeft: var(--pf-c-toggle-group--m-compact__button--PaddingLeft);
19702
- --pf-c-toggle-group__button--FontSize: var(--pf-c-toggle-group--m-compact__button--FontSize);
19700
+ .pf-c-content ol ul {
19701
+ margin-top: var(--pf-c-content--ul--nested--MarginTop);
19702
+ --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft);
19703
19703
  }
19704
19704
 
19705
- .pf-c-toggle-group__item + .pf-c-toggle-group__item {
19706
- margin-left: var(--pf-c-toggle-group__item--item--MarginLeft);
19705
+ .pf-c-content ol ol {
19706
+ margin-top: var(--pf-c-content--ol--nested--MarginTop);
19707
+ --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft);
19707
19708
  }
19708
19709
 
19709
- .pf-c-toggle-group__item:first-child .pf-c-toggle-group__button, .pf-c-toggle-group__item:first-child .pf-c-toggle-group__button::before {
19710
- border-top-left-radius: var(--pf-c-toggle-group__item--first-child__button--BorderTopLeftRadius);
19711
- border-bottom-left-radius: var(--pf-c-toggle-group__item--first-child__button--BorderBottomLeftRadius);
19710
+ .pf-c-content ul {
19711
+ padding-left: var(--pf-c-content--ul--PaddingLeft);
19712
+ margin-left: var(--pf-c-content--ul--MarginLeft);
19713
+ list-style: var(--pf-c-content--ul--ListStyle);
19712
19714
  }
19713
19715
 
19714
- .pf-c-toggle-group__item:last-child .pf-c-toggle-group__button, .pf-c-toggle-group__item:last-child .pf-c-toggle-group__button::before {
19715
- border-top-right-radius: var(--pf-c-toggle-group__item--last-child__button--BorderTopRightRadius);
19716
- border-bottom-right-radius: var(--pf-c-toggle-group__item--last-child__button--BorderBottomRightRadius);
19716
+ .pf-c-content ul ul {
19717
+ margin-top: var(--pf-c-content--ul--nested--MarginTop);
19718
+ --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft);
19717
19719
  }
19718
19720
 
19719
- .pf-c-toggle-group__button {
19720
- position: relative;
19721
- z-index: var(--pf-c-toggle-group__button--ZIndex);
19722
- display: inline-flex;
19723
- padding: var(--pf-c-toggle-group__button--PaddingTop) var(--pf-c-toggle-group__button--PaddingRight) var(--pf-c-toggle-group__button--PaddingBottom) var(--pf-c-toggle-group__button--PaddingLeft);
19724
- font-size: var(--pf-c-toggle-group__button--FontSize);
19725
- line-height: var(--pf-c-toggle-group__button--LineHeight);
19726
- color: var(--pf-c-toggle-group__button--Color);
19727
- background-color: var(--pf-c-toggle-group__button--BackgroundColor);
19728
- border: 0;
19721
+ .pf-c-content ul ol {
19722
+ margin-top: var(--pf-c-content--ol--nested--MarginTop);
19723
+ --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft);
19729
19724
  }
19730
19725
 
19731
- .pf-c-toggle-group__button::before {
19732
- position: absolute;
19733
- top: 0;
19734
- right: 0;
19735
- bottom: 0;
19736
- left: 0;
19737
- pointer-events: none;
19738
- content: "";
19739
- border: var(--pf-c-toggle-group__button--before--BorderWidth) solid var(--pf-c-toggle-group__button--before--BorderColor);
19726
+ .pf-c-content dl {
19727
+ display: grid;
19728
+ grid-template-columns: 1fr;
19740
19729
  }
19741
19730
 
19742
- .pf-c-toggle-group__button:hover {
19743
- --pf-c-toggle-group__button--BackgroundColor: var(--pf-c-toggle-group__button--hover--BackgroundColor);
19744
- --pf-c-toggle-group__button--ZIndex: var(--pf-c-toggle-group__button--hover--ZIndex);
19745
- --pf-c-toggle-group__button--before--BorderColor: var(--pf-c-toggle-group__button--hover--before--BorderColor);
19746
- text-decoration: none;
19731
+ @media screen and (min-width: 576px) {
19732
+ .pf-c-content dl {
19733
+ grid-template: auto/auto 1fr;
19734
+ grid-column-gap: var(--pf-c-content--dl--ColumnGap);
19735
+ grid-row-gap: var(--pf-c-content--dl--RowGap);
19736
+ }
19747
19737
  }
19748
-
19749
- .pf-c-toggle-group__button:focus {
19750
- --pf-c-toggle-group__button--BackgroundColor: var(--pf-c-toggle-group__button--focus--BackgroundColor);
19751
- --pf-c-toggle-group__button--ZIndex: var(--pf-c-toggle-group__button--focus--ZIndex);
19752
- --pf-c-toggle-group__button--before--BorderColor: var(--pf-c-toggle-group__button--focus--before--BorderColor);
19738
+ .pf-c-content dt {
19739
+ font-weight: var(--pf-c-content--dt--FontWeight);
19753
19740
  }
19754
19741
 
19755
- .pf-c-toggle-group__button.pf-m-selected {
19756
- --pf-c-toggle-group__button--BackgroundColor: var(--pf-c-toggle-group__button--m-selected--BackgroundColor);
19757
- --pf-c-toggle-group__button--ZIndex: var(--pf-c-toggle-group__button--m-selected--ZIndex);
19758
- --pf-c-toggle-group__button--before--BorderColor: var(--pf-c-toggle-group__button--m-selected--before--BorderColor);
19742
+ .pf-c-content dt:not(:first-child) {
19743
+ margin-top: var(--pf-c-content--dt--MarginTop);
19759
19744
  }
19760
19745
 
19761
- .pf-c-toggle-group__button:disabled, .pf-c-toggle-group__button.pf-m-disabled {
19762
- --pf-c-toggle-group__button--BackgroundColor: var(--pf-c-toggle-group__button--disabled--BackgroundColor);
19763
- --pf-c-toggle-group__button--Color: var(--pf-c-toggle-group__button--disabled--Color);
19764
- pointer-events: none;
19746
+ @media screen and (min-width: 576px) {
19747
+ .pf-c-content dt:not(:first-child) {
19748
+ --pf-c-content--dt--MarginTop: var(--pf-c-content--dt--sm--MarginTop);
19749
+ }
19750
+ }
19751
+ @media screen and (min-width: 576px) {
19752
+ .pf-c-content dt {
19753
+ grid-column: 1;
19754
+ }
19755
+ }
19756
+ @media screen and (min-width: 576px) {
19757
+ .pf-c-content dd {
19758
+ grid-column: 2;
19759
+ }
19760
+ }
19761
+ .pf-m-overpass-font .pf-c-content {
19762
+ --pf-c-content--h2--LineHeight: var(--pf-global--LineHeight--sm);
19763
+ --pf-c-content--h4--FontWeight: var(--pf-global--FontWeight--semi-bold);
19764
+ --pf-c-content--h5--FontWeight: var(--pf-global--FontWeight--semi-bold);
19765
+ --pf-c-content--h6--FontWeight: var(--pf-global--FontWeight--semi-bold);
19765
19766
  }
19766
19767
 
19767
- .pf-c-toggle-group__icon + .pf-c-toggle-group__text,
19768
- .pf-c-toggle-group__text + .pf-c-toggle-group__icon {
19769
- margin-left: var(--pf-c-toggle-group__icon--text--MarginLeft);
19768
+ .pf-m-overpass-font .pf-c-content blockquote {
19769
+ font-weight: var(--pf-global--FontWeight--light);
19770
19770
  }
19771
19771
 
19772
19772
  .pf-c-toolbar__content-section, .pf-c-toolbar__content, .pf-c-toolbar__item, .pf-c-toolbar__group {