@patternfly/patternfly 4.196.9 → 4.198.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/components/Card/card.css +20 -0
  2. package/components/Card/card.scss +21 -0
  3. package/components/Card/themes/dark/card.scss +13 -0
  4. package/components/Dropdown/dropdown.css +56 -1
  5. package/components/Dropdown/dropdown.scss +76 -2
  6. package/docs/components/Card/examples/Card.md +22 -0
  7. package/docs/components/Dropdown/examples/Dropdown.css +2 -1
  8. package/docs/components/Dropdown/examples/Dropdown.md +165 -0
  9. package/package.json +1 -1
  10. package/patternfly-no-reset.css +106 -1
  11. package/patternfly.css +106 -1
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/patternfly-no-reset.css CHANGED
@@ -8173,6 +8173,8 @@ button.pf-c-breadcrumb__link {
8173
8173
  --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
8174
8174
  --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
8175
8175
  --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
8176
+ --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
8177
+ --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
8176
8178
  display: flex;
8177
8179
  flex-direction: column;
8178
8180
  background-color: var(--pf-c-card--BackgroundColor);
@@ -8399,10 +8401,58 @@ button.pf-c-breadcrumb__link {
8399
8401
  font-size: var(--pf-c-card__footer--FontSize);
8400
8402
  }
8401
8403
 
8404
+ .pf-c-card__sr-input:focus + .pf-c-card::after {
8405
+ position: absolute;
8406
+ top: 0;
8407
+ right: 0;
8408
+ bottom: 0;
8409
+ left: 0;
8410
+ content: "";
8411
+ border: var(--pf-c-card__input--focus--BorderWidth) solid var(--pf-c-card__input--focus--BorderColor);
8412
+ }
8413
+
8402
8414
  .pf-m-overpass-font .pf-c-card .pf-c-card__title {
8403
8415
  font-weight: var(--pf-global--FontWeight--normal);
8404
8416
  }
8405
8417
 
8418
+ :where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
8419
+ :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
8420
+ :where(.pf-theme-dark) .pf-c-page__header, :where(.pf-theme-dark) .pf-c-masthead, :where(.pf-theme-dark) .pf-c-login__header,
8421
+ :where(.pf-theme-dark) .pf-c-login__footer, :where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main, :where(.pf-theme-dark) .pf-c-about-modal-box, :where(.pf-theme-dark) .pf-c-banner {
8422
+ --pf-global--Color--100: #e0e0e0;
8423
+ --pf-global--Color--200: #aaabac;
8424
+ --pf-global--BorderColor--100: #444548;
8425
+ --pf-global--primary-color--100: #1fa7f8;
8426
+ --pf-global--link--Color: #1fa7f8;
8427
+ --pf-global--link--Color--hover: #73bcf7;
8428
+ --pf-global--BackgroundColor--100: #1b1d21;
8429
+ }
8430
+ :where(.pf-theme-dark) .pf-c-wizard__header .pf-c-button, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button,
8431
+ :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button,
8432
+ :where(.pf-theme-dark) .pf-c-page__header .pf-c-button, :where(.pf-theme-dark) .pf-c-masthead .pf-c-button, :where(.pf-theme-dark) .pf-c-login__header .pf-c-button,
8433
+ :where(.pf-theme-dark) .pf-c-login__footer .pf-c-button, :where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button, :where(.pf-theme-dark) .pf-c-about-modal-box .pf-c-button, :where(.pf-theme-dark) .pf-c-banner .pf-c-button {
8434
+ --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
8435
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
8436
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
8437
+ --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
8438
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
8439
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
8440
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
8441
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
8442
+ --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
8443
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
8444
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
8445
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
8446
+ }
8447
+
8448
+ :where(.pf-theme-dark) .pf-c-card {
8449
+ --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md);
8450
+ --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
8451
+ --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
8452
+ --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
8453
+ --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--lg);
8454
+ }
8455
+
8406
8456
  .pf-c-check {
8407
8457
  --pf-c-check--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
8408
8458
  --pf-c-check__label--disabled--Color: var(--pf-global--disabled-color--100);
@@ -13561,7 +13611,8 @@ label.pf-c-check, .pf-c-check__label,
13561
13611
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm));
13562
13612
  --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
13563
13613
  --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
13564
- --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
13614
+ --pf-c-dropdown__toggle--m-split-button--child--BorderRadius: var(--pf-global--BorderRadius--sm);
13615
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
13565
13616
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
13566
13617
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
13567
13618
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
@@ -13569,6 +13620,18 @@ label.pf-c-check, .pf-c-check__label,
13569
13620
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
13570
13621
  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
13571
13622
  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
13623
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-global--BorderWidth--md);
13624
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--Color: var(--pf-global--primary-color--100);
13625
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
13626
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
13627
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
13628
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base: var(--pf-global--BorderWidth--sm);
13629
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base: var(--pf-global--primary-color--100);
13630
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
13631
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base);
13632
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth: var(--pf-global--BorderWidth--md);
13633
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth: var(--pf-global--BorderWidth--md);
13634
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth: var(--pf-global--BorderWidth--md);
13572
13635
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
13573
13636
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
13574
13637
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
@@ -13665,6 +13728,7 @@ label.pf-c-check, .pf-c-check__label,
13665
13728
  }
13666
13729
  .pf-c-dropdown.pf-m-expanded {
13667
13730
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
13731
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth);
13668
13732
  }
13669
13733
 
13670
13734
  .pf-c-dropdown__toggle {
@@ -13866,6 +13930,47 @@ label.pf-c-check, .pf-c-check__label,
13866
13930
  --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth);
13867
13931
  --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
13868
13932
  }
13933
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) {
13934
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--Color);
13935
+ }
13936
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):hover {
13937
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth);
13938
+ }
13939
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):focus {
13940
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth);
13941
+ }
13942
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):active {
13943
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth);
13944
+ }
13945
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *::before {
13946
+ border: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor);
13947
+ }
13948
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
13949
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth);
13950
+ }
13951
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
13952
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth);
13953
+ }
13954
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:active {
13955
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth);
13956
+ }
13957
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:first-child::before {
13958
+ border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
13959
+ border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
13960
+ }
13961
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:last-child::before {
13962
+ border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
13963
+ border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
13964
+ }
13965
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:first-child)::before {
13966
+ border-left: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
13967
+ }
13968
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:last-child)::before {
13969
+ border-right: 0;
13970
+ }
13971
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled).pf-m-action::before {
13972
+ border: 0;
13973
+ }
13869
13974
  .pf-c-dropdown__toggle > .pf-c-badge {
13870
13975
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
13871
13976
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
package/patternfly.css CHANGED
@@ -8300,6 +8300,8 @@ button.pf-c-breadcrumb__link {
8300
8300
  --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
8301
8301
  --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
8302
8302
  --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
8303
+ --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
8304
+ --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
8303
8305
  display: flex;
8304
8306
  flex-direction: column;
8305
8307
  background-color: var(--pf-c-card--BackgroundColor);
@@ -8526,10 +8528,58 @@ button.pf-c-breadcrumb__link {
8526
8528
  font-size: var(--pf-c-card__footer--FontSize);
8527
8529
  }
8528
8530
 
8531
+ .pf-c-card__sr-input:focus + .pf-c-card::after {
8532
+ position: absolute;
8533
+ top: 0;
8534
+ right: 0;
8535
+ bottom: 0;
8536
+ left: 0;
8537
+ content: "";
8538
+ border: var(--pf-c-card__input--focus--BorderWidth) solid var(--pf-c-card__input--focus--BorderColor);
8539
+ }
8540
+
8529
8541
  .pf-m-overpass-font .pf-c-card .pf-c-card__title {
8530
8542
  font-weight: var(--pf-global--FontWeight--normal);
8531
8543
  }
8532
8544
 
8545
+ :where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
8546
+ :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
8547
+ :where(.pf-theme-dark) .pf-c-page__header, :where(.pf-theme-dark) .pf-c-masthead, :where(.pf-theme-dark) .pf-c-login__header,
8548
+ :where(.pf-theme-dark) .pf-c-login__footer, :where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main, :where(.pf-theme-dark) .pf-c-about-modal-box, :where(.pf-theme-dark) .pf-c-banner {
8549
+ --pf-global--Color--100: #e0e0e0;
8550
+ --pf-global--Color--200: #aaabac;
8551
+ --pf-global--BorderColor--100: #444548;
8552
+ --pf-global--primary-color--100: #1fa7f8;
8553
+ --pf-global--link--Color: #1fa7f8;
8554
+ --pf-global--link--Color--hover: #73bcf7;
8555
+ --pf-global--BackgroundColor--100: #1b1d21;
8556
+ }
8557
+ :where(.pf-theme-dark) .pf-c-wizard__header .pf-c-button, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button,
8558
+ :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button,
8559
+ :where(.pf-theme-dark) .pf-c-page__header .pf-c-button, :where(.pf-theme-dark) .pf-c-masthead .pf-c-button, :where(.pf-theme-dark) .pf-c-login__header .pf-c-button,
8560
+ :where(.pf-theme-dark) .pf-c-login__footer .pf-c-button, :where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button, :where(.pf-theme-dark) .pf-c-about-modal-box .pf-c-button, :where(.pf-theme-dark) .pf-c-banner .pf-c-button {
8561
+ --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
8562
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
8563
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
8564
+ --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
8565
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
8566
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
8567
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
8568
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
8569
+ --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
8570
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
8571
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
8572
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
8573
+ }
8574
+
8575
+ :where(.pf-theme-dark) .pf-c-card {
8576
+ --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md);
8577
+ --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
8578
+ --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
8579
+ --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
8580
+ --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--lg);
8581
+ }
8582
+
8533
8583
  .pf-c-check {
8534
8584
  --pf-c-check--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
8535
8585
  --pf-c-check__label--disabled--Color: var(--pf-global--disabled-color--100);
@@ -13688,7 +13738,8 @@ label.pf-c-check, .pf-c-check__label,
13688
13738
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm));
13689
13739
  --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
13690
13740
  --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
13691
- --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
13741
+ --pf-c-dropdown__toggle--m-split-button--child--BorderRadius: var(--pf-global--BorderRadius--sm);
13742
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
13692
13743
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
13693
13744
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
13694
13745
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
@@ -13696,6 +13747,18 @@ label.pf-c-check, .pf-c-check__label,
13696
13747
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
13697
13748
  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
13698
13749
  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
13750
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-global--BorderWidth--md);
13751
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--Color: var(--pf-global--primary-color--100);
13752
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
13753
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
13754
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
13755
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base: var(--pf-global--BorderWidth--sm);
13756
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base: var(--pf-global--primary-color--100);
13757
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
13758
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base);
13759
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth: var(--pf-global--BorderWidth--md);
13760
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth: var(--pf-global--BorderWidth--md);
13761
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth: var(--pf-global--BorderWidth--md);
13699
13762
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
13700
13763
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
13701
13764
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
@@ -13792,6 +13855,7 @@ label.pf-c-check, .pf-c-check__label,
13792
13855
  }
13793
13856
  .pf-c-dropdown.pf-m-expanded {
13794
13857
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
13858
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth);
13795
13859
  }
13796
13860
 
13797
13861
  .pf-c-dropdown__toggle {
@@ -13993,6 +14057,47 @@ label.pf-c-check, .pf-c-check__label,
13993
14057
  --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth);
13994
14058
  --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
13995
14059
  }
14060
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) {
14061
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--Color);
14062
+ }
14063
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):hover {
14064
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth);
14065
+ }
14066
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):focus {
14067
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth);
14068
+ }
14069
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):active {
14070
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth);
14071
+ }
14072
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *::before {
14073
+ border: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor);
14074
+ }
14075
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
14076
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth);
14077
+ }
14078
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
14079
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth);
14080
+ }
14081
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:active {
14082
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth);
14083
+ }
14084
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:first-child::before {
14085
+ border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
14086
+ border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
14087
+ }
14088
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:last-child::before {
14089
+ border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
14090
+ border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
14091
+ }
14092
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:first-child)::before {
14093
+ border-left: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
14094
+ }
14095
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:last-child)::before {
14096
+ border-right: 0;
14097
+ }
14098
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled).pf-m-action::before {
14099
+ border: 0;
14100
+ }
13996
14101
  .pf-c-dropdown__toggle > .pf-c-badge {
13997
14102
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
13998
14103
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);