@patternfly/patternfly 4.155.0 → 4.156.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 (12) hide show
  1. package/components/Card/card.css +18 -9
  2. package/components/Card/card.scss +15 -5
  3. package/components/LogViewer/log-viewer.css +15 -11
  4. package/components/LogViewer/log-viewer.scss +4 -11
  5. package/docs/components/Card/examples/Card.md +15 -0
  6. package/docs/demos/CardView/examples/CardView.md +18 -11
  7. package/docs/demos/Tabs/examples/Tabs.md +18 -11
  8. package/package.json +1 -1
  9. package/patternfly-no-reset.css +24 -21
  10. package/patternfly.css +24 -21
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -1,5 +1,5 @@
1
1
  @charset "UTF-8";
2
- .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-info, .pf-c-alert, .pf-c-accordion, .pf-t-light {
2
+ .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-log-viewer__header, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-info, .pf-c-alert, .pf-c-accordion, .pf-t-light {
3
3
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
4
4
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
5
5
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -9,7 +9,7 @@
9
9
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
10
10
  }
11
11
 
12
- .pf-c-wizard__header, .pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector, .pf-c-page__header, .pf-c-masthead, .pf-c-login__footer, .pf-c-login__header, .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main, .pf-c-banner, .pf-c-about-modal-box, .pf-t-dark {
12
+ .pf-c-wizard__header, .pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector, .pf-c-page__header, .pf-c-masthead, .pf-c-login__footer, .pf-c-login__header, .pf-c-log-viewer.pf-m-dark, .pf-c-banner, .pf-c-about-modal-box, .pf-t-dark {
13
13
  --pf-global--Color--100: var(--pf-global--Color--light-100);
14
14
  --pf-global--Color--200: var(--pf-global--Color--light-200);
15
15
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -18,10 +18,10 @@
18
18
  --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
19
19
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
20
20
  }
21
- .pf-c-wizard__header .pf-c-card, .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card, .pf-c-page__header .pf-c-card, .pf-c-masthead .pf-c-card, .pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card, .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-card, .pf-c-banner .pf-c-card, .pf-c-about-modal-box .pf-c-card, .pf-t-dark .pf-c-card {
21
+ .pf-c-wizard__header .pf-c-card, .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card, .pf-c-page__header .pf-c-card, .pf-c-masthead .pf-c-card, .pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card, .pf-c-log-viewer.pf-m-dark .pf-c-card, .pf-c-banner .pf-c-card, .pf-c-about-modal-box .pf-c-card, .pf-t-dark .pf-c-card {
22
22
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
23
23
  }
24
- .pf-c-wizard__header .pf-c-button, .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button, .pf-c-page__header .pf-c-button, .pf-c-masthead .pf-c-button, .pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button, .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button, .pf-c-banner .pf-c-button, .pf-c-about-modal-box .pf-c-button, .pf-t-dark .pf-c-button {
24
+ .pf-c-wizard__header .pf-c-button, .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button, .pf-c-page__header .pf-c-button, .pf-c-masthead .pf-c-button, .pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button, .pf-c-log-viewer.pf-m-dark .pf-c-button, .pf-c-banner .pf-c-button, .pf-c-about-modal-box .pf-c-button, .pf-t-dark .pf-c-button {
25
25
  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
26
26
  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
27
27
  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
@@ -7385,6 +7385,10 @@ button.pf-c-breadcrumb__link {
7385
7385
  --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
7386
7386
  --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
7387
7387
  --pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
7388
+ --pf-c-card--m-non-selectable-raised--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
7389
+ --pf-c-card--m-non-selectable-raised--before--BackgroundColor: var(--pf-global--disabled-color--200);
7390
+ --pf-c-card--m-non-selectable-raised--before--ScaleY: 2;
7391
+ --pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor: var(--pf-global--disabled-color--200);
7388
7392
  --pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm);
7389
7393
  --pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm);
7390
7394
  --pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md);
@@ -7442,10 +7446,10 @@ button.pf-c-breadcrumb__link {
7442
7446
  content: "";
7443
7447
  background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
7444
7448
  }
7445
- .pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised {
7449
+ .pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised, .pf-c-card.pf-m-non-selectable-raised {
7446
7450
  position: relative;
7447
7451
  }
7448
- .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before {
7452
+ .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before, .pf-c-card.pf-m-non-selectable-raised::before {
7449
7453
  position: absolute;
7450
7454
  right: var(--pf-c-card--m-selectable-raised--before--Right);
7451
7455
  bottom: var(--pf-c-card--m-selectable-raised--before--Bottom);
@@ -7463,12 +7467,6 @@ button.pf-c-breadcrumb__link {
7463
7467
  }
7464
7468
  .pf-c-card.pf-m-selectable-raised {
7465
7469
  cursor: pointer;
7466
- /*
7467
- &:active {
7468
- --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
7469
- --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
7470
- }
7471
- */
7472
7470
  }
7473
7471
  .pf-c-card.pf-m-selectable-raised:hover {
7474
7472
  --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--hover--BoxShadow);
@@ -7478,7 +7476,11 @@ button.pf-c-breadcrumb__link {
7478
7476
  --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--focus--BoxShadow);
7479
7477
  --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--focus--before--BackgroundColor);
7480
7478
  }
7481
- .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised, .pf-c-card.pf-m-selectable-raised:active {
7479
+ .pf-c-card.pf-m-selectable-raised:active {
7480
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
7481
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
7482
+ }
7483
+ .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised {
7482
7484
  --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor);
7483
7485
  --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
7484
7486
  --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
@@ -7487,6 +7489,13 @@ button.pf-c-breadcrumb__link {
7487
7489
  transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
7488
7490
  transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));
7489
7491
  }
7492
+ .pf-c-card.pf-m-non-selectable-raised {
7493
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--BackgroundColor);
7494
+ --pf-c-card--BoxShadow: none;
7495
+ --pf-c-card--m-flat--BorderColor: var(--pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor);
7496
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--before--BackgroundColor);
7497
+ --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-non-selectable-raised--before--ScaleY);
7498
+ }
7490
7499
  .pf-c-card.pf-m-compact {
7491
7500
  --pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
7492
7501
  --pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);
@@ -14823,15 +14832,8 @@ ul.pf-c-list {
14823
14832
  max-height: var(--pf-c-log-viewer--MaxHeight);
14824
14833
  }
14825
14834
  .pf-c-log-viewer.pf-m-dark {
14826
- --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
14827
- }
14828
- .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
14829
- --pf-c-log-viewer__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
14830
- --pf-c-log-viewer__main--BorderColor: var(--pf-global--BorderColor--100);
14831
- --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
14832
- --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
14833
- --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
14834
14835
  color: var(--pf-global--Color--100);
14836
+ --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
14835
14837
  }
14836
14838
  .pf-c-log-viewer.pf-m-wrap-text {
14837
14839
  word-break: break-all;
@@ -14864,6 +14866,7 @@ ul.pf-c-list {
14864
14866
  }
14865
14867
 
14866
14868
  .pf-c-log-viewer__header {
14869
+ color: var(--pf-global--Color--100);
14867
14870
  margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
14868
14871
  }
14869
14872