@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/components/Sidebar/sidebar.css CHANGED
@@ -1,26 +1,52 @@
1
1
  .pf-c-sidebar {
2
+ --pf-c-sidebar--inset: var(--pf-global--spacer--md);
3
+ --pf-c-sidebar--xl--inset: var(--pf-global--spacer--lg);
2
4
  --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
5
+ --pf-c-sidebar--BorderWidth--base: var(--pf-global--BorderWidth--sm);
6
+ --pf-c-sidebar--BorderColor--base: var(--pf-global--BorderColor--100);
7
+ --pf-c-sidebar__panel--PaddingTop: 0;
8
+ --pf-c-sidebar__panel--PaddingRight: 0;
9
+ --pf-c-sidebar__panel--PaddingBottom: 0;
10
+ --pf-c-sidebar__panel--PaddingLeft: 0;
11
+ --pf-c-sidebar__panel--Order: -1;
12
+ --pf-c-sidebar__panel--m-padding--PaddingTop: var(--pf-c-sidebar--inset);
13
+ --pf-c-sidebar__panel--m-padding--PaddingRight: var(--pf-c-sidebar--inset);
14
+ --pf-c-sidebar__panel--m-padding--PaddingBottom: var(--pf-c-sidebar--inset);
15
+ --pf-c-sidebar__panel--m-padding--PaddingLeft: var(--pf-c-sidebar--inset);
16
+ --pf-c-sidebar__content--PaddingTop: 0;
17
+ --pf-c-sidebar__content--PaddingRight: 0;
18
+ --pf-c-sidebar__content--PaddingBottom: 0;
19
+ --pf-c-sidebar__content--PaddingLeft: 0;
20
+ --pf-c-sidebar__content--Order: 1;
21
+ --pf-c-sidebar__content--m-padding--PaddingTop: var(--pf-c-sidebar--inset);
22
+ --pf-c-sidebar__content--m-padding--PaddingRight: var(--pf-c-sidebar--inset);
23
+ --pf-c-sidebar__content--m-padding--PaddingBottom: var(--pf-c-sidebar--inset);
24
+ --pf-c-sidebar__content--m-padding--PaddingLeft: var(--pf-c-sidebar--inset);
3
25
  --pf-c-sidebar__main--FlexDirection: column;
4
26
  --pf-c-sidebar__main--md--FlexDirection: row;
5
27
  --pf-c-sidebar__main--AlignItems: stretch;
6
28
  --pf-c-sidebar__main--md--AlignItems: start;
7
29
  --pf-c-sidebar__main--child--MarginTop: 0;
8
- --pf-c-sidebar__main--child--MarginLeft: 0;
9
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
10
- --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
11
- --pf-c-sidebar--m-panel-right__panel--Order: 0;
30
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--inset);
31
+ --pf-c-sidebar__main--m-border--before--Display: none;
32
+ --pf-c-sidebar__main--m-border--before--md--Display: block;
33
+ --pf-c-sidebar__main--m-border--before--BorderWidth: var(--pf-c-sidebar--BorderWidth--base);
34
+ --pf-c-sidebar__main--m-border--before--BorderColor: var(--pf-c-sidebar--BorderColor--base);
35
+ --pf-c-sidebar--m-panel-right__panel--Order: -1;
12
36
  --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
37
+ --pf-c-sidebar--m-panel-right__content--md--Order: -1;
13
38
  --pf-c-sidebar--m-stack__main--FlexDirection: column;
14
39
  --pf-c-sidebar--m-stack__main--AlignItems: stretch;
15
40
  --pf-c-sidebar--m-stack__panel--Position: sticky;
16
41
  --pf-c-sidebar--m-stack__panel--Top: 0;
17
42
  --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
18
- --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
43
+ --pf-c-sidebar--m-stack--m-panel-right__panel--Order: -1;
19
44
  --pf-c-sidebar--m-split__main--AlignItems: start;
20
45
  --pf-c-sidebar--m-split__main--FlexDirection: row;
21
46
  --pf-c-sidebar--m-split__panel--Position: static;
22
47
  --pf-c-sidebar--m-split__panel--Top: auto;
23
48
  --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
49
+ --pf-c-sidebar--m-split__main--m-border--before--Display: block;
24
50
  --pf-c-sidebar__panel--FlexBasis--base: auto;
25
51
  --pf-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
26
52
  --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
@@ -34,7 +60,6 @@
34
60
  --pf-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
35
61
  --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
36
62
  --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
37
- --pf-c-sidebar__panel--Order: 0;
38
63
  --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
39
64
  --pf-c-sidebar__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
40
65
  --pf-c-sidebar__panel--m-sticky--Top: 0;
@@ -44,60 +69,50 @@
44
69
  @media (min-width: 768px) {
45
70
  .pf-c-sidebar {
46
71
  --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
72
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
73
+ --pf-c-sidebar__main--m-border--before--Display: var(--pf-c-sidebar__main--m-border--before--md--Display);
47
74
  --pf-c-sidebar__panel--BoxShadow: none;
48
75
  --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
49
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
50
76
  --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
51
77
  --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
52
78
  }
53
79
  }
54
80
  @media (min-width: 1200px) {
55
81
  .pf-c-sidebar {
56
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
82
+ --pf-c-sidebar--inset: var(--pf-c-sidebar--xl--inset);
57
83
  }
58
84
  }
59
- .pf-c-sidebar.pf-m-gutter {
60
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
61
- --pf-c-sidebar__main--child--MarginLeft: 0;
62
- }
63
- .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
64
- margin-top: var(--pf-c-sidebar__main--child--MarginTop);
65
- margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
66
- }
67
- @media (min-width: 768px) {
68
- .pf-c-sidebar.pf-m-gutter {
69
- --pf-c-sidebar__main--child--MarginTop: 0;
70
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
71
- }
85
+ .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main {
86
+ gap: var(--pf-c-sidebar--m-gutter__main--Gap);
72
87
  }
73
88
  .pf-c-sidebar.pf-m-panel-right {
74
89
  --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
90
+ --pf-c-sidebar__content--Order: var(--pf-c-sidebar--m-panel-right__content--Order);
75
91
  }
76
92
  @media (min-width: 768px) {
77
93
  .pf-c-sidebar.pf-m-panel-right {
78
94
  --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
95
+ --pf-c-sidebar--m-panel-right__content--Order: var(--pf-c-sidebar--m-panel-right__content--md--Order);
79
96
  }
80
97
  }
81
98
  .pf-c-sidebar.pf-m-stack {
82
99
  --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
83
100
  --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
84
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
85
- --pf-c-sidebar__main--child--MarginLeft: 0;
86
101
  --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
87
102
  --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
88
103
  --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
89
104
  --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
105
+ --pf-c-sidebar__main--m-border--before--Display: none;
90
106
  --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
91
107
  }
92
108
  .pf-c-sidebar.pf-m-split {
93
109
  --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
94
110
  --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
95
- --pf-c-sidebar__main--child--MarginTop: 0;
96
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
97
111
  --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
98
112
  --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
99
113
  --pf-c-sidebar__panel--BoxShadow: none;
100
114
  --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
115
+ --pf-c-sidebar__main--m-border--before--Display: var(--pf-c-sidebar--m-split__main--m-border--before--Display);
101
116
  --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
102
117
  }
103
118
 
@@ -106,6 +121,13 @@
106
121
  flex-direction: var(--pf-c-sidebar__main--FlexDirection);
107
122
  align-items: var(--pf-c-sidebar__main--AlignItems);
108
123
  }
124
+ .pf-c-sidebar__main.pf-m-border::before {
125
+ display: var(--pf-c-sidebar__main--m-border--before--Display);
126
+ flex: 0 0 var(--pf-c-sidebar__main--m-border--before--BorderWidth);
127
+ align-self: stretch;
128
+ content: "";
129
+ background-color: var(--pf-c-sidebar__main--m-border--before--BorderColor);
130
+ }
109
131
 
110
132
  .pf-c-sidebar__panel {
111
133
  position: var(--pf-c-sidebar__panel--Position);
@@ -114,9 +136,16 @@
114
136
  flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
115
137
  flex-shrink: 0;
116
138
  order: var(--pf-c-sidebar__panel--Order);
139
+ 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);
117
140
  background-color: var(--pf-c-sidebar__panel--BackgroundColor);
118
141
  box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
119
142
  }
143
+ .pf-c-sidebar__panel.pf-m-padding {
144
+ --pf-c-sidebar__panel--PaddingTop: var(--pf-c-sidebar__panel--m-padding--PaddingTop);
145
+ --pf-c-sidebar__panel--PaddingRight: var(--pf-c-sidebar__panel--m-padding--PaddingRight);
146
+ --pf-c-sidebar__panel--PaddingBottom: var(--pf-c-sidebar__panel--m-padding--PaddingBottom);
147
+ --pf-c-sidebar__panel--PaddingLeft: var(--pf-c-sidebar__panel--m-padding--PaddingLeft);
148
+ }
120
149
  .pf-c-sidebar__panel.pf-m-sticky {
121
150
  --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
122
151
  --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
@@ -128,11 +157,25 @@
128
157
 
129
158
  .pf-c-sidebar__content {
130
159
  flex-grow: 1;
160
+ order: var(--pf-c-sidebar__content--Order);
161
+ 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);
131
162
  background-color: var(--pf-c-sidebar__content--BackgroundColor);
132
163
  }
164
+ .pf-c-sidebar__content.pf-m-padding {
165
+ --pf-c-sidebar__content--PaddingTop: var(--pf-c-sidebar__content--m-padding--PaddingTop);
166
+ --pf-c-sidebar__content--PaddingRight: var(--pf-c-sidebar__content--m-padding--PaddingRight);
167
+ --pf-c-sidebar__content--PaddingBottom: var(--pf-c-sidebar__content--m-padding--PaddingBottom);
168
+ --pf-c-sidebar__content--PaddingLeft: var(--pf-c-sidebar__content--m-padding--PaddingTop);
169
+ }
133
170
  .pf-c-sidebar__content.pf-m-no-background {
134
171
  --pf-c-sidebar__content--BackgroundColor: transparent;
135
172
  }
173
+ .pf-c-sidebar__content + .pf-c-sidebar__panel {
174
+ --pf-c-sidebar__panel--Order: 1;
175
+ }
176
+ :where(.pf-c-sidebar__content:first-child) {
177
+ --pf-c-sidebar__content--Order: -1;
178
+ }
136
179
 
137
180
  .pf-c-sidebar.pf-m-no-background,
138
181
  .pf-c-sidebar__panel.pf-m-no-background,
package/components/Sidebar/sidebar.scss CHANGED
@@ -1,9 +1,38 @@
1
1
  $pf-c-sidebar--breakpoint-map--width: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
2
2
  $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
3
3
 
4
-
5
4
  .pf-c-sidebar {
5
+ --pf-c-sidebar--inset: var(--pf-global--spacer--md);
6
+ --pf-c-sidebar--xl--inset: var(--pf-global--spacer--lg);
6
7
  --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
8
+ --pf-c-sidebar--BorderWidth--base: var(--pf-global--BorderWidth--sm);
9
+ --pf-c-sidebar--BorderColor--base: var(--pf-global--BorderColor--100);
10
+
11
+ // Panel
12
+ --pf-c-sidebar__panel--PaddingTop: 0;
13
+ --pf-c-sidebar__panel--PaddingRight: 0;
14
+ --pf-c-sidebar__panel--PaddingBottom: 0;
15
+ --pf-c-sidebar__panel--PaddingLeft: 0;
16
+ --pf-c-sidebar__panel--Order: -1;
17
+
18
+ // Panel padding
19
+ --pf-c-sidebar__panel--m-padding--PaddingTop: var(--pf-c-sidebar--inset);
20
+ --pf-c-sidebar__panel--m-padding--PaddingRight: var(--pf-c-sidebar--inset);
21
+ --pf-c-sidebar__panel--m-padding--PaddingBottom: var(--pf-c-sidebar--inset);
22
+ --pf-c-sidebar__panel--m-padding--PaddingLeft: var(--pf-c-sidebar--inset);
23
+
24
+ // Content
25
+ --pf-c-sidebar__content--PaddingTop: 0;
26
+ --pf-c-sidebar__content--PaddingRight: 0;
27
+ --pf-c-sidebar__content--PaddingBottom: 0;
28
+ --pf-c-sidebar__content--PaddingLeft: 0;
29
+ --pf-c-sidebar__content--Order: 1;
30
+
31
+ // Content padding
32
+ --pf-c-sidebar__content--m-padding--PaddingTop: var(--pf-c-sidebar--inset);
33
+ --pf-c-sidebar__content--m-padding--PaddingRight: var(--pf-c-sidebar--inset);
34
+ --pf-c-sidebar__content--m-padding--PaddingBottom: var(--pf-c-sidebar--inset);
35
+ --pf-c-sidebar__content--m-padding--PaddingLeft: var(--pf-c-sidebar--inset);
7
36
 
8
37
  // Main
9
38
  --pf-c-sidebar__main--FlexDirection: column;
@@ -11,15 +40,20 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
11
40
  --pf-c-sidebar__main--AlignItems: stretch;
12
41
  --pf-c-sidebar__main--md--AlignItems: start;
13
42
  --pf-c-sidebar__main--child--MarginTop: 0;
14
- --pf-c-sidebar__main--child--MarginLeft: 0;
15
43
 
16
44
  // Gutter
17
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
18
- --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
45
+ --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--inset);
46
+
47
+ // Border
48
+ --pf-c-sidebar__main--m-border--before--Display: none;
49
+ --pf-c-sidebar__main--m-border--before--md--Display: block;
50
+ --pf-c-sidebar__main--m-border--before--BorderWidth: var(--pf-c-sidebar--BorderWidth--base);
51
+ --pf-c-sidebar__main--m-border--before--BorderColor: var(--pf-c-sidebar--BorderColor--base);
19
52
 
20
53
  // Panel right
21
- --pf-c-sidebar--m-panel-right__panel--Order: 0;
54
+ --pf-c-sidebar--m-panel-right__panel--Order: -1;
22
55
  --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
56
+ --pf-c-sidebar--m-panel-right__content--md--Order: -1;
23
57
 
24
58
  // Stack
25
59
  --pf-c-sidebar--m-stack__main--FlexDirection: column;
@@ -27,7 +61,7 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
27
61
  --pf-c-sidebar--m-stack__panel--Position: sticky;
28
62
  --pf-c-sidebar--m-stack__panel--Top: 0;
29
63
  --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
30
- --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
64
+ --pf-c-sidebar--m-stack--m-panel-right__panel--Order: -1;
31
65
 
32
66
  // Split
33
67
  --pf-c-sidebar--m-split__main--AlignItems: start;
@@ -35,6 +69,7 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
35
69
  --pf-c-sidebar--m-split__panel--Position: static;
36
70
  --pf-c-sidebar--m-split__panel--Top: auto;
37
71
  --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
72
+ --pf-c-sidebar--m-split__main--m-border--before--Display: block;
38
73
 
39
74
  // Panel
40
75
  --pf-c-sidebar__panel--FlexBasis--base: auto;
@@ -50,7 +85,6 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
50
85
  --pf-c-sidebar__panel--m-split--FlexBasis: #{pf-size-prem(250px)};
51
86
  --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
52
87
  --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
53
- --pf-c-sidebar__panel--Order: 0;
54
88
  --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
55
89
 
56
90
  // Content
@@ -62,61 +96,51 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
62
96
 
63
97
  @media (min-width: $pf-global--breakpoint--md) {
64
98
  --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
99
+ --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
100
+ --pf-c-sidebar__main--m-border--before--Display: var(--pf-c-sidebar__main--m-border--before--md--Display); // show border starting at md breakpoint
65
101
  --pf-c-sidebar__panel--BoxShadow: none;
66
102
  --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
67
- --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
68
103
  --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
69
104
  --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
70
105
  }
71
106
 
72
107
  @media (min-width: $pf-global--breakpoint--xl) {
73
- --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
108
+ --pf-c-sidebar--inset: var(--pf-c-sidebar--xl--inset);
74
109
  }
75
110
 
76
- &.pf-m-gutter {
77
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
78
- --pf-c-sidebar__main--child--MarginLeft: 0;
79
-
80
- > .pf-c-sidebar__main > * + * {
81
- margin-top: var(--pf-c-sidebar__main--child--MarginTop);
82
- margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
83
- }
84
-
85
- @media (min-width: $pf-global--breakpoint--md) {
86
- --pf-c-sidebar__main--child--MarginTop: 0;
87
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
88
- }
111
+ &.pf-m-gutter > .pf-c-sidebar__main {
112
+ gap: var(--pf-c-sidebar--m-gutter__main--Gap);
89
113
  }
90
114
 
91
115
  &.pf-m-panel-right {
92
116
  --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
117
+ --pf-c-sidebar__content--Order: var(--pf-c-sidebar--m-panel-right__content--Order);
93
118
 
94
119
  @media (min-width: $pf-global--breakpoint--md) {
95
120
  --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
121
+ --pf-c-sidebar--m-panel-right__content--Order: var(--pf-c-sidebar--m-panel-right__content--md--Order);
96
122
  }
97
123
  }
98
124
 
99
125
  &.pf-m-stack {
100
126
  --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
101
127
  --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
102
- --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
103
- --pf-c-sidebar__main--child--MarginLeft: 0;
104
128
  --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
105
129
  --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
106
130
  --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
107
131
  --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
132
+ --pf-c-sidebar__main--m-border--before--Display: none;
108
133
  --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
109
134
  }
110
135
 
111
136
  &.pf-m-split {
112
137
  --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
113
138
  --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
114
- --pf-c-sidebar__main--child--MarginTop: 0;
115
- --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
116
139
  --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
117
140
  --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
118
141
  --pf-c-sidebar__panel--BoxShadow: none;
119
142
  --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
143
+ --pf-c-sidebar__main--m-border--before--Display: var(--pf-c-sidebar--m-split__main--m-border--before--Display);
120
144
  --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
121
145
  }
122
146
 
@@ -127,6 +151,14 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
127
151
  display: flex;
128
152
  flex-direction: var(--pf-c-sidebar__main--FlexDirection);
129
153
  align-items: var(--pf-c-sidebar__main--AlignItems);
154
+
155
+ &.pf-m-border::before {
156
+ display: var(--pf-c-sidebar__main--m-border--before--Display);
157
+ flex: 0 0 var(--pf-c-sidebar__main--m-border--before--BorderWidth);
158
+ align-self: stretch;
159
+ content: "";
160
+ background-color: var(--pf-c-sidebar__main--m-border--before--BorderColor);
161
+ }
130
162
  }
131
163
 
132
164
  .pf-c-sidebar__panel {
@@ -136,9 +168,17 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
136
168
  flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
137
169
  flex-shrink: 0;
138
170
  order: var(--pf-c-sidebar__panel--Order);
171
+ 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);
139
172
  background-color: var(--pf-c-sidebar__panel--BackgroundColor);
140
173
  box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
141
174
 
175
+ &.pf-m-padding {
176
+ --pf-c-sidebar__panel--PaddingTop: var(--pf-c-sidebar__panel--m-padding--PaddingTop);
177
+ --pf-c-sidebar__panel--PaddingRight: var(--pf-c-sidebar__panel--m-padding--PaddingRight);
178
+ --pf-c-sidebar__panel--PaddingBottom: var(--pf-c-sidebar__panel--m-padding--PaddingBottom);
179
+ --pf-c-sidebar__panel--PaddingLeft: var(--pf-c-sidebar__panel--m-padding--PaddingLeft);
180
+ }
181
+
142
182
  &.pf-m-sticky {
143
183
  --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
144
184
  --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
@@ -152,11 +192,28 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
152
192
 
153
193
  .pf-c-sidebar__content {
154
194
  flex-grow: 1;
195
+ order: var(--pf-c-sidebar__content--Order);
196
+ 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);
155
197
  background-color: var(--pf-c-sidebar__content--BackgroundColor);
156
198
 
199
+ &.pf-m-padding {
200
+ --pf-c-sidebar__content--PaddingTop: var(--pf-c-sidebar__content--m-padding--PaddingTop);
201
+ --pf-c-sidebar__content--PaddingRight: var(--pf-c-sidebar__content--m-padding--PaddingRight);
202
+ --pf-c-sidebar__content--PaddingBottom: var(--pf-c-sidebar__content--m-padding--PaddingBottom);
203
+ --pf-c-sidebar__content--PaddingLeft: var(--pf-c-sidebar__content--m-padding--PaddingTop);
204
+ }
205
+
157
206
  &.pf-m-no-background {
158
207
  --pf-c-sidebar__content--BackgroundColor: transparent;
159
208
  }
209
+
210
+ & + .pf-c-sidebar__panel {
211
+ --pf-c-sidebar__panel--Order: 1;
212
+ }
213
+
214
+ :where(&:first-child) {
215
+ --pf-c-sidebar__content--Order: -1;
216
+ }
160
217
  }
161
218
 
162
219
  .pf-c-sidebar,
package/docs/components/Sidebar/examples/Sidebar.md CHANGED
@@ -175,6 +175,60 @@ cssPrefix: pf-c-sidebar
175
175
 
176
176
  ```
177
177
 
178
+ ### Border
179
+
180
+ ```html
181
+ <div class="pf-c-sidebar pf-m-gutter">
182
+ <div class="pf-c-sidebar__main pf-m-border">
183
+ <div class="pf-c-sidebar__panel">Sidebar panel</div>
184
+ <div class="pf-c-sidebar__content">
185
+ <div class="pf-c-content">
186
+ <p>Default layout.</p>
187
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
188
+ <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+
194
+ ```
195
+
196
+ ### Padding on panel
197
+
198
+ ```html
199
+ <div class="pf-c-sidebar">
200
+ <div class="pf-c-sidebar__main">
201
+ <div class="pf-c-sidebar__panel pf-m-padding">Sidebar panel, with padding</div>
202
+ <div class="pf-c-sidebar__content">
203
+ <div class="pf-c-content">
204
+ <p>Default layout.</p>
205
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
206
+ <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ ```
213
+
214
+ ### Padding on content
215
+
216
+ ```html
217
+ <div class="pf-c-sidebar">
218
+ <div class="pf-c-sidebar__main">
219
+ <div class="pf-c-sidebar__panel">Sidebar panel</div>
220
+ <div class="pf-c-sidebar__content pf-m-padding">
221
+ <div class="pf-c-content">
222
+ <p>Sidebar content, with padding</p>
223
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
224
+ <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+
230
+ ```
231
+
178
232
  ## Documentation
179
233
 
180
234
  ### Usage
@@ -185,6 +239,8 @@ cssPrefix: pf-c-sidebar
185
239
  | `.pf-c-sidebar__main` | `<div>` | Initiates the sidebar main element. **Required** |
186
240
  | `.pf-c-sidebar__panel` | `<div>` | Initiates the sidebar panel element. **Required** |
187
241
  | `.pf-c-sidebar__content` | `<div>` | Initiates the sidebar content element. **Required** |
242
+ | `.pf-m-border` | `.pf-c-sidebar__main` | Modifies the sidebar component to add a border between the panel and content. |
243
+ | `.pf-m-padding` | `.pf-c-sidebar__panel`, `.pf-c-sidebar__content` | Modifies the sidebar component to add a padding to panel and/or content. |
188
244
  | `.pf-m-gutter` | `.pf-c-sidebar` | Modifies the sidebar component to add a gutter between the panel and content. |
189
245
  | `.pf-m-stack` | `.pf-c-sidebar` | Modifies the sidebar to stack the panel on top of the content. |
190
246
  | `.pf-m-split` | `.pf-c-sidebar` | Modifies the sidebar to position the panel and content side by side. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "5.0.0-alpha.29",
4
+ "version": "5.0.0-alpha.30",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -42,7 +42,7 @@
42
42
  "@commitlint/config-conventional": "^17.4.2",
43
43
  "@fortawesome/fontawesome": "^1.1.8",
44
44
  "@octokit/rest": "^19.0.7",
45
- "@patternfly/documentation-framework": "1.10.0",
45
+ "@patternfly/documentation-framework": "1.10.2",
46
46
  "@patternfly/patternfly-a11y": "4.3.1",
47
47
  "@patternfly/react-code-editor": "4.82.113",
48
48
  "@patternfly/react-core": "4.276.6",