@patternfly/react-core 4.232.1 → 4.232.4

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.
@@ -2172,6 +2172,11 @@ button.pf-c-breadcrumb__link {
2172
2172
  --pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
2173
2173
  --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
2174
2174
  --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
2175
+ --pf-c-button__count--MarginLeft: var(--pf-global--spacer--sm);
2176
+ --pf-c-button--disabled__c-badge--Color: var(--pf-global--Color--dark-100);
2177
+ --pf-c-button--disabled__c-badge--BackgroundColor: var(--pf-global--BackgroundColor--200);
2178
+ --pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--BorderColor--300);
2179
+ --pf-c-button--m-primary__c-badge--BorderWidth: var(--pf-global--BorderWidth--sm);
2175
2180
  position: relative;
2176
2181
  display: inline-block;
2177
2182
  padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
@@ -2248,6 +2253,10 @@ button.pf-c-breadcrumb__link {
2248
2253
  --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--active--BackgroundColor);
2249
2254
  }
2250
2255
 
2256
+ .pf-c-button.pf-m-primary .pf-c-badge.pf-m-unread {
2257
+ border: var(--pf-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-c-button--m-primary__c-badge--BorderColor);
2258
+ }
2259
+
2251
2260
  .pf-c-button.pf-m-secondary {
2252
2261
  --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--after--BorderColor);
2253
2262
  color: var(--pf-c-button--m-secondary--Color);
@@ -2507,6 +2516,12 @@ button.pf-c-breadcrumb__link {
2507
2516
  border-color: var(--pf-c-button--disabled--after--BorderColor);
2508
2517
  }
2509
2518
 
2519
+ .pf-c-button:disabled .pf-c-badge, .pf-c-button.pf-m-disabled .pf-c-badge, .pf-c-button.pf-m-aria-disabled .pf-c-badge {
2520
+ --pf-c-badge--m-unread--Color: var(--pf-c-button--disabled__c-badge--Color);
2521
+ --pf-c-badge--m-unread--BackgroundColor: var(--pf-c-button--disabled__c-badge--BackgroundColor);
2522
+ --pf-c-button--m-primary__c-badge--BorderWidth: 0;
2523
+ }
2524
+
2510
2525
  .pf-c-button.pf-m-aria-disabled {
2511
2526
  --pf-c-button--after--BorderWidth: 0;
2512
2527
  --pf-c-button--m-link--m-inline--hover--TextDecoration: none;
@@ -2554,6 +2569,12 @@ button.pf-c-breadcrumb__link {
2554
2569
  --pf-c-spinner--Color: currentcolor;
2555
2570
  }
2556
2571
 
2572
+ .pf-c-button__count {
2573
+ display: inline-flex;
2574
+ align-items: center;
2575
+ margin-left: var(--pf-c-button__count--MarginLeft);
2576
+ }
2577
+
2557
2578
  .pf-m-overpass-font .pf-c-button {
2558
2579
  --pf-c-button--FontWeight: var(--pf-global--FontWeight--semi-bold);
2559
2580
  }
@@ -2590,6 +2611,7 @@ button.pf-c-breadcrumb__link {
2590
2611
  --pf-c-button--m-control--focus--after--BorderBottomColor: var(--pf-global--primary-color--100);
2591
2612
  --pf-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-global--primary-color--100);
2592
2613
  --pf-c-button--m-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
2614
+ --pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--Color--100);
2593
2615
  }
2594
2616
 
2595
2617
  :where(.pf-theme-dark) .pf-c-button.pf-m-control:disabled::after {
@@ -3218,6 +3240,9 @@ button.pf-c-breadcrumb__link {
3218
3240
  --pf-c-check__description--FontSize: var(--pf-global--FontSize--sm);
3219
3241
  --pf-c-check__description--Color: var(--pf-global--Color--200);
3220
3242
  --pf-c-check__body--MarginTop: var(--pf-global--spacer--sm);
3243
+ --pf-c-check__label-required--MarginLeft: var(--pf-global--spacer--xs);
3244
+ --pf-c-check__label-required--FontSize: var(--pf-global--FontSize--sm);
3245
+ --pf-c-check__label-required--Color: var(--pf-global--danger-color--100);
3221
3246
  display: grid;
3222
3247
  grid-template-columns: auto 1fr;
3223
3248
  grid-gap: var(--pf-c-check--GridGap);
@@ -3268,6 +3293,12 @@ label.pf-c-check, .pf-c-check__label,
3268
3293
  cursor: not-allowed;
3269
3294
  }
3270
3295
 
3296
+ .pf-c-check__label-required {
3297
+ margin-left: var(--pf-c-check__label-required--MarginLeft);
3298
+ font-size: var(--pf-c-check__label-required--FontSize);
3299
+ color: var(--pf-c-check__label-required--Color);
3300
+ }
3301
+
3271
3302
  .pf-c-chip {
3272
3303
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
3273
3304
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -3879,6 +3910,13 @@ label.pf-c-check, .pf-c-check__label,
3879
3910
  box-shadow: var(--pf-c-context-selector__menu--BoxShadow);
3880
3911
  }
3881
3912
 
3913
+ .pf-c-context-selector__menu.pf-m-static {
3914
+ position: static;
3915
+ top: auto;
3916
+ z-index: auto;
3917
+ min-width: min-content;
3918
+ }
3919
+
3882
3920
  .pf-c-context-selector__menu-search {
3883
3921
  position: relative;
3884
3922
  padding: var(--pf-c-context-selector__menu-search--PaddingTop) var(--pf-c-context-selector__menu-search--PaddingRight) var(--pf-c-context-selector__menu-search--PaddingBottom) var(--pf-c-context-selector__menu-search--PaddingLeft);
@@ -7769,6 +7807,13 @@ label.pf-c-check, .pf-c-check__label,
7769
7807
  box-shadow: var(--pf-c-dropdown__menu--BoxShadow);
7770
7808
  }
7771
7809
 
7810
+ .pf-c-dropdown__menu.pf-m-static {
7811
+ position: static;
7812
+ top: auto;
7813
+ z-index: auto;
7814
+ min-width: min-content;
7815
+ }
7816
+
7772
7817
  .pf-c-dropdown .pf-c-menu,
7773
7818
  .pf-c-dropdown__menu {
7774
7819
  min-width: 100%;
@@ -8424,6 +8469,7 @@ label.pf-c-check, .pf-c-check__label,
8424
8469
  --pf-c-expandable-section__toggle--PaddingRight: var(--pf-global--spacer--md);
8425
8470
  --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
8426
8471
  --pf-c-expandable-section__toggle--PaddingLeft: 0;
8472
+ --pf-c-expandable-section__toggle--MarginTop: 0;
8427
8473
  --pf-c-expandable-section__toggle--Color: var(--pf-global--link--Color);
8428
8474
  --pf-c-expandable-section__toggle--hover--Color: var(--pf-global--link--Color--hover);
8429
8475
  --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
@@ -8453,6 +8499,8 @@ label.pf-c-check, .pf-c-check__label,
8453
8499
  --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
8454
8500
  --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
8455
8501
  --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
8502
+ --pf-c-expandable-section--m-truncate__content--LineClamp: 3;
8503
+ --pf-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-global--spacer--xs);
8456
8504
  }
8457
8505
 
8458
8506
  .pf-c-expandable-section.pf-m-expanded {
@@ -8462,7 +8510,7 @@ label.pf-c-check, .pf-c-check__label,
8462
8510
  --pf-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
8463
8511
  }
8464
8512
 
8465
- .pf-c-expandable-section.pf-m-detached {
8513
+ .pf-c-expandable-section.pf-m-detached, .pf-c-expandable-section.pf-m-truncate {
8466
8514
  --pf-c-expandable-section__content--MarginTop: 0;
8467
8515
  }
8468
8516
 
@@ -8497,9 +8545,25 @@ label.pf-c-check, .pf-c-check__label,
8497
8545
  --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
8498
8546
  }
8499
8547
 
8548
+ .pf-c-expandable-section.pf-m-truncate {
8549
+ --pf-c-expandable-section__toggle--MarginTop: var(--pf-c-expandable-section--m-truncate__toggle--MarginTop);
8550
+ --pf-c-expandable-section__toggle--PaddingTop: 0;
8551
+ --pf-c-expandable-section__toggle--PaddingRight: 0;
8552
+ --pf-c-expandable-section__toggle--PaddingBottom: 0;
8553
+ --pf-c-expandable-section__toggle-text--MarginLeft: 0;
8554
+ }
8555
+
8556
+ .pf-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-c-expandable-section__content {
8557
+ display: -webkit-box;
8558
+ -webkit-box-orient: vertical;
8559
+ -webkit-line-clamp: var(--pf-c-expandable-section--m-truncate__content--LineClamp);
8560
+ overflow: hidden;
8561
+ }
8562
+
8500
8563
  .pf-c-expandable-section__toggle {
8501
8564
  display: flex;
8502
8565
  padding: var(--pf-c-expandable-section__toggle--PaddingTop) var(--pf-c-expandable-section__toggle--PaddingRight) var(--pf-c-expandable-section__toggle--PaddingBottom) var(--pf-c-expandable-section__toggle--PaddingLeft);
8566
+ margin-top: var(--pf-c-expandable-section__toggle--MarginTop);
8503
8567
  color: var(--pf-c-expandable-section__toggle--Color);
8504
8568
  border: none;
8505
8569
  }
@@ -9364,6 +9428,10 @@ label.pf-c-check, .pf-c-check__label,
9364
9428
  background-color: var(--pf-c-input-group--BackgroundColor);
9365
9429
  }
9366
9430
 
9431
+ .pf-c-input-group.pf-m-plain {
9432
+ --pf-c-input-group--BackgroundColor: transparent;
9433
+ }
9434
+
9367
9435
  .pf-c-input-group > * + * {
9368
9436
  margin-left: -1px;
9369
9437
  }
@@ -11127,7 +11195,7 @@ ul.pf-c-list {
11127
11195
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
11128
11196
  }
11129
11197
 
11130
- .pf-c-masthead {
11198
+ .pf-c-masthead .pf-c-button.pf-m-plain, .pf-c-masthead {
11131
11199
  --pf-global--Color--100: var(--pf-global--Color--light-100);
11132
11200
  --pf-global--Color--200: var(--pf-global--Color--light-200);
11133
11201
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -11137,11 +11205,11 @@ ul.pf-c-list {
11137
11205
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
11138
11206
  }
11139
11207
 
11140
- .pf-c-masthead .pf-c-card {
11208
+ .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-card, .pf-c-masthead .pf-c-card {
11141
11209
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
11142
11210
  }
11143
11211
 
11144
- .pf-c-masthead .pf-c-button {
11212
+ .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button, .pf-c-masthead .pf-c-button {
11145
11213
  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
11146
11214
  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
11147
11215
  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
@@ -11361,6 +11429,10 @@ ul.pf-c-list {
11361
11429
  align-self: stretch;
11362
11430
  }
11363
11431
 
11432
+ .pf-c-masthead .pf-c-button.pf-m-plain {
11433
+ color: var(--pf-global--Color--200);
11434
+ }
11435
+
11364
11436
  .pf-c-masthead__main {
11365
11437
  position: relative;
11366
11438
  display: flex;
@@ -12070,8 +12142,6 @@ ul.pf-c-list {
12070
12142
  --pf-c-menu__footer--BoxShadow: none;
12071
12143
  --pf-c-menu__footer--after--BorderTopWidth: var(--pf-global--BorderWidth--sm);
12072
12144
  --pf-c-menu__footer--after--BorderTopColor: var(--pf-global--BorderColor--100);
12073
- --pf-c-menu__footer--after--BorderBottomWidth: 0;
12074
- --pf-c-menu__footer--after--BorderBottomColor: var(--pf-global--BorderColor--100);
12075
12145
  --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
12076
12146
  --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
12077
12147
  --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
@@ -12227,7 +12297,6 @@ ul.pf-c-list {
12227
12297
  --pf-c-menu__content--MaxHeight: var(--pf-c-menu--m-scrollable__content--MaxHeight);
12228
12298
  --pf-c-menu__footer--BoxShadow: var(--pf-c-menu--m-scrollable__footer--BoxShadow);
12229
12299
  --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
12230
- --pf-c-menu__footer--after--BorderBottomWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth);
12231
12300
  }
12232
12301
 
12233
12302
  .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
@@ -12561,7 +12630,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
12561
12630
  pointer-events: none;
12562
12631
  content: "";
12563
12632
  border-top: var(--pf-c-menu__footer--after--BorderTopWidth) solid var(--pf-c-menu__footer--after--BorderTopColor);
12564
- border-bottom: var(--pf-c-menu__footer--after--BorderBottomWidth) solid var(--pf-c-menu__footer--after--BorderBottomColor);
12565
12633
  }
12566
12634
 
12567
12635
  :where(.pf-theme-dark) .pf-c-menu {
@@ -18238,6 +18306,13 @@ label.pf-c-radio, .pf-c-radio__label,
18238
18306
  transform: translateY(var(--pf-c-select__menu--m-top--TranslateY));
18239
18307
  }
18240
18308
 
18309
+ .pf-c-select__menu.pf-m-static {
18310
+ position: static;
18311
+ top: auto;
18312
+ z-index: auto;
18313
+ min-width: min-content;
18314
+ }
18315
+
18241
18316
  .pf-c-select__menu-fieldset {
18242
18317
  border: 0;
18243
18318
  }
@@ -23599,10 +23674,10 @@ label.pf-c-tree-view__node-text {
23599
23674
  }
23600
23675
 
23601
23676
  :where(.pf-theme-dark) .pf-c-wizard {
23677
+ --pf-c-wizard__header--BackgroundColor: var(--pf-global--palette--black-1000);
23678
+ --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-global--palette--black-500);
23602
23679
  --pf-c-wizard__nav-link--m-disabled--Color: var(--pf-global--disabled-color--300);
23603
23680
  --pf-c-wizard__nav-link--m-disabled--before--Color: var(--pf-global--disabled-color--300);
23604
- --pf-c-wizard__nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
23605
- --pf-c-wizard__outer-wrap--BackgroundColor: var(--pf-global--BackgroundColor--300);
23606
23681
  }
23607
23682
 
23608
23683
  :where(.pf-theme-dark) .pf-c-wizard__header {