@patternfly/react-table 4.42.0 → 4.43.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 (74) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/esm/components/Table/base/provider.d.ts +5 -5
  3. package/dist/esm/components/Table/base/types.d.ts +5 -5
  4. package/dist/esm/components/TableComposable/InnerScrollContainer.d.ts +9 -0
  5. package/dist/esm/components/TableComposable/InnerScrollContainer.d.ts.map +1 -0
  6. package/dist/esm/components/TableComposable/InnerScrollContainer.js +10 -0
  7. package/dist/esm/components/TableComposable/InnerScrollContainer.js.map +1 -0
  8. package/dist/esm/components/TableComposable/OuterScrollContainer.d.ts +9 -0
  9. package/dist/esm/components/TableComposable/OuterScrollContainer.d.ts.map +1 -0
  10. package/dist/esm/components/TableComposable/OuterScrollContainer.js +10 -0
  11. package/dist/esm/components/TableComposable/OuterScrollContainer.js.map +1 -0
  12. package/dist/esm/components/TableComposable/TableComposable.d.ts +3 -1
  13. package/dist/esm/components/TableComposable/TableComposable.d.ts.map +1 -1
  14. package/dist/esm/components/TableComposable/TableComposable.js +12 -2
  15. package/dist/esm/components/TableComposable/TableComposable.js.map +1 -1
  16. package/dist/esm/components/TableComposable/Th.d.ts +11 -1
  17. package/dist/esm/components/TableComposable/Th.d.ts.map +1 -1
  18. package/dist/esm/components/TableComposable/Th.js +5 -2
  19. package/dist/esm/components/TableComposable/Th.js.map +1 -1
  20. package/dist/esm/components/TableComposable/Thead.d.ts +3 -1
  21. package/dist/esm/components/TableComposable/Thead.d.ts.map +1 -1
  22. package/dist/esm/components/TableComposable/Thead.js +2 -2
  23. package/dist/esm/components/TableComposable/Thead.js.map +1 -1
  24. package/dist/esm/components/TableComposable/Tr.d.ts +3 -1
  25. package/dist/esm/components/TableComposable/Tr.d.ts.map +1 -1
  26. package/dist/esm/components/TableComposable/Tr.js +2 -2
  27. package/dist/esm/components/TableComposable/Tr.js.map +1 -1
  28. package/dist/esm/components/TableComposable/index.d.ts +2 -0
  29. package/dist/esm/components/TableComposable/index.d.ts.map +1 -1
  30. package/dist/esm/components/TableComposable/index.js +2 -0
  31. package/dist/esm/components/TableComposable/index.js.map +1 -1
  32. package/dist/js/components/Table/base/provider.d.ts +5 -5
  33. package/dist/js/components/Table/base/types.d.ts +5 -5
  34. package/dist/js/components/TableComposable/InnerScrollContainer.d.ts +9 -0
  35. package/dist/js/components/TableComposable/InnerScrollContainer.d.ts.map +1 -0
  36. package/dist/js/components/TableComposable/InnerScrollContainer.js +14 -0
  37. package/dist/js/components/TableComposable/InnerScrollContainer.js.map +1 -0
  38. package/dist/js/components/TableComposable/OuterScrollContainer.d.ts +9 -0
  39. package/dist/js/components/TableComposable/OuterScrollContainer.d.ts.map +1 -0
  40. package/dist/js/components/TableComposable/OuterScrollContainer.js +14 -0
  41. package/dist/js/components/TableComposable/OuterScrollContainer.js.map +1 -0
  42. package/dist/js/components/TableComposable/TableComposable.d.ts +3 -1
  43. package/dist/js/components/TableComposable/TableComposable.d.ts.map +1 -1
  44. package/dist/js/components/TableComposable/TableComposable.js +12 -2
  45. package/dist/js/components/TableComposable/TableComposable.js.map +1 -1
  46. package/dist/js/components/TableComposable/Th.d.ts +11 -1
  47. package/dist/js/components/TableComposable/Th.d.ts.map +1 -1
  48. package/dist/js/components/TableComposable/Th.js +5 -2
  49. package/dist/js/components/TableComposable/Th.js.map +1 -1
  50. package/dist/js/components/TableComposable/Thead.d.ts +3 -1
  51. package/dist/js/components/TableComposable/Thead.d.ts.map +1 -1
  52. package/dist/js/components/TableComposable/Thead.js +2 -2
  53. package/dist/js/components/TableComposable/Thead.js.map +1 -1
  54. package/dist/js/components/TableComposable/Tr.d.ts +3 -1
  55. package/dist/js/components/TableComposable/Tr.d.ts.map +1 -1
  56. package/dist/js/components/TableComposable/Tr.js +2 -2
  57. package/dist/js/components/TableComposable/Tr.js.map +1 -1
  58. package/dist/js/components/TableComposable/index.d.ts +2 -0
  59. package/dist/js/components/TableComposable/index.d.ts.map +1 -1
  60. package/dist/js/components/TableComposable/index.js +2 -0
  61. package/dist/js/components/TableComposable/index.js.map +1 -1
  62. package/dist/umd/react-table.css +57 -0
  63. package/dist/umd/react-table.js +244 -206
  64. package/dist/umd/react-table.min.css +257 -200
  65. package/dist/umd/react-table.min.js +3 -3
  66. package/package.json +6 -6
  67. package/src/components/TableComposable/InnerScrollContainer.tsx +22 -0
  68. package/src/components/TableComposable/OuterScrollContainer.tsx +22 -0
  69. package/src/components/TableComposable/TableComposable.tsx +11 -0
  70. package/src/components/TableComposable/Th.tsx +26 -0
  71. package/src/components/TableComposable/Thead.tsx +12 -1
  72. package/src/components/TableComposable/Tr.tsx +5 -1
  73. package/src/components/TableComposable/examples/ComposableTable.md +1106 -0
  74. package/src/components/TableComposable/index.ts +2 -0
@@ -4158,6 +4158,63 @@
4158
4158
  --pf-c-table--cell--Width: auto;
4159
4159
  }
4160
4160
  }
4161
+ .pf-c-table {
4162
+ --pf-c-table__sticky-column--cell-min-width--base: 12.5rem;
4163
+ --pf-c-table__sticky-column--MinWidth: var(--pf-c-table__sticky-column--cell-min-width--base);
4164
+ --pf-c-table__sticky-column--Left: 0;
4165
+ --pf-c-table__sticky-column--ZIndex: var(--pf-global--ZIndex--md);
4166
+ --pf-c-table__sticky-column--Top: 0;
4167
+ --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
4168
+ --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
4169
+ --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
4170
+ --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
4171
+ }
4172
+
4173
+ .pf-c-table .pf-c-table__sticky-column {
4174
+ position: sticky;
4175
+ left: var(--pf-c-table__sticky-column--Left);
4176
+ z-index: var(--pf-c-table__sticky-column--ZIndex);
4177
+ min-width: var(--pf-c-table__sticky-column--MinWidth);
4178
+ background-color: var(--pf-c-table__sticky-column--BackgroundColor);
4179
+ background-clip: padding-box;
4180
+ }
4181
+
4182
+ .pf-c-table .pf-c-table__sticky-column.pf-m-border-right::before {
4183
+ --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth);
4184
+ --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightColor);
4185
+ }
4186
+
4187
+ .pf-c-table .pf-c-table__sticky-column.pf-m-border-left::before {
4188
+ --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth);
4189
+ --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftColor);
4190
+ }
4191
+
4192
+ .pf-c-table.pf-m-sticky-header {
4193
+ --pf-c-table--cell--Overflow: visible;
4194
+ }
4195
+
4196
+ .pf-c-table.pf-m-sticky-header thead .pf-c-table__sticky-column {
4197
+ z-index: var(--pf-c-table--m-sticky-header--thead__sticky-column--ZIndex);
4198
+ }
4199
+
4200
+ .pf-c-scroll-outer-wrapper {
4201
+ --pf-c-scroll-outer-wrapper--MinHeight: 25rem;
4202
+ display: flex;
4203
+ flex-direction: column;
4204
+ max-width: 100%;
4205
+ min-height: var(--pf-c-scroll-outer-wrapper--MinHeight);
4206
+ max-height: 100%;
4207
+ overflow: hidden;
4208
+ }
4209
+
4210
+ .pf-c-scroll-inner-wrapper {
4211
+ display: flex;
4212
+ flex-direction: column;
4213
+ max-width: 100%;
4214
+ max-height: 100%;
4215
+ overflow: auto;
4216
+ }
4217
+
4161
4218
  .pf-c-form {
4162
4219
  --pf-c-form--GridGap: var(--pf-global--gutter--md);
4163
4220
  --pf-c-form__group--m-action--MarginTop: var(--pf-global--spacer--xl);
@@ -15659,6 +15716,206 @@ ul.pf-c-list {
15659
15716
  margin-right: var(--pf-c-menu-toggle__toggle-icon--MarginRight);
15660
15717
  }
15661
15718
 
15719
+ .pf-c-modal-box {
15720
+ --pf-c-modal-box--BackgroundColor: var(--pf-global--BackgroundColor--100);
15721
+ --pf-c-modal-box--BoxShadow: var(--pf-global--BoxShadow--xl);
15722
+ --pf-c-modal-box--ZIndex: var(--pf-global--ZIndex--xl);
15723
+ --pf-c-modal-box--Width: 100%;
15724
+ --pf-c-modal-box--MaxWidth: calc(100% - var(--pf-global--spacer--xl));
15725
+ --pf-c-modal-box--m-sm--sm--MaxWidth: 35rem;
15726
+ --pf-c-modal-box--m-md--Width: 52.5rem;
15727
+ --pf-c-modal-box--m-lg--lg--MaxWidth: 70rem;
15728
+ --pf-c-modal-box--MaxHeight: calc(100% - var(--pf-global--spacer--2xl));
15729
+ --pf-c-modal-box--m-align-top--spacer: var(--pf-global--spacer--sm);
15730
+ --pf-c-modal-box--m-align-top--xl--spacer: var(--pf-global--spacer--xl);
15731
+ --pf-c-modal-box--m-align-top--MarginTop: var(--pf-c-modal-box--m-align-top--spacer);
15732
+ --pf-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-c-modal-box--m-align-top--spacer), var(--pf-global--spacer--2xl)) - var(--pf-c-modal-box--m-align-top--spacer));
15733
+ --pf-c-modal-box--m-align-top--MaxWidth: calc(100% - min(var(--pf-c-modal-box--m-align-top--spacer) * 2, var(--pf-global--spacer--xl)));
15734
+ --pf-c-modal-box--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
15735
+ --pf-c-modal-box--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
15736
+ --pf-c-modal-box--m-success__title-icon--Color: var(--pf-global--success-color--100);
15737
+ --pf-c-modal-box--m-info__title-icon--Color: var(--pf-global--info-color--100);
15738
+ --pf-c-modal-box--m-default__title-icon--Color: var(--pf-global--default-color--200);
15739
+ --pf-c-modal-box__header--PaddingTop: var(--pf-global--spacer--lg);
15740
+ --pf-c-modal-box__header--PaddingRight: var(--pf-global--spacer--lg);
15741
+ --pf-c-modal-box__header--PaddingLeft: var(--pf-global--spacer--lg);
15742
+ --pf-c-modal-box__header--last-child--PaddingBottom: var(--pf-global--spacer--lg);
15743
+ --pf-c-modal-box__title--LineHeight: var(--pf-global--LineHeight--sm);
15744
+ --pf-c-modal-box__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
15745
+ --pf-c-modal-box__title--FontSize: var(--pf-global--FontSize--2xl);
15746
+ --pf-c-modal-box__title-icon--MarginRight: var(--pf-global--spacer--sm);
15747
+ --pf-c-modal-box__title-icon--Color: var(--pf-global--Color--100);
15748
+ --pf-c-modal-box__description--PaddingTop: var(--pf-global--spacer--xs);
15749
+ --pf-c-modal-box__body--MinHeight: calc(var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md));
15750
+ --pf-c-modal-box__body--PaddingTop: var(--pf-global--spacer--lg);
15751
+ --pf-c-modal-box__body--PaddingRight: var(--pf-global--spacer--lg);
15752
+ --pf-c-modal-box__body--PaddingLeft: var(--pf-global--spacer--lg);
15753
+ --pf-c-modal-box__body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
15754
+ --pf-c-modal-box__header--body--PaddingTop: var(--pf-global--spacer--md);
15755
+ --pf-c-modal-box--c-button--Top: calc(var(--pf-global--spacer--lg));
15756
+ --pf-c-modal-box--c-button--Right: var(--pf-global--spacer--md);
15757
+ --pf-c-modal-box--c-button--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
15758
+ --pf-c-modal-box__footer--PaddingTop: var(--pf-global--spacer--lg);
15759
+ --pf-c-modal-box__footer--PaddingRight: var(--pf-global--spacer--lg);
15760
+ --pf-c-modal-box__footer--PaddingBottom: var(--pf-global--spacer--lg);
15761
+ --pf-c-modal-box__footer--PaddingLeft: var(--pf-global--spacer--lg);
15762
+ --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-global--spacer--md);
15763
+ --pf-c-modal-box__footer--c-button--sm--MarginRight: calc(var(--pf-c-modal-box__footer--c-button--MarginRight) / 2);
15764
+ position: relative;
15765
+ z-index: var(--pf-c-modal-box--ZIndex);
15766
+ display: flex;
15767
+ flex-direction: column;
15768
+ width: var(--pf-c-modal-box--Width);
15769
+ max-width: var(--pf-c-modal-box--MaxWidth);
15770
+ max-height: var(--pf-c-modal-box--MaxHeight);
15771
+ background-color: var(--pf-c-modal-box--BackgroundColor);
15772
+ box-shadow: var(--pf-c-modal-box--BoxShadow);
15773
+ }
15774
+
15775
+ @media (min-width: 1200px) {
15776
+ .pf-c-modal-box {
15777
+ --pf-c-modal-box--m-align-top--spacer: var(--pf-c-modal-box--m-align-top--xl--spacer);
15778
+ }
15779
+ }
15780
+ .pf-c-modal-box.pf-m-sm {
15781
+ --pf-c-modal-box--Width: var(--pf-c-modal-box--m-sm--sm--MaxWidth);
15782
+ }
15783
+
15784
+ .pf-c-modal-box.pf-m-md {
15785
+ --pf-c-modal-box--Width: var(--pf-c-modal-box--m-md--Width);
15786
+ }
15787
+
15788
+ .pf-c-modal-box.pf-m-lg {
15789
+ --pf-c-modal-box--Width: var(--pf-c-modal-box--m-lg--lg--MaxWidth);
15790
+ }
15791
+
15792
+ .pf-c-modal-box.pf-m-align-top {
15793
+ top: var(--pf-c-modal-box--m-align-top--MarginTop);
15794
+ align-self: flex-start;
15795
+ max-width: var(--pf-c-modal-box--m-align-top--MaxWidth);
15796
+ max-height: var(--pf-c-modal-box--m-align-top--MaxHeight);
15797
+ }
15798
+
15799
+ .pf-c-modal-box.pf-m-danger {
15800
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-danger__title-icon--Color);
15801
+ }
15802
+
15803
+ .pf-c-modal-box.pf-m-warning {
15804
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-warning__title-icon--Color);
15805
+ }
15806
+
15807
+ .pf-c-modal-box.pf-m-success {
15808
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-success__title-icon--Color);
15809
+ }
15810
+
15811
+ .pf-c-modal-box.pf-m-default {
15812
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-default__title-icon--Color);
15813
+ }
15814
+
15815
+ .pf-c-modal-box.pf-m-info {
15816
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-info__title-icon--Color);
15817
+ }
15818
+
15819
+ .pf-c-modal-box > .pf-c-button {
15820
+ position: absolute;
15821
+ top: var(--pf-c-modal-box--c-button--Top);
15822
+ right: var(--pf-c-modal-box--c-button--Right);
15823
+ }
15824
+
15825
+ .pf-c-modal-box > .pf-c-button + * {
15826
+ margin-right: var(--pf-c-modal-box--c-button--sibling--MarginRight);
15827
+ }
15828
+
15829
+ .pf-c-modal-box__header {
15830
+ display: flex;
15831
+ flex-direction: column;
15832
+ flex-shrink: 0;
15833
+ padding-top: var(--pf-c-modal-box__header--PaddingTop);
15834
+ padding-right: var(--pf-c-modal-box__header--PaddingRight);
15835
+ padding-left: var(--pf-c-modal-box__header--PaddingLeft);
15836
+ }
15837
+
15838
+ .pf-c-modal-box__header.pf-m-help {
15839
+ display: flex;
15840
+ flex-direction: row;
15841
+ }
15842
+
15843
+ .pf-c-modal-box__header:last-child {
15844
+ padding-bottom: var(--pf-c-modal-box__header--last-child--PaddingBottom);
15845
+ }
15846
+
15847
+ .pf-c-modal-box__header + .pf-c-modal-box__body {
15848
+ --pf-c-modal-box__body--PaddingTop: var(--pf-c-modal-box__header--body--PaddingTop);
15849
+ }
15850
+
15851
+ .pf-c-modal-box__header-main {
15852
+ flex-grow: 1;
15853
+ min-width: 0;
15854
+ }
15855
+
15856
+ .pf-c-modal-box__title,
15857
+ .pf-c-modal-box__title-text {
15858
+ overflow: hidden;
15859
+ text-overflow: ellipsis;
15860
+ white-space: nowrap;
15861
+ }
15862
+
15863
+ .pf-c-modal-box__title {
15864
+ flex: 0 0 auto;
15865
+ font-family: var(--pf-c-modal-box__title--FontFamily);
15866
+ font-size: var(--pf-c-modal-box__title--FontSize);
15867
+ line-height: var(--pf-c-modal-box__title--LineHeight);
15868
+ }
15869
+
15870
+ .pf-c-modal-box__title.pf-m-icon {
15871
+ display: flex;
15872
+ }
15873
+
15874
+ .pf-c-modal-box__title-icon {
15875
+ margin-right: var(--pf-c-modal-box__title-icon--MarginRight);
15876
+ color: var(--pf-c-modal-box__title-icon--Color);
15877
+ }
15878
+
15879
+ .pf-c-modal-box__description {
15880
+ padding-top: var(--pf-c-modal-box__description--PaddingTop);
15881
+ }
15882
+
15883
+ .pf-c-modal-box__body {
15884
+ flex: 1 1 auto;
15885
+ min-height: var(--pf-c-modal-box__body--MinHeight);
15886
+ padding-top: var(--pf-c-modal-box__body--PaddingTop);
15887
+ padding-right: var(--pf-c-modal-box__body--PaddingRight);
15888
+ padding-left: var(--pf-c-modal-box__body--PaddingLeft);
15889
+ overflow-x: hidden;
15890
+ overflow-y: auto;
15891
+ overscroll-behavior: contain;
15892
+ word-break: break-word;
15893
+ -webkit-overflow-scrolling: touch;
15894
+ }
15895
+
15896
+ .pf-c-modal-box__body:last-child {
15897
+ padding-bottom: var(--pf-c-modal-box__body--last-child--PaddingBottom);
15898
+ }
15899
+
15900
+ .pf-c-modal-box__footer {
15901
+ display: flex;
15902
+ flex: 0 0 auto;
15903
+ align-items: center;
15904
+ padding-top: var(--pf-c-modal-box__footer--PaddingTop);
15905
+ padding-right: var(--pf-c-modal-box__footer--PaddingRight);
15906
+ padding-bottom: var(--pf-c-modal-box__footer--PaddingBottom);
15907
+ padding-left: var(--pf-c-modal-box__footer--PaddingLeft);
15908
+ }
15909
+
15910
+ .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
15911
+ margin-right: var(--pf-c-modal-box__footer--c-button--MarginRight);
15912
+ }
15913
+
15914
+ @media screen and (min-width: 576px) {
15915
+ .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
15916
+ --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-c-modal-box__footer--c-button--sm--MarginRight);
15917
+ }
15918
+ }
15662
15919
  .pf-c-nav {
15663
15920
  --pf-c-nav--Transition: var(--pf-global--Transition);
15664
15921
  --pf-c-nav--m-light__item--before--BorderColor: var(--pf-global--BorderColor--300);
@@ -16559,206 +16816,6 @@ ul.pf-c-list {
16559
16816
  left: 0;
16560
16817
  }
16561
16818
 
16562
- .pf-c-modal-box {
16563
- --pf-c-modal-box--BackgroundColor: var(--pf-global--BackgroundColor--100);
16564
- --pf-c-modal-box--BoxShadow: var(--pf-global--BoxShadow--xl);
16565
- --pf-c-modal-box--ZIndex: var(--pf-global--ZIndex--xl);
16566
- --pf-c-modal-box--Width: 100%;
16567
- --pf-c-modal-box--MaxWidth: calc(100% - var(--pf-global--spacer--xl));
16568
- --pf-c-modal-box--m-sm--sm--MaxWidth: 35rem;
16569
- --pf-c-modal-box--m-md--Width: 52.5rem;
16570
- --pf-c-modal-box--m-lg--lg--MaxWidth: 70rem;
16571
- --pf-c-modal-box--MaxHeight: calc(100% - var(--pf-global--spacer--2xl));
16572
- --pf-c-modal-box--m-align-top--spacer: var(--pf-global--spacer--sm);
16573
- --pf-c-modal-box--m-align-top--xl--spacer: var(--pf-global--spacer--xl);
16574
- --pf-c-modal-box--m-align-top--MarginTop: var(--pf-c-modal-box--m-align-top--spacer);
16575
- --pf-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-c-modal-box--m-align-top--spacer), var(--pf-global--spacer--2xl)) - var(--pf-c-modal-box--m-align-top--spacer));
16576
- --pf-c-modal-box--m-align-top--MaxWidth: calc(100% - min(var(--pf-c-modal-box--m-align-top--spacer) * 2, var(--pf-global--spacer--xl)));
16577
- --pf-c-modal-box--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
16578
- --pf-c-modal-box--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
16579
- --pf-c-modal-box--m-success__title-icon--Color: var(--pf-global--success-color--100);
16580
- --pf-c-modal-box--m-info__title-icon--Color: var(--pf-global--info-color--100);
16581
- --pf-c-modal-box--m-default__title-icon--Color: var(--pf-global--default-color--200);
16582
- --pf-c-modal-box__header--PaddingTop: var(--pf-global--spacer--lg);
16583
- --pf-c-modal-box__header--PaddingRight: var(--pf-global--spacer--lg);
16584
- --pf-c-modal-box__header--PaddingLeft: var(--pf-global--spacer--lg);
16585
- --pf-c-modal-box__header--last-child--PaddingBottom: var(--pf-global--spacer--lg);
16586
- --pf-c-modal-box__title--LineHeight: var(--pf-global--LineHeight--sm);
16587
- --pf-c-modal-box__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
16588
- --pf-c-modal-box__title--FontSize: var(--pf-global--FontSize--2xl);
16589
- --pf-c-modal-box__title-icon--MarginRight: var(--pf-global--spacer--sm);
16590
- --pf-c-modal-box__title-icon--Color: var(--pf-global--Color--100);
16591
- --pf-c-modal-box__description--PaddingTop: var(--pf-global--spacer--xs);
16592
- --pf-c-modal-box__body--MinHeight: calc(var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md));
16593
- --pf-c-modal-box__body--PaddingTop: var(--pf-global--spacer--lg);
16594
- --pf-c-modal-box__body--PaddingRight: var(--pf-global--spacer--lg);
16595
- --pf-c-modal-box__body--PaddingLeft: var(--pf-global--spacer--lg);
16596
- --pf-c-modal-box__body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
16597
- --pf-c-modal-box__header--body--PaddingTop: var(--pf-global--spacer--md);
16598
- --pf-c-modal-box--c-button--Top: calc(var(--pf-global--spacer--lg));
16599
- --pf-c-modal-box--c-button--Right: var(--pf-global--spacer--md);
16600
- --pf-c-modal-box--c-button--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
16601
- --pf-c-modal-box__footer--PaddingTop: var(--pf-global--spacer--lg);
16602
- --pf-c-modal-box__footer--PaddingRight: var(--pf-global--spacer--lg);
16603
- --pf-c-modal-box__footer--PaddingBottom: var(--pf-global--spacer--lg);
16604
- --pf-c-modal-box__footer--PaddingLeft: var(--pf-global--spacer--lg);
16605
- --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-global--spacer--md);
16606
- --pf-c-modal-box__footer--c-button--sm--MarginRight: calc(var(--pf-c-modal-box__footer--c-button--MarginRight) / 2);
16607
- position: relative;
16608
- z-index: var(--pf-c-modal-box--ZIndex);
16609
- display: flex;
16610
- flex-direction: column;
16611
- width: var(--pf-c-modal-box--Width);
16612
- max-width: var(--pf-c-modal-box--MaxWidth);
16613
- max-height: var(--pf-c-modal-box--MaxHeight);
16614
- background-color: var(--pf-c-modal-box--BackgroundColor);
16615
- box-shadow: var(--pf-c-modal-box--BoxShadow);
16616
- }
16617
-
16618
- @media (min-width: 1200px) {
16619
- .pf-c-modal-box {
16620
- --pf-c-modal-box--m-align-top--spacer: var(--pf-c-modal-box--m-align-top--xl--spacer);
16621
- }
16622
- }
16623
- .pf-c-modal-box.pf-m-sm {
16624
- --pf-c-modal-box--Width: var(--pf-c-modal-box--m-sm--sm--MaxWidth);
16625
- }
16626
-
16627
- .pf-c-modal-box.pf-m-md {
16628
- --pf-c-modal-box--Width: var(--pf-c-modal-box--m-md--Width);
16629
- }
16630
-
16631
- .pf-c-modal-box.pf-m-lg {
16632
- --pf-c-modal-box--Width: var(--pf-c-modal-box--m-lg--lg--MaxWidth);
16633
- }
16634
-
16635
- .pf-c-modal-box.pf-m-align-top {
16636
- top: var(--pf-c-modal-box--m-align-top--MarginTop);
16637
- align-self: flex-start;
16638
- max-width: var(--pf-c-modal-box--m-align-top--MaxWidth);
16639
- max-height: var(--pf-c-modal-box--m-align-top--MaxHeight);
16640
- }
16641
-
16642
- .pf-c-modal-box.pf-m-danger {
16643
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-danger__title-icon--Color);
16644
- }
16645
-
16646
- .pf-c-modal-box.pf-m-warning {
16647
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-warning__title-icon--Color);
16648
- }
16649
-
16650
- .pf-c-modal-box.pf-m-success {
16651
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-success__title-icon--Color);
16652
- }
16653
-
16654
- .pf-c-modal-box.pf-m-default {
16655
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-default__title-icon--Color);
16656
- }
16657
-
16658
- .pf-c-modal-box.pf-m-info {
16659
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-info__title-icon--Color);
16660
- }
16661
-
16662
- .pf-c-modal-box > .pf-c-button {
16663
- position: absolute;
16664
- top: var(--pf-c-modal-box--c-button--Top);
16665
- right: var(--pf-c-modal-box--c-button--Right);
16666
- }
16667
-
16668
- .pf-c-modal-box > .pf-c-button + * {
16669
- margin-right: var(--pf-c-modal-box--c-button--sibling--MarginRight);
16670
- }
16671
-
16672
- .pf-c-modal-box__header {
16673
- display: flex;
16674
- flex-direction: column;
16675
- flex-shrink: 0;
16676
- padding-top: var(--pf-c-modal-box__header--PaddingTop);
16677
- padding-right: var(--pf-c-modal-box__header--PaddingRight);
16678
- padding-left: var(--pf-c-modal-box__header--PaddingLeft);
16679
- }
16680
-
16681
- .pf-c-modal-box__header.pf-m-help {
16682
- display: flex;
16683
- flex-direction: row;
16684
- }
16685
-
16686
- .pf-c-modal-box__header:last-child {
16687
- padding-bottom: var(--pf-c-modal-box__header--last-child--PaddingBottom);
16688
- }
16689
-
16690
- .pf-c-modal-box__header + .pf-c-modal-box__body {
16691
- --pf-c-modal-box__body--PaddingTop: var(--pf-c-modal-box__header--body--PaddingTop);
16692
- }
16693
-
16694
- .pf-c-modal-box__header-main {
16695
- flex-grow: 1;
16696
- min-width: 0;
16697
- }
16698
-
16699
- .pf-c-modal-box__title,
16700
- .pf-c-modal-box__title-text {
16701
- overflow: hidden;
16702
- text-overflow: ellipsis;
16703
- white-space: nowrap;
16704
- }
16705
-
16706
- .pf-c-modal-box__title {
16707
- flex: 0 0 auto;
16708
- font-family: var(--pf-c-modal-box__title--FontFamily);
16709
- font-size: var(--pf-c-modal-box__title--FontSize);
16710
- line-height: var(--pf-c-modal-box__title--LineHeight);
16711
- }
16712
-
16713
- .pf-c-modal-box__title.pf-m-icon {
16714
- display: flex;
16715
- }
16716
-
16717
- .pf-c-modal-box__title-icon {
16718
- margin-right: var(--pf-c-modal-box__title-icon--MarginRight);
16719
- color: var(--pf-c-modal-box__title-icon--Color);
16720
- }
16721
-
16722
- .pf-c-modal-box__description {
16723
- padding-top: var(--pf-c-modal-box__description--PaddingTop);
16724
- }
16725
-
16726
- .pf-c-modal-box__body {
16727
- flex: 1 1 auto;
16728
- min-height: var(--pf-c-modal-box__body--MinHeight);
16729
- padding-top: var(--pf-c-modal-box__body--PaddingTop);
16730
- padding-right: var(--pf-c-modal-box__body--PaddingRight);
16731
- padding-left: var(--pf-c-modal-box__body--PaddingLeft);
16732
- overflow-x: hidden;
16733
- overflow-y: auto;
16734
- overscroll-behavior: contain;
16735
- word-break: break-word;
16736
- -webkit-overflow-scrolling: touch;
16737
- }
16738
-
16739
- .pf-c-modal-box__body:last-child {
16740
- padding-bottom: var(--pf-c-modal-box__body--last-child--PaddingBottom);
16741
- }
16742
-
16743
- .pf-c-modal-box__footer {
16744
- display: flex;
16745
- flex: 0 0 auto;
16746
- align-items: center;
16747
- padding-top: var(--pf-c-modal-box__footer--PaddingTop);
16748
- padding-right: var(--pf-c-modal-box__footer--PaddingRight);
16749
- padding-bottom: var(--pf-c-modal-box__footer--PaddingBottom);
16750
- padding-left: var(--pf-c-modal-box__footer--PaddingLeft);
16751
- }
16752
-
16753
- .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
16754
- margin-right: var(--pf-c-modal-box__footer--c-button--MarginRight);
16755
- }
16756
-
16757
- @media screen and (min-width: 576px) {
16758
- .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
16759
- --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-c-modal-box__footer--c-button--sm--MarginRight);
16760
- }
16761
- }
16762
16819
  .pf-l-bullseye {
16763
16820
  --pf-l-bullseye--Padding: 0;
16764
16821
  display: flex;