@patternfly/patternfly 5.0.0-alpha.29 → 5.0.0-alpha.30

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 (8) hide show
  1. package/components/Sidebar/sidebar.css +68 -25
  2. package/components/Sidebar/sidebar.scss +83 -26
  3. package/docs/components/Sidebar/examples/Sidebar.md +56 -0
  4. package/package.json +2 -2
  5. package/patternfly-no-reset.css +68 -25
  6. package/patternfly.css +68 -25
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/patternfly-no-reset.css CHANGED
@@ -24920,28 +24920,54 @@ label.pf-c-radio, .pf-c-radio__label,
24920
24920
  }
24921
24921
 
24922
24922
  .pf-c-sidebar {
24923
+ --pf-c-sidebar--inset: var(--pf-global--spacer--md);
24924
+ --pf-c-sidebar--xl--inset: var(--pf-global--spacer--lg);
24923
24925
  --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
24926
+ --pf-c-sidebar--BorderWidth--base: var(--pf-global--BorderWidth--sm);
24927
+ --pf-c-sidebar--BorderColor--base: var(--pf-global--BorderColor--100);
24928
+ --pf-c-sidebar__panel--PaddingTop: 0;
24929
+ --pf-c-sidebar__panel--PaddingRight: 0;
24930
+ --pf-c-sidebar__panel--PaddingBottom: 0;
24931
+ --pf-c-sidebar__panel--PaddingLeft: 0;
24932
+ --pf-c-sidebar__panel--Order: -1;
24933
+ --pf-c-sidebar__panel--m-padding--PaddingTop: var(--pf-c-sidebar--inset);
24934
+ --pf-c-sidebar__panel--m-padding--PaddingRight: var(--pf-c-sidebar--inset);
24935
+ --pf-c-sidebar__panel--m-padding--PaddingBottom: var(--pf-c-sidebar--inset);
24936
+ --pf-c-sidebar__panel--m-padding--PaddingLeft: var(--pf-c-sidebar--inset);
24937
+ --pf-c-sidebar__content--PaddingTop: 0;
24938
+ --pf-c-sidebar__content--PaddingRight: 0;
24939
+ --pf-c-sidebar__content--PaddingBottom: 0;
24940
+ --pf-c-sidebar__content--PaddingLeft: 0;
24941
+ --pf-c-sidebar__content--Order: 1;
24942
+ --pf-c-sidebar__content--m-padding--PaddingTop: var(--pf-c-sidebar--inset);
24943
+ --pf-c-sidebar__content--m-padding--PaddingRight: var(--pf-c-sidebar--inset);
24944
+ --pf-c-sidebar__content--m-padding--PaddingBottom: var(--pf-c-sidebar--inset);
24945
+ --pf-c-sidebar__content--m-padding--PaddingLeft: var(--pf-c-sidebar--inset);
24924
24946
  --pf-c-sidebar__main--FlexDirection: column;
24925
24947
  --pf-c-sidebar__main--md--FlexDirection: row;
24926
24948
  --pf-c-sidebar__main--AlignItems: stretch;
24927
24949
  --pf-c-sidebar__main--md--AlignItems: start;
24928
24950
  --pf-c-sidebar__main--child--MarginTop: 0;
24929
- --pf-c-sidebar__main--child--MarginLeft: 0;
24930
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
24931
- --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
24932
- --pf-c-sidebar--m-panel-right__panel--Order: 0;
24951
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--inset);
24952
+ --pf-c-sidebar__main--m-border--before--Display: none;
24953
+ --pf-c-sidebar__main--m-border--before--md--Display: block;
24954
+ --pf-c-sidebar__main--m-border--before--BorderWidth: var(--pf-c-sidebar--BorderWidth--base);
24955
+ --pf-c-sidebar__main--m-border--before--BorderColor: var(--pf-c-sidebar--BorderColor--base);
24956
+ --pf-c-sidebar--m-panel-right__panel--Order: -1;
24933
24957
  --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
24958
+ --pf-c-sidebar--m-panel-right__content--md--Order: -1;
24934
24959
  --pf-c-sidebar--m-stack__main--FlexDirection: column;
24935
24960
  --pf-c-sidebar--m-stack__main--AlignItems: stretch;
24936
24961
  --pf-c-sidebar--m-stack__panel--Position: sticky;
24937
24962
  --pf-c-sidebar--m-stack__panel--Top: 0;
24938
24963
  --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
24939
- --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
24964
+ --pf-c-sidebar--m-stack--m-panel-right__panel--Order: -1;
24940
24965
  --pf-c-sidebar--m-split__main--AlignItems: start;
24941
24966
  --pf-c-sidebar--m-split__main--FlexDirection: row;
24942
24967
  --pf-c-sidebar--m-split__panel--Position: static;
24943
24968
  --pf-c-sidebar--m-split__panel--Top: auto;
24944
24969
  --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
24970
+ --pf-c-sidebar--m-split__main--m-border--before--Display: block;
24945
24971
  --pf-c-sidebar__panel--FlexBasis--base: auto;
24946
24972
  --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
24947
24973
  --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
@@ -24955,7 +24981,6 @@ label.pf-c-radio, .pf-c-radio__label,
24955
24981
  --pf-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
24956
24982
  --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
24957
24983
  --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
24958
- --pf-c-sidebar__panel--Order: 0;
24959
24984
  --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
24960
24985
  --pf-c-sidebar__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
24961
24986
  --pf-c-sidebar__panel--m-sticky--Top: 0;
@@ -24965,60 +24990,50 @@ label.pf-c-radio, .pf-c-radio__label,
24965
24990
  @media (min-width: 768px) {
24966
24991
  .pf-c-sidebar {
24967
24992
  --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
24993
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
24994
+ --pf-c-sidebar__main--m-border--before--Display: var(--pf-c-sidebar__main--m-border--before--md--Display);
24968
24995
  --pf-c-sidebar__panel--BoxShadow: none;
24969
24996
  --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
24970
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
24971
24997
  --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
24972
24998
  --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
24973
24999
  }
24974
25000
  }
24975
25001
  @media (min-width: 1200px) {
24976
25002
  .pf-c-sidebar {
24977
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
25003
+ --pf-c-sidebar--inset: var(--pf-c-sidebar--xl--inset);
24978
25004
  }
24979
25005
  }
24980
- .pf-c-sidebar.pf-m-gutter {
24981
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
24982
- --pf-c-sidebar__main--child--MarginLeft: 0;
24983
- }
24984
- .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
24985
- margin-top: var(--pf-c-sidebar__main--child--MarginTop);
24986
- margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
24987
- }
24988
- @media (min-width: 768px) {
24989
- .pf-c-sidebar.pf-m-gutter {
24990
- --pf-c-sidebar__main--child--MarginTop: 0;
24991
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
24992
- }
25006
+ .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main {
25007
+ gap: var(--pf-c-sidebar--m-gutter__main--Gap);
24993
25008
  }
24994
25009
  .pf-c-sidebar.pf-m-panel-right {
24995
25010
  --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
25011
+ --pf-c-sidebar__content--Order: var(--pf-c-sidebar--m-panel-right__content--Order);
24996
25012
  }
24997
25013
  @media (min-width: 768px) {
24998
25014
  .pf-c-sidebar.pf-m-panel-right {
24999
25015
  --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
25016
+ --pf-c-sidebar--m-panel-right__content--Order: var(--pf-c-sidebar--m-panel-right__content--md--Order);
25000
25017
  }
25001
25018
  }
25002
25019
  .pf-c-sidebar.pf-m-stack {
25003
25020
  --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
25004
25021
  --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
25005
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
25006
- --pf-c-sidebar__main--child--MarginLeft: 0;
25007
25022
  --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
25008
25023
  --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
25009
25024
  --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
25010
25025
  --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
25026
+ --pf-c-sidebar__main--m-border--before--Display: none;
25011
25027
  --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
25012
25028
  }
25013
25029
  .pf-c-sidebar.pf-m-split {
25014
25030
  --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
25015
25031
  --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
25016
- --pf-c-sidebar__main--child--MarginTop: 0;
25017
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
25018
25032
  --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
25019
25033
  --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
25020
25034
  --pf-c-sidebar__panel--BoxShadow: none;
25021
25035
  --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
25036
+ --pf-c-sidebar__main--m-border--before--Display: var(--pf-c-sidebar--m-split__main--m-border--before--Display);
25022
25037
  --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
25023
25038
  }
25024
25039
 
@@ -25027,6 +25042,13 @@ label.pf-c-radio, .pf-c-radio__label,
25027
25042
  flex-direction: var(--pf-c-sidebar__main--FlexDirection);
25028
25043
  align-items: var(--pf-c-sidebar__main--AlignItems);
25029
25044
  }
25045
+ .pf-c-sidebar__main.pf-m-border::before {
25046
+ display: var(--pf-c-sidebar__main--m-border--before--Display);
25047
+ flex: 0 0 var(--pf-c-sidebar__main--m-border--before--BorderWidth);
25048
+ align-self: stretch;
25049
+ content: "";
25050
+ background-color: var(--pf-c-sidebar__main--m-border--before--BorderColor);
25051
+ }
25030
25052
 
25031
25053
  .pf-c-sidebar__panel {
25032
25054
  position: var(--pf-c-sidebar__panel--Position);
@@ -25035,9 +25057,16 @@ label.pf-c-radio, .pf-c-radio__label,
25035
25057
  flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
25036
25058
  flex-shrink: 0;
25037
25059
  order: var(--pf-c-sidebar__panel--Order);
25060
+ padding: var(--pf-c-sidebar__panel--PaddingTop) var(--pf-c-sidebar__panel--PaddingRight) var(--pf-c-sidebar__panel--PaddingBottom) var(--pf-c-sidebar__panel--PaddingLeft);
25038
25061
  background-color: var(--pf-c-sidebar__panel--BackgroundColor);
25039
25062
  box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
25040
25063
  }
25064
+ .pf-c-sidebar__panel.pf-m-padding {
25065
+ --pf-c-sidebar__panel--PaddingTop: var(--pf-c-sidebar__panel--m-padding--PaddingTop);
25066
+ --pf-c-sidebar__panel--PaddingRight: var(--pf-c-sidebar__panel--m-padding--PaddingRight);
25067
+ --pf-c-sidebar__panel--PaddingBottom: var(--pf-c-sidebar__panel--m-padding--PaddingBottom);
25068
+ --pf-c-sidebar__panel--PaddingLeft: var(--pf-c-sidebar__panel--m-padding--PaddingLeft);
25069
+ }
25041
25070
  .pf-c-sidebar__panel.pf-m-sticky {
25042
25071
  --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
25043
25072
  --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
@@ -25049,11 +25078,25 @@ label.pf-c-radio, .pf-c-radio__label,
25049
25078
 
25050
25079
  .pf-c-sidebar__content {
25051
25080
  flex-grow: 1;
25081
+ order: var(--pf-c-sidebar__content--Order);
25082
+ padding: var(--pf-c-sidebar__content--PaddingTop) var(--pf-c-sidebar__content--PaddingRight) var(--pf-c-sidebar__content--PaddingBottom) var(--pf-c-sidebar__content--PaddingLeft);
25052
25083
  background-color: var(--pf-c-sidebar__content--BackgroundColor);
25053
25084
  }
25085
+ .pf-c-sidebar__content.pf-m-padding {
25086
+ --pf-c-sidebar__content--PaddingTop: var(--pf-c-sidebar__content--m-padding--PaddingTop);
25087
+ --pf-c-sidebar__content--PaddingRight: var(--pf-c-sidebar__content--m-padding--PaddingRight);
25088
+ --pf-c-sidebar__content--PaddingBottom: var(--pf-c-sidebar__content--m-padding--PaddingBottom);
25089
+ --pf-c-sidebar__content--PaddingLeft: var(--pf-c-sidebar__content--m-padding--PaddingTop);
25090
+ }
25054
25091
  .pf-c-sidebar__content.pf-m-no-background {
25055
25092
  --pf-c-sidebar__content--BackgroundColor: transparent;
25056
25093
  }
25094
+ .pf-c-sidebar__content + .pf-c-sidebar__panel {
25095
+ --pf-c-sidebar__panel--Order: 1;
25096
+ }
25097
+ :where(.pf-c-sidebar__content:first-child) {
25098
+ --pf-c-sidebar__content--Order: -1;
25099
+ }
25057
25100
 
25058
25101
  .pf-c-sidebar.pf-m-no-background,
25059
25102
  .pf-c-sidebar__panel.pf-m-no-background,
package/patternfly.css CHANGED
@@ -25043,28 +25043,54 @@ label.pf-c-radio, .pf-c-radio__label,
25043
25043
  }
25044
25044
 
25045
25045
  .pf-c-sidebar {
25046
+ --pf-c-sidebar--inset: var(--pf-global--spacer--md);
25047
+ --pf-c-sidebar--xl--inset: var(--pf-global--spacer--lg);
25046
25048
  --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
25049
+ --pf-c-sidebar--BorderWidth--base: var(--pf-global--BorderWidth--sm);
25050
+ --pf-c-sidebar--BorderColor--base: var(--pf-global--BorderColor--100);
25051
+ --pf-c-sidebar__panel--PaddingTop: 0;
25052
+ --pf-c-sidebar__panel--PaddingRight: 0;
25053
+ --pf-c-sidebar__panel--PaddingBottom: 0;
25054
+ --pf-c-sidebar__panel--PaddingLeft: 0;
25055
+ --pf-c-sidebar__panel--Order: -1;
25056
+ --pf-c-sidebar__panel--m-padding--PaddingTop: var(--pf-c-sidebar--inset);
25057
+ --pf-c-sidebar__panel--m-padding--PaddingRight: var(--pf-c-sidebar--inset);
25058
+ --pf-c-sidebar__panel--m-padding--PaddingBottom: var(--pf-c-sidebar--inset);
25059
+ --pf-c-sidebar__panel--m-padding--PaddingLeft: var(--pf-c-sidebar--inset);
25060
+ --pf-c-sidebar__content--PaddingTop: 0;
25061
+ --pf-c-sidebar__content--PaddingRight: 0;
25062
+ --pf-c-sidebar__content--PaddingBottom: 0;
25063
+ --pf-c-sidebar__content--PaddingLeft: 0;
25064
+ --pf-c-sidebar__content--Order: 1;
25065
+ --pf-c-sidebar__content--m-padding--PaddingTop: var(--pf-c-sidebar--inset);
25066
+ --pf-c-sidebar__content--m-padding--PaddingRight: var(--pf-c-sidebar--inset);
25067
+ --pf-c-sidebar__content--m-padding--PaddingBottom: var(--pf-c-sidebar--inset);
25068
+ --pf-c-sidebar__content--m-padding--PaddingLeft: var(--pf-c-sidebar--inset);
25047
25069
  --pf-c-sidebar__main--FlexDirection: column;
25048
25070
  --pf-c-sidebar__main--md--FlexDirection: row;
25049
25071
  --pf-c-sidebar__main--AlignItems: stretch;
25050
25072
  --pf-c-sidebar__main--md--AlignItems: start;
25051
25073
  --pf-c-sidebar__main--child--MarginTop: 0;
25052
- --pf-c-sidebar__main--child--MarginLeft: 0;
25053
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
25054
- --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
25055
- --pf-c-sidebar--m-panel-right__panel--Order: 0;
25074
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--inset);
25075
+ --pf-c-sidebar__main--m-border--before--Display: none;
25076
+ --pf-c-sidebar__main--m-border--before--md--Display: block;
25077
+ --pf-c-sidebar__main--m-border--before--BorderWidth: var(--pf-c-sidebar--BorderWidth--base);
25078
+ --pf-c-sidebar__main--m-border--before--BorderColor: var(--pf-c-sidebar--BorderColor--base);
25079
+ --pf-c-sidebar--m-panel-right__panel--Order: -1;
25056
25080
  --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
25081
+ --pf-c-sidebar--m-panel-right__content--md--Order: -1;
25057
25082
  --pf-c-sidebar--m-stack__main--FlexDirection: column;
25058
25083
  --pf-c-sidebar--m-stack__main--AlignItems: stretch;
25059
25084
  --pf-c-sidebar--m-stack__panel--Position: sticky;
25060
25085
  --pf-c-sidebar--m-stack__panel--Top: 0;
25061
25086
  --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
25062
- --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
25087
+ --pf-c-sidebar--m-stack--m-panel-right__panel--Order: -1;
25063
25088
  --pf-c-sidebar--m-split__main--AlignItems: start;
25064
25089
  --pf-c-sidebar--m-split__main--FlexDirection: row;
25065
25090
  --pf-c-sidebar--m-split__panel--Position: static;
25066
25091
  --pf-c-sidebar--m-split__panel--Top: auto;
25067
25092
  --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
25093
+ --pf-c-sidebar--m-split__main--m-border--before--Display: block;
25068
25094
  --pf-c-sidebar__panel--FlexBasis--base: auto;
25069
25095
  --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
25070
25096
  --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
@@ -25078,7 +25104,6 @@ label.pf-c-radio, .pf-c-radio__label,
25078
25104
  --pf-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
25079
25105
  --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
25080
25106
  --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
25081
- --pf-c-sidebar__panel--Order: 0;
25082
25107
  --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
25083
25108
  --pf-c-sidebar__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
25084
25109
  --pf-c-sidebar__panel--m-sticky--Top: 0;
@@ -25088,60 +25113,50 @@ label.pf-c-radio, .pf-c-radio__label,
25088
25113
  @media (min-width: 768px) {
25089
25114
  .pf-c-sidebar {
25090
25115
  --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
25116
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
25117
+ --pf-c-sidebar__main--m-border--before--Display: var(--pf-c-sidebar__main--m-border--before--md--Display);
25091
25118
  --pf-c-sidebar__panel--BoxShadow: none;
25092
25119
  --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
25093
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
25094
25120
  --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
25095
25121
  --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
25096
25122
  }
25097
25123
  }
25098
25124
  @media (min-width: 1200px) {
25099
25125
  .pf-c-sidebar {
25100
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
25126
+ --pf-c-sidebar--inset: var(--pf-c-sidebar--xl--inset);
25101
25127
  }
25102
25128
  }
25103
- .pf-c-sidebar.pf-m-gutter {
25104
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
25105
- --pf-c-sidebar__main--child--MarginLeft: 0;
25106
- }
25107
- .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
25108
- margin-top: var(--pf-c-sidebar__main--child--MarginTop);
25109
- margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
25110
- }
25111
- @media (min-width: 768px) {
25112
- .pf-c-sidebar.pf-m-gutter {
25113
- --pf-c-sidebar__main--child--MarginTop: 0;
25114
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
25115
- }
25129
+ .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main {
25130
+ gap: var(--pf-c-sidebar--m-gutter__main--Gap);
25116
25131
  }
25117
25132
  .pf-c-sidebar.pf-m-panel-right {
25118
25133
  --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
25134
+ --pf-c-sidebar__content--Order: var(--pf-c-sidebar--m-panel-right__content--Order);
25119
25135
  }
25120
25136
  @media (min-width: 768px) {
25121
25137
  .pf-c-sidebar.pf-m-panel-right {
25122
25138
  --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
25139
+ --pf-c-sidebar--m-panel-right__content--Order: var(--pf-c-sidebar--m-panel-right__content--md--Order);
25123
25140
  }
25124
25141
  }
25125
25142
  .pf-c-sidebar.pf-m-stack {
25126
25143
  --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
25127
25144
  --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
25128
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
25129
- --pf-c-sidebar__main--child--MarginLeft: 0;
25130
25145
  --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
25131
25146
  --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
25132
25147
  --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
25133
25148
  --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
25149
+ --pf-c-sidebar__main--m-border--before--Display: none;
25134
25150
  --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
25135
25151
  }
25136
25152
  .pf-c-sidebar.pf-m-split {
25137
25153
  --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
25138
25154
  --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
25139
- --pf-c-sidebar__main--child--MarginTop: 0;
25140
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
25141
25155
  --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
25142
25156
  --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
25143
25157
  --pf-c-sidebar__panel--BoxShadow: none;
25144
25158
  --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
25159
+ --pf-c-sidebar__main--m-border--before--Display: var(--pf-c-sidebar--m-split__main--m-border--before--Display);
25145
25160
  --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
25146
25161
  }
25147
25162
 
@@ -25150,6 +25165,13 @@ label.pf-c-radio, .pf-c-radio__label,
25150
25165
  flex-direction: var(--pf-c-sidebar__main--FlexDirection);
25151
25166
  align-items: var(--pf-c-sidebar__main--AlignItems);
25152
25167
  }
25168
+ .pf-c-sidebar__main.pf-m-border::before {
25169
+ display: var(--pf-c-sidebar__main--m-border--before--Display);
25170
+ flex: 0 0 var(--pf-c-sidebar__main--m-border--before--BorderWidth);
25171
+ align-self: stretch;
25172
+ content: "";
25173
+ background-color: var(--pf-c-sidebar__main--m-border--before--BorderColor);
25174
+ }
25153
25175
 
25154
25176
  .pf-c-sidebar__panel {
25155
25177
  position: var(--pf-c-sidebar__panel--Position);
@@ -25158,9 +25180,16 @@ label.pf-c-radio, .pf-c-radio__label,
25158
25180
  flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
25159
25181
  flex-shrink: 0;
25160
25182
  order: var(--pf-c-sidebar__panel--Order);
25183
+ padding: var(--pf-c-sidebar__panel--PaddingTop) var(--pf-c-sidebar__panel--PaddingRight) var(--pf-c-sidebar__panel--PaddingBottom) var(--pf-c-sidebar__panel--PaddingLeft);
25161
25184
  background-color: var(--pf-c-sidebar__panel--BackgroundColor);
25162
25185
  box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
25163
25186
  }
25187
+ .pf-c-sidebar__panel.pf-m-padding {
25188
+ --pf-c-sidebar__panel--PaddingTop: var(--pf-c-sidebar__panel--m-padding--PaddingTop);
25189
+ --pf-c-sidebar__panel--PaddingRight: var(--pf-c-sidebar__panel--m-padding--PaddingRight);
25190
+ --pf-c-sidebar__panel--PaddingBottom: var(--pf-c-sidebar__panel--m-padding--PaddingBottom);
25191
+ --pf-c-sidebar__panel--PaddingLeft: var(--pf-c-sidebar__panel--m-padding--PaddingLeft);
25192
+ }
25164
25193
  .pf-c-sidebar__panel.pf-m-sticky {
25165
25194
  --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
25166
25195
  --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
@@ -25172,11 +25201,25 @@ label.pf-c-radio, .pf-c-radio__label,
25172
25201
 
25173
25202
  .pf-c-sidebar__content {
25174
25203
  flex-grow: 1;
25204
+ order: var(--pf-c-sidebar__content--Order);
25205
+ padding: var(--pf-c-sidebar__content--PaddingTop) var(--pf-c-sidebar__content--PaddingRight) var(--pf-c-sidebar__content--PaddingBottom) var(--pf-c-sidebar__content--PaddingLeft);
25175
25206
  background-color: var(--pf-c-sidebar__content--BackgroundColor);
25176
25207
  }
25208
+ .pf-c-sidebar__content.pf-m-padding {
25209
+ --pf-c-sidebar__content--PaddingTop: var(--pf-c-sidebar__content--m-padding--PaddingTop);
25210
+ --pf-c-sidebar__content--PaddingRight: var(--pf-c-sidebar__content--m-padding--PaddingRight);
25211
+ --pf-c-sidebar__content--PaddingBottom: var(--pf-c-sidebar__content--m-padding--PaddingBottom);
25212
+ --pf-c-sidebar__content--PaddingLeft: var(--pf-c-sidebar__content--m-padding--PaddingTop);
25213
+ }
25177
25214
  .pf-c-sidebar__content.pf-m-no-background {
25178
25215
  --pf-c-sidebar__content--BackgroundColor: transparent;
25179
25216
  }
25217
+ .pf-c-sidebar__content + .pf-c-sidebar__panel {
25218
+ --pf-c-sidebar__panel--Order: 1;
25219
+ }
25220
+ :where(.pf-c-sidebar__content:first-child) {
25221
+ --pf-c-sidebar__content--Order: -1;
25222
+ }
25180
25223
 
25181
25224
  .pf-c-sidebar.pf-m-no-background,
25182
25225
  .pf-c-sidebar__panel.pf-m-no-background,