@patternfly/patternfly 4.196.8 → 4.197.1
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.
- package/components/Card/card.css +8 -0
- package/components/Card/card.scss +7 -0
- package/components/Card/themes/dark/card.scss +13 -0
- package/components/Dropdown/dropdown.css +56 -1
- package/components/Dropdown/dropdown.scss +76 -2
- package/docs/components/Dropdown/examples/Dropdown.css +2 -1
- package/docs/components/Dropdown/examples/Dropdown.md +165 -0
- package/docs/demos/Drawer/examples/Drawer.md +152 -172
- package/docs/demos/JumpLinks/examples/JumpLinks.md +152 -172
- package/package.json +1 -1
- package/patternfly-no-reset.css +94 -1
- package/patternfly.css +94 -1
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/patternfly.css
CHANGED
|
@@ -8530,6 +8530,44 @@ button.pf-c-breadcrumb__link {
|
|
|
8530
8530
|
font-weight: var(--pf-global--FontWeight--normal);
|
|
8531
8531
|
}
|
|
8532
8532
|
|
|
8533
|
+
:where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
|
|
8534
|
+
:where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
|
|
8535
|
+
:where(.pf-theme-dark) .pf-c-page__header, :where(.pf-theme-dark) .pf-c-masthead, :where(.pf-theme-dark) .pf-c-login__header,
|
|
8536
|
+
: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 {
|
|
8537
|
+
--pf-global--Color--100: #e0e0e0;
|
|
8538
|
+
--pf-global--Color--200: #aaabac;
|
|
8539
|
+
--pf-global--BorderColor--100: #444548;
|
|
8540
|
+
--pf-global--primary-color--100: #1fa7f8;
|
|
8541
|
+
--pf-global--link--Color: #1fa7f8;
|
|
8542
|
+
--pf-global--link--Color--hover: #73bcf7;
|
|
8543
|
+
--pf-global--BackgroundColor--100: #1b1d21;
|
|
8544
|
+
}
|
|
8545
|
+
: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,
|
|
8546
|
+
:where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button,
|
|
8547
|
+
: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,
|
|
8548
|
+
: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 {
|
|
8549
|
+
--pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
|
|
8550
|
+
--pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
|
|
8551
|
+
--pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
|
|
8552
|
+
--pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
|
|
8553
|
+
--pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
|
|
8554
|
+
--pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
|
|
8555
|
+
--pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
|
|
8556
|
+
--pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
|
|
8557
|
+
--pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
|
|
8558
|
+
--pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
|
|
8559
|
+
--pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
|
|
8560
|
+
--pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
|
|
8561
|
+
}
|
|
8562
|
+
|
|
8563
|
+
:where(.pf-theme-dark) .pf-c-card {
|
|
8564
|
+
--pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md);
|
|
8565
|
+
--pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
|
|
8566
|
+
--pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
|
|
8567
|
+
--pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
|
|
8568
|
+
--pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--lg);
|
|
8569
|
+
}
|
|
8570
|
+
|
|
8533
8571
|
.pf-c-check {
|
|
8534
8572
|
--pf-c-check--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
|
|
8535
8573
|
--pf-c-check__label--disabled--Color: var(--pf-global--disabled-color--100);
|
|
@@ -13688,7 +13726,8 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
13688
13726
|
--pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm));
|
|
13689
13727
|
--pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
|
|
13690
13728
|
--pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
|
|
13691
|
-
--pf-c-dropdown__toggle--m-split-button--
|
|
13729
|
+
--pf-c-dropdown__toggle--m-split-button--child--BorderRadius: var(--pf-global--BorderRadius--sm);
|
|
13730
|
+
--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
|
|
13692
13731
|
--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
|
|
13693
13732
|
--pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
|
|
13694
13733
|
--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
|
|
@@ -13696,6 +13735,18 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
13696
13735
|
--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
|
|
13697
13736
|
--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
|
|
13698
13737
|
--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
|
|
13738
|
+
--pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-global--BorderWidth--md);
|
|
13739
|
+
--pf-c-dropdown__toggle--m-secondary--m-split-button--Color: var(--pf-global--primary-color--100);
|
|
13740
|
+
--pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
|
|
13741
|
+
--pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
|
|
13742
|
+
--pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
|
|
13743
|
+
--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base: var(--pf-global--BorderWidth--sm);
|
|
13744
|
+
--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base: var(--pf-global--primary-color--100);
|
|
13745
|
+
--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);
|
|
13746
|
+
--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);
|
|
13747
|
+
--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth: var(--pf-global--BorderWidth--md);
|
|
13748
|
+
--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth: var(--pf-global--BorderWidth--md);
|
|
13749
|
+
--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth: var(--pf-global--BorderWidth--md);
|
|
13699
13750
|
--pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
|
|
13700
13751
|
--pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
|
|
13701
13752
|
--pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
|
|
@@ -13792,6 +13843,7 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
13792
13843
|
}
|
|
13793
13844
|
.pf-c-dropdown.pf-m-expanded {
|
|
13794
13845
|
--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);
|
|
13846
|
+
--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
13847
|
}
|
|
13796
13848
|
|
|
13797
13849
|
.pf-c-dropdown__toggle {
|
|
@@ -13993,6 +14045,47 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
13993
14045
|
--pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth);
|
|
13994
14046
|
--pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
|
|
13995
14047
|
}
|
|
14048
|
+
.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) {
|
|
14049
|
+
--pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--Color);
|
|
14050
|
+
}
|
|
14051
|
+
.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):hover {
|
|
14052
|
+
--pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth);
|
|
14053
|
+
}
|
|
14054
|
+
.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):focus {
|
|
14055
|
+
--pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth);
|
|
14056
|
+
}
|
|
14057
|
+
.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):active {
|
|
14058
|
+
--pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth);
|
|
14059
|
+
}
|
|
14060
|
+
.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *::before {
|
|
14061
|
+
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);
|
|
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--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--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--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--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--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth);
|
|
14071
|
+
}
|
|
14072
|
+
.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:first-child::before {
|
|
14073
|
+
border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
|
|
14074
|
+
border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
|
|
14075
|
+
}
|
|
14076
|
+
.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:last-child::before {
|
|
14077
|
+
border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
|
|
14078
|
+
border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
|
|
14079
|
+
}
|
|
14080
|
+
.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:first-child)::before {
|
|
14081
|
+
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);
|
|
14082
|
+
}
|
|
14083
|
+
.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:last-child)::before {
|
|
14084
|
+
border-right: 0;
|
|
14085
|
+
}
|
|
14086
|
+
.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled).pf-m-action::before {
|
|
14087
|
+
border: 0;
|
|
14088
|
+
}
|
|
13996
14089
|
.pf-c-dropdown__toggle > .pf-c-badge {
|
|
13997
14090
|
--pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
|
|
13998
14091
|
--pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
|