@patternfly/react-core 4.235.1 → 4.235.2

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 (6) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/umd/react-core.css +228 -228
  3. package/dist/umd/react-core.js +509 -413
  4. package/dist/umd/react-core.min.css +1094 -1094
  5. package/dist/umd/react-core.min.js +5 -5
  6. package/package.json +10 -10
package/dist/umd/react-core.min.css CHANGED
@@ -5871,1400 +5871,1400 @@ label.pf-c-check, .pf-c-check__label,
5871
5871
  --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
5872
5872
  }
5873
5873
  }
5874
- .pf-c-drawer {
5875
- --pf-c-drawer__section--BackgroundColor: var(--pf-global--BackgroundColor--100);
5876
- --pf-c-drawer__section--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
5877
- --pf-c-drawer__content--FlexBasis: 100%;
5878
- --pf-c-drawer__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
5879
- --pf-c-drawer__content--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
5880
- --pf-c-drawer__content--ZIndex: var(--pf-global--ZIndex--xs);
5881
- --pf-c-drawer__panel--MinWidth: 50%;
5882
- --pf-c-drawer__panel--MaxHeight: auto;
5883
- --pf-c-drawer__panel--ZIndex: var(--pf-global--ZIndex--sm);
5884
- --pf-c-drawer__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
5885
- --pf-c-drawer__panel--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
5886
- --pf-c-drawer__panel--TransitionDuration: var(--pf-global--TransitionDuration);
5887
- --pf-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
5888
- --pf-c-drawer__panel--FlexBasis: 100%;
5889
- --pf-c-drawer__panel--md--FlexBasis--min: 1.5rem;
5890
- --pf-c-drawer__panel--md--FlexBasis: 50%;
5891
- --pf-c-drawer__panel--md--FlexBasis--max: 100%;
5892
- --pf-c-drawer__panel--xl--MinWidth: 28.125rem;
5893
- --pf-c-drawer__panel--xl--FlexBasis: 28.125rem;
5894
- --pf-c-drawer--m-panel-bottom__panel--md--MinHeight: 50%;
5895
- --pf-c-drawer--m-panel-bottom__panel--xl--MinHeight: 18.75rem;
5896
- --pf-c-drawer--m-panel-bottom__panel--xl--FlexBasis: 18.75rem;
5897
- --pf-c-drawer__panel--m-resizable--FlexDirection: row;
5898
- --pf-c-drawer__panel--m-resizable--md--FlexBasis--min: var(--pf-c-drawer__splitter--m-vertical--Width);
5899
- --pf-c-drawer__panel--m-resizable--MinWidth: 1.5rem;
5900
- --pf-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
5901
- --pf-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
5902
- --pf-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
5903
- --pf-c-drawer--child--PaddingTop: var(--pf-global--spacer--md);
5904
- --pf-c-drawer--child--PaddingRight: var(--pf-global--spacer--md);
5905
- --pf-c-drawer--child--PaddingBottom: var(--pf-global--spacer--md);
5906
- --pf-c-drawer--child--PaddingLeft: var(--pf-global--spacer--md);
5907
- --pf-c-drawer--child--md--PaddingTop: var(--pf-global--spacer--lg);
5908
- --pf-c-drawer--child--md--PaddingRight: var(--pf-global--spacer--lg);
5909
- --pf-c-drawer--child--md--PaddingBottom: var(--pf-global--spacer--lg);
5910
- --pf-c-drawer--child--md--PaddingLeft: var(--pf-global--spacer--lg);
5911
- --pf-c-drawer--child--m-padding--PaddingTop: var(--pf-global--spacer--md);
5912
- --pf-c-drawer--child--m-padding--PaddingRight: var(--pf-global--spacer--md);
5913
- --pf-c-drawer--child--m-padding--PaddingBottom: var(--pf-global--spacer--md);
5914
- --pf-c-drawer--child--m-padding--PaddingLeft: var(--pf-global--spacer--md);
5915
- --pf-c-drawer--child--m-padding--md--PaddingTop: var(--pf-global--spacer--lg);
5916
- --pf-c-drawer--child--m-padding--md--PaddingRight: var(--pf-global--spacer--lg);
5917
- --pf-c-drawer--child--m-padding--md--PaddingBottom: var(--pf-global--spacer--lg);
5918
- --pf-c-drawer--child--m-padding--md--PaddingLeft: var(--pf-global--spacer--lg);
5919
- --pf-c-drawer__content--child--PaddingTop: 0;
5920
- --pf-c-drawer__content--child--PaddingRight: 0;
5921
- --pf-c-drawer__content--child--PaddingBottom: 0;
5922
- --pf-c-drawer__content--child--PaddingLeft: 0;
5923
- --pf-c-drawer__splitter--Height: 0.5625rem;
5924
- --pf-c-drawer__splitter--Width: 100%;
5925
- --pf-c-drawer__splitter--BackgroundColor: var(--pf-global--BackgroundColor--100);
5926
- --pf-c-drawer__splitter--Cursor: row-resize;
5927
- --pf-c-drawer__splitter--m-vertical--Height: 100%;
5928
- --pf-c-drawer__splitter--m-vertical--Width: 0.5625rem;
5929
- --pf-c-drawer__splitter--m-vertical--Cursor: col-resize;
5930
- --pf-c-drawer--m-inline__splitter--focus--OutlineOffset: -0.0625rem;
5931
- --pf-c-drawer__splitter--after--BorderColor: var(--pf-global--BorderColor--100);
5932
- --pf-c-drawer__splitter--after--border-width--base: var(--pf-global--BorderWidth--sm);
5933
- --pf-c-drawer__splitter--after--BorderTopWidth: 0;
5934
- --pf-c-drawer__splitter--after--BorderRightWidth: var(--pf-c-drawer__splitter--after--border-width--base);
5935
- --pf-c-drawer__splitter--after--BorderBottomWidth: 0;
5936
- --pf-c-drawer__splitter--after--BorderLeftWidth: 0;
5937
- --pf-c-drawer--m-panel-left__splitter--after--BorderLeftWidth: var(--pf-c-drawer__splitter--after--border-width--base);
5938
- --pf-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth: var(--pf-c-drawer__splitter--after--border-width--base);
5939
- --pf-c-drawer--m-inline__splitter--m-vertical--Width: 0.625rem;
5940
- --pf-c-drawer--m-inline__splitter-handle--Left: 50%;
5941
- --pf-c-drawer--m-inline__splitter--after--BorderRightWidth: var(--pf-c-drawer__splitter--after--border-width--base);
5942
- --pf-c-drawer--m-inline__splitter--after--BorderLeftWidth: var(--pf-c-drawer__splitter--after--border-width--base);
5943
- --pf-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.625rem;
5944
- --pf-c-drawer--m-inline--m-panel-bottom__splitter-handle--Top: 50%;
5945
- --pf-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderTopWidth: var(--pf-c-drawer__splitter--after--border-width--base);
5946
- --pf-c-drawer__splitter-handle--Top: 50%;
5947
- --pf-c-drawer__splitter-handle--Left: calc(50% - var(--pf-c-drawer__splitter--after--border-width--base));
5948
- --pf-c-drawer--m-panel-left__splitter-handle--Left: 50%;
5949
- --pf-c-drawer--m-panel-bottom__splitter-handle--Top: calc(50% - var(--pf-c-drawer__splitter--after--border-width--base));
5950
- --pf-c-drawer__splitter-handle--after--BorderColor: var(--pf-global--Color--200);
5951
- --pf-c-drawer__splitter-handle--after--BorderTopWidth: var(--pf-global--BorderWidth--sm);
5952
- --pf-c-drawer__splitter-handle--after--BorderRightWidth: 0;
5953
- --pf-c-drawer__splitter-handle--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
5954
- --pf-c-drawer__splitter-handle--after--BorderLeftWidth: 0;
5955
- --pf-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-global--Color--100);
5956
- --pf-c-drawer__splitter--focus__splitter-handle--after--BorderColor: var(--pf-global--Color--100);
5957
- --pf-c-drawer__splitter--m-vertical__splitter-handle--after--BorderTopWidth: 0;
5958
- --pf-c-drawer__splitter--m-vertical__splitter-handle--after--BorderRightWidth: var(--pf-global--BorderWidth--sm);
5959
- --pf-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBottomWidth: 0;
5960
- --pf-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
5961
- --pf-c-drawer__splitter-handle--after--Width: 0.75rem;
5962
- --pf-c-drawer__splitter-handle--after--Height: 0.25rem;
5963
- --pf-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
5964
- --pf-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
5965
- --pf-c-drawer__actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
5966
- --pf-c-drawer__actions--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
5967
- --pf-c-drawer__panel--BoxShadow: none;
5968
- --pf-c-drawer--m-expanded__panel--BoxShadow: var(--pf-global--BoxShadow--lg-left);
5969
- --pf-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-global--BoxShadow--lg-right);
5970
- --pf-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-global--BoxShadow--lg-top);
5971
- --pf-c-drawer__panel--after--Width: var(--pf-global--BorderWidth--sm);
5972
- --pf-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-global--BorderWidth--sm);
5973
- --pf-c-drawer__panel--after--BackgroundColor: transparent;
5974
- --pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-global--BorderColor--100);
5975
- --pf-c-drawer--m-inline__panel--PaddingLeft: var(--pf-c-drawer__panel--after--Width);
5976
- --pf-c-drawer--m-panel-left--m-inline__panel--PaddingRight: var(--pf-c-drawer__panel--after--Width);
5977
- --pf-c-drawer--m-panel-bottom--m-inline__panel--PaddingTop: var(--pf-c-drawer__panel--after--Width);
5978
- display: flex;
5979
- flex-direction: column;
5980
- height: 100%;
5981
- overflow-x: hidden;
5874
+ .pf-c-divider {
5875
+ --pf-hidden-visible--visible--Visibility: visible;
5876
+ --pf-hidden-visible--hidden--Display: none;
5877
+ --pf-hidden-visible--hidden--Visibility: hidden;
5878
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
5879
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
5880
+ display: var(--pf-hidden-visible--Display);
5881
+ visibility: var(--pf-hidden-visible--Visibility);
5982
5882
  }
5983
5883
 
5984
- @media screen and (min-width: 768px) {
5985
- .pf-c-drawer {
5986
- --pf-c-drawer--child--PaddingTop: var(--pf-c-drawer--child--md--PaddingTop);
5987
- --pf-c-drawer--child--PaddingRight: var(--pf-c-drawer--child--md--PaddingRight);
5988
- --pf-c-drawer--child--PaddingBottom: var(--pf-c-drawer--child--md--PaddingBottom);
5989
- --pf-c-drawer--child--PaddingLeft: var(--pf-c-drawer--child--md--PaddingLeft);
5990
- --pf-c-drawer--child--m-padding--PaddingTop: var(--pf-c-drawer--child--m-padding--md--PaddingTop);
5991
- --pf-c-drawer--child--m-padding--PaddingRight: var(--pf-c-drawer--child--m-padding--md--PaddingRight);
5992
- --pf-c-drawer--child--m-padding--PaddingBottom: var(--pf-c-drawer--child--m-padding--md--PaddingBottom);
5993
- --pf-c-drawer--child--m-padding--PaddingLeft: var(--pf-c-drawer--child--m-padding--md--PaddingLeft);
5994
- }
5884
+ .pf-m-hidden.pf-c-divider {
5885
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
5886
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
5995
5887
  }
5996
- @media screen and (min-width: 1200px) {
5997
- .pf-c-drawer {
5998
- --pf-c-drawer__panel--MinWidth: var(--pf-c-drawer__panel--xl--MinWidth);
5999
- }
6000
5888
 
6001
- .pf-c-drawer.pf-m-panel-bottom {
6002
- --pf-c-drawer__panel--MinWidth: auto;
6003
- --pf-c-drawer__panel--MinHeight: var(--pf-c-drawer--m-panel-bottom__panel--xl--MinHeight);
5889
+ @media screen and (min-width: 576px) {
5890
+ .pf-m-hidden-on-sm.pf-c-divider {
5891
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
5892
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
6004
5893
  }
6005
- }
6006
- .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
6007
- padding-left: var(--pf-c-drawer--m-inline__panel--PaddingLeft);
6008
- }
6009
5894
 
6010
- .pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
6011
- order: 0;
6012
- margin-right: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
6013
- transform: translateX(-100%);
6014
- }
6015
-
6016
- .pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__content {
6017
- order: 1;
6018
- }
6019
-
6020
- .pf-c-drawer.pf-m-panel-bottom > .pf-c-drawer__main {
6021
- flex-direction: column;
6022
- }
6023
-
6024
- .pf-c-drawer.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6025
- transform: translateX(-100%);
6026
- }
6027
-
6028
- .pf-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
6029
- transform: translateX(0);
6030
- }
6031
-
6032
- .pf-c-drawer.pf-m-expanded.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
6033
- transform: translate(0, -100%);
6034
- }
6035
-
6036
- .pf-c-drawer.pf-m-resizing {
6037
- --pf-c-drawer__panel--TransitionProperty: none;
6038
- pointer-events: none;
6039
- }
6040
-
6041
- .pf-c-drawer.pf-m-resizing .pf-c-drawer__splitter {
6042
- pointer-events: auto;
5895
+ .pf-m-visible-on-sm.pf-c-divider {
5896
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
5897
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
5898
+ }
6043
5899
  }
5900
+ @media screen and (min-width: 768px) {
5901
+ .pf-m-hidden-on-md.pf-c-divider {
5902
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
5903
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
5904
+ }
6044
5905
 
6045
- .pf-c-drawer__section {
6046
- flex-grow: 0;
6047
- background-color: var(--pf-c-drawer__section--BackgroundColor);
5906
+ .pf-m-visible-on-md.pf-c-divider {
5907
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
5908
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
5909
+ }
6048
5910
  }
5911
+ @media screen and (min-width: 992px) {
5912
+ .pf-m-hidden-on-lg.pf-c-divider {
5913
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
5914
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
5915
+ }
6049
5916
 
6050
- .pf-c-drawer__section.pf-m-no-background {
6051
- --pf-c-drawer__section--BackgroundColor: transparent;
5917
+ .pf-m-visible-on-lg.pf-c-divider {
5918
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
5919
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
5920
+ }
6052
5921
  }
5922
+ @media screen and (min-width: 1200px) {
5923
+ .pf-m-hidden-on-xl.pf-c-divider {
5924
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
5925
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
5926
+ }
6053
5927
 
6054
- .pf-c-drawer__section.pf-m-light-200 {
6055
- --pf-c-drawer__section--BackgroundColor: var(--pf-c-drawer__section--m-light-200--BackgroundColor);
5928
+ .pf-m-visible-on-xl.pf-c-divider {
5929
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
5930
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
5931
+ }
6056
5932
  }
5933
+ @media screen and (min-width: 1450px) {
5934
+ .pf-m-hidden-on-2xl.pf-c-divider {
5935
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
5936
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
5937
+ }
6057
5938
 
6058
- .pf-c-drawer__main {
6059
- display: flex;
6060
- flex: 1;
6061
- overflow: hidden;
5939
+ .pf-m-visible-on-2xl.pf-c-divider {
5940
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
5941
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
5942
+ }
6062
5943
  }
6063
-
6064
- .pf-c-drawer__content,
6065
- .pf-c-drawer__panel,
6066
- .pf-c-drawer__panel-main {
6067
- display: flex;
6068
- flex-direction: column;
5944
+ .pf-c-divider {
5945
+ --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm);
5946
+ --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
5947
+ --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
5948
+ --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
5949
+ --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
5950
+ --pf-c-divider--after--FlexBasis: 100%;
5951
+ --pf-c-divider--after--Inset: 0%;
5952
+ --pf-c-divider--m-vertical--after--FlexBasis: 100%;
5953
+ --pf-c-divider--m-horizontal--Display: flex;
5954
+ --pf-c-divider--m-horizontal--FlexDirection: row;
5955
+ --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
5956
+ --pf-c-divider--m-horizontal--after--Width: auto;
5957
+ --pf-c-divider--m-vertical--Display: inline-flex;
5958
+ --pf-c-divider--m-vertical--FlexDirection: column;
5959
+ --pf-c-divider--m-vertical--after--Height: auto;
5960
+ --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
5961
+ --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
5962
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
5963
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
5964
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
5965
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
5966
+ width: 100%;
5967
+ height: auto;
5968
+ display: var(--pf-c-divider--Display);
5969
+ flex-direction: var(--pf-c-divider--FlexDirection);
5970
+ align-items: center;
5971
+ align-self: stretch;
6069
5972
  flex-shrink: 0;
6070
- overflow: auto;
6071
- }
6072
-
6073
- .pf-c-drawer__content {
6074
- z-index: var(--pf-c-drawer__content--ZIndex);
6075
- flex-basis: var(--pf-c-drawer__content--FlexBasis);
6076
- order: 0;
6077
- background-color: var(--pf-c-drawer__content--BackgroundColor);
6078
- }
6079
-
6080
- .pf-c-drawer__content.pf-m-no-background {
6081
- --pf-c-drawer__content--BackgroundColor: transparent;
5973
+ justify-content: center;
5974
+ border: 0;
6082
5975
  }
6083
5976
 
6084
- .pf-c-drawer__content.pf-m-light-200 {
6085
- --pf-c-drawer__content--BackgroundColor: var(--pf-c-drawer__content--m-light-200--BackgroundColor);
5977
+ .pf-c-divider::after {
5978
+ flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
6086
5979
  }
6087
5980
 
6088
- .pf-c-drawer__content > .pf-c-drawer__body {
6089
- padding: var(--pf-c-drawer__content--child--PaddingTop) var(--pf-c-drawer__content--child--PaddingRight) var(--pf-c-drawer__content--child--PaddingBottom) var(--pf-c-drawer__content--child--PaddingLeft);
5981
+ .pf-c-divider::after {
5982
+ align-self: stretch;
5983
+ width: var(--pf-c-divider--after--Width);
5984
+ height: var(--pf-c-divider--after--Height);
5985
+ content: "";
5986
+ background-color: var(--pf-c-divider--after--BackgroundColor);
5987
+ justify-self: center;
6090
5988
  }
6091
5989
 
6092
- .pf-c-drawer__panel {
6093
- position: relative;
6094
- z-index: var(--pf-c-drawer__panel--ZIndex);
6095
- flex-basis: var(--pf-c-drawer__panel--FlexBasis);
6096
- order: 1;
6097
- max-height: var(--pf-c-drawer__panel--MaxHeight);
6098
- overflow: auto;
6099
- background-color: var(--pf-c-drawer__panel--BackgroundColor);
6100
- box-shadow: var(--pf-c-drawer__panel--BoxShadow);
6101
- transition-duration: var(--pf-c-drawer__panel--TransitionDuration);
6102
- transition-property: var(--pf-c-drawer__panel--TransitionProperty);
6103
- -webkit-overflow-scrolling: touch;
5990
+ .pf-c-divider.pf-m-vertical {
5991
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
5992
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
5993
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
5994
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
5995
+ width: auto;
5996
+ height: inherit;
6104
5997
  }
6105
5998
 
6106
- .pf-c-drawer__panel::after {
6107
- position: absolute;
6108
- top: 0;
6109
- left: 0;
6110
- width: var(--pf-c-drawer__panel--after--Width);
6111
- height: 100%;
6112
- content: "";
6113
- background-color: var(--pf-c-drawer__panel--after--BackgroundColor);
5999
+ .pf-c-divider.pf-m-vertical::after {
6000
+ flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
6114
6001
  }
6115
6002
 
6116
- .pf-c-drawer__panel.pf-m-no-background {
6117
- --pf-c-drawer__panel--BackgroundColor: transparent;
6003
+ .pf-c-divider.pf-m-inset-none {
6004
+ --pf-c-divider--after--Inset: 0%;
6118
6005
  }
6119
6006
 
6120
- .pf-c-drawer__panel.pf-m-light-200 {
6121
- --pf-c-drawer__panel--BackgroundColor: var(--pf-c-drawer__panel--m-light-200--BackgroundColor);
6007
+ .pf-c-divider.pf-m-inset-xs {
6008
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6122
6009
  }
6123
6010
 
6124
- @media screen and (min-width: 768px) {
6125
- .pf-c-drawer__panel {
6126
- --pf-c-drawer__panel--FlexBasis:
6127
- max(
6128
- var(--pf-c-drawer__panel--md--FlexBasis--min),
6129
- min(var(--pf-c-drawer__panel--md--FlexBasis), var(--pf-c-drawer__panel--md--FlexBasis--max))
6130
- );
6131
- }
6011
+ .pf-c-divider.pf-m-inset-sm {
6012
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6132
6013
  }
6133
- @media screen and (min-width: 1200px) {
6134
- .pf-c-drawer__panel {
6135
- --pf-c-drawer__panel--md--FlexBasis: var(--pf-c-drawer__panel--xl--FlexBasis);
6136
- }
6137
6014
 
6138
- .pf-c-drawer.pf-m-panel-bottom .pf-c-drawer__panel {
6139
- --pf-c-drawer__panel--md--FlexBasis: var(--pf-c-drawer--m-panel-bottom__panel--xl--FlexBasis);
6140
- }
6141
- }
6142
- .pf-c-drawer__panel-main {
6143
- flex-grow: 1;
6015
+ .pf-c-divider.pf-m-inset-md {
6016
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6144
6017
  }
6145
6018
 
6146
- @keyframes pf-remove-tab-focus {
6147
- to {
6148
- visibility: hidden;
6149
- }
6150
- }
6151
- .pf-c-drawer__panel[hidden] {
6152
- animation-name: pf-remove-tab-focus;
6153
- animation-delay: var(--pf-c-drawer__panel--TransitionDuration);
6154
- animation-fill-mode: forwards;
6019
+ .pf-c-divider.pf-m-inset-lg {
6020
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6155
6021
  }
6156
6022
 
6157
- .pf-c-drawer__head {
6158
- display: grid;
6159
- grid-template-columns: auto;
6160
- grid-auto-columns: max-content;
6023
+ .pf-c-divider.pf-m-inset-xl {
6024
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6161
6025
  }
6162
6026
 
6163
- .pf-c-drawer__head > * {
6164
- grid-column: 1;
6027
+ .pf-c-divider.pf-m-inset-2xl {
6028
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6165
6029
  }
6166
6030
 
6167
- .pf-c-drawer__actions {
6168
- grid-column: 2;
6169
- grid-row: 1;
6170
- display: flex;
6171
- align-self: baseline;
6172
- margin-top: var(--pf-c-drawer__actions--MarginTop);
6173
- margin-right: var(--pf-c-drawer__actions--MarginRight);
6031
+ .pf-c-divider.pf-m-inset-3xl {
6032
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6174
6033
  }
6175
6034
 
6176
- .pf-c-drawer__body {
6177
- min-height: 0;
6178
- padding: var(--pf-c-drawer--child--PaddingTop) var(--pf-c-drawer--child--PaddingRight) var(--pf-c-drawer--child--PaddingBottom) var(--pf-c-drawer--child--PaddingLeft);
6179
- }
6035
+ @media (min-width: 576px) {
6036
+ .pf-c-divider.pf-m-horizontal-on-sm {
6037
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
6038
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
6039
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
6040
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
6041
+ width: 100%;
6042
+ height: auto;
6043
+ }
6180
6044
 
6181
- .pf-c-drawer__body.pf-m-no-padding {
6182
- padding: 0;
6045
+ .pf-c-divider.pf-m-horizontal-on-sm::after {
6046
+ flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
6047
+ }
6183
6048
  }
6049
+ @media (min-width: 576px) {
6050
+ .pf-c-divider.pf-m-vertical-on-sm {
6051
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
6052
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
6053
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
6054
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
6055
+ width: auto;
6056
+ height: inherit;
6057
+ }
6184
6058
 
6185
- .pf-c-drawer__body.pf-m-no-padding > .pf-c-drawer__actions,
6186
- .pf-c-drawer__body.pf-m-no-padding > .pf-c-drawer__head > .pf-c-drawer__actions {
6187
- margin-top: 0;
6188
- margin-right: 0;
6059
+ .pf-c-divider.pf-m-vertical-on-sm::after {
6060
+ flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
6061
+ }
6189
6062
  }
6063
+ @media (min-width: 576px) {
6064
+ .pf-c-divider.pf-m-inset-none-on-sm {
6065
+ --pf-c-divider--after--Inset: 0%;
6066
+ }
6190
6067
 
6191
- .pf-c-drawer__body.pf-m-padding {
6192
- padding: var(--pf-c-drawer--child--m-padding--PaddingTop) var(--pf-c-drawer--child--m-padding--PaddingRight) var(--pf-c-drawer--child--m-padding--PaddingBottom) var(--pf-c-drawer--child--m-padding--PaddingLeft);
6193
- }
6068
+ .pf-c-divider.pf-m-inset-xs-on-sm {
6069
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6070
+ }
6194
6071
 
6195
- .pf-c-drawer__body:not(.pf-m-no-padding) + * {
6196
- padding-top: 0;
6197
- }
6072
+ .pf-c-divider.pf-m-inset-sm-on-sm {
6073
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6074
+ }
6198
6075
 
6199
- .pf-c-drawer__body:last-child {
6200
- flex: 1 1;
6201
- }
6076
+ .pf-c-divider.pf-m-inset-md-on-sm {
6077
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6078
+ }
6202
6079
 
6203
- .pf-c-drawer__body > .pf-c-page__main {
6204
- height: 100%;
6205
- }
6080
+ .pf-c-divider.pf-m-inset-lg-on-sm {
6081
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6082
+ }
6206
6083
 
6207
- .pf-c-drawer__splitter {
6208
- position: relative;
6209
- display: none;
6210
- width: var(--pf-c-drawer__splitter--Width);
6211
- height: var(--pf-c-drawer__splitter--Height);
6212
- cursor: var(--pf-c-drawer__splitter--Cursor);
6213
- visibility: hidden;
6214
- background-color: var(--pf-c-drawer__splitter--BackgroundColor);
6215
- }
6084
+ .pf-c-divider.pf-m-inset-xl-on-sm {
6085
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6086
+ }
6216
6087
 
6217
- .pf-c-drawer__splitter.pf-m-vertical {
6218
- --pf-c-drawer__splitter--Height: var(--pf-c-drawer__splitter--m-vertical--Height);
6219
- --pf-c-drawer__splitter--Width: var(--pf-c-drawer__splitter--m-vertical--Width);
6220
- --pf-c-drawer__splitter--Cursor: var(--pf-c-drawer__splitter--m-vertical--Cursor);
6221
- --pf-c-drawer__splitter-handle--after--Width: var(--pf-c-drawer__splitter--m-vertical__splitter-handle--after--Width);
6222
- --pf-c-drawer__splitter-handle--after--Height: var(--pf-c-drawer__splitter--m-vertical__splitter-handle--after--Height);
6223
- --pf-c-drawer__splitter-handle--after--BorderTopWidth: var(--pf-c-drawer__splitter--m-vertical__splitter-handle--after--BorderTopWidth);
6224
- --pf-c-drawer__splitter-handle--after--BorderRightWidth: var(--pf-c-drawer__splitter--m-vertical__splitter-handle--after--BorderRightWidth);
6225
- --pf-c-drawer__splitter-handle--after--BorderBottomWidth: var(--pf-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBottomWidth);
6226
- --pf-c-drawer__splitter-handle--after--BorderLeftWidth: var(--pf-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth);
6227
- }
6088
+ .pf-c-divider.pf-m-inset-2xl-on-sm {
6089
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6090
+ }
6228
6091
 
6229
- .pf-c-drawer__splitter:hover {
6230
- --pf-c-drawer__splitter-handle--after--BorderColor: var(--pf-c-drawer__splitter--hover__splitter-handle--after--BorderColor);
6092
+ .pf-c-divider.pf-m-inset-3xl-on-sm {
6093
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6094
+ }
6231
6095
  }
6096
+ @media (min-width: 768px) {
6097
+ .pf-c-divider.pf-m-horizontal-on-md {
6098
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
6099
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
6100
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
6101
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
6102
+ width: 100%;
6103
+ height: auto;
6104
+ }
6232
6105
 
6233
- .pf-c-drawer__splitter:focus {
6234
- --pf-c-drawer__splitter-handle--after--BorderColor: var(--pf-c-drawer__splitter--focus__splitter-handle--after--BorderColor);
6106
+ .pf-c-divider.pf-m-horizontal-on-md::after {
6107
+ flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
6108
+ }
6235
6109
  }
6110
+ @media (min-width: 768px) {
6111
+ .pf-c-divider.pf-m-vertical-on-md {
6112
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
6113
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
6114
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
6115
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
6116
+ width: auto;
6117
+ height: inherit;
6118
+ }
6236
6119
 
6237
- .pf-c-drawer__splitter::after {
6238
- position: absolute;
6239
- top: 0;
6240
- right: 0;
6241
- bottom: 0;
6242
- left: 0;
6243
- content: "";
6244
- border: solid var(--pf-c-drawer__splitter--after--BorderColor);
6245
- border-width: var(--pf-c-drawer__splitter--after--BorderTopWidth) var(--pf-c-drawer__splitter--after--BorderRightWidth) var(--pf-c-drawer__splitter--after--BorderBottomWidth) var(--pf-c-drawer__splitter--after--BorderLeftWidth);
6120
+ .pf-c-divider.pf-m-vertical-on-md::after {
6121
+ flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
6122
+ }
6246
6123
  }
6124
+ @media (min-width: 768px) {
6125
+ .pf-c-divider.pf-m-inset-none-on-md {
6126
+ --pf-c-divider--after--Inset: 0%;
6127
+ }
6247
6128
 
6248
- .pf-c-drawer__splitter-handle {
6249
- position: absolute;
6250
- top: var(--pf-c-drawer__splitter-handle--Top);
6251
- left: var(--pf-c-drawer__splitter-handle--Left);
6252
- transform: translate(-50%, -50%);
6253
- }
6129
+ .pf-c-divider.pf-m-inset-xs-on-md {
6130
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6131
+ }
6254
6132
 
6255
- .pf-c-drawer__splitter-handle::after {
6256
- display: block;
6257
- width: var(--pf-c-drawer__splitter-handle--after--Width);
6258
- height: var(--pf-c-drawer__splitter-handle--after--Height);
6259
- content: "";
6260
- border-color: var(--pf-c-drawer__splitter-handle--after--BorderColor);
6261
- border-style: solid;
6262
- border-width: var(--pf-c-drawer__splitter-handle--after--BorderTopWidth) var(--pf-c-drawer__splitter-handle--after--BorderRightWidth) var(--pf-c-drawer__splitter-handle--after--BorderBottomWidth) var(--pf-c-drawer__splitter-handle--after--BorderLeftWidth);
6263
- }
6133
+ .pf-c-divider.pf-m-inset-sm-on-md {
6134
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6135
+ }
6264
6136
 
6265
- @media screen and (min-width: 768px) {
6266
- .pf-c-drawer {
6267
- min-width: var(--pf-c-drawer__panel--MinWidth);
6137
+ .pf-c-divider.pf-m-inset-md-on-md {
6138
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6268
6139
  }
6269
6140
 
6270
- .pf-c-drawer.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6271
- box-shadow: var(--pf-c-drawer--m-expanded__panel--BoxShadow);
6141
+ .pf-c-divider.pf-m-inset-lg-on-md {
6142
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6272
6143
  }
6273
6144
 
6274
- .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable {
6275
- --pf-c-drawer__panel--md--FlexBasis--min: var(--pf-c-drawer__panel--m-resizable--md--FlexBasis--min);
6276
- flex-direction: var(--pf-c-drawer__panel--m-resizable--FlexDirection);
6277
- min-width: var(--pf-c-drawer__panel--m-resizable--MinWidth);
6145
+ .pf-c-divider.pf-m-inset-xl-on-md {
6146
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6278
6147
  }
6279
6148
 
6280
- .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable::after {
6281
- width: 0;
6282
- height: 0;
6149
+ .pf-c-divider.pf-m-inset-2xl-on-md {
6150
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6283
6151
  }
6284
6152
 
6285
- .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable > .pf-c-drawer__splitter {
6286
- flex-shrink: 0;
6153
+ .pf-c-divider.pf-m-inset-3xl-on-md {
6154
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6155
+ }
6156
+ }
6157
+ @media (min-width: 992px) {
6158
+ .pf-c-divider.pf-m-horizontal-on-lg {
6159
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
6160
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
6161
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
6162
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
6163
+ width: 100%;
6164
+ height: auto;
6287
6165
  }
6288
6166
 
6289
- .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable > .pf-c-drawer__panel-main {
6290
- flex-shrink: 1;
6167
+ .pf-c-divider.pf-m-horizontal-on-lg::after {
6168
+ flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
6169
+ }
6170
+ }
6171
+ @media (min-width: 992px) {
6172
+ .pf-c-divider.pf-m-vertical-on-lg {
6173
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
6174
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
6175
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
6176
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
6177
+ width: auto;
6178
+ height: inherit;
6291
6179
  }
6292
6180
 
6293
- .pf-c-drawer.pf-m-panel-left {
6294
- --pf-c-drawer--m-expanded__panel--BoxShadow: var(--pf-c-drawer--m-expanded--m-panel-left__panel--BoxShadow);
6181
+ .pf-c-divider.pf-m-vertical-on-lg::after {
6182
+ flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
6183
+ }
6184
+ }
6185
+ @media (min-width: 992px) {
6186
+ .pf-c-divider.pf-m-inset-none-on-lg {
6187
+ --pf-c-divider--after--Inset: 0%;
6295
6188
  }
6296
6189
 
6297
- .pf-c-drawer.pf-m-panel-left.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-c-drawer.pf-m-panel-left.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
6298
- padding-right: var(--pf-c-drawer--m-panel-left--m-inline__panel--PaddingRight);
6299
- padding-left: 0;
6190
+ .pf-c-divider.pf-m-inset-xs-on-lg {
6191
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6300
6192
  }
6301
6193
 
6302
- .pf-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6303
- transform: translateX(0);
6194
+ .pf-c-divider.pf-m-inset-sm-on-lg {
6195
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6304
6196
  }
6305
6197
 
6306
- .pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel::after {
6307
- right: 0;
6308
- left: auto;
6198
+ .pf-c-divider.pf-m-inset-md-on-lg {
6199
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6309
6200
  }
6310
6201
 
6311
- .pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable > .pf-c-drawer__splitter {
6312
- --pf-c-drawer__splitter-handle--Left: var(--pf-c-drawer--m-panel-left__splitter-handle--Left);
6313
- --pf-c-drawer__splitter--after--BorderRightWidth: 0;
6314
- --pf-c-drawer__splitter--after--BorderLeftWidth: var(--pf-c-drawer--m-panel-left__splitter--after--BorderLeftWidth);
6315
- order: 1;
6202
+ .pf-c-divider.pf-m-inset-lg-on-lg {
6203
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6316
6204
  }
6317
6205
 
6318
- .pf-c-drawer.pf-m-panel-bottom {
6319
- --pf-c-drawer--m-expanded__panel--BoxShadow: var(--pf-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow);
6320
- --pf-c-drawer__panel--MaxHeight: 100%;
6321
- --pf-c-drawer__panel--FlexBasis--min: var(--pf-c-drawer--m-panel-bottom__panel--FlexBasis--min);
6322
- min-width: auto;
6323
- min-height: var(--pf-c-drawer--m-panel-bottom__panel--md--MinHeight);
6206
+ .pf-c-divider.pf-m-inset-xl-on-lg {
6207
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6324
6208
  }
6325
6209
 
6326
- .pf-c-drawer.pf-m-panel-bottom.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-c-drawer.pf-m-panel-bottom.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
6327
- padding-top: var(--pf-c-drawer--m-panel-bottom--m-inline__panel--PaddingTop);
6328
- padding-left: 0;
6210
+ .pf-c-divider.pf-m-inset-2xl-on-lg {
6211
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6329
6212
  }
6330
6213
 
6331
- .pf-c-drawer.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel::after {
6332
- top: 0;
6333
- left: auto;
6214
+ .pf-c-divider.pf-m-inset-3xl-on-lg {
6215
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6216
+ }
6217
+ }
6218
+ @media (min-width: 1200px) {
6219
+ .pf-c-divider.pf-m-horizontal-on-xl {
6220
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
6221
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
6222
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
6223
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
6334
6224
  width: 100%;
6335
- height: var(--pf-c-drawer--m-panel-bottom__panel--after--Height);
6225
+ height: auto;
6336
6226
  }
6337
6227
 
6338
- .pf-c-drawer.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable {
6339
- --pf-c-drawer__panel--md--FlexBasis--min: var(--pf-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min);
6340
- --pf-c-drawer__panel--m-resizable--FlexDirection: var(--pf-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection);
6341
- --pf-c-drawer__panel--m-resizable--MinWidth: 0;
6342
- min-height: var(--pf-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight);
6228
+ .pf-c-divider.pf-m-horizontal-on-xl::after {
6229
+ flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
6230
+ }
6231
+ }
6232
+ @media (min-width: 1200px) {
6233
+ .pf-c-divider.pf-m-vertical-on-xl {
6234
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
6235
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
6236
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
6237
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
6238
+ width: auto;
6239
+ height: inherit;
6343
6240
  }
6344
6241
 
6345
- .pf-c-drawer.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable > .pf-c-drawer__splitter {
6346
- --pf-c-drawer__splitter-handle--Top: var(--pf-c-drawer--m-panel-bottom__splitter-handle--Top);
6347
- --pf-c-drawer__splitter--after--BorderRightWidth: 0;
6348
- --pf-c-drawer__splitter--after--BorderBottomWidth: var(--pf-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth);
6242
+ .pf-c-divider.pf-m-vertical-on-xl::after {
6243
+ flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
6349
6244
  }
6350
-
6351
- .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable > .pf-c-drawer__splitter {
6352
- --pf-c-drawer__splitter--m-vertical--Width: var(--pf-c-drawer--m-inline__splitter--m-vertical--Width);
6353
- --pf-c-drawer__splitter-handle--Left: var(--pf-c-drawer--m-inline__splitter-handle--Left);
6354
- --pf-c-drawer__splitter--after--BorderRightWidth: var(--pf-c-drawer--m-inline__splitter--after--BorderRightWidth);
6355
- --pf-c-drawer__splitter--after--BorderLeftWidth: var(--pf-c-drawer--m-inline__splitter--after--BorderLeftWidth);
6356
- outline-offset: var(--pf-c-drawer--m-inline__splitter--focus--OutlineOffset);
6245
+ }
6246
+ @media (min-width: 1200px) {
6247
+ .pf-c-divider.pf-m-inset-none-on-xl {
6248
+ --pf-c-divider--after--Inset: 0%;
6357
6249
  }
6358
6250
 
6359
- .pf-c-drawer.pf-m-inline.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable > .pf-c-drawer__splitter {
6360
- --pf-c-drawer__splitter--Height: var(--pf-c-drawer--m-inline--m-panel-bottom__splitter--Height);
6361
- --pf-c-drawer__splitter-handle--Top: var(--pf-c-drawer--m-inline--m-panel-bottom__splitter-handle--Top);
6362
- --pf-c-drawer__splitter--after--BorderTopWidth: var(--pf-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderTopWidth);
6363
- --pf-c-drawer__splitter--after--BorderRightWidth: 0;
6364
- --pf-c-drawer__splitter--after--BorderLeftWidth: 0;
6251
+ .pf-c-divider.pf-m-inset-xs-on-xl {
6252
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6365
6253
  }
6366
6254
 
6367
- .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-no-border,
6368
- .pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-no-border {
6369
- --pf-c-drawer--m-expanded__panel--BoxShadow: none;
6255
+ .pf-c-divider.pf-m-inset-sm-on-xl {
6256
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6370
6257
  }
6371
6258
 
6372
- .pf-c-drawer__splitter {
6373
- display: block;
6374
- visibility: visible;
6375
- }
6376
- }
6377
- @media (min-width: 768px) {
6378
- .pf-c-drawer__panel.pf-m-width-25 {
6379
- --pf-c-drawer__panel--md--FlexBasis: 25%;
6259
+ .pf-c-divider.pf-m-inset-md-on-xl {
6260
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6380
6261
  }
6381
6262
 
6382
- .pf-c-drawer__panel.pf-m-width-33 {
6383
- --pf-c-drawer__panel--md--FlexBasis: 33%;
6263
+ .pf-c-divider.pf-m-inset-lg-on-xl {
6264
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6384
6265
  }
6385
6266
 
6386
- .pf-c-drawer__panel.pf-m-width-50 {
6387
- --pf-c-drawer__panel--md--FlexBasis: 50%;
6267
+ .pf-c-divider.pf-m-inset-xl-on-xl {
6268
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6388
6269
  }
6389
6270
 
6390
- .pf-c-drawer__panel.pf-m-width-66 {
6391
- --pf-c-drawer__panel--md--FlexBasis: 66%;
6271
+ .pf-c-divider.pf-m-inset-2xl-on-xl {
6272
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6392
6273
  }
6393
6274
 
6394
- .pf-c-drawer__panel.pf-m-width-75 {
6395
- --pf-c-drawer__panel--md--FlexBasis: 75%;
6275
+ .pf-c-divider.pf-m-inset-3xl-on-xl {
6276
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6277
+ }
6278
+ }
6279
+ @media (min-width: 1450px) {
6280
+ .pf-c-divider.pf-m-horizontal-on-2xl {
6281
+ --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
6282
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
6283
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
6284
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
6285
+ width: 100%;
6286
+ height: auto;
6396
6287
  }
6397
6288
 
6398
- .pf-c-drawer__panel.pf-m-width-100 {
6399
- --pf-c-drawer__panel--md--FlexBasis: 100%;
6289
+ .pf-c-divider.pf-m-horizontal-on-2xl::after {
6290
+ flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
6400
6291
  }
6401
6292
  }
6402
- @media (min-width: 992px) {
6403
- .pf-c-drawer__panel.pf-m-width-25-on-lg {
6404
- --pf-c-drawer__panel--md--FlexBasis: 25%;
6293
+ @media (min-width: 1450px) {
6294
+ .pf-c-divider.pf-m-vertical-on-2xl {
6295
+ --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
6296
+ --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
6297
+ --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
6298
+ --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
6299
+ width: auto;
6300
+ height: inherit;
6405
6301
  }
6406
6302
 
6407
- .pf-c-drawer__panel.pf-m-width-33-on-lg {
6408
- --pf-c-drawer__panel--md--FlexBasis: 33%;
6303
+ .pf-c-divider.pf-m-vertical-on-2xl::after {
6304
+ flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
6409
6305
  }
6410
-
6411
- .pf-c-drawer__panel.pf-m-width-50-on-lg {
6412
- --pf-c-drawer__panel--md--FlexBasis: 50%;
6306
+ }
6307
+ @media (min-width: 1450px) {
6308
+ .pf-c-divider.pf-m-inset-none-on-2xl {
6309
+ --pf-c-divider--after--Inset: 0%;
6413
6310
  }
6414
6311
 
6415
- .pf-c-drawer__panel.pf-m-width-66-on-lg {
6416
- --pf-c-drawer__panel--md--FlexBasis: 66%;
6312
+ .pf-c-divider.pf-m-inset-xs-on-2xl {
6313
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6417
6314
  }
6418
6315
 
6419
- .pf-c-drawer__panel.pf-m-width-75-on-lg {
6420
- --pf-c-drawer__panel--md--FlexBasis: 75%;
6316
+ .pf-c-divider.pf-m-inset-sm-on-2xl {
6317
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6421
6318
  }
6422
6319
 
6423
- .pf-c-drawer__panel.pf-m-width-100-on-lg {
6424
- --pf-c-drawer__panel--md--FlexBasis: 100%;
6425
- }
6426
- }
6427
- @media (min-width: 1200px) {
6428
- .pf-c-drawer__panel.pf-m-width-25-on-xl {
6429
- --pf-c-drawer__panel--md--FlexBasis: 25%;
6320
+ .pf-c-divider.pf-m-inset-md-on-2xl {
6321
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6430
6322
  }
6431
6323
 
6432
- .pf-c-drawer__panel.pf-m-width-33-on-xl {
6433
- --pf-c-drawer__panel--md--FlexBasis: 33%;
6324
+ .pf-c-divider.pf-m-inset-lg-on-2xl {
6325
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6434
6326
  }
6435
6327
 
6436
- .pf-c-drawer__panel.pf-m-width-50-on-xl {
6437
- --pf-c-drawer__panel--md--FlexBasis: 50%;
6328
+ .pf-c-divider.pf-m-inset-xl-on-2xl {
6329
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6438
6330
  }
6439
6331
 
6440
- .pf-c-drawer__panel.pf-m-width-66-on-xl {
6441
- --pf-c-drawer__panel--md--FlexBasis: 66%;
6332
+ .pf-c-divider.pf-m-inset-2xl-on-2xl {
6333
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6442
6334
  }
6443
6335
 
6444
- .pf-c-drawer__panel.pf-m-width-75-on-xl {
6445
- --pf-c-drawer__panel--md--FlexBasis: 75%;
6336
+ .pf-c-divider.pf-m-inset-3xl-on-2xl {
6337
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6446
6338
  }
6339
+ }
6340
+ .pf-c-drawer {
6341
+ --pf-c-drawer__section--BackgroundColor: var(--pf-global--BackgroundColor--100);
6342
+ --pf-c-drawer__section--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
6343
+ --pf-c-drawer__content--FlexBasis: 100%;
6344
+ --pf-c-drawer__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
6345
+ --pf-c-drawer__content--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
6346
+ --pf-c-drawer__content--ZIndex: var(--pf-global--ZIndex--xs);
6347
+ --pf-c-drawer__panel--MinWidth: 50%;
6348
+ --pf-c-drawer__panel--MaxHeight: auto;
6349
+ --pf-c-drawer__panel--ZIndex: var(--pf-global--ZIndex--sm);
6350
+ --pf-c-drawer__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
6351
+ --pf-c-drawer__panel--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
6352
+ --pf-c-drawer__panel--TransitionDuration: var(--pf-global--TransitionDuration);
6353
+ --pf-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
6354
+ --pf-c-drawer__panel--FlexBasis: 100%;
6355
+ --pf-c-drawer__panel--md--FlexBasis--min: 1.5rem;
6356
+ --pf-c-drawer__panel--md--FlexBasis: 50%;
6357
+ --pf-c-drawer__panel--md--FlexBasis--max: 100%;
6358
+ --pf-c-drawer__panel--xl--MinWidth: 28.125rem;
6359
+ --pf-c-drawer__panel--xl--FlexBasis: 28.125rem;
6360
+ --pf-c-drawer--m-panel-bottom__panel--md--MinHeight: 50%;
6361
+ --pf-c-drawer--m-panel-bottom__panel--xl--MinHeight: 18.75rem;
6362
+ --pf-c-drawer--m-panel-bottom__panel--xl--FlexBasis: 18.75rem;
6363
+ --pf-c-drawer__panel--m-resizable--FlexDirection: row;
6364
+ --pf-c-drawer__panel--m-resizable--md--FlexBasis--min: var(--pf-c-drawer__splitter--m-vertical--Width);
6365
+ --pf-c-drawer__panel--m-resizable--MinWidth: 1.5rem;
6366
+ --pf-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
6367
+ --pf-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
6368
+ --pf-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
6369
+ --pf-c-drawer--child--PaddingTop: var(--pf-global--spacer--md);
6370
+ --pf-c-drawer--child--PaddingRight: var(--pf-global--spacer--md);
6371
+ --pf-c-drawer--child--PaddingBottom: var(--pf-global--spacer--md);
6372
+ --pf-c-drawer--child--PaddingLeft: var(--pf-global--spacer--md);
6373
+ --pf-c-drawer--child--md--PaddingTop: var(--pf-global--spacer--lg);
6374
+ --pf-c-drawer--child--md--PaddingRight: var(--pf-global--spacer--lg);
6375
+ --pf-c-drawer--child--md--PaddingBottom: var(--pf-global--spacer--lg);
6376
+ --pf-c-drawer--child--md--PaddingLeft: var(--pf-global--spacer--lg);
6377
+ --pf-c-drawer--child--m-padding--PaddingTop: var(--pf-global--spacer--md);
6378
+ --pf-c-drawer--child--m-padding--PaddingRight: var(--pf-global--spacer--md);
6379
+ --pf-c-drawer--child--m-padding--PaddingBottom: var(--pf-global--spacer--md);
6380
+ --pf-c-drawer--child--m-padding--PaddingLeft: var(--pf-global--spacer--md);
6381
+ --pf-c-drawer--child--m-padding--md--PaddingTop: var(--pf-global--spacer--lg);
6382
+ --pf-c-drawer--child--m-padding--md--PaddingRight: var(--pf-global--spacer--lg);
6383
+ --pf-c-drawer--child--m-padding--md--PaddingBottom: var(--pf-global--spacer--lg);
6384
+ --pf-c-drawer--child--m-padding--md--PaddingLeft: var(--pf-global--spacer--lg);
6385
+ --pf-c-drawer__content--child--PaddingTop: 0;
6386
+ --pf-c-drawer__content--child--PaddingRight: 0;
6387
+ --pf-c-drawer__content--child--PaddingBottom: 0;
6388
+ --pf-c-drawer__content--child--PaddingLeft: 0;
6389
+ --pf-c-drawer__splitter--Height: 0.5625rem;
6390
+ --pf-c-drawer__splitter--Width: 100%;
6391
+ --pf-c-drawer__splitter--BackgroundColor: var(--pf-global--BackgroundColor--100);
6392
+ --pf-c-drawer__splitter--Cursor: row-resize;
6393
+ --pf-c-drawer__splitter--m-vertical--Height: 100%;
6394
+ --pf-c-drawer__splitter--m-vertical--Width: 0.5625rem;
6395
+ --pf-c-drawer__splitter--m-vertical--Cursor: col-resize;
6396
+ --pf-c-drawer--m-inline__splitter--focus--OutlineOffset: -0.0625rem;
6397
+ --pf-c-drawer__splitter--after--BorderColor: var(--pf-global--BorderColor--100);
6398
+ --pf-c-drawer__splitter--after--border-width--base: var(--pf-global--BorderWidth--sm);
6399
+ --pf-c-drawer__splitter--after--BorderTopWidth: 0;
6400
+ --pf-c-drawer__splitter--after--BorderRightWidth: var(--pf-c-drawer__splitter--after--border-width--base);
6401
+ --pf-c-drawer__splitter--after--BorderBottomWidth: 0;
6402
+ --pf-c-drawer__splitter--after--BorderLeftWidth: 0;
6403
+ --pf-c-drawer--m-panel-left__splitter--after--BorderLeftWidth: var(--pf-c-drawer__splitter--after--border-width--base);
6404
+ --pf-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth: var(--pf-c-drawer__splitter--after--border-width--base);
6405
+ --pf-c-drawer--m-inline__splitter--m-vertical--Width: 0.625rem;
6406
+ --pf-c-drawer--m-inline__splitter-handle--Left: 50%;
6407
+ --pf-c-drawer--m-inline__splitter--after--BorderRightWidth: var(--pf-c-drawer__splitter--after--border-width--base);
6408
+ --pf-c-drawer--m-inline__splitter--after--BorderLeftWidth: var(--pf-c-drawer__splitter--after--border-width--base);
6409
+ --pf-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.625rem;
6410
+ --pf-c-drawer--m-inline--m-panel-bottom__splitter-handle--Top: 50%;
6411
+ --pf-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderTopWidth: var(--pf-c-drawer__splitter--after--border-width--base);
6412
+ --pf-c-drawer__splitter-handle--Top: 50%;
6413
+ --pf-c-drawer__splitter-handle--Left: calc(50% - var(--pf-c-drawer__splitter--after--border-width--base));
6414
+ --pf-c-drawer--m-panel-left__splitter-handle--Left: 50%;
6415
+ --pf-c-drawer--m-panel-bottom__splitter-handle--Top: calc(50% - var(--pf-c-drawer__splitter--after--border-width--base));
6416
+ --pf-c-drawer__splitter-handle--after--BorderColor: var(--pf-global--Color--200);
6417
+ --pf-c-drawer__splitter-handle--after--BorderTopWidth: var(--pf-global--BorderWidth--sm);
6418
+ --pf-c-drawer__splitter-handle--after--BorderRightWidth: 0;
6419
+ --pf-c-drawer__splitter-handle--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
6420
+ --pf-c-drawer__splitter-handle--after--BorderLeftWidth: 0;
6421
+ --pf-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-global--Color--100);
6422
+ --pf-c-drawer__splitter--focus__splitter-handle--after--BorderColor: var(--pf-global--Color--100);
6423
+ --pf-c-drawer__splitter--m-vertical__splitter-handle--after--BorderTopWidth: 0;
6424
+ --pf-c-drawer__splitter--m-vertical__splitter-handle--after--BorderRightWidth: var(--pf-global--BorderWidth--sm);
6425
+ --pf-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBottomWidth: 0;
6426
+ --pf-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
6427
+ --pf-c-drawer__splitter-handle--after--Width: 0.75rem;
6428
+ --pf-c-drawer__splitter-handle--after--Height: 0.25rem;
6429
+ --pf-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
6430
+ --pf-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
6431
+ --pf-c-drawer__actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
6432
+ --pf-c-drawer__actions--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
6433
+ --pf-c-drawer__panel--BoxShadow: none;
6434
+ --pf-c-drawer--m-expanded__panel--BoxShadow: var(--pf-global--BoxShadow--lg-left);
6435
+ --pf-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-global--BoxShadow--lg-right);
6436
+ --pf-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-global--BoxShadow--lg-top);
6437
+ --pf-c-drawer__panel--after--Width: var(--pf-global--BorderWidth--sm);
6438
+ --pf-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-global--BorderWidth--sm);
6439
+ --pf-c-drawer__panel--after--BackgroundColor: transparent;
6440
+ --pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-global--BorderColor--100);
6441
+ --pf-c-drawer--m-inline__panel--PaddingLeft: var(--pf-c-drawer__panel--after--Width);
6442
+ --pf-c-drawer--m-panel-left--m-inline__panel--PaddingRight: var(--pf-c-drawer__panel--after--Width);
6443
+ --pf-c-drawer--m-panel-bottom--m-inline__panel--PaddingTop: var(--pf-c-drawer__panel--after--Width);
6444
+ display: flex;
6445
+ flex-direction: column;
6446
+ height: 100%;
6447
+ overflow-x: hidden;
6448
+ }
6447
6449
 
6448
- .pf-c-drawer__panel.pf-m-width-100-on-xl {
6449
- --pf-c-drawer__panel--md--FlexBasis: 100%;
6450
+ @media screen and (min-width: 768px) {
6451
+ .pf-c-drawer {
6452
+ --pf-c-drawer--child--PaddingTop: var(--pf-c-drawer--child--md--PaddingTop);
6453
+ --pf-c-drawer--child--PaddingRight: var(--pf-c-drawer--child--md--PaddingRight);
6454
+ --pf-c-drawer--child--PaddingBottom: var(--pf-c-drawer--child--md--PaddingBottom);
6455
+ --pf-c-drawer--child--PaddingLeft: var(--pf-c-drawer--child--md--PaddingLeft);
6456
+ --pf-c-drawer--child--m-padding--PaddingTop: var(--pf-c-drawer--child--m-padding--md--PaddingTop);
6457
+ --pf-c-drawer--child--m-padding--PaddingRight: var(--pf-c-drawer--child--m-padding--md--PaddingRight);
6458
+ --pf-c-drawer--child--m-padding--PaddingBottom: var(--pf-c-drawer--child--m-padding--md--PaddingBottom);
6459
+ --pf-c-drawer--child--m-padding--PaddingLeft: var(--pf-c-drawer--child--m-padding--md--PaddingLeft);
6450
6460
  }
6451
6461
  }
6452
- @media (min-width: 1450px) {
6453
- .pf-c-drawer__panel.pf-m-width-25-on-2xl {
6454
- --pf-c-drawer__panel--md--FlexBasis: 25%;
6462
+ @media screen and (min-width: 1200px) {
6463
+ .pf-c-drawer {
6464
+ --pf-c-drawer__panel--MinWidth: var(--pf-c-drawer__panel--xl--MinWidth);
6455
6465
  }
6456
6466
 
6457
- .pf-c-drawer__panel.pf-m-width-33-on-2xl {
6458
- --pf-c-drawer__panel--md--FlexBasis: 33%;
6467
+ .pf-c-drawer.pf-m-panel-bottom {
6468
+ --pf-c-drawer__panel--MinWidth: auto;
6469
+ --pf-c-drawer__panel--MinHeight: var(--pf-c-drawer--m-panel-bottom__panel--xl--MinHeight);
6459
6470
  }
6471
+ }
6472
+ .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
6473
+ padding-left: var(--pf-c-drawer--m-inline__panel--PaddingLeft);
6474
+ }
6460
6475
 
6461
- .pf-c-drawer__panel.pf-m-width-50-on-2xl {
6462
- --pf-c-drawer__panel--md--FlexBasis: 50%;
6463
- }
6476
+ .pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
6477
+ order: 0;
6478
+ margin-right: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
6479
+ transform: translateX(-100%);
6480
+ }
6464
6481
 
6465
- .pf-c-drawer__panel.pf-m-width-66-on-2xl {
6466
- --pf-c-drawer__panel--md--FlexBasis: 66%;
6467
- }
6482
+ .pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__content {
6483
+ order: 1;
6484
+ }
6468
6485
 
6469
- .pf-c-drawer__panel.pf-m-width-75-on-2xl {
6470
- --pf-c-drawer__panel--md--FlexBasis: 75%;
6471
- }
6486
+ .pf-c-drawer.pf-m-panel-bottom > .pf-c-drawer__main {
6487
+ flex-direction: column;
6488
+ }
6472
6489
 
6473
- .pf-c-drawer__panel.pf-m-width-100-on-2xl {
6474
- --pf-c-drawer__panel--md--FlexBasis: 100%;
6475
- }
6490
+ .pf-c-drawer.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6491
+ transform: translateX(-100%);
6476
6492
  }
6477
- @media (min-width: 768px) {
6478
- .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__content,
6479
- .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__content {
6480
- flex-shrink: 1;
6481
- }
6482
6493
 
6483
- .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel,
6484
- .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel {
6485
- --pf-c-drawer--m-expanded__panel--BoxShadow: none;
6486
- }
6494
+ .pf-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
6495
+ transform: translateX(0);
6496
+ }
6487
6497
 
6488
- .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
6489
- .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
6490
- background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
6491
- }
6498
+ .pf-c-drawer.pf-m-expanded.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
6499
+ transform: translate(0, -100%);
6500
+ }
6492
6501
 
6493
- .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__content {
6494
- overflow-x: auto;
6495
- }
6502
+ .pf-c-drawer.pf-m-resizing {
6503
+ --pf-c-drawer__panel--TransitionProperty: none;
6504
+ pointer-events: none;
6505
+ }
6496
6506
 
6497
- .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel {
6498
- margin-left: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
6499
- transform: translateX(100%);
6500
- }
6507
+ .pf-c-drawer.pf-m-resizing .pf-c-drawer__splitter {
6508
+ pointer-events: auto;
6509
+ }
6501
6510
 
6502
- .pf-c-drawer.pf-m-inline.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6503
- margin-left: 0;
6504
- transform: translateX(0);
6505
- }
6511
+ .pf-c-drawer__section {
6512
+ flex-grow: 0;
6513
+ background-color: var(--pf-c-drawer__section--BackgroundColor);
6514
+ }
6506
6515
 
6507
- .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
6508
- display: unset;
6509
- visibility: visible;
6510
- }
6516
+ .pf-c-drawer__section.pf-m-no-background {
6517
+ --pf-c-drawer__section--BackgroundColor: transparent;
6518
+ }
6511
6519
 
6512
- .pf-c-drawer.pf-m-inline.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
6513
- margin-right: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
6514
- margin-left: 0;
6515
- transform: translateX(-100%);
6516
- }
6520
+ .pf-c-drawer__section.pf-m-light-200 {
6521
+ --pf-c-drawer__section--BackgroundColor: var(--pf-c-drawer__section--m-light-200--BackgroundColor);
6522
+ }
6517
6523
 
6518
- .pf-c-drawer.pf-m-inline.pf-m-panel-left.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6519
- margin-right: 0;
6520
- transform: translateX(0);
6521
- }
6524
+ .pf-c-drawer__main {
6525
+ display: flex;
6526
+ flex: 1;
6527
+ overflow: hidden;
6528
+ }
6522
6529
 
6523
- .pf-c-drawer.pf-m-inline.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
6524
- display: unset;
6525
- visibility: visible;
6526
- }
6530
+ .pf-c-drawer__content,
6531
+ .pf-c-drawer__panel,
6532
+ .pf-c-drawer__panel-main {
6533
+ display: flex;
6534
+ flex-direction: column;
6535
+ flex-shrink: 0;
6536
+ overflow: auto;
6537
+ }
6527
6538
 
6528
- .pf-c-drawer.pf-m-inline.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
6529
- margin-bottom: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
6530
- transform: translateY(100%);
6531
- }
6539
+ .pf-c-drawer__content {
6540
+ z-index: var(--pf-c-drawer__content--ZIndex);
6541
+ flex-basis: var(--pf-c-drawer__content--FlexBasis);
6542
+ order: 0;
6543
+ background-color: var(--pf-c-drawer__content--BackgroundColor);
6544
+ }
6532
6545
 
6533
- .pf-c-drawer.pf-m-inline.pf-m-panel-bottom.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6534
- margin-bottom: 0;
6535
- transform: translateY(0);
6536
- }
6546
+ .pf-c-drawer__content.pf-m-no-background {
6547
+ --pf-c-drawer__content--BackgroundColor: transparent;
6548
+ }
6537
6549
 
6538
- .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel {
6539
- transform: translateX(0);
6540
- }
6550
+ .pf-c-drawer__content.pf-m-light-200 {
6551
+ --pf-c-drawer__content--BackgroundColor: var(--pf-c-drawer__content--m-light-200--BackgroundColor);
6552
+ }
6541
6553
 
6542
- .pf-c-drawer.pf-m-static.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
6543
- margin-right: 0;
6544
- transform: translateX(0);
6545
- }
6554
+ .pf-c-drawer__content > .pf-c-drawer__body {
6555
+ padding: var(--pf-c-drawer__content--child--PaddingTop) var(--pf-c-drawer__content--child--PaddingRight) var(--pf-c-drawer__content--child--PaddingBottom) var(--pf-c-drawer__content--child--PaddingLeft);
6556
+ }
6546
6557
 
6547
- .pf-c-drawer.pf-m-static.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
6548
- transform: translateX(0);
6549
- }
6558
+ .pf-c-drawer__panel {
6559
+ position: relative;
6560
+ z-index: var(--pf-c-drawer__panel--ZIndex);
6561
+ flex-basis: var(--pf-c-drawer__panel--FlexBasis);
6562
+ order: 1;
6563
+ max-height: var(--pf-c-drawer__panel--MaxHeight);
6564
+ overflow: auto;
6565
+ background-color: var(--pf-c-drawer__panel--BackgroundColor);
6566
+ box-shadow: var(--pf-c-drawer__panel--BoxShadow);
6567
+ transition-duration: var(--pf-c-drawer__panel--TransitionDuration);
6568
+ transition-property: var(--pf-c-drawer__panel--TransitionProperty);
6569
+ -webkit-overflow-scrolling: touch;
6570
+ }
6550
6571
 
6551
- .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
6552
- display: none;
6553
- visibility: hidden;
6554
- }
6572
+ .pf-c-drawer__panel::after {
6573
+ position: absolute;
6574
+ top: 0;
6575
+ left: 0;
6576
+ width: var(--pf-c-drawer__panel--after--Width);
6577
+ height: 100%;
6578
+ content: "";
6579
+ background-color: var(--pf-c-drawer__panel--after--BackgroundColor);
6555
6580
  }
6556
- @media (min-width: 992px) {
6557
- .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__content,
6558
- .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__content {
6559
- flex-shrink: 1;
6560
- }
6561
6581
 
6562
- .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel,
6563
- .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel {
6564
- --pf-c-drawer--m-expanded__panel--BoxShadow: none;
6565
- }
6582
+ .pf-c-drawer__panel.pf-m-no-background {
6583
+ --pf-c-drawer__panel--BackgroundColor: transparent;
6584
+ }
6566
6585
 
6567
- .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
6568
- .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
6569
- background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
6570
- }
6586
+ .pf-c-drawer__panel.pf-m-light-200 {
6587
+ --pf-c-drawer__panel--BackgroundColor: var(--pf-c-drawer__panel--m-light-200--BackgroundColor);
6588
+ }
6571
6589
 
6572
- .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__content {
6573
- overflow-x: auto;
6590
+ @media screen and (min-width: 768px) {
6591
+ .pf-c-drawer__panel {
6592
+ --pf-c-drawer__panel--FlexBasis:
6593
+ max(
6594
+ var(--pf-c-drawer__panel--md--FlexBasis--min),
6595
+ min(var(--pf-c-drawer__panel--md--FlexBasis), var(--pf-c-drawer__panel--md--FlexBasis--max))
6596
+ );
6574
6597
  }
6575
-
6576
- .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel {
6577
- margin-left: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
6578
- transform: translateX(100%);
6598
+ }
6599
+ @media screen and (min-width: 1200px) {
6600
+ .pf-c-drawer__panel {
6601
+ --pf-c-drawer__panel--md--FlexBasis: var(--pf-c-drawer__panel--xl--FlexBasis);
6579
6602
  }
6580
6603
 
6581
- .pf-c-drawer.pf-m-inline-on-lg.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6582
- margin-left: 0;
6583
- transform: translateX(0);
6604
+ .pf-c-drawer.pf-m-panel-bottom .pf-c-drawer__panel {
6605
+ --pf-c-drawer__panel--md--FlexBasis: var(--pf-c-drawer--m-panel-bottom__panel--xl--FlexBasis);
6584
6606
  }
6607
+ }
6608
+ .pf-c-drawer__panel-main {
6609
+ flex-grow: 1;
6610
+ }
6585
6611
 
6586
- .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
6587
- display: unset;
6588
- visibility: visible;
6612
+ @keyframes pf-remove-tab-focus {
6613
+ to {
6614
+ visibility: hidden;
6589
6615
  }
6616
+ }
6617
+ .pf-c-drawer__panel[hidden] {
6618
+ animation-name: pf-remove-tab-focus;
6619
+ animation-delay: var(--pf-c-drawer__panel--TransitionDuration);
6620
+ animation-fill-mode: forwards;
6621
+ }
6590
6622
 
6591
- .pf-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
6592
- margin-right: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
6593
- margin-left: 0;
6594
- transform: translateX(-100%);
6595
- }
6623
+ .pf-c-drawer__head {
6624
+ display: grid;
6625
+ grid-template-columns: auto;
6626
+ grid-auto-columns: max-content;
6627
+ }
6596
6628
 
6597
- .pf-c-drawer.pf-m-inline-on-lg.pf-m-panel-left.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6598
- margin-right: 0;
6599
- transform: translateX(0);
6600
- }
6629
+ .pf-c-drawer__head > * {
6630
+ grid-column: 1;
6631
+ }
6632
+
6633
+ .pf-c-drawer__actions {
6634
+ grid-column: 2;
6635
+ grid-row: 1;
6636
+ display: flex;
6637
+ align-self: baseline;
6638
+ margin-top: var(--pf-c-drawer__actions--MarginTop);
6639
+ margin-right: var(--pf-c-drawer__actions--MarginRight);
6640
+ }
6641
+
6642
+ .pf-c-drawer__body {
6643
+ min-height: 0;
6644
+ padding: var(--pf-c-drawer--child--PaddingTop) var(--pf-c-drawer--child--PaddingRight) var(--pf-c-drawer--child--PaddingBottom) var(--pf-c-drawer--child--PaddingLeft);
6645
+ }
6601
6646
 
6602
- .pf-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
6603
- display: unset;
6604
- visibility: visible;
6605
- }
6647
+ .pf-c-drawer__body.pf-m-no-padding {
6648
+ padding: 0;
6649
+ }
6606
6650
 
6607
- .pf-c-drawer.pf-m-inline-on-lg.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
6608
- margin-bottom: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
6609
- transform: translateY(100%);
6610
- }
6651
+ .pf-c-drawer__body.pf-m-no-padding > .pf-c-drawer__actions,
6652
+ .pf-c-drawer__body.pf-m-no-padding > .pf-c-drawer__head > .pf-c-drawer__actions {
6653
+ margin-top: 0;
6654
+ margin-right: 0;
6655
+ }
6611
6656
 
6612
- .pf-c-drawer.pf-m-inline-on-lg.pf-m-panel-bottom.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6613
- margin-bottom: 0;
6614
- transform: translateY(0);
6615
- }
6657
+ .pf-c-drawer__body.pf-m-padding {
6658
+ padding: var(--pf-c-drawer--child--m-padding--PaddingTop) var(--pf-c-drawer--child--m-padding--PaddingRight) var(--pf-c-drawer--child--m-padding--PaddingBottom) var(--pf-c-drawer--child--m-padding--PaddingLeft);
6659
+ }
6616
6660
 
6617
- .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel {
6618
- transform: translateX(0);
6619
- }
6661
+ .pf-c-drawer__body:not(.pf-m-no-padding) + * {
6662
+ padding-top: 0;
6663
+ }
6620
6664
 
6621
- .pf-c-drawer.pf-m-static-on-lg.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
6622
- margin-right: 0;
6623
- transform: translateX(0);
6624
- }
6665
+ .pf-c-drawer__body:last-child {
6666
+ flex: 1 1;
6667
+ }
6625
6668
 
6626
- .pf-c-drawer.pf-m-static-on-lg.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
6627
- transform: translateX(0);
6628
- }
6669
+ .pf-c-drawer__body > .pf-c-page__main {
6670
+ height: 100%;
6671
+ }
6629
6672
 
6630
- .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
6631
- display: none;
6632
- visibility: hidden;
6633
- }
6673
+ .pf-c-drawer__splitter {
6674
+ position: relative;
6675
+ display: none;
6676
+ width: var(--pf-c-drawer__splitter--Width);
6677
+ height: var(--pf-c-drawer__splitter--Height);
6678
+ cursor: var(--pf-c-drawer__splitter--Cursor);
6679
+ visibility: hidden;
6680
+ background-color: var(--pf-c-drawer__splitter--BackgroundColor);
6634
6681
  }
6635
- @media (min-width: 1200px) {
6636
- .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__content,
6637
- .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__content {
6638
- flex-shrink: 1;
6639
- }
6640
6682
 
6641
- .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel,
6642
- .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel {
6643
- --pf-c-drawer--m-expanded__panel--BoxShadow: none;
6644
- }
6683
+ .pf-c-drawer__splitter.pf-m-vertical {
6684
+ --pf-c-drawer__splitter--Height: var(--pf-c-drawer__splitter--m-vertical--Height);
6685
+ --pf-c-drawer__splitter--Width: var(--pf-c-drawer__splitter--m-vertical--Width);
6686
+ --pf-c-drawer__splitter--Cursor: var(--pf-c-drawer__splitter--m-vertical--Cursor);
6687
+ --pf-c-drawer__splitter-handle--after--Width: var(--pf-c-drawer__splitter--m-vertical__splitter-handle--after--Width);
6688
+ --pf-c-drawer__splitter-handle--after--Height: var(--pf-c-drawer__splitter--m-vertical__splitter-handle--after--Height);
6689
+ --pf-c-drawer__splitter-handle--after--BorderTopWidth: var(--pf-c-drawer__splitter--m-vertical__splitter-handle--after--BorderTopWidth);
6690
+ --pf-c-drawer__splitter-handle--after--BorderRightWidth: var(--pf-c-drawer__splitter--m-vertical__splitter-handle--after--BorderRightWidth);
6691
+ --pf-c-drawer__splitter-handle--after--BorderBottomWidth: var(--pf-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBottomWidth);
6692
+ --pf-c-drawer__splitter-handle--after--BorderLeftWidth: var(--pf-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth);
6693
+ }
6645
6694
 
6646
- .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
6647
- .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
6648
- background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
6649
- }
6695
+ .pf-c-drawer__splitter:hover {
6696
+ --pf-c-drawer__splitter-handle--after--BorderColor: var(--pf-c-drawer__splitter--hover__splitter-handle--after--BorderColor);
6697
+ }
6650
6698
 
6651
- .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__content {
6652
- overflow-x: auto;
6653
- }
6699
+ .pf-c-drawer__splitter:focus {
6700
+ --pf-c-drawer__splitter-handle--after--BorderColor: var(--pf-c-drawer__splitter--focus__splitter-handle--after--BorderColor);
6701
+ }
6654
6702
 
6655
- .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel {
6656
- margin-left: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
6657
- transform: translateX(100%);
6658
- }
6703
+ .pf-c-drawer__splitter::after {
6704
+ position: absolute;
6705
+ top: 0;
6706
+ right: 0;
6707
+ bottom: 0;
6708
+ left: 0;
6709
+ content: "";
6710
+ border: solid var(--pf-c-drawer__splitter--after--BorderColor);
6711
+ border-width: var(--pf-c-drawer__splitter--after--BorderTopWidth) var(--pf-c-drawer__splitter--after--BorderRightWidth) var(--pf-c-drawer__splitter--after--BorderBottomWidth) var(--pf-c-drawer__splitter--after--BorderLeftWidth);
6712
+ }
6659
6713
 
6660
- .pf-c-drawer.pf-m-inline-on-xl.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6661
- margin-left: 0;
6662
- transform: translateX(0);
6663
- }
6714
+ .pf-c-drawer__splitter-handle {
6715
+ position: absolute;
6716
+ top: var(--pf-c-drawer__splitter-handle--Top);
6717
+ left: var(--pf-c-drawer__splitter-handle--Left);
6718
+ transform: translate(-50%, -50%);
6719
+ }
6664
6720
 
6665
- .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
6666
- display: unset;
6667
- visibility: visible;
6721
+ .pf-c-drawer__splitter-handle::after {
6722
+ display: block;
6723
+ width: var(--pf-c-drawer__splitter-handle--after--Width);
6724
+ height: var(--pf-c-drawer__splitter-handle--after--Height);
6725
+ content: "";
6726
+ border-color: var(--pf-c-drawer__splitter-handle--after--BorderColor);
6727
+ border-style: solid;
6728
+ border-width: var(--pf-c-drawer__splitter-handle--after--BorderTopWidth) var(--pf-c-drawer__splitter-handle--after--BorderRightWidth) var(--pf-c-drawer__splitter-handle--after--BorderBottomWidth) var(--pf-c-drawer__splitter-handle--after--BorderLeftWidth);
6729
+ }
6730
+
6731
+ @media screen and (min-width: 768px) {
6732
+ .pf-c-drawer {
6733
+ min-width: var(--pf-c-drawer__panel--MinWidth);
6668
6734
  }
6669
6735
 
6670
- .pf-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
6671
- margin-right: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
6672
- margin-left: 0;
6673
- transform: translateX(-100%);
6736
+ .pf-c-drawer.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6737
+ box-shadow: var(--pf-c-drawer--m-expanded__panel--BoxShadow);
6674
6738
  }
6675
6739
 
6676
- .pf-c-drawer.pf-m-inline-on-xl.pf-m-panel-left.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6677
- margin-right: 0;
6678
- transform: translateX(0);
6740
+ .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable {
6741
+ --pf-c-drawer__panel--md--FlexBasis--min: var(--pf-c-drawer__panel--m-resizable--md--FlexBasis--min);
6742
+ flex-direction: var(--pf-c-drawer__panel--m-resizable--FlexDirection);
6743
+ min-width: var(--pf-c-drawer__panel--m-resizable--MinWidth);
6679
6744
  }
6680
6745
 
6681
- .pf-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
6682
- display: unset;
6683
- visibility: visible;
6746
+ .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable::after {
6747
+ width: 0;
6748
+ height: 0;
6684
6749
  }
6685
6750
 
6686
- .pf-c-drawer.pf-m-inline-on-xl.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
6687
- margin-bottom: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
6688
- transform: translateY(100%);
6751
+ .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable > .pf-c-drawer__splitter {
6752
+ flex-shrink: 0;
6689
6753
  }
6690
6754
 
6691
- .pf-c-drawer.pf-m-inline-on-xl.pf-m-panel-bottom.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6692
- margin-bottom: 0;
6693
- transform: translateY(0);
6755
+ .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable > .pf-c-drawer__panel-main {
6756
+ flex-shrink: 1;
6694
6757
  }
6695
6758
 
6696
- .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel {
6697
- transform: translateX(0);
6759
+ .pf-c-drawer.pf-m-panel-left {
6760
+ --pf-c-drawer--m-expanded__panel--BoxShadow: var(--pf-c-drawer--m-expanded--m-panel-left__panel--BoxShadow);
6698
6761
  }
6699
6762
 
6700
- .pf-c-drawer.pf-m-static-on-xl.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
6701
- margin-right: 0;
6702
- transform: translateX(0);
6763
+ .pf-c-drawer.pf-m-panel-left.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-c-drawer.pf-m-panel-left.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
6764
+ padding-right: var(--pf-c-drawer--m-panel-left--m-inline__panel--PaddingRight);
6765
+ padding-left: 0;
6703
6766
  }
6704
6767
 
6705
- .pf-c-drawer.pf-m-static-on-xl.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
6768
+ .pf-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6706
6769
  transform: translateX(0);
6707
6770
  }
6708
6771
 
6709
- .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
6710
- display: none;
6711
- visibility: hidden;
6712
- }
6713
- }
6714
- @media (min-width: 1450px) {
6715
- .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content,
6716
- .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content {
6717
- flex-shrink: 1;
6772
+ .pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel::after {
6773
+ right: 0;
6774
+ left: auto;
6718
6775
  }
6719
6776
 
6720
- .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel,
6721
- .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel {
6722
- --pf-c-drawer--m-expanded__panel--BoxShadow: none;
6777
+ .pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable > .pf-c-drawer__splitter {
6778
+ --pf-c-drawer__splitter-handle--Left: var(--pf-c-drawer--m-panel-left__splitter-handle--Left);
6779
+ --pf-c-drawer__splitter--after--BorderRightWidth: 0;
6780
+ --pf-c-drawer__splitter--after--BorderLeftWidth: var(--pf-c-drawer--m-panel-left__splitter--after--BorderLeftWidth);
6781
+ order: 1;
6723
6782
  }
6724
6783
 
6725
- .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
6726
- .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
6727
- background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
6784
+ .pf-c-drawer.pf-m-panel-bottom {
6785
+ --pf-c-drawer--m-expanded__panel--BoxShadow: var(--pf-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow);
6786
+ --pf-c-drawer__panel--MaxHeight: 100%;
6787
+ --pf-c-drawer__panel--FlexBasis--min: var(--pf-c-drawer--m-panel-bottom__panel--FlexBasis--min);
6788
+ min-width: auto;
6789
+ min-height: var(--pf-c-drawer--m-panel-bottom__panel--md--MinHeight);
6728
6790
  }
6729
6791
 
6730
- .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content {
6731
- overflow-x: auto;
6792
+ .pf-c-drawer.pf-m-panel-bottom.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-c-drawer.pf-m-panel-bottom.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
6793
+ padding-top: var(--pf-c-drawer--m-panel-bottom--m-inline__panel--PaddingTop);
6794
+ padding-left: 0;
6732
6795
  }
6733
6796
 
6734
- .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel {
6735
- margin-left: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
6736
- transform: translateX(100%);
6797
+ .pf-c-drawer.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel::after {
6798
+ top: 0;
6799
+ left: auto;
6800
+ width: 100%;
6801
+ height: var(--pf-c-drawer--m-panel-bottom__panel--after--Height);
6737
6802
  }
6738
6803
 
6739
- .pf-c-drawer.pf-m-inline-on-2xl.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6740
- margin-left: 0;
6741
- transform: translateX(0);
6804
+ .pf-c-drawer.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable {
6805
+ --pf-c-drawer__panel--md--FlexBasis--min: var(--pf-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min);
6806
+ --pf-c-drawer__panel--m-resizable--FlexDirection: var(--pf-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection);
6807
+ --pf-c-drawer__panel--m-resizable--MinWidth: 0;
6808
+ min-height: var(--pf-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight);
6742
6809
  }
6743
6810
 
6744
- .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
6745
- display: unset;
6746
- visibility: visible;
6811
+ .pf-c-drawer.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable > .pf-c-drawer__splitter {
6812
+ --pf-c-drawer__splitter-handle--Top: var(--pf-c-drawer--m-panel-bottom__splitter-handle--Top);
6813
+ --pf-c-drawer__splitter--after--BorderRightWidth: 0;
6814
+ --pf-c-drawer__splitter--after--BorderBottomWidth: var(--pf-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth);
6747
6815
  }
6748
6816
 
6749
- .pf-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
6750
- margin-right: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
6751
- margin-left: 0;
6752
- transform: translateX(-100%);
6817
+ .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable > .pf-c-drawer__splitter {
6818
+ --pf-c-drawer__splitter--m-vertical--Width: var(--pf-c-drawer--m-inline__splitter--m-vertical--Width);
6819
+ --pf-c-drawer__splitter-handle--Left: var(--pf-c-drawer--m-inline__splitter-handle--Left);
6820
+ --pf-c-drawer__splitter--after--BorderRightWidth: var(--pf-c-drawer--m-inline__splitter--after--BorderRightWidth);
6821
+ --pf-c-drawer__splitter--after--BorderLeftWidth: var(--pf-c-drawer--m-inline__splitter--after--BorderLeftWidth);
6822
+ outline-offset: var(--pf-c-drawer--m-inline__splitter--focus--OutlineOffset);
6753
6823
  }
6754
6824
 
6755
- .pf-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6756
- margin-right: 0;
6757
- transform: translateX(0);
6825
+ .pf-c-drawer.pf-m-inline.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable > .pf-c-drawer__splitter {
6826
+ --pf-c-drawer__splitter--Height: var(--pf-c-drawer--m-inline--m-panel-bottom__splitter--Height);
6827
+ --pf-c-drawer__splitter-handle--Top: var(--pf-c-drawer--m-inline--m-panel-bottom__splitter-handle--Top);
6828
+ --pf-c-drawer__splitter--after--BorderTopWidth: var(--pf-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderTopWidth);
6829
+ --pf-c-drawer__splitter--after--BorderRightWidth: 0;
6830
+ --pf-c-drawer__splitter--after--BorderLeftWidth: 0;
6758
6831
  }
6759
6832
 
6760
- .pf-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
6761
- display: unset;
6762
- visibility: visible;
6833
+ .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-no-border,
6834
+ .pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-no-border {
6835
+ --pf-c-drawer--m-expanded__panel--BoxShadow: none;
6763
6836
  }
6764
6837
 
6765
- .pf-c-drawer.pf-m-inline-on-2xl.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
6766
- margin-bottom: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
6767
- transform: translateY(100%);
6838
+ .pf-c-drawer__splitter {
6839
+ display: block;
6840
+ visibility: visible;
6841
+ }
6842
+ }
6843
+ @media (min-width: 768px) {
6844
+ .pf-c-drawer__panel.pf-m-width-25 {
6845
+ --pf-c-drawer__panel--md--FlexBasis: 25%;
6768
6846
  }
6769
6847
 
6770
- .pf-c-drawer.pf-m-inline-on-2xl.pf-m-panel-bottom.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6771
- margin-bottom: 0;
6772
- transform: translateY(0);
6848
+ .pf-c-drawer__panel.pf-m-width-33 {
6849
+ --pf-c-drawer__panel--md--FlexBasis: 33%;
6773
6850
  }
6774
6851
 
6775
- .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel {
6776
- transform: translateX(0);
6852
+ .pf-c-drawer__panel.pf-m-width-50 {
6853
+ --pf-c-drawer__panel--md--FlexBasis: 50%;
6777
6854
  }
6778
6855
 
6779
- .pf-c-drawer.pf-m-static-on-2xl.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
6780
- margin-right: 0;
6781
- transform: translateX(0);
6856
+ .pf-c-drawer__panel.pf-m-width-66 {
6857
+ --pf-c-drawer__panel--md--FlexBasis: 66%;
6782
6858
  }
6783
6859
 
6784
- .pf-c-drawer.pf-m-static-on-2xl.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
6785
- transform: translateX(0);
6860
+ .pf-c-drawer__panel.pf-m-width-75 {
6861
+ --pf-c-drawer__panel--md--FlexBasis: 75%;
6786
6862
  }
6787
6863
 
6788
- .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
6789
- display: none;
6790
- visibility: hidden;
6864
+ .pf-c-drawer__panel.pf-m-width-100 {
6865
+ --pf-c-drawer__panel--md--FlexBasis: 100%;
6791
6866
  }
6792
6867
  }
6793
- :where(.pf-theme-dark) .pf-c-drawer {
6794
- --pf-c-drawer__panel--BackgroundColor: var(--pf-global--BackgroundColor--400);
6795
- --pf-c-drawer__splitter--BackgroundColor: transparent;
6796
- }
6868
+ @media (min-width: 992px) {
6869
+ .pf-c-drawer__panel.pf-m-width-25-on-lg {
6870
+ --pf-c-drawer__panel--md--FlexBasis: 25%;
6871
+ }
6797
6872
 
6798
- :where(.pf-theme-dark) .pf-c-drawer.pf-m-inline, :where(.pf-theme-dark) .pf-c-drawer.pf-m-static {
6799
- --pf-c-drawer__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
6800
- }
6873
+ .pf-c-drawer__panel.pf-m-width-33-on-lg {
6874
+ --pf-c-drawer__panel--md--FlexBasis: 33%;
6875
+ }
6801
6876
 
6802
- .pf-c-divider {
6803
- --pf-hidden-visible--visible--Visibility: visible;
6804
- --pf-hidden-visible--hidden--Display: none;
6805
- --pf-hidden-visible--hidden--Visibility: hidden;
6806
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
6807
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
6808
- display: var(--pf-hidden-visible--Display);
6809
- visibility: var(--pf-hidden-visible--Visibility);
6810
- }
6877
+ .pf-c-drawer__panel.pf-m-width-50-on-lg {
6878
+ --pf-c-drawer__panel--md--FlexBasis: 50%;
6879
+ }
6811
6880
 
6812
- .pf-m-hidden.pf-c-divider {
6813
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
6814
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
6815
- }
6881
+ .pf-c-drawer__panel.pf-m-width-66-on-lg {
6882
+ --pf-c-drawer__panel--md--FlexBasis: 66%;
6883
+ }
6816
6884
 
6817
- @media screen and (min-width: 576px) {
6818
- .pf-m-hidden-on-sm.pf-c-divider {
6819
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
6820
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
6885
+ .pf-c-drawer__panel.pf-m-width-75-on-lg {
6886
+ --pf-c-drawer__panel--md--FlexBasis: 75%;
6821
6887
  }
6822
6888
 
6823
- .pf-m-visible-on-sm.pf-c-divider {
6824
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
6825
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
6889
+ .pf-c-drawer__panel.pf-m-width-100-on-lg {
6890
+ --pf-c-drawer__panel--md--FlexBasis: 100%;
6826
6891
  }
6827
6892
  }
6828
- @media screen and (min-width: 768px) {
6829
- .pf-m-hidden-on-md.pf-c-divider {
6830
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
6831
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
6893
+ @media (min-width: 1200px) {
6894
+ .pf-c-drawer__panel.pf-m-width-25-on-xl {
6895
+ --pf-c-drawer__panel--md--FlexBasis: 25%;
6832
6896
  }
6833
6897
 
6834
- .pf-m-visible-on-md.pf-c-divider {
6835
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
6836
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
6898
+ .pf-c-drawer__panel.pf-m-width-33-on-xl {
6899
+ --pf-c-drawer__panel--md--FlexBasis: 33%;
6837
6900
  }
6838
- }
6839
- @media screen and (min-width: 992px) {
6840
- .pf-m-hidden-on-lg.pf-c-divider {
6841
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
6842
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
6901
+
6902
+ .pf-c-drawer__panel.pf-m-width-50-on-xl {
6903
+ --pf-c-drawer__panel--md--FlexBasis: 50%;
6843
6904
  }
6844
6905
 
6845
- .pf-m-visible-on-lg.pf-c-divider {
6846
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
6847
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
6906
+ .pf-c-drawer__panel.pf-m-width-66-on-xl {
6907
+ --pf-c-drawer__panel--md--FlexBasis: 66%;
6848
6908
  }
6849
- }
6850
- @media screen and (min-width: 1200px) {
6851
- .pf-m-hidden-on-xl.pf-c-divider {
6852
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
6853
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
6909
+
6910
+ .pf-c-drawer__panel.pf-m-width-75-on-xl {
6911
+ --pf-c-drawer__panel--md--FlexBasis: 75%;
6854
6912
  }
6855
6913
 
6856
- .pf-m-visible-on-xl.pf-c-divider {
6857
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
6858
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
6914
+ .pf-c-drawer__panel.pf-m-width-100-on-xl {
6915
+ --pf-c-drawer__panel--md--FlexBasis: 100%;
6859
6916
  }
6860
6917
  }
6861
- @media screen and (min-width: 1450px) {
6862
- .pf-m-hidden-on-2xl.pf-c-divider {
6863
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
6864
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
6918
+ @media (min-width: 1450px) {
6919
+ .pf-c-drawer__panel.pf-m-width-25-on-2xl {
6920
+ --pf-c-drawer__panel--md--FlexBasis: 25%;
6865
6921
  }
6866
6922
 
6867
- .pf-m-visible-on-2xl.pf-c-divider {
6868
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
6869
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
6923
+ .pf-c-drawer__panel.pf-m-width-33-on-2xl {
6924
+ --pf-c-drawer__panel--md--FlexBasis: 33%;
6870
6925
  }
6871
- }
6872
- .pf-c-divider {
6873
- --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm);
6874
- --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
6875
- --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
6876
- --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
6877
- --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
6878
- --pf-c-divider--after--FlexBasis: 100%;
6879
- --pf-c-divider--after--Inset: 0%;
6880
- --pf-c-divider--m-vertical--after--FlexBasis: 100%;
6881
- --pf-c-divider--m-horizontal--Display: flex;
6882
- --pf-c-divider--m-horizontal--FlexDirection: row;
6883
- --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
6884
- --pf-c-divider--m-horizontal--after--Width: auto;
6885
- --pf-c-divider--m-vertical--Display: inline-flex;
6886
- --pf-c-divider--m-vertical--FlexDirection: column;
6887
- --pf-c-divider--m-vertical--after--Height: auto;
6888
- --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
6889
- --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
6890
- --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
6891
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
6892
- --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
6893
- --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
6894
- width: 100%;
6895
- height: auto;
6896
- display: var(--pf-c-divider--Display);
6897
- flex-direction: var(--pf-c-divider--FlexDirection);
6898
- align-items: center;
6899
- align-self: stretch;
6900
- flex-shrink: 0;
6901
- justify-content: center;
6902
- border: 0;
6903
- }
6904
-
6905
- .pf-c-divider::after {
6906
- flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
6907
- }
6908
6926
 
6909
- .pf-c-divider::after {
6910
- align-self: stretch;
6911
- width: var(--pf-c-divider--after--Width);
6912
- height: var(--pf-c-divider--after--Height);
6913
- content: "";
6914
- background-color: var(--pf-c-divider--after--BackgroundColor);
6915
- justify-self: center;
6916
- }
6927
+ .pf-c-drawer__panel.pf-m-width-50-on-2xl {
6928
+ --pf-c-drawer__panel--md--FlexBasis: 50%;
6929
+ }
6917
6930
 
6918
- .pf-c-divider.pf-m-vertical {
6919
- --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
6920
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
6921
- --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
6922
- --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
6923
- width: auto;
6924
- height: inherit;
6925
- }
6931
+ .pf-c-drawer__panel.pf-m-width-66-on-2xl {
6932
+ --pf-c-drawer__panel--md--FlexBasis: 66%;
6933
+ }
6926
6934
 
6927
- .pf-c-divider.pf-m-vertical::after {
6928
- flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
6929
- }
6935
+ .pf-c-drawer__panel.pf-m-width-75-on-2xl {
6936
+ --pf-c-drawer__panel--md--FlexBasis: 75%;
6937
+ }
6930
6938
 
6931
- .pf-c-divider.pf-m-inset-none {
6932
- --pf-c-divider--after--Inset: 0%;
6939
+ .pf-c-drawer__panel.pf-m-width-100-on-2xl {
6940
+ --pf-c-drawer__panel--md--FlexBasis: 100%;
6941
+ }
6933
6942
  }
6943
+ @media (min-width: 768px) {
6944
+ .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__content,
6945
+ .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__content {
6946
+ flex-shrink: 1;
6947
+ }
6934
6948
 
6935
- .pf-c-divider.pf-m-inset-xs {
6936
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6937
- }
6949
+ .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel,
6950
+ .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel {
6951
+ --pf-c-drawer--m-expanded__panel--BoxShadow: none;
6952
+ }
6938
6953
 
6939
- .pf-c-divider.pf-m-inset-sm {
6940
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6941
- }
6954
+ .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
6955
+ .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
6956
+ background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
6957
+ }
6942
6958
 
6943
- .pf-c-divider.pf-m-inset-md {
6944
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6945
- }
6959
+ .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__content {
6960
+ overflow-x: auto;
6961
+ }
6946
6962
 
6947
- .pf-c-divider.pf-m-inset-lg {
6948
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6949
- }
6963
+ .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel {
6964
+ margin-left: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
6965
+ transform: translateX(100%);
6966
+ }
6950
6967
 
6951
- .pf-c-divider.pf-m-inset-xl {
6952
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6953
- }
6968
+ .pf-c-drawer.pf-m-inline.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6969
+ margin-left: 0;
6970
+ transform: translateX(0);
6971
+ }
6954
6972
 
6955
- .pf-c-divider.pf-m-inset-2xl {
6956
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6957
- }
6973
+ .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
6974
+ display: unset;
6975
+ visibility: visible;
6976
+ }
6958
6977
 
6959
- .pf-c-divider.pf-m-inset-3xl {
6960
- --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6961
- }
6978
+ .pf-c-drawer.pf-m-inline.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
6979
+ margin-right: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
6980
+ margin-left: 0;
6981
+ transform: translateX(-100%);
6982
+ }
6962
6983
 
6963
- @media (min-width: 576px) {
6964
- .pf-c-divider.pf-m-horizontal-on-sm {
6965
- --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
6966
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
6967
- --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
6968
- --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
6969
- width: 100%;
6970
- height: auto;
6984
+ .pf-c-drawer.pf-m-inline.pf-m-panel-left.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6985
+ margin-right: 0;
6986
+ transform: translateX(0);
6971
6987
  }
6972
6988
 
6973
- .pf-c-divider.pf-m-horizontal-on-sm::after {
6974
- flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
6975
- }
6976
- }
6977
- @media (min-width: 576px) {
6978
- .pf-c-divider.pf-m-vertical-on-sm {
6979
- --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
6980
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
6981
- --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
6982
- --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
6983
- width: auto;
6984
- height: inherit;
6989
+ .pf-c-drawer.pf-m-inline.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
6990
+ display: unset;
6991
+ visibility: visible;
6985
6992
  }
6986
6993
 
6987
- .pf-c-divider.pf-m-vertical-on-sm::after {
6988
- flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
6994
+ .pf-c-drawer.pf-m-inline.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
6995
+ margin-bottom: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
6996
+ transform: translateY(100%);
6989
6997
  }
6990
- }
6991
- @media (min-width: 576px) {
6992
- .pf-c-divider.pf-m-inset-none-on-sm {
6993
- --pf-c-divider--after--Inset: 0%;
6998
+
6999
+ .pf-c-drawer.pf-m-inline.pf-m-panel-bottom.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
7000
+ margin-bottom: 0;
7001
+ transform: translateY(0);
6994
7002
  }
6995
7003
 
6996
- .pf-c-divider.pf-m-inset-xs-on-sm {
6997
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
7004
+ .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel {
7005
+ transform: translateX(0);
6998
7006
  }
6999
7007
 
7000
- .pf-c-divider.pf-m-inset-sm-on-sm {
7001
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
7008
+ .pf-c-drawer.pf-m-static.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
7009
+ margin-right: 0;
7010
+ transform: translateX(0);
7002
7011
  }
7003
7012
 
7004
- .pf-c-divider.pf-m-inset-md-on-sm {
7005
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
7013
+ .pf-c-drawer.pf-m-static.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
7014
+ transform: translateX(0);
7006
7015
  }
7007
7016
 
7008
- .pf-c-divider.pf-m-inset-lg-on-sm {
7009
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
7017
+ .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
7018
+ display: none;
7019
+ visibility: hidden;
7020
+ }
7021
+ }
7022
+ @media (min-width: 992px) {
7023
+ .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__content,
7024
+ .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__content {
7025
+ flex-shrink: 1;
7010
7026
  }
7011
7027
 
7012
- .pf-c-divider.pf-m-inset-xl-on-sm {
7013
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
7028
+ .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel,
7029
+ .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel {
7030
+ --pf-c-drawer--m-expanded__panel--BoxShadow: none;
7014
7031
  }
7015
7032
 
7016
- .pf-c-divider.pf-m-inset-2xl-on-sm {
7017
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
7033
+ .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
7034
+ .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
7035
+ background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
7018
7036
  }
7019
7037
 
7020
- .pf-c-divider.pf-m-inset-3xl-on-sm {
7021
- --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
7038
+ .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__content {
7039
+ overflow-x: auto;
7022
7040
  }
7023
- }
7024
- @media (min-width: 768px) {
7025
- .pf-c-divider.pf-m-horizontal-on-md {
7026
- --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
7027
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
7028
- --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
7029
- --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
7030
- width: 100%;
7031
- height: auto;
7041
+
7042
+ .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel {
7043
+ margin-left: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
7044
+ transform: translateX(100%);
7032
7045
  }
7033
7046
 
7034
- .pf-c-divider.pf-m-horizontal-on-md::after {
7035
- flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
7047
+ .pf-c-drawer.pf-m-inline-on-lg.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
7048
+ margin-left: 0;
7049
+ transform: translateX(0);
7036
7050
  }
7037
- }
7038
- @media (min-width: 768px) {
7039
- .pf-c-divider.pf-m-vertical-on-md {
7040
- --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
7041
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
7042
- --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
7043
- --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
7044
- width: auto;
7045
- height: inherit;
7051
+
7052
+ .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
7053
+ display: unset;
7054
+ visibility: visible;
7046
7055
  }
7047
7056
 
7048
- .pf-c-divider.pf-m-vertical-on-md::after {
7049
- flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
7057
+ .pf-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
7058
+ margin-right: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
7059
+ margin-left: 0;
7060
+ transform: translateX(-100%);
7050
7061
  }
7051
- }
7052
- @media (min-width: 768px) {
7053
- .pf-c-divider.pf-m-inset-none-on-md {
7054
- --pf-c-divider--after--Inset: 0%;
7062
+
7063
+ .pf-c-drawer.pf-m-inline-on-lg.pf-m-panel-left.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
7064
+ margin-right: 0;
7065
+ transform: translateX(0);
7055
7066
  }
7056
7067
 
7057
- .pf-c-divider.pf-m-inset-xs-on-md {
7058
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
7068
+ .pf-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
7069
+ display: unset;
7070
+ visibility: visible;
7059
7071
  }
7060
7072
 
7061
- .pf-c-divider.pf-m-inset-sm-on-md {
7062
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
7073
+ .pf-c-drawer.pf-m-inline-on-lg.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
7074
+ margin-bottom: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
7075
+ transform: translateY(100%);
7063
7076
  }
7064
7077
 
7065
- .pf-c-divider.pf-m-inset-md-on-md {
7066
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
7078
+ .pf-c-drawer.pf-m-inline-on-lg.pf-m-panel-bottom.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
7079
+ margin-bottom: 0;
7080
+ transform: translateY(0);
7067
7081
  }
7068
7082
 
7069
- .pf-c-divider.pf-m-inset-lg-on-md {
7070
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
7083
+ .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel {
7084
+ transform: translateX(0);
7071
7085
  }
7072
7086
 
7073
- .pf-c-divider.pf-m-inset-xl-on-md {
7074
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
7087
+ .pf-c-drawer.pf-m-static-on-lg.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
7088
+ margin-right: 0;
7089
+ transform: translateX(0);
7075
7090
  }
7076
7091
 
7077
- .pf-c-divider.pf-m-inset-2xl-on-md {
7078
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
7092
+ .pf-c-drawer.pf-m-static-on-lg.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
7093
+ transform: translateX(0);
7079
7094
  }
7080
7095
 
7081
- .pf-c-divider.pf-m-inset-3xl-on-md {
7082
- --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
7096
+ .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
7097
+ display: none;
7098
+ visibility: hidden;
7083
7099
  }
7084
7100
  }
7085
- @media (min-width: 992px) {
7086
- .pf-c-divider.pf-m-horizontal-on-lg {
7087
- --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
7088
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
7089
- --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
7090
- --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
7091
- width: 100%;
7092
- height: auto;
7101
+ @media (min-width: 1200px) {
7102
+ .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__content,
7103
+ .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__content {
7104
+ flex-shrink: 1;
7093
7105
  }
7094
7106
 
7095
- .pf-c-divider.pf-m-horizontal-on-lg::after {
7096
- flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
7107
+ .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel,
7108
+ .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel {
7109
+ --pf-c-drawer--m-expanded__panel--BoxShadow: none;
7097
7110
  }
7098
- }
7099
- @media (min-width: 992px) {
7100
- .pf-c-divider.pf-m-vertical-on-lg {
7101
- --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
7102
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
7103
- --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
7104
- --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
7105
- width: auto;
7106
- height: inherit;
7111
+
7112
+ .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
7113
+ .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
7114
+ background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
7107
7115
  }
7108
7116
 
7109
- .pf-c-divider.pf-m-vertical-on-lg::after {
7110
- flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
7117
+ .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__content {
7118
+ overflow-x: auto;
7111
7119
  }
7112
- }
7113
- @media (min-width: 992px) {
7114
- .pf-c-divider.pf-m-inset-none-on-lg {
7115
- --pf-c-divider--after--Inset: 0%;
7120
+
7121
+ .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel {
7122
+ margin-left: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
7123
+ transform: translateX(100%);
7116
7124
  }
7117
7125
 
7118
- .pf-c-divider.pf-m-inset-xs-on-lg {
7119
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
7126
+ .pf-c-drawer.pf-m-inline-on-xl.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
7127
+ margin-left: 0;
7128
+ transform: translateX(0);
7120
7129
  }
7121
7130
 
7122
- .pf-c-divider.pf-m-inset-sm-on-lg {
7123
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
7131
+ .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
7132
+ display: unset;
7133
+ visibility: visible;
7124
7134
  }
7125
7135
 
7126
- .pf-c-divider.pf-m-inset-md-on-lg {
7127
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
7136
+ .pf-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
7137
+ margin-right: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
7138
+ margin-left: 0;
7139
+ transform: translateX(-100%);
7128
7140
  }
7129
7141
 
7130
- .pf-c-divider.pf-m-inset-lg-on-lg {
7131
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
7142
+ .pf-c-drawer.pf-m-inline-on-xl.pf-m-panel-left.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
7143
+ margin-right: 0;
7144
+ transform: translateX(0);
7132
7145
  }
7133
7146
 
7134
- .pf-c-divider.pf-m-inset-xl-on-lg {
7135
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
7147
+ .pf-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
7148
+ display: unset;
7149
+ visibility: visible;
7136
7150
  }
7137
7151
 
7138
- .pf-c-divider.pf-m-inset-2xl-on-lg {
7139
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
7152
+ .pf-c-drawer.pf-m-inline-on-xl.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
7153
+ margin-bottom: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
7154
+ transform: translateY(100%);
7140
7155
  }
7141
7156
 
7142
- .pf-c-divider.pf-m-inset-3xl-on-lg {
7143
- --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
7157
+ .pf-c-drawer.pf-m-inline-on-xl.pf-m-panel-bottom.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
7158
+ margin-bottom: 0;
7159
+ transform: translateY(0);
7144
7160
  }
7145
- }
7146
- @media (min-width: 1200px) {
7147
- .pf-c-divider.pf-m-horizontal-on-xl {
7148
- --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
7149
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
7150
- --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
7151
- --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
7152
- width: 100%;
7153
- height: auto;
7161
+
7162
+ .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel {
7163
+ transform: translateX(0);
7154
7164
  }
7155
7165
 
7156
- .pf-c-divider.pf-m-horizontal-on-xl::after {
7157
- flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
7166
+ .pf-c-drawer.pf-m-static-on-xl.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
7167
+ margin-right: 0;
7168
+ transform: translateX(0);
7158
7169
  }
7159
- }
7160
- @media (min-width: 1200px) {
7161
- .pf-c-divider.pf-m-vertical-on-xl {
7162
- --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
7163
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
7164
- --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
7165
- --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
7166
- width: auto;
7167
- height: inherit;
7170
+
7171
+ .pf-c-drawer.pf-m-static-on-xl.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
7172
+ transform: translateX(0);
7168
7173
  }
7169
7174
 
7170
- .pf-c-divider.pf-m-vertical-on-xl::after {
7171
- flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
7175
+ .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
7176
+ display: none;
7177
+ visibility: hidden;
7172
7178
  }
7173
7179
  }
7174
- @media (min-width: 1200px) {
7175
- .pf-c-divider.pf-m-inset-none-on-xl {
7176
- --pf-c-divider--after--Inset: 0%;
7180
+ @media (min-width: 1450px) {
7181
+ .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content,
7182
+ .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content {
7183
+ flex-shrink: 1;
7177
7184
  }
7178
7185
 
7179
- .pf-c-divider.pf-m-inset-xs-on-xl {
7180
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
7186
+ .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel,
7187
+ .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel {
7188
+ --pf-c-drawer--m-expanded__panel--BoxShadow: none;
7181
7189
  }
7182
7190
 
7183
- .pf-c-divider.pf-m-inset-sm-on-xl {
7184
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
7191
+ .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
7192
+ .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
7193
+ background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
7185
7194
  }
7186
7195
 
7187
- .pf-c-divider.pf-m-inset-md-on-xl {
7188
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
7196
+ .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content {
7197
+ overflow-x: auto;
7189
7198
  }
7190
7199
 
7191
- .pf-c-divider.pf-m-inset-lg-on-xl {
7192
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
7200
+ .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel {
7201
+ margin-left: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
7202
+ transform: translateX(100%);
7193
7203
  }
7194
7204
 
7195
- .pf-c-divider.pf-m-inset-xl-on-xl {
7196
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
7205
+ .pf-c-drawer.pf-m-inline-on-2xl.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
7206
+ margin-left: 0;
7207
+ transform: translateX(0);
7197
7208
  }
7198
7209
 
7199
- .pf-c-divider.pf-m-inset-2xl-on-xl {
7200
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
7210
+ .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
7211
+ display: unset;
7212
+ visibility: visible;
7201
7213
  }
7202
7214
 
7203
- .pf-c-divider.pf-m-inset-3xl-on-xl {
7204
- --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
7205
- }
7206
- }
7207
- @media (min-width: 1450px) {
7208
- .pf-c-divider.pf-m-horizontal-on-2xl {
7209
- --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
7210
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
7211
- --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
7212
- --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
7213
- width: 100%;
7214
- height: auto;
7215
+ .pf-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
7216
+ margin-right: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
7217
+ margin-left: 0;
7218
+ transform: translateX(-100%);
7215
7219
  }
7216
7220
 
7217
- .pf-c-divider.pf-m-horizontal-on-2xl::after {
7218
- flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
7219
- }
7220
- }
7221
- @media (min-width: 1450px) {
7222
- .pf-c-divider.pf-m-vertical-on-2xl {
7223
- --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
7224
- --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
7225
- --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
7226
- --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
7227
- width: auto;
7228
- height: inherit;
7221
+ .pf-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
7222
+ margin-right: 0;
7223
+ transform: translateX(0);
7229
7224
  }
7230
7225
 
7231
- .pf-c-divider.pf-m-vertical-on-2xl::after {
7232
- flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
7233
- }
7234
- }
7235
- @media (min-width: 1450px) {
7236
- .pf-c-divider.pf-m-inset-none-on-2xl {
7237
- --pf-c-divider--after--Inset: 0%;
7226
+ .pf-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
7227
+ display: unset;
7228
+ visibility: visible;
7238
7229
  }
7239
7230
 
7240
- .pf-c-divider.pf-m-inset-xs-on-2xl {
7241
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
7231
+ .pf-c-drawer.pf-m-inline-on-2xl.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
7232
+ margin-bottom: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
7233
+ transform: translateY(100%);
7242
7234
  }
7243
7235
 
7244
- .pf-c-divider.pf-m-inset-sm-on-2xl {
7245
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
7236
+ .pf-c-drawer.pf-m-inline-on-2xl.pf-m-panel-bottom.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
7237
+ margin-bottom: 0;
7238
+ transform: translateY(0);
7246
7239
  }
7247
7240
 
7248
- .pf-c-divider.pf-m-inset-md-on-2xl {
7249
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
7241
+ .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel {
7242
+ transform: translateX(0);
7250
7243
  }
7251
7244
 
7252
- .pf-c-divider.pf-m-inset-lg-on-2xl {
7253
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
7245
+ .pf-c-drawer.pf-m-static-on-2xl.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
7246
+ margin-right: 0;
7247
+ transform: translateX(0);
7254
7248
  }
7255
7249
 
7256
- .pf-c-divider.pf-m-inset-xl-on-2xl {
7257
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
7250
+ .pf-c-drawer.pf-m-static-on-2xl.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
7251
+ transform: translateX(0);
7258
7252
  }
7259
7253
 
7260
- .pf-c-divider.pf-m-inset-2xl-on-2xl {
7261
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
7254
+ .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel > .pf-c-drawer__body > .pf-c-drawer__head .pf-c-drawer__close {
7255
+ display: none;
7256
+ visibility: hidden;
7262
7257
  }
7258
+ }
7259
+ :where(.pf-theme-dark) .pf-c-drawer {
7260
+ --pf-c-drawer__panel--BackgroundColor: var(--pf-global--BackgroundColor--400);
7261
+ --pf-c-drawer__splitter--BackgroundColor: transparent;
7262
+ }
7263
7263
 
7264
- .pf-c-divider.pf-m-inset-3xl-on-2xl {
7265
- --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
7266
- }
7264
+ :where(.pf-theme-dark) .pf-c-drawer.pf-m-inline, :where(.pf-theme-dark) .pf-c-drawer.pf-m-static {
7265
+ --pf-c-drawer__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
7267
7266
  }
7267
+
7268
7268
  .pf-c-dropdown {
7269
7269
  --pf-c-dropdown__toggle--PaddingTop: var(--pf-global--spacer--form-element);
7270
7270
  --pf-c-dropdown__toggle--PaddingRight: var(--pf-global--spacer--sm);
@@ -26163,6 +26163,75 @@ label.pf-c-tree-view__node-text {
26163
26163
  --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
26164
26164
  }
26165
26165
  }
26166
+ .pf-l-gallery {
26167
+ --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
26168
+ --pf-l-gallery--GridTemplateColumns--min: 250px;
26169
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26170
+ --pf-l-gallery--GridTemplateColumns--max: 1fr;
26171
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26172
+ --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
26173
+ --pf-l-gallery--GridTemplateRows: auto;
26174
+ display: grid;
26175
+ grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
26176
+ grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
26177
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26178
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26179
+ }
26180
+
26181
+ .pf-l-gallery.pf-m-gutter {
26182
+ grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
26183
+ }
26184
+
26185
+ @media (min-width: 576px) {
26186
+ .pf-l-gallery {
26187
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
26188
+ }
26189
+ }
26190
+ @media (min-width: 768px) {
26191
+ .pf-l-gallery {
26192
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
26193
+ }
26194
+ }
26195
+ @media (min-width: 992px) {
26196
+ .pf-l-gallery {
26197
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
26198
+ }
26199
+ }
26200
+ @media (min-width: 1200px) {
26201
+ .pf-l-gallery {
26202
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
26203
+ }
26204
+ }
26205
+ @media (min-width: 1450px) {
26206
+ .pf-l-gallery {
26207
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
26208
+ }
26209
+ }
26210
+ @media (min-width: 576px) {
26211
+ .pf-l-gallery {
26212
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
26213
+ }
26214
+ }
26215
+ @media (min-width: 768px) {
26216
+ .pf-l-gallery {
26217
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
26218
+ }
26219
+ }
26220
+ @media (min-width: 992px) {
26221
+ .pf-l-gallery {
26222
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
26223
+ }
26224
+ }
26225
+ @media (min-width: 1200px) {
26226
+ .pf-l-gallery {
26227
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
26228
+ }
26229
+ }
26230
+ @media (min-width: 1450px) {
26231
+ .pf-l-gallery {
26232
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
26233
+ }
26234
+ }
26166
26235
  .pf-l-grid {
26167
26236
  --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
26168
26237
  --pf-l-grid__item--GridColumnStart: auto;
@@ -27423,75 +27492,6 @@ label.pf-c-tree-view__node-text {
27423
27492
  margin-bottom: var(--pf-l-stack--m-gutter--MarginBottom);
27424
27493
  }
27425
27494
 
27426
- .pf-l-gallery {
27427
- --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
27428
- --pf-l-gallery--GridTemplateColumns--min: 250px;
27429
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27430
- --pf-l-gallery--GridTemplateColumns--max: 1fr;
27431
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27432
- --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
27433
- --pf-l-gallery--GridTemplateRows: auto;
27434
- display: grid;
27435
- grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
27436
- grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
27437
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27438
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27439
- }
27440
-
27441
- .pf-l-gallery.pf-m-gutter {
27442
- grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
27443
- }
27444
-
27445
- @media (min-width: 576px) {
27446
- .pf-l-gallery {
27447
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
27448
- }
27449
- }
27450
- @media (min-width: 768px) {
27451
- .pf-l-gallery {
27452
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
27453
- }
27454
- }
27455
- @media (min-width: 992px) {
27456
- .pf-l-gallery {
27457
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
27458
- }
27459
- }
27460
- @media (min-width: 1200px) {
27461
- .pf-l-gallery {
27462
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
27463
- }
27464
- }
27465
- @media (min-width: 1450px) {
27466
- .pf-l-gallery {
27467
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
27468
- }
27469
- }
27470
- @media (min-width: 576px) {
27471
- .pf-l-gallery {
27472
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
27473
- }
27474
- }
27475
- @media (min-width: 768px) {
27476
- .pf-l-gallery {
27477
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
27478
- }
27479
- }
27480
- @media (min-width: 992px) {
27481
- .pf-l-gallery {
27482
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
27483
- }
27484
- }
27485
- @media (min-width: 1200px) {
27486
- .pf-l-gallery {
27487
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
27488
- }
27489
- }
27490
- @media (min-width: 1450px) {
27491
- .pf-l-gallery {
27492
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
27493
- }
27494
- }
27495
27495
  .pf-c-alert-group {
27496
27496
  --pf-c-alert-group__item--MarginTop: var(--pf-global--spacer--sm);
27497
27497
  --pf-c-alert-group--m-toast--Top: var(--pf-global--spacer--2xl);