@patternfly/react-core 4.235.0 → 4.235.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/umd/react-core.css +369 -369
  3. package/dist/umd/react-core.min.css +1091 -1091
  4. package/package.json +5 -5
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-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);
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;
5882
5982
  }
5883
5983
 
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);
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
+ }
5887
5995
  }
5888
-
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);
5996
+ @media screen and (min-width: 1200px) {
5997
+ .pf-c-drawer {
5998
+ --pf-c-drawer__panel--MinWidth: var(--pf-c-drawer__panel--xl--MinWidth);
5893
5999
  }
5894
6000
 
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);
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);
5898
6004
  }
5899
6005
  }
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
- }
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
+ }
5905
6009
 
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
- }
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%);
5910
6014
  }
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
- }
5916
6015
 
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
- }
6016
+ .pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__content {
6017
+ order: 1;
5921
6018
  }
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
- }
5927
6019
 
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
- }
6020
+ .pf-c-drawer.pf-m-panel-bottom > .pf-c-drawer__main {
6021
+ flex-direction: column;
5932
6022
  }
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
- }
5938
6023
 
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
- }
6024
+ .pf-c-drawer.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6025
+ transform: translateX(-100%);
5943
6026
  }
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;
5972
- flex-shrink: 0;
5973
- justify-content: center;
5974
- border: 0;
6027
+
6028
+ .pf-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
6029
+ transform: translateX(0);
5975
6030
  }
5976
6031
 
5977
- .pf-c-divider::after {
5978
- flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
6032
+ .pf-c-drawer.pf-m-expanded.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
6033
+ transform: translate(0, -100%);
5979
6034
  }
5980
6035
 
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;
6036
+ .pf-c-drawer.pf-m-resizing {
6037
+ --pf-c-drawer__panel--TransitionProperty: none;
6038
+ pointer-events: none;
5988
6039
  }
5989
6040
 
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;
6041
+ .pf-c-drawer.pf-m-resizing .pf-c-drawer__splitter {
6042
+ pointer-events: auto;
5997
6043
  }
5998
6044
 
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));
6045
+ .pf-c-drawer__section {
6046
+ flex-grow: 0;
6047
+ background-color: var(--pf-c-drawer__section--BackgroundColor);
6001
6048
  }
6002
6049
 
6003
- .pf-c-divider.pf-m-inset-none {
6004
- --pf-c-divider--after--Inset: 0%;
6050
+ .pf-c-drawer__section.pf-m-no-background {
6051
+ --pf-c-drawer__section--BackgroundColor: transparent;
6005
6052
  }
6006
6053
 
6007
- .pf-c-divider.pf-m-inset-xs {
6008
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6054
+ .pf-c-drawer__section.pf-m-light-200 {
6055
+ --pf-c-drawer__section--BackgroundColor: var(--pf-c-drawer__section--m-light-200--BackgroundColor);
6009
6056
  }
6010
6057
 
6011
- .pf-c-divider.pf-m-inset-sm {
6012
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6058
+ .pf-c-drawer__main {
6059
+ display: flex;
6060
+ flex: 1;
6061
+ overflow: hidden;
6013
6062
  }
6014
6063
 
6015
- .pf-c-divider.pf-m-inset-md {
6016
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6064
+ .pf-c-drawer__content,
6065
+ .pf-c-drawer__panel,
6066
+ .pf-c-drawer__panel-main {
6067
+ display: flex;
6068
+ flex-direction: column;
6069
+ flex-shrink: 0;
6070
+ overflow: auto;
6017
6071
  }
6018
6072
 
6019
- .pf-c-divider.pf-m-inset-lg {
6020
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
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);
6021
6078
  }
6022
6079
 
6023
- .pf-c-divider.pf-m-inset-xl {
6024
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6080
+ .pf-c-drawer__content.pf-m-no-background {
6081
+ --pf-c-drawer__content--BackgroundColor: transparent;
6025
6082
  }
6026
6083
 
6027
- .pf-c-divider.pf-m-inset-2xl {
6028
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6084
+ .pf-c-drawer__content.pf-m-light-200 {
6085
+ --pf-c-drawer__content--BackgroundColor: var(--pf-c-drawer__content--m-light-200--BackgroundColor);
6029
6086
  }
6030
6087
 
6031
- .pf-c-divider.pf-m-inset-3xl {
6032
- --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
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);
6033
6090
  }
6034
6091
 
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
- }
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;
6104
+ }
6044
6105
 
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
- }
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);
6048
6114
  }
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
- }
6058
6115
 
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));
6116
+ .pf-c-drawer__panel.pf-m-no-background {
6117
+ --pf-c-drawer__panel--BackgroundColor: transparent;
6118
+ }
6119
+
6120
+ .pf-c-drawer__panel.pf-m-light-200 {
6121
+ --pf-c-drawer__panel--BackgroundColor: var(--pf-c-drawer__panel--m-light-200--BackgroundColor);
6122
+ }
6123
+
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
+ );
6061
6131
  }
6062
6132
  }
6063
- @media (min-width: 576px) {
6064
- .pf-c-divider.pf-m-inset-none-on-sm {
6065
- --pf-c-divider--after--Inset: 0%;
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);
6066
6136
  }
6067
6137
 
6068
- .pf-c-divider.pf-m-inset-xs-on-sm {
6069
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
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);
6070
6140
  }
6141
+ }
6142
+ .pf-c-drawer__panel-main {
6143
+ flex-grow: 1;
6144
+ }
6071
6145
 
6072
- .pf-c-divider.pf-m-inset-sm-on-sm {
6073
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6146
+ @keyframes pf-remove-tab-focus {
6147
+ to {
6148
+ visibility: hidden;
6074
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;
6155
+ }
6075
6156
 
6076
- .pf-c-divider.pf-m-inset-md-on-sm {
6077
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6078
- }
6157
+ .pf-c-drawer__head {
6158
+ display: grid;
6159
+ grid-template-columns: auto;
6160
+ grid-auto-columns: max-content;
6161
+ }
6162
+
6163
+ .pf-c-drawer__head > * {
6164
+ grid-column: 1;
6165
+ }
6079
6166
 
6080
- .pf-c-divider.pf-m-inset-lg-on-sm {
6081
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6082
- }
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);
6174
+ }
6083
6175
 
6084
- .pf-c-divider.pf-m-inset-xl-on-sm {
6085
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6086
- }
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
+ }
6087
6180
 
6088
- .pf-c-divider.pf-m-inset-2xl-on-sm {
6089
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6090
- }
6181
+ .pf-c-drawer__body.pf-m-no-padding {
6182
+ padding: 0;
6183
+ }
6091
6184
 
6092
- .pf-c-divider.pf-m-inset-3xl-on-sm {
6093
- --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6094
- }
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;
6095
6189
  }
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
- }
6105
6190
 
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
- }
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);
6109
6193
  }
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
- }
6119
6194
 
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
- }
6195
+ .pf-c-drawer__body:not(.pf-m-no-padding) + * {
6196
+ padding-top: 0;
6123
6197
  }
6124
- @media (min-width: 768px) {
6125
- .pf-c-divider.pf-m-inset-none-on-md {
6126
- --pf-c-divider--after--Inset: 0%;
6127
- }
6128
6198
 
6129
- .pf-c-divider.pf-m-inset-xs-on-md {
6130
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6131
- }
6199
+ .pf-c-drawer__body:last-child {
6200
+ flex: 1 1;
6201
+ }
6132
6202
 
6133
- .pf-c-divider.pf-m-inset-sm-on-md {
6134
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6135
- }
6203
+ .pf-c-drawer__body > .pf-c-page__main {
6204
+ height: 100%;
6205
+ }
6136
6206
 
6137
- .pf-c-divider.pf-m-inset-md-on-md {
6138
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6139
- }
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
+ }
6140
6216
 
6141
- .pf-c-divider.pf-m-inset-lg-on-md {
6142
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6143
- }
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
+ }
6144
6228
 
6145
- .pf-c-divider.pf-m-inset-xl-on-md {
6146
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6147
- }
6229
+ .pf-c-drawer__splitter:hover {
6230
+ --pf-c-drawer__splitter-handle--after--BorderColor: var(--pf-c-drawer__splitter--hover__splitter-handle--after--BorderColor);
6231
+ }
6148
6232
 
6149
- .pf-c-divider.pf-m-inset-2xl-on-md {
6150
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6151
- }
6233
+ .pf-c-drawer__splitter:focus {
6234
+ --pf-c-drawer__splitter-handle--after--BorderColor: var(--pf-c-drawer__splitter--focus__splitter-handle--after--BorderColor);
6235
+ }
6152
6236
 
6153
- .pf-c-divider.pf-m-inset-3xl-on-md {
6154
- --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6155
- }
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);
6156
6246
  }
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;
6165
- }
6166
6247
 
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
- }
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%);
6170
6253
  }
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;
6179
- }
6180
6254
 
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
- }
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);
6184
6263
  }
6185
- @media (min-width: 992px) {
6186
- .pf-c-divider.pf-m-inset-none-on-lg {
6187
- --pf-c-divider--after--Inset: 0%;
6188
- }
6189
6264
 
6190
- .pf-c-divider.pf-m-inset-xs-on-lg {
6191
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6265
+ @media screen and (min-width: 768px) {
6266
+ .pf-c-drawer {
6267
+ min-width: var(--pf-c-drawer__panel--MinWidth);
6192
6268
  }
6193
6269
 
6194
- .pf-c-divider.pf-m-inset-sm-on-lg {
6195
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
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);
6196
6272
  }
6197
6273
 
6198
- .pf-c-divider.pf-m-inset-md-on-lg {
6199
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
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);
6200
6278
  }
6201
6279
 
6202
- .pf-c-divider.pf-m-inset-lg-on-lg {
6203
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6280
+ .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable::after {
6281
+ width: 0;
6282
+ height: 0;
6204
6283
  }
6205
6284
 
6206
- .pf-c-divider.pf-m-inset-xl-on-lg {
6207
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6285
+ .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable > .pf-c-drawer__splitter {
6286
+ flex-shrink: 0;
6208
6287
  }
6209
6288
 
6210
- .pf-c-divider.pf-m-inset-2xl-on-lg {
6211
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6289
+ .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable > .pf-c-drawer__panel-main {
6290
+ flex-shrink: 1;
6212
6291
  }
6213
6292
 
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);
6224
- width: 100%;
6225
- height: auto;
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);
6226
6295
  }
6227
6296
 
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);
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;
6230
6300
  }
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;
6301
+
6302
+ .pf-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6303
+ transform: translateX(0);
6240
6304
  }
6241
6305
 
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));
6306
+ .pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel::after {
6307
+ right: 0;
6308
+ left: auto;
6244
6309
  }
6245
- }
6246
- @media (min-width: 1200px) {
6247
- .pf-c-divider.pf-m-inset-none-on-xl {
6248
- --pf-c-divider--after--Inset: 0%;
6310
+
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;
6249
6316
  }
6250
6317
 
6251
- .pf-c-divider.pf-m-inset-xs-on-xl {
6252
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
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);
6253
6324
  }
6254
6325
 
6255
- .pf-c-divider.pf-m-inset-sm-on-xl {
6256
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
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;
6257
6329
  }
6258
6330
 
6259
- .pf-c-divider.pf-m-inset-md-on-xl {
6260
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6331
+ .pf-c-drawer.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel::after {
6332
+ top: 0;
6333
+ left: auto;
6334
+ width: 100%;
6335
+ height: var(--pf-c-drawer--m-panel-bottom__panel--after--Height);
6261
6336
  }
6262
6337
 
6263
- .pf-c-divider.pf-m-inset-lg-on-xl {
6264
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
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);
6265
6343
  }
6266
6344
 
6267
- .pf-c-divider.pf-m-inset-xl-on-xl {
6268
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
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);
6269
6349
  }
6270
6350
 
6271
- .pf-c-divider.pf-m-inset-2xl-on-xl {
6272
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
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);
6273
6357
  }
6274
6358
 
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;
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;
6287
6365
  }
6288
6366
 
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);
6291
- }
6292
- }
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;
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;
6301
6370
  }
6302
6371
 
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));
6372
+ .pf-c-drawer__splitter {
6373
+ display: block;
6374
+ visibility: visible;
6305
6375
  }
6306
6376
  }
6307
- @media (min-width: 1450px) {
6308
- .pf-c-divider.pf-m-inset-none-on-2xl {
6309
- --pf-c-divider--after--Inset: 0%;
6377
+ @media (min-width: 768px) {
6378
+ .pf-c-drawer__panel.pf-m-width-25 {
6379
+ --pf-c-drawer__panel--md--FlexBasis: 25%;
6310
6380
  }
6311
6381
 
6312
- .pf-c-divider.pf-m-inset-xs-on-2xl {
6313
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6382
+ .pf-c-drawer__panel.pf-m-width-33 {
6383
+ --pf-c-drawer__panel--md--FlexBasis: 33%;
6314
6384
  }
6315
6385
 
6316
- .pf-c-divider.pf-m-inset-sm-on-2xl {
6317
- --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6386
+ .pf-c-drawer__panel.pf-m-width-50 {
6387
+ --pf-c-drawer__panel--md--FlexBasis: 50%;
6318
6388
  }
6319
6389
 
6320
- .pf-c-divider.pf-m-inset-md-on-2xl {
6321
- --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6390
+ .pf-c-drawer__panel.pf-m-width-66 {
6391
+ --pf-c-drawer__panel--md--FlexBasis: 66%;
6322
6392
  }
6323
6393
 
6324
- .pf-c-divider.pf-m-inset-lg-on-2xl {
6325
- --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6394
+ .pf-c-drawer__panel.pf-m-width-75 {
6395
+ --pf-c-drawer__panel--md--FlexBasis: 75%;
6326
6396
  }
6327
6397
 
6328
- .pf-c-divider.pf-m-inset-xl-on-2xl {
6329
- --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6398
+ .pf-c-drawer__panel.pf-m-width-100 {
6399
+ --pf-c-drawer__panel--md--FlexBasis: 100%;
6330
6400
  }
6331
-
6332
- .pf-c-divider.pf-m-inset-2xl-on-2xl {
6333
- --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6401
+ }
6402
+ @media (min-width: 992px) {
6403
+ .pf-c-drawer__panel.pf-m-width-25-on-lg {
6404
+ --pf-c-drawer__panel--md--FlexBasis: 25%;
6334
6405
  }
6335
6406
 
6336
- .pf-c-divider.pf-m-inset-3xl-on-2xl {
6337
- --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6407
+ .pf-c-drawer__panel.pf-m-width-33-on-lg {
6408
+ --pf-c-drawer__panel--md--FlexBasis: 33%;
6338
6409
  }
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
- }
6449
6410
 
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);
6460
- }
6461
- }
6462
- @media screen and (min-width: 1200px) {
6463
- .pf-c-drawer {
6464
- --pf-c-drawer__panel--MinWidth: var(--pf-c-drawer__panel--xl--MinWidth);
6411
+ .pf-c-drawer__panel.pf-m-width-50-on-lg {
6412
+ --pf-c-drawer__panel--md--FlexBasis: 50%;
6465
6413
  }
6466
6414
 
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);
6415
+ .pf-c-drawer__panel.pf-m-width-66-on-lg {
6416
+ --pf-c-drawer__panel--md--FlexBasis: 66%;
6470
6417
  }
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
- }
6475
6418
 
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
- }
6419
+ .pf-c-drawer__panel.pf-m-width-75-on-lg {
6420
+ --pf-c-drawer__panel--md--FlexBasis: 75%;
6421
+ }
6481
6422
 
6482
- .pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__content {
6483
- order: 1;
6423
+ .pf-c-drawer__panel.pf-m-width-100-on-lg {
6424
+ --pf-c-drawer__panel--md--FlexBasis: 100%;
6425
+ }
6484
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%;
6430
+ }
6485
6431
 
6486
- .pf-c-drawer.pf-m-panel-bottom > .pf-c-drawer__main {
6487
- flex-direction: column;
6488
- }
6432
+ .pf-c-drawer__panel.pf-m-width-33-on-xl {
6433
+ --pf-c-drawer__panel--md--FlexBasis: 33%;
6434
+ }
6489
6435
 
6490
- .pf-c-drawer.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
6491
- transform: translateX(-100%);
6492
- }
6436
+ .pf-c-drawer__panel.pf-m-width-50-on-xl {
6437
+ --pf-c-drawer__panel--md--FlexBasis: 50%;
6438
+ }
6493
6439
 
6494
- .pf-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel {
6495
- transform: translateX(0);
6496
- }
6440
+ .pf-c-drawer__panel.pf-m-width-66-on-xl {
6441
+ --pf-c-drawer__panel--md--FlexBasis: 66%;
6442
+ }
6497
6443
 
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
- }
6444
+ .pf-c-drawer__panel.pf-m-width-75-on-xl {
6445
+ --pf-c-drawer__panel--md--FlexBasis: 75%;
6446
+ }
6501
6447
 
6502
- .pf-c-drawer.pf-m-resizing {
6503
- --pf-c-drawer__panel--TransitionProperty: none;
6504
- pointer-events: none;
6448
+ .pf-c-drawer__panel.pf-m-width-100-on-xl {
6449
+ --pf-c-drawer__panel--md--FlexBasis: 100%;
6450
+ }
6505
6451
  }
6452
+ @media (min-width: 1450px) {
6453
+ .pf-c-drawer__panel.pf-m-width-25-on-2xl {
6454
+ --pf-c-drawer__panel--md--FlexBasis: 25%;
6455
+ }
6506
6456
 
6507
- .pf-c-drawer.pf-m-resizing .pf-c-drawer__splitter {
6508
- pointer-events: auto;
6509
- }
6457
+ .pf-c-drawer__panel.pf-m-width-33-on-2xl {
6458
+ --pf-c-drawer__panel--md--FlexBasis: 33%;
6459
+ }
6510
6460
 
6511
- .pf-c-drawer__section {
6512
- flex-grow: 0;
6513
- background-color: var(--pf-c-drawer__section--BackgroundColor);
6514
- }
6461
+ .pf-c-drawer__panel.pf-m-width-50-on-2xl {
6462
+ --pf-c-drawer__panel--md--FlexBasis: 50%;
6463
+ }
6515
6464
 
6516
- .pf-c-drawer__section.pf-m-no-background {
6517
- --pf-c-drawer__section--BackgroundColor: transparent;
6518
- }
6465
+ .pf-c-drawer__panel.pf-m-width-66-on-2xl {
6466
+ --pf-c-drawer__panel--md--FlexBasis: 66%;
6467
+ }
6519
6468
 
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
- }
6469
+ .pf-c-drawer__panel.pf-m-width-75-on-2xl {
6470
+ --pf-c-drawer__panel--md--FlexBasis: 75%;
6471
+ }
6523
6472
 
6524
- .pf-c-drawer__main {
6525
- display: flex;
6526
- flex: 1;
6527
- overflow: hidden;
6473
+ .pf-c-drawer__panel.pf-m-width-100-on-2xl {
6474
+ --pf-c-drawer__panel--md--FlexBasis: 100%;
6475
+ }
6528
6476
  }
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
+ }
6529
6482
 
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
- }
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
+ }
6538
6487
 
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
- }
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
+ }
6545
6492
 
6546
- .pf-c-drawer__content.pf-m-no-background {
6547
- --pf-c-drawer__content--BackgroundColor: transparent;
6548
- }
6493
+ .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__content {
6494
+ overflow-x: auto;
6495
+ }
6549
6496
 
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
- }
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
+ }
6553
6501
 
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
- }
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
+ }
6557
6506
 
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
- }
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
+ }
6571
6511
 
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);
6580
- }
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
+ }
6581
6517
 
6582
- .pf-c-drawer__panel.pf-m-no-background {
6583
- --pf-c-drawer__panel--BackgroundColor: transparent;
6584
- }
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
+ }
6585
6522
 
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
- }
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
+ }
6589
6527
 
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
- );
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%);
6597
6531
  }
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);
6532
+
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);
6602
6536
  }
6603
6537
 
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);
6538
+ .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel {
6539
+ transform: translateX(0);
6606
6540
  }
6607
- }
6608
- .pf-c-drawer__panel-main {
6609
- flex-grow: 1;
6610
- }
6611
6541
 
6612
- @keyframes pf-remove-tab-focus {
6613
- to {
6614
- visibility: hidden;
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);
6615
6545
  }
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
- }
6622
6546
 
6623
- .pf-c-drawer__head {
6624
- display: grid;
6625
- grid-template-columns: auto;
6626
- grid-auto-columns: max-content;
6627
- }
6547
+ .pf-c-drawer.pf-m-static.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
6548
+ transform: translateX(0);
6549
+ }
6628
6550
 
6629
- .pf-c-drawer__head > * {
6630
- grid-column: 1;
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
+ }
6631
6555
  }
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
+ }
6632
6561
 
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
- }
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
+ }
6641
6566
 
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
- }
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
+ }
6646
6571
 
6647
- .pf-c-drawer__body.pf-m-no-padding {
6648
- padding: 0;
6649
- }
6572
+ .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__content {
6573
+ overflow-x: auto;
6574
+ }
6650
6575
 
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
- }
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%);
6579
+ }
6656
6580
 
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
- }
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);
6584
+ }
6660
6585
 
6661
- .pf-c-drawer__body:not(.pf-m-no-padding) + * {
6662
- padding-top: 0;
6663
- }
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;
6589
+ }
6664
6590
 
6665
- .pf-c-drawer__body:last-child {
6666
- flex: 1 1;
6667
- }
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
+ }
6668
6596
 
6669
- .pf-c-drawer__body > .pf-c-page__main {
6670
- height: 100%;
6671
- }
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
+ }
6672
6601
 
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);
6681
- }
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
+ }
6682
6606
 
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
- }
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
+ }
6694
6611
 
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
- }
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
+ }
6698
6616
 
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
- }
6617
+ .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel {
6618
+ transform: translateX(0);
6619
+ }
6702
6620
 
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
- }
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
+ }
6713
6625
 
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
- }
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
+ }
6720
6629
 
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);
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
+ }
6729
6634
  }
6730
-
6731
- @media screen and (min-width: 768px) {
6732
- .pf-c-drawer {
6733
- min-width: var(--pf-c-drawer__panel--MinWidth);
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;
6734
6639
  }
6735
6640
 
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);
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;
6738
6644
  }
6739
6645
 
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);
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);
6744
6649
  }
6745
6650
 
6746
- .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable::after {
6747
- width: 0;
6748
- height: 0;
6651
+ .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__content {
6652
+ overflow-x: auto;
6749
6653
  }
6750
6654
 
6751
- .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable > .pf-c-drawer__splitter {
6752
- flex-shrink: 0;
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%);
6753
6658
  }
6754
6659
 
6755
- .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable > .pf-c-drawer__panel-main {
6756
- flex-shrink: 1;
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);
6757
6663
  }
6758
6664
 
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);
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;
6761
6668
  }
6762
6669
 
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;
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%);
6766
6674
  }
6767
6675
 
6768
- .pf-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-c-drawer__main > .pf-c-drawer__panel {
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;
6769
6678
  transform: translateX(0);
6770
6679
  }
6771
6680
 
6772
- .pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel::after {
6773
- right: 0;
6774
- left: auto;
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;
6775
6684
  }
6776
6685
 
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;
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%);
6782
6689
  }
6783
6690
 
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);
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);
6790
6694
  }
6791
6695
 
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;
6696
+ .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel {
6697
+ transform: translateX(0);
6795
6698
  }
6796
6699
 
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);
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);
6802
6703
  }
6803
6704
 
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);
6705
+ .pf-c-drawer.pf-m-static-on-xl.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
6706
+ transform: translateX(0);
6809
6707
  }
6810
6708
 
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);
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;
6815
6718
  }
6816
6719
 
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);
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;
6823
6723
  }
6824
6724
 
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;
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);
6831
6728
  }
6832
6729
 
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;
6730
+ .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content {
6731
+ overflow-x: auto;
6836
6732
  }
6837
6733
 
6838
- .pf-c-drawer__splitter {
6839
- display: block;
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%);
6737
+ }
6738
+
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);
6742
+ }
6743
+
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;
6840
6746
  visibility: visible;
6841
6747
  }
6842
- }
6843
- @media (min-width: 768px) {
6844
- .pf-c-drawer__panel.pf-m-width-25 {
6845
- --pf-c-drawer__panel--md--FlexBasis: 25%;
6748
+
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%);
6846
6753
  }
6847
6754
 
6848
- .pf-c-drawer__panel.pf-m-width-33 {
6849
- --pf-c-drawer__panel--md--FlexBasis: 33%;
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);
6850
6758
  }
6851
6759
 
6852
- .pf-c-drawer__panel.pf-m-width-50 {
6853
- --pf-c-drawer__panel--md--FlexBasis: 50%;
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;
6854
6763
  }
6855
6764
 
6856
- .pf-c-drawer__panel.pf-m-width-66 {
6857
- --pf-c-drawer__panel--md--FlexBasis: 66%;
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%);
6858
6768
  }
6859
6769
 
6860
- .pf-c-drawer__panel.pf-m-width-75 {
6861
- --pf-c-drawer__panel--md--FlexBasis: 75%;
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);
6862
6773
  }
6863
6774
 
6864
- .pf-c-drawer__panel.pf-m-width-100 {
6865
- --pf-c-drawer__panel--md--FlexBasis: 100%;
6866
- }
6867
- }
6868
- @media (min-width: 992px) {
6869
- .pf-c-drawer__panel.pf-m-width-25-on-lg {
6870
- --pf-c-drawer__panel--md--FlexBasis: 25%;
6775
+ .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel {
6776
+ transform: translateX(0);
6871
6777
  }
6872
6778
 
6873
- .pf-c-drawer__panel.pf-m-width-33-on-lg {
6874
- --pf-c-drawer__panel--md--FlexBasis: 33%;
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);
6875
6782
  }
6876
6783
 
6877
- .pf-c-drawer__panel.pf-m-width-50-on-lg {
6878
- --pf-c-drawer__panel--md--FlexBasis: 50%;
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);
6879
6786
  }
6880
6787
 
6881
- .pf-c-drawer__panel.pf-m-width-66-on-lg {
6882
- --pf-c-drawer__panel--md--FlexBasis: 66%;
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;
6883
6791
  }
6792
+ }
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
+ }
6884
6797
 
6885
- .pf-c-drawer__panel.pf-m-width-75-on-lg {
6886
- --pf-c-drawer__panel--md--FlexBasis: 75%;
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
+ }
6801
+
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
+ }
6811
+
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
+ }
6816
+
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);
6887
6821
  }
6888
6822
 
6889
- .pf-c-drawer__panel.pf-m-width-100-on-lg {
6890
- --pf-c-drawer__panel--md--FlexBasis: 100%;
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);
6891
6826
  }
6892
6827
  }
6893
- @media (min-width: 1200px) {
6894
- .pf-c-drawer__panel.pf-m-width-25-on-xl {
6895
- --pf-c-drawer__panel--md--FlexBasis: 25%;
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);
6896
6832
  }
6897
6833
 
6898
- .pf-c-drawer__panel.pf-m-width-33-on-xl {
6899
- --pf-c-drawer__panel--md--FlexBasis: 33%;
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);
6900
6837
  }
6901
-
6902
- .pf-c-drawer__panel.pf-m-width-50-on-xl {
6903
- --pf-c-drawer__panel--md--FlexBasis: 50%;
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);
6904
6843
  }
6905
6844
 
6906
- .pf-c-drawer__panel.pf-m-width-66-on-xl {
6907
- --pf-c-drawer__panel--md--FlexBasis: 66%;
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);
6908
6848
  }
6909
-
6910
- .pf-c-drawer__panel.pf-m-width-75-on-xl {
6911
- --pf-c-drawer__panel--md--FlexBasis: 75%;
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);
6912
6854
  }
6913
6855
 
6914
- .pf-c-drawer__panel.pf-m-width-100-on-xl {
6915
- --pf-c-drawer__panel--md--FlexBasis: 100%;
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);
6916
6859
  }
6917
6860
  }
6918
- @media (min-width: 1450px) {
6919
- .pf-c-drawer__panel.pf-m-width-25-on-2xl {
6920
- --pf-c-drawer__panel--md--FlexBasis: 25%;
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);
6921
6865
  }
6922
6866
 
6923
- .pf-c-drawer__panel.pf-m-width-33-on-2xl {
6924
- --pf-c-drawer__panel--md--FlexBasis: 33%;
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);
6925
6870
  }
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
+ }
6926
6904
 
6927
- .pf-c-drawer__panel.pf-m-width-50-on-2xl {
6928
- --pf-c-drawer__panel--md--FlexBasis: 50%;
6929
- }
6905
+ .pf-c-divider::after {
6906
+ flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
6907
+ }
6930
6908
 
6931
- .pf-c-drawer__panel.pf-m-width-66-on-2xl {
6932
- --pf-c-drawer__panel--md--FlexBasis: 66%;
6933
- }
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
+ }
6934
6917
 
6935
- .pf-c-drawer__panel.pf-m-width-75-on-2xl {
6936
- --pf-c-drawer__panel--md--FlexBasis: 75%;
6937
- }
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
+ }
6938
6926
 
6939
- .pf-c-drawer__panel.pf-m-width-100-on-2xl {
6940
- --pf-c-drawer__panel--md--FlexBasis: 100%;
6941
- }
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));
6942
6929
  }
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
- }
6948
6930
 
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
- }
6931
+ .pf-c-divider.pf-m-inset-none {
6932
+ --pf-c-divider--after--Inset: 0%;
6933
+ }
6953
6934
 
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
- }
6935
+ .pf-c-divider.pf-m-inset-xs {
6936
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
6937
+ }
6958
6938
 
6959
- .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__content {
6960
- overflow-x: auto;
6961
- }
6939
+ .pf-c-divider.pf-m-inset-sm {
6940
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
6941
+ }
6962
6942
 
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
- }
6943
+ .pf-c-divider.pf-m-inset-md {
6944
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
6945
+ }
6967
6946
 
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
- }
6947
+ .pf-c-divider.pf-m-inset-lg {
6948
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
6949
+ }
6972
6950
 
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
- }
6951
+ .pf-c-divider.pf-m-inset-xl {
6952
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
6953
+ }
6977
6954
 
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
- }
6955
+ .pf-c-divider.pf-m-inset-2xl {
6956
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
6957
+ }
6983
6958
 
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);
6959
+ .pf-c-divider.pf-m-inset-3xl {
6960
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6961
+ }
6962
+
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;
6987
6971
  }
6988
6972
 
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;
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);
6992
6975
  }
6993
-
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%);
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;
6997
6985
  }
6998
6986
 
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);
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));
7002
6989
  }
7003
-
7004
- .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel {
7005
- transform: translateX(0);
6990
+ }
6991
+ @media (min-width: 576px) {
6992
+ .pf-c-divider.pf-m-inset-none-on-sm {
6993
+ --pf-c-divider--after--Inset: 0%;
7006
6994
  }
7007
6995
 
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);
6996
+ .pf-c-divider.pf-m-inset-xs-on-sm {
6997
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
7011
6998
  }
7012
6999
 
7013
- .pf-c-drawer.pf-m-static.pf-m-panel-bottom > .pf-c-drawer__main > .pf-c-drawer__panel {
7014
- transform: translateX(0);
7000
+ .pf-c-divider.pf-m-inset-sm-on-sm {
7001
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
7015
7002
  }
7016
7003
 
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;
7004
+ .pf-c-divider.pf-m-inset-md-on-sm {
7005
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
7026
7006
  }
7027
7007
 
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;
7008
+ .pf-c-divider.pf-m-inset-lg-on-sm {
7009
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
7031
7010
  }
7032
7011
 
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);
7012
+ .pf-c-divider.pf-m-inset-xl-on-sm {
7013
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
7036
7014
  }
7037
7015
 
7038
- .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__content {
7039
- overflow-x: auto;
7016
+ .pf-c-divider.pf-m-inset-2xl-on-sm {
7017
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
7040
7018
  }
7041
7019
 
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%);
7020
+ .pf-c-divider.pf-m-inset-3xl-on-sm {
7021
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
7045
7022
  }
7046
-
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);
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;
7050
7032
  }
7051
7033
 
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;
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);
7055
7036
  }
7056
-
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%);
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;
7061
7046
  }
7062
7047
 
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);
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));
7050
+ }
7051
+ }
7052
+ @media (min-width: 768px) {
7053
+ .pf-c-divider.pf-m-inset-none-on-md {
7054
+ --pf-c-divider--after--Inset: 0%;
7066
7055
  }
7067
7056
 
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;
7057
+ .pf-c-divider.pf-m-inset-xs-on-md {
7058
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
7071
7059
  }
7072
7060
 
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%);
7061
+ .pf-c-divider.pf-m-inset-sm-on-md {
7062
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
7076
7063
  }
7077
7064
 
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);
7065
+ .pf-c-divider.pf-m-inset-md-on-md {
7066
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
7081
7067
  }
7082
7068
 
7083
- .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel {
7084
- transform: translateX(0);
7069
+ .pf-c-divider.pf-m-inset-lg-on-md {
7070
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
7085
7071
  }
7086
7072
 
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);
7073
+ .pf-c-divider.pf-m-inset-xl-on-md {
7074
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
7090
7075
  }
7091
7076
 
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);
7077
+ .pf-c-divider.pf-m-inset-2xl-on-md {
7078
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
7094
7079
  }
7095
7080
 
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;
7081
+ .pf-c-divider.pf-m-inset-3xl-on-md {
7082
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
7099
7083
  }
7100
7084
  }
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;
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;
7105
7093
  }
7106
7094
 
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;
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);
7110
7097
  }
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);
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;
7115
7107
  }
7116
7108
 
7117
- .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__content {
7118
- overflow-x: auto;
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));
7119
7111
  }
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%);
7112
+ }
7113
+ @media (min-width: 992px) {
7114
+ .pf-c-divider.pf-m-inset-none-on-lg {
7115
+ --pf-c-divider--after--Inset: 0%;
7124
7116
  }
7125
7117
 
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);
7118
+ .pf-c-divider.pf-m-inset-xs-on-lg {
7119
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
7129
7120
  }
7130
7121
 
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;
7122
+ .pf-c-divider.pf-m-inset-sm-on-lg {
7123
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
7134
7124
  }
7135
7125
 
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%);
7126
+ .pf-c-divider.pf-m-inset-md-on-lg {
7127
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
7140
7128
  }
7141
7129
 
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);
7130
+ .pf-c-divider.pf-m-inset-lg-on-lg {
7131
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
7145
7132
  }
7146
7133
 
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;
7134
+ .pf-c-divider.pf-m-inset-xl-on-lg {
7135
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
7150
7136
  }
7151
7137
 
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%);
7138
+ .pf-c-divider.pf-m-inset-2xl-on-lg {
7139
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
7155
7140
  }
7156
7141
 
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);
7142
+ .pf-c-divider.pf-m-inset-3xl-on-lg {
7143
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
7160
7144
  }
7161
-
7162
- .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel {
7163
- transform: translateX(0);
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;
7164
7154
  }
7165
7155
 
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);
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);
7169
7158
  }
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);
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;
7173
7168
  }
7174
7169
 
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;
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));
7178
7172
  }
7179
7173
  }
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;
7174
+ @media (min-width: 1200px) {
7175
+ .pf-c-divider.pf-m-inset-none-on-xl {
7176
+ --pf-c-divider--after--Inset: 0%;
7184
7177
  }
7185
7178
 
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;
7179
+ .pf-c-divider.pf-m-inset-xs-on-xl {
7180
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
7189
7181
  }
7190
7182
 
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);
7183
+ .pf-c-divider.pf-m-inset-sm-on-xl {
7184
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
7194
7185
  }
7195
7186
 
7196
- .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content {
7197
- overflow-x: auto;
7187
+ .pf-c-divider.pf-m-inset-md-on-xl {
7188
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
7198
7189
  }
7199
7190
 
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%);
7191
+ .pf-c-divider.pf-m-inset-lg-on-xl {
7192
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
7203
7193
  }
7204
7194
 
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);
7195
+ .pf-c-divider.pf-m-inset-xl-on-xl {
7196
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
7208
7197
  }
7209
7198
 
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;
7199
+ .pf-c-divider.pf-m-inset-2xl-on-xl {
7200
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
7213
7201
  }
7214
7202
 
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%);
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;
7219
7215
  }
7220
7216
 
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);
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;
7224
7229
  }
7225
7230
 
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;
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%;
7229
7238
  }
7230
7239
 
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%);
7240
+ .pf-c-divider.pf-m-inset-xs-on-2xl {
7241
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xs);
7234
7242
  }
7235
7243
 
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);
7244
+ .pf-c-divider.pf-m-inset-sm-on-2xl {
7245
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--sm);
7239
7246
  }
7240
7247
 
7241
- .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel {
7242
- transform: translateX(0);
7248
+ .pf-c-divider.pf-m-inset-md-on-2xl {
7249
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--md);
7243
7250
  }
7244
7251
 
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);
7252
+ .pf-c-divider.pf-m-inset-lg-on-2xl {
7253
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--lg);
7248
7254
  }
7249
7255
 
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);
7256
+ .pf-c-divider.pf-m-inset-xl-on-2xl {
7257
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--xl);
7252
7258
  }
7253
7259
 
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;
7260
+ .pf-c-divider.pf-m-inset-2xl-on-2xl {
7261
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl);
7257
7262
  }
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
- :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);
7264
+ .pf-c-divider.pf-m-inset-3xl-on-2xl {
7265
+ --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
7266
+ }
7266
7267
  }
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,75 +26163,6 @@ 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
- }
26235
26166
  .pf-l-grid {
26236
26167
  --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
26237
26168
  --pf-l-grid__item--GridColumnStart: auto;
@@ -27492,6 +27423,75 @@ label.pf-c-tree-view__node-text {
27492
27423
  margin-bottom: var(--pf-l-stack--m-gutter--MarginBottom);
27493
27424
  }
27494
27425
 
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);