Skip to content

Commit 1e3f606

Browse files
lubber-delubber-de
authored
feat(table,segment,container,dropdown,search): resizable scrolling
New resizable variant which enables native resize for scrolling variants like table, segment, container, search, dropdown just like a textarea
1 parent 3deb795 commit 1e3f606

File tree

13 files changed

+274
-0
lines changed

13 files changed

+274
-0
lines changed

‎src/definitions/collections/table.less

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -265,24 +265,39 @@
265265
& when (@variationTableScrollingShort) {
266266
.ui.scrolling.table.short > tbody {
267267
max-height: @scrollingMobileMaxBodyHeight * 0.75;
268+
.resizable& when (@variationTableResizable) {
269+
height: @scrollingMobileMaxBodyHeight * 0.75;
270+
}
268271
}
269272
}
270273
& when (@variationTableScrollingVeryShort) {
271274
.ui.scrolling.table[class*="very short"] > tbody {
272275
max-height: @scrollingMobileMaxBodyHeight * 0.5;
276+
.resizable& when (@variationTableResizable) {
277+
height: @scrollingMobileMaxBodyHeight * 0.5;
278+
}
273279
}
274280
}
275281
.ui.scrolling.table > tbody {
276282
max-height: @scrollingMobileMaxBodyHeight;
283+
.resizable& when (@variationTableResizable) {
284+
height: @scrollingMobileMaxBodyHeight;
285+
}
277286
}
278287
& when (@variationTableScrollingLong) {
279288
.ui.scrolling.table.long > tbody {
280289
max-height: @scrollingMobileMaxBodyHeight * 2;
290+
.resizable& when (@variationTableResizable) {
291+
height: @scrollingMobileMaxBodyHeight * 2;
292+
}
281293
}
282294
}
283295
& when (@variationTableScrollingVeryLong) {
284296
.ui.scrolling.table[class*="very long"] > tbody {
285297
max-height: @scrollingMobileMaxBodyHeight * 3;
298+
.resizable& when (@variationTableResizable) {
299+
height: @scrollingMobileMaxBodyHeight * 3;
300+
}
286301
}
287302
}
288303
}
@@ -320,74 +335,119 @@
320335
& when (@variationTableScrollingShort) {
321336
.ui.scrolling.table.short > tbody {
322337
max-height: @scrollingTabletMaxBodyHeight * 0.75;
338+
.resizable& when (@variationTableResizable) {
339+
height: @scrollingTabletMaxBodyHeight * 0.75;
340+
}
323341
}
324342
}
325343
& when (@variationTableScrollingVeryShort) {
326344
.ui.scrolling.table[class*="very short"] > tbody {
327345
max-height: @scrollingTabletMaxBodyHeight * 0.5;
346+
.resizable& when (@variationTableResizable) {
347+
height: @scrollingTabletMaxBodyHeight * 0.5;
348+
}
328349
}
329350
}
330351
.ui.scrolling.table > tbody {
331352
max-height: @scrollingTabletMaxBodyHeight;
353+
.resizable& when (@variationTableResizable) {
354+
height: @scrollingTabletMaxBodyHeight;
355+
}
332356
}
333357
& when (@variationTableScrollingLong) {
334358
.ui.scrolling.table.long > tbody {
335359
max-height: @scrollingTabletMaxBodyHeight * 2;
360+
.resizable& when (@variationTableResizable) {
361+
height: @scrollingTabletMaxBodyHeight * 2;
362+
}
336363
}
337364
}
338365
& when (@variationTableScrollingVeryLong) {
339366
.ui.scrolling.table[class*="very long"] > tbody {
340367
max-height: @scrollingTabletMaxBodyHeight * 3;
368+
.resizable& when (@variationTableResizable) {
369+
height: @scrollingTabletMaxBodyHeight * 3;
370+
}
341371
}
342372
}
343373
}
344374
@media only screen and (min-width: @computerBreakpoint) {
345375
& when (@variationTableScrollingShort) {
346376
.ui.scrolling.table.short > tbody {
347377
max-height: @scrollingComputerMaxBodyHeight * 0.75;
378+
.resizable& when (@variationTableResizable) {
379+
height: @scrollingComputerMaxBodyHeight * 0.75;
380+
}
348381
}
349382
}
350383
& when (@variationTableScrollingVeryShort) {
351384
.ui.scrolling.table[class*="very short"] > tbody {
352385
max-height: @scrollingComputerMaxBodyHeight * 0.5;
386+
.resizable& when (@variationTableResizable) {
387+
height: @scrollingComputerMaxBodyHeight * 0.5;
388+
}
353389
}
354390
}
355391
.ui.scrolling.table > tbody {
356392
max-height: @scrollingComputerMaxBodyHeight;
393+
.resizable& when (@variationTableResizable) {
394+
height: @scrollingComputerMaxBodyHeight;
395+
}
357396
}
358397
& when (@variationTableScrollingLong) {
359398
.ui.scrolling.table.long > tbody {
360399
max-height: @scrollingComputerMaxBodyHeight * 2;
400+
.resizable& when (@variationTableResizable) {
401+
height: @scrollingComputerMaxBodyHeight * 2;
402+
}
361403
}
362404
}
363405
& when (@variationTableScrollingVeryLong) {
364406
.ui.scrolling.table[class*="very long"] > tbody {
365407
max-height: @scrollingComputerMaxBodyHeight * 3;
408+
.resizable& when (@variationTableResizable) {
409+
height: @scrollingComputerMaxBodyHeight * 3;
410+
}
366411
}
367412
}
368413
}
369414
@media only screen and (min-width: @widescreenMonitorBreakpoint) {
370415
& when (@variationTableScrollingShort) {
371416
.ui.scrolling.table.short > tbody {
372417
max-height: @scrollingWidescreenMaxBodyHeight * 0.75;
418+
.resizable& when (@variationTableResizable) {
419+
height: @scrollingWidescreenMaxBodyHeight * 0.75;
420+
}
373421
}
374422
}
375423
& when (@variationTableScrollingVeryShort) {
376424
.ui.scrolling.table[class*="very short"] > tbody {
377425
max-height: @scrollingWidescreenMaxBodyHeight * 0.5;
426+
.resizable& when (@variationTableResizable) {
427+
height: @scrollingWidescreenMaxBodyHeight * 0.5;
428+
}
378429
}
379430
}
380431
.ui.scrolling.table > tbody {
381432
max-height: @scrollingWidescreenMaxBodyHeight;
433+
.resizable& when (@variationTableResizable) {
434+
height: @scrollingWidescreenMaxBodyHeight;
435+
}
382436
}
383437
& when (@variationTableScrollingLong) {
384438
.ui.scrolling.table.long > tbody {
385439
max-height: @scrollingWidescreenMaxBodyHeight * 2;
440+
.resizable& when (@variationTableResizable) {
441+
height: @scrollingWidescreenMaxBodyHeight * 2;
442+
}
386443
}
387444
}
388445
& when (@variationTableScrollingVeryLong) {
389446
.ui.scrolling.table[class*="very long"] > tbody {
390447
max-height: @scrollingWidescreenMaxBodyHeight * 3;
448+
.resizable& when (@variationTableResizable) {
449+
height: @scrollingWidescreenMaxBodyHeight * 3;
450+
}
391451
}
392452
}
393453
}
@@ -489,6 +549,12 @@
489549
scrollbar-color: @thumbInvertedBackground @trackInvertedBackground;
490550
}
491551
}
552+
& when (@variationTableResizable) {
553+
.ui.resizable.scrolling.table > tbody {
554+
resize: @resizableDirection;
555+
max-height: none;
556+
}
557+
}
492558
}
493559
& when (@variationTableOverflowing) {
494560
/* --------------

‎src/definitions/elements/container.less

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,11 +195,17 @@
195195
& when (@variationContainerScrollingShort) {
196196
.ui.scrolling.container.short {
197197
max-height: @scrollingMobileMaxHeight * 0.75;
198+
&.resizable when (@variationContainerResizable) {
199+
height: @scrollingMobileMaxHeight * 0.75;
200+
}
198201
}
199202
}
200203
& when (@variationContainerScrollingVeryShort) {
201204
.ui.scrolling.container[class*="very short"] {
202205
max-height: @scrollingMobileMaxHeight * 0.5;
206+
&.resizable when (@variationContainerResizable) {
207+
height: @scrollingMobileMaxHeight * 0.5;
208+
}
203209
}
204210
}
205211
.ui.scrolling.container {
@@ -208,11 +214,17 @@
208214
& when (@variationContainerScrollingLong) {
209215
.ui.scrolling.container.long {
210216
max-height: @scrollingMobileMaxHeight * 2;
217+
&.resizable when (@variationContainerResizable) {
218+
height: @scrollingMobileMaxHeight * 2;
219+
}
211220
}
212221
}
213222
& when (@variationContainerScrollingVeryLong) {
214223
.ui.scrolling.container[class*="very long"] {
215224
max-height: @scrollingMobileMaxHeight * 3;
225+
&.resizable when (@variationContainerResizable) {
226+
height: @scrollingMobileMaxHeight * 3;
227+
}
216228
}
217229
}
218230
}
@@ -221,77 +233,128 @@
221233
& when (@variationContainerScrollingShort) {
222234
.ui.scrolling.container.short {
223235
max-height: @scrollingTabletMaxHeight * 0.75;
236+
&.resizable when (@variationContainerResizable) {
237+
height: @scrollingTabletMaxHeight * 0.75;
238+
}
224239
}
225240
}
226241
& when (@variationContainerScrollingVeryShort) {
227242
.ui.scrolling.container[class*="very short"] {
228243
max-height: @scrollingTabletMaxHeight * 0.5;
244+
&.resizable when (@variationContainerResizable) {
245+
height: @scrollingTabletMaxHeight * 0.5;
246+
}
229247
}
230248
}
231249
.ui.scrolling.container {
232250
max-height: @scrollingTabletMaxHeight;
251+
&.resizable when (@variationContainerResizable) {
252+
height: @scrollingTabletMaxHeight;
253+
}
233254
}
234255
& when (@variationContainerScrollingLong) {
235256
.ui.scrolling.container.long {
236257
max-height: @scrollingTabletMaxHeight * 2;
258+
&.resizable when (@variationContainerResizable) {
259+
height: @scrollingTabletMaxHeight * 2;
260+
}
237261
}
238262
}
239263
& when (@variationContainerScrollingVeryLong) {
240264
.ui.scrolling.container[class*="very long"] {
241265
max-height: @scrollingTabletMaxHeight * 3;
266+
&.resizable when (@variationContainerResizable) {
267+
height: @scrollingTabletMaxHeight * 3;
268+
}
242269
}
243270
}
244271
}
245272
@media only screen and (min-width: @computerBreakpoint) {
246273
& when (@variationContainerScrollingShort) {
247274
.ui.scrolling.container.short {
248275
max-height: @scrollingComputerMaxHeight * 0.75;
276+
&.resizable when (@variationContainerResizable) {
277+
height: @scrollingComputerMaxHeight * 0.75;
278+
}
249279
}
250280
}
251281
& when (@variationContainerScrollingVeryShort) {
252282
.ui.scrolling.container[class*="very short"] {
253283
max-height: @scrollingComputerMaxHeight * 0.5;
284+
&.resizable when (@variationContainerResizable) {
285+
height: @scrollingComputerMaxHeight * 0.5;
286+
}
254287
}
255288
}
256289
.ui.scrolling.container {
257290
max-height: @scrollingComputerMaxHeight;
291+
&.resizable when (@variationContainerResizable) {
292+
height: @scrollingComputerMaxHeight;
293+
}
258294
}
259295
& when (@variationContainerScrollingLong) {
260296
.ui.scrolling.container.long {
261297
max-height: @scrollingComputerMaxHeight * 2;
298+
&.resizable when (@variationContainerResizable) {
299+
height: @scrollingComputerMaxHeight * 2;
300+
}
262301
}
263302
}
264303
& when (@variationContainerScrollingVeryLong) {
265304
.ui.scrolling.container[class*="very long"] {
266305
max-height: @scrollingComputerMaxHeight * 3;
306+
&.resizable when (@variationContainerResizable) {
307+
height: @scrollingComputerMaxHeight * 3;
308+
}
267309
}
268310
}
269311
}
270312
@media only screen and (min-width: @widescreenMonitorBreakpoint) {
271313
& when (@variationContainerScrollingShort) {
272314
.ui.scrolling.container.short {
273315
max-height: @scrollingWidescreenMaxHeight * 0.75;
316+
&.resizable when (@variationContainerResizable) {
317+
height: @scrollingWidescreenMaxHeight * 0.75;
318+
}
274319
}
275320
}
276321
& when (@variationContainerScrollingVeryShort) {
277322
.ui.scrolling.container[class*="very short"] {
278323
max-height: @scrollingWidescreenMaxHeight * 0.5;
324+
&.resizable when (@variationContainerResizable) {
325+
height: @scrollingWidescreenMaxHeight * 0.5;
326+
}
279327
}
280328
}
281329
.ui.scrolling.container {
282330
max-height: @scrollingWidescreenMaxHeight;
331+
&.resizable when (@variationContainerResizable) {
332+
height: @scrollingWidescreenMaxHeight;
333+
}
283334
}
284335
& when (@variationContainerScrollingLong) {
285336
.ui.scrolling.container.long {
286337
max-height: @scrollingWidescreenMaxHeight * 2;
338+
&.resizable when (@variationContainerResizable) {
339+
height: @scrollingWidescreenMaxHeight * 2;
340+
}
287341
}
288342
}
289343
& when (@variationContainerScrollingVeryLong) {
290344
.ui.scrolling.container[class*="very long"] {
291345
max-height: @scrollingWidescreenMaxHeight * 3;
346+
&.resizable when (@variationContainerResizable) {
347+
height: @scrollingWidescreenMaxHeight * 3;
348+
}
292349
}
293350
}
294351
}
352+
& when (@variationContainerResizable) {
353+
.ui.resizable.scrolling.container {
354+
resize: @resizableDirection;
355+
max-height: none;
356+
}
357+
}
295358
}
296359

297360
// stylelint-disable no-invalid-position-at-import-rule

0 commit comments

Comments
 (0)