Skip to content

Commit e1d58cf

Browse files
pat270pat270
authored
Merge pull request #6162 from pat270/LPD-64729
fix(@clayui/css): LPD-64729 Updates c-slideout-fluid CSS
2 parents b4f2991 + f4c039b commit e1d58cf

File tree

8 files changed

+171
-36
lines changed

8 files changed

+171
-36
lines changed

‎packages/clay-core/src/side-panel/SidePanel.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,10 @@ export function SidePanel({
195195

196196
useLayoutEffect(() => {
197197
containerRef.current?.classList.add('c-slideout-container');
198+
199+
if (fluid) {
200+
containerRef.current?.classList.add('c-slideout-fluid');
201+
}
198202
}, [containerRef.current]);
199203

200204
useEffect(() => {
@@ -236,7 +240,6 @@ export function SidePanel({
236240
`c-slideout c-slideout-${position} c-slideout-push`,
237241
{
238242
'c-slideout-end': direction === 'right',
239-
'c-slideout-fluid': fluid,
240243
'c-slideout-start': direction === 'left',
241244
}
242245
)}

‎packages/clay-core/src/side-panel/__tests__/__snapshots__/BasicRendering.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -293,10 +293,10 @@ exports[`SidePanel basic rendering render with custom width 1`] = `
293293
exports[`SidePanel basic rendering render with fluid width 1`] = `
294294
<div>
295295
<div
296-
class="c-slideout-container"
296+
class="c-slideout-container c-slideout-fluid"
297297
>
298298
<div
299-
class="c-slideout c-slideout-absolute c-slideout-push c-slideout-end c-slideout-fluid"
299+
class="c-slideout c-slideout-absolute c-slideout-push c-slideout-end"
300300
>
301301
<div
302302
aria-labelledby="clay-id-5"

‎packages/clay-css/src/scss/atlas/variables/_globals.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -408,7 +408,6 @@ $grid-breakpoints: (
408408
md: 768px,
409409
lg: 992px,
410410
xl: 1280px,
411-
xxl: 1360px,
412411
) !default;
413412

414413
// Grid columns

‎packages/clay-css/src/scss/cadmin/variables/_slideout.scss‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ $cadmin-c-slideout-tbar-stacked-min-width: 40px !default;
66

77
$cadmin-c-slideout-tbar-stacked-min-width-mobile: 40px !default;
88

9+
$cadmin-c-slideout-fluid-sidebar-width-md: '50vw' !default;
10+
11+
$cadmin-c-slideout-fluid-sidebar-width: '33vw' !default;
12+
913
// C Slideout Transitions
1014

1115
$cadmin-c-slideout-transition-in: () !default;
@@ -142,6 +146,49 @@ $cadmin-c-slideout-sm-down: map-deep-merge(
142146
$cadmin-c-slideout-sm-down
143147
);
144148

149+
$cadmin-c-slideout-fluid: () !default;
150+
$cadmin-c-slideout-fluid: map-deep-merge(
151+
(
152+
'&.c-slideout-push-start': (
153+
padding-left: $cadmin-c-slideout-fluid-sidebar-width,
154+
),
155+
'&.c-slideout-push-end': (
156+
padding-right: $cadmin-c-slideout-fluid-sidebar-width,
157+
),
158+
sidebar: (
159+
max-width: $cadmin-c-slideout-fluid-sidebar-width,
160+
width: $cadmin-c-slideout-fluid-sidebar-width,
161+
),
162+
media-breakpoint-down: (
163+
md: (
164+
'&.c-slideout-push-start': (
165+
padding-left: $cadmin-c-slideout-fluid-sidebar-width-md,
166+
),
167+
'&.c-slideout-push-end': (
168+
padding-right: $cadmin-c-slideout-fluid-sidebar-width-md,
169+
),
170+
sidebar: (
171+
max-width: $cadmin-c-slideout-fluid-sidebar-width-md,
172+
width: $cadmin-c-slideout-fluid-sidebar-width-md,
173+
),
174+
),
175+
sm: (
176+
'&.c-slideout-push-start': (
177+
padding-left: 0,
178+
),
179+
'&.c-slideout-push-end': (
180+
padding-right: 0,
181+
),
182+
sidebar: (
183+
max-width: none,
184+
width: 100vw,
185+
),
186+
),
187+
),
188+
),
189+
$cadmin-c-slideout-fluid
190+
);
191+
145192
// C Slideout Start
146193

147194
$cadmin-c-slideout-start: () !default;

‎packages/clay-css/src/scss/components/_slideout.scss‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,6 @@
3636

3737
.c-slideout-fluid {
3838
@include clay-slideout-variant($c-slideout-fluid);
39-
40-
@include media-breakpoint-up(md) {
41-
@include clay-slideout-variant($c-slideout-fluid-md-up);
42-
}
43-
44-
@include media-breakpoint-up(xxl) {
45-
@include clay-slideout-variant($c-slideout-fluid-xxl-up);
46-
}
4739
}
4840

4941
.c-slideout-start {

‎packages/clay-css/src/scss/mixins/_sidebar.scss‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,12 @@
112112
)
113113
);
114114

115+
@each $key, $value in $base {
116+
@if (type-of($value) != 'map') {
117+
$map: map-remove($map, $key);
118+
}
119+
}
120+
115121
$panel: map-merge(
116122
setter(map-get($map, sidebar-panel), ()),
117123
setter(map-get($map, panel), ())
@@ -128,49 +134,70 @@
128134
)
129135
);
130136

137+
$map: map-remove($map, sidebar-panel, panel);
138+
131139
$header: map-merge(
132140
setter(map-get($map, sidebar-header), ()),
133141
setter(map-get($map, header), ())
134142
);
135143

144+
$map: map-remove($map, sidebar-header, header);
145+
136146
$header-component-title: map-merge(
137147
setter(map-get($header, component-title), ()),
138148
setter(map-get($map, component-header-title), ())
139149
);
140150

151+
$map: map-remove($map, component-title, component-header-title);
152+
141153
$header-component-subtitle: map-merge(
142154
setter(map-get($header, component-subtitle), ()),
143155
setter(map-get($map, component-header-subtitle), ())
144156
);
145157

158+
$map: map-remove($map, component-subtitle, component-header-subtitle);
159+
146160
$body: map-merge(
147161
setter(map-get($map, sidebar-body), ()),
148162
setter(map-get($map, body), ())
149163
);
150164

165+
$map: map-remove($map, sidebar-body, body);
166+
151167
$footer: map-merge(
152168
setter(map-get($map, sidebar-footer), ()),
153169
setter(map-get($map, footer), ())
154170
);
155171

172+
$map: map-remove($map, sidebar-footer, footer);
173+
156174
$dt: map-merge(
157175
setter(map-get($map, sidebar-dt), ()),
158176
setter(map-get($map, dt), ())
159177
);
178+
179+
$map: map-remove($map, sidebar-dt, dt);
180+
160181
$dd: map-merge(
161182
setter(map-get($map, sidebar-dd), ()),
162183
setter(map-get($map, dd), ())
163184
);
164185

186+
$map: map-remove($map, sidebar-dd, dd);
187+
165188
$nav-nested: setter(map-get($map, nav-nested), ());
166189

167190
$nav-nested-nav-link: map-merge(
168191
setter(map-get($nav-nested, nav-link), ()),
169192
setter(map-get($map, nav-nested-link), ())
170193
);
171194

195+
$map: map-remove($map, nav-link, nav-nested, nav-nested-link);
196+
172197
$sidebar-list-group: setter(map-get($map, sidebar-list-group), ());
173198

199+
$map: map-remove($map, sidebar-list-group);
200+
174201
$sidebar-list-group-item: setter(
175202
map-get($sidebar-list-group, list-group-item),
176203
()
@@ -199,43 +226,71 @@
199226
)
200227
);
201228

229+
$map: map-remove(
230+
$map,
231+
list-group-item,
232+
sidebar-list-group-item-bg,
233+
sidebar-list-group-item-border-color
234+
);
235+
202236
$sidebar-list-group-title: map-merge(
203237
setter(map-get($sidebar-list-group, list-group-title), ()),
204238
setter(map-get($map, sidebar-list-group-title), ())
205239
);
206240

241+
$map: map-remove($map, list-group-title, sidebar-list-group-title);
242+
207243
$sidebar-list-group-subtitle: map-merge(
208244
setter(map-get($sidebar-list-group, list-group-subtitle), ()),
209245
setter(map-get($map, sidebar-list-group-subtitle), ())
210246
);
211247

248+
$map: map-remove(
249+
$map,
250+
list-group-subtitle,
251+
sidebar-list-group-subtitle
252+
);
253+
212254
$sidebar-list-group-text: map-merge(
213255
setter(map-get($sidebar-list-group, list-group-text), ()),
214256
setter(map-get($map, sidebar-list-group-text), ())
215257
);
216258

259+
$map: map-remove($map, list-group-text, sidebar-list-group-text);
260+
217261
$sidebar-list-group-subtext: map-merge(
218262
setter(map-get($sidebar-list-group, list-group-subtext), ()),
219263
setter(map-get($map, sidebar-list-group-subtext), ())
220264
);
221265

266+
$map: map-remove($map, list-group-subtext, sidebar-list-group-subtext);
267+
222268
$sidebar-list-group-sticker: map-deep-merge(
223269
map-get($sidebar-list-group, sticker),
224270
map-get($map, sidebar-list-group-sticker)
225271
);
226272

273+
$map: map-remove($map, sticker, sidebar-list-group-sticker);
274+
227275
$sidebar-list-group-sticker-secondary: map-deep-merge(
228276
map-get($sidebar-list-group, sticker-secondary),
229277
map-get($map, sidebar-list-group-sticker-secondary)
230278
);
231279

280+
$map: map-remove(
281+
$map,
282+
sticker-secondary,
283+
sidebar-list-group-sticker-secondary
284+
);
285+
232286
@if ($enabled) {
233287
@if (length($base) != 0) {
234288
@include clay-css($base);
235289
}
236290

237291
@at-root {
238292
$_sidenav-start: map-get($map, sidenav-start);
293+
$map: map-remove($map, sidenav-start);
239294

240295
@if ($_sidenav-start) {
241296
#{clay-insert-before(clay-parent(&), '.sidenav-start ')},
@@ -255,6 +310,7 @@
255310
}
256311

257312
$_sidenav-end: map-get($map, sidenav-right);
313+
$map: map-remove($map, sidenav-right);
258314

259315
@if ($_sidenav-end) {
260316
#{clay-insert-before(clay-parent(&), '.sidenav-end ')},
@@ -275,6 +331,7 @@
275331
}
276332

277333
$_focus: map-get($map, focus);
334+
$map: map-remove($map, focus);
278335

279336
@if ($_focus) {
280337
@at-root {
@@ -287,6 +344,7 @@
287344
}
288345

289346
$_component-link: map-get($map, component-link);
347+
$map: map-remove($map, component-link);
290348

291349
@if ($_component-link) {
292350
.component-link {
@@ -295,6 +353,7 @@
295353
}
296354

297355
$_close: map-get($map, close);
356+
$map: map-remove($map, close);
298357

299358
@if ($_close) {
300359
.close {
@@ -427,6 +486,7 @@
427486
}
428487

429488
$_panel-unstyled: map-get($map, panel-unstyled);
489+
$map: map-remove($map, panel-unstyled);
430490

431491
@if ($_panel-unstyled) {
432492
.panel-unstyled {
@@ -435,6 +495,7 @@
435495
}
436496

437497
$_component-navigation-bar: map-get($map, component-navigation-bar);
498+
$map: map-remove($map, component-navigation-bar);
438499

439500
@if ($_component-navigation-bar) {
440501
.component-navigation-bar {
@@ -443,6 +504,7 @@
443504
}
444505

445506
$_panel-group: map-get($map, panel-group);
507+
$map: map-remove($map, panel-group);
446508

447509
@if ($_panel-group) {
448510
.panel-group {
@@ -451,6 +513,7 @@
451513
}
452514

453515
$_btn: map-get($map, btn);
516+
$map: map-remove($map, btn);
454517

455518
@if ($_btn) {
456519
.btn {
@@ -459,6 +522,7 @@
459522
}
460523

461524
$_form-control: map-get($map, form-control);
525+
$map: map-remove($map, form-control);
462526

463527
@if ($_form-control) {
464528
.form-control {
@@ -467,6 +531,7 @@
467531
}
468532

469533
$_form-control-select: map-get($map, form-control-select);
534+
$map: map-remove($map, form-control-select);
470535

471536
@if ($_form-control-select) {
472537
select.form-control,
@@ -476,6 +541,7 @@
476541
}
477542

478543
$_form-control-tag-group: map-get($map, form-control-tag-group);
544+
$map: map-remove($map, form-control-tag-group);
479545

480546
@if ($_form-control-tag-group) {
481547
.form-control-tag-group {
@@ -484,6 +550,7 @@
484550
}
485551

486552
$_input-group: map-get($map, input-group);
553+
$map: map-remove($map, input-group);
487554

488555
@if ($_input-group) {
489556
.input-group {

‎packages/clay-css/src/scss/mixins/_slideout.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,22 @@
2525
@include clay-css($map);
2626
}
2727

28+
$_c-slideout-push-start: map-get($map, '&.c-slideout-push-start');
29+
30+
@if ($_c-slideout-push-start) {
31+
&.c-slideout-push-start {
32+
@include clay-css($_c-slideout-push-start);
33+
}
34+
}
35+
36+
$_c-slideout-push-end: map-get($map, '&.c-slideout-push-end');
37+
38+
@if ($_c-slideout-push-end) {
39+
&.c-slideout-push-end {
40+
@include clay-css($_c-slideout-push-end);
41+
}
42+
}
43+
2844
$_c-slideout-shown: map-get($map, c-slideout-shown);
2945

3046
@if ($_c-slideout-shown) {

0 commit comments

Comments
 (0)