Skip to content

Commit

Permalink
feat(table,segment,container,dropdown,search): resizable scrolling
Browse files Browse the repository at this point in the history 
New resizable variant which enables native resize for scrolling variants like table, segment, container, search, dropdown just like a textarea
  • Loading branch information
@lubber-de
lubber-de committed Apr 11, 2023
1 parent 3deb795 commit 1e3f606
Show file tree
Hide file tree
Showing 13 changed files with 274 additions and 0 deletions.
66 changes: 66 additions & 0 deletions src/definitions/collections/table.less
View file
Expand Up @@ -265,24 +265,39 @@
& when (@variationTableScrollingShort) {
.ui.scrolling.table.short > tbody {
max-height: @scrollingMobileMaxBodyHeight * 0.75;
.resizable& when (@variationTableResizable) {
height: @scrollingMobileMaxBodyHeight * 0.75;
}
}
}
& when (@variationTableScrollingVeryShort) {
.ui.scrolling.table[class*="very short"] > tbody {
max-height: @scrollingMobileMaxBodyHeight * 0.5;
.resizable& when (@variationTableResizable) {
height: @scrollingMobileMaxBodyHeight * 0.5;
}
}
}
.ui.scrolling.table > tbody {
max-height: @scrollingMobileMaxBodyHeight;
.resizable& when (@variationTableResizable) {
height: @scrollingMobileMaxBodyHeight;
}
}
& when (@variationTableScrollingLong) {
.ui.scrolling.table.long > tbody {
max-height: @scrollingMobileMaxBodyHeight * 2;
.resizable& when (@variationTableResizable) {
height: @scrollingMobileMaxBodyHeight * 2;
}
}
}
& when (@variationTableScrollingVeryLong) {
.ui.scrolling.table[class*="very long"] > tbody {
max-height: @scrollingMobileMaxBodyHeight * 3;
.resizable& when (@variationTableResizable) {
height: @scrollingMobileMaxBodyHeight * 3;
}
}
}
}
Expand Down Expand Up @@ -320,74 +335,119 @@
& when (@variationTableScrollingShort) {
.ui.scrolling.table.short > tbody {
max-height: @scrollingTabletMaxBodyHeight * 0.75;
.resizable& when (@variationTableResizable) {
height: @scrollingTabletMaxBodyHeight * 0.75;
}
}
}
& when (@variationTableScrollingVeryShort) {
.ui.scrolling.table[class*="very short"] > tbody {
max-height: @scrollingTabletMaxBodyHeight * 0.5;
.resizable& when (@variationTableResizable) {
height: @scrollingTabletMaxBodyHeight * 0.5;
}
}
}
.ui.scrolling.table > tbody {
max-height: @scrollingTabletMaxBodyHeight;
.resizable& when (@variationTableResizable) {
height: @scrollingTabletMaxBodyHeight;
}
}
& when (@variationTableScrollingLong) {
.ui.scrolling.table.long > tbody {
max-height: @scrollingTabletMaxBodyHeight * 2;
.resizable& when (@variationTableResizable) {
height: @scrollingTabletMaxBodyHeight * 2;
}
}
}
& when (@variationTableScrollingVeryLong) {
.ui.scrolling.table[class*="very long"] > tbody {
max-height: @scrollingTabletMaxBodyHeight * 3;
.resizable& when (@variationTableResizable) {
height: @scrollingTabletMaxBodyHeight * 3;
}
}
}
}
@media only screen and (min-width: @computerBreakpoint) {
& when (@variationTableScrollingShort) {
.ui.scrolling.table.short > tbody {
max-height: @scrollingComputerMaxBodyHeight * 0.75;
.resizable& when (@variationTableResizable) {
height: @scrollingComputerMaxBodyHeight * 0.75;
}
}
}
& when (@variationTableScrollingVeryShort) {
.ui.scrolling.table[class*="very short"] > tbody {
max-height: @scrollingComputerMaxBodyHeight * 0.5;
.resizable& when (@variationTableResizable) {
height: @scrollingComputerMaxBodyHeight * 0.5;
}
}
}
.ui.scrolling.table > tbody {
max-height: @scrollingComputerMaxBodyHeight;
.resizable& when (@variationTableResizable) {
height: @scrollingComputerMaxBodyHeight;
}
}
& when (@variationTableScrollingLong) {
.ui.scrolling.table.long > tbody {
max-height: @scrollingComputerMaxBodyHeight * 2;
.resizable& when (@variationTableResizable) {
height: @scrollingComputerMaxBodyHeight * 2;
}
}
}
& when (@variationTableScrollingVeryLong) {
.ui.scrolling.table[class*="very long"] > tbody {
max-height: @scrollingComputerMaxBodyHeight * 3;
.resizable& when (@variationTableResizable) {
height: @scrollingComputerMaxBodyHeight * 3;
}
}
}
}
@media only screen and (min-width: @widescreenMonitorBreakpoint) {
& when (@variationTableScrollingShort) {
.ui.scrolling.table.short > tbody {
max-height: @scrollingWidescreenMaxBodyHeight * 0.75;
.resizable& when (@variationTableResizable) {
height: @scrollingWidescreenMaxBodyHeight * 0.75;
}
}
}
& when (@variationTableScrollingVeryShort) {
.ui.scrolling.table[class*="very short"] > tbody {
max-height: @scrollingWidescreenMaxBodyHeight * 0.5;
.resizable& when (@variationTableResizable) {
height: @scrollingWidescreenMaxBodyHeight * 0.5;
}
}
}
.ui.scrolling.table > tbody {
max-height: @scrollingWidescreenMaxBodyHeight;
.resizable& when (@variationTableResizable) {
height: @scrollingWidescreenMaxBodyHeight;
}
}
& when (@variationTableScrollingLong) {
.ui.scrolling.table.long > tbody {
max-height: @scrollingWidescreenMaxBodyHeight * 2;
.resizable& when (@variationTableResizable) {
height: @scrollingWidescreenMaxBodyHeight * 2;
}
}
}
& when (@variationTableScrollingVeryLong) {
.ui.scrolling.table[class*="very long"] > tbody {
max-height: @scrollingWidescreenMaxBodyHeight * 3;
.resizable& when (@variationTableResizable) {
height: @scrollingWidescreenMaxBodyHeight * 3;
}
}
}
}
Expand Down Expand Up @@ -489,6 +549,12 @@
scrollbar-color: @thumbInvertedBackground @trackInvertedBackground;
}
}
& when (@variationTableResizable) {
.ui.resizable.scrolling.table > tbody {
resize: @resizableDirection;
max-height: none;
}
}
}
& when (@variationTableOverflowing) {
/* --------------
Expand Down
63 changes: 63 additions & 0 deletions src/definitions/elements/container.less
View file
Expand Up @@ -195,11 +195,17 @@
& when (@variationContainerScrollingShort) {
.ui.scrolling.container.short {
max-height: @scrollingMobileMaxHeight * 0.75;
&.resizable when (@variationContainerResizable) {
height: @scrollingMobileMaxHeight * 0.75;
}
}
}
& when (@variationContainerScrollingVeryShort) {
.ui.scrolling.container[class*="very short"] {
max-height: @scrollingMobileMaxHeight * 0.5;
&.resizable when (@variationContainerResizable) {
height: @scrollingMobileMaxHeight * 0.5;
}
}
}
.ui.scrolling.container {
Expand All @@ -208,11 +214,17 @@
& when (@variationContainerScrollingLong) {
.ui.scrolling.container.long {
max-height: @scrollingMobileMaxHeight * 2;
&.resizable when (@variationContainerResizable) {
height: @scrollingMobileMaxHeight * 2;
}
}
}
& when (@variationContainerScrollingVeryLong) {
.ui.scrolling.container[class*="very long"] {
max-height: @scrollingMobileMaxHeight * 3;
&.resizable when (@variationContainerResizable) {
height: @scrollingMobileMaxHeight * 3;
}
}
}
}
Expand All @@ -221,77 +233,128 @@
& when (@variationContainerScrollingShort) {
.ui.scrolling.container.short {
max-height: @scrollingTabletMaxHeight * 0.75;
&.resizable when (@variationContainerResizable) {
height: @scrollingTabletMaxHeight * 0.75;
}
}
}
& when (@variationContainerScrollingVeryShort) {
.ui.scrolling.container[class*="very short"] {
max-height: @scrollingTabletMaxHeight * 0.5;
&.resizable when (@variationContainerResizable) {
height: @scrollingTabletMaxHeight * 0.5;
}
}
}
.ui.scrolling.container {
max-height: @scrollingTabletMaxHeight;
&.resizable when (@variationContainerResizable) {
height: @scrollingTabletMaxHeight;
}
}
& when (@variationContainerScrollingLong) {
.ui.scrolling.container.long {
max-height: @scrollingTabletMaxHeight * 2;
&.resizable when (@variationContainerResizable) {
height: @scrollingTabletMaxHeight * 2;
}
}
}
& when (@variationContainerScrollingVeryLong) {
.ui.scrolling.container[class*="very long"] {
max-height: @scrollingTabletMaxHeight * 3;
&.resizable when (@variationContainerResizable) {
height: @scrollingTabletMaxHeight * 3;
}
}
}
}
@media only screen and (min-width: @computerBreakpoint) {
& when (@variationContainerScrollingShort) {
.ui.scrolling.container.short {
max-height: @scrollingComputerMaxHeight * 0.75;
&.resizable when (@variationContainerResizable) {
height: @scrollingComputerMaxHeight * 0.75;
}
}
}
& when (@variationContainerScrollingVeryShort) {
.ui.scrolling.container[class*="very short"] {
max-height: @scrollingComputerMaxHeight * 0.5;
&.resizable when (@variationContainerResizable) {
height: @scrollingComputerMaxHeight * 0.5;
}
}
}
.ui.scrolling.container {
max-height: @scrollingComputerMaxHeight;
&.resizable when (@variationContainerResizable) {
height: @scrollingComputerMaxHeight;
}
}
& when (@variationContainerScrollingLong) {
.ui.scrolling.container.long {
max-height: @scrollingComputerMaxHeight * 2;
&.resizable when (@variationContainerResizable) {
height: @scrollingComputerMaxHeight * 2;
}
}
}
& when (@variationContainerScrollingVeryLong) {
.ui.scrolling.container[class*="very long"] {
max-height: @scrollingComputerMaxHeight * 3;
&.resizable when (@variationContainerResizable) {
height: @scrollingComputerMaxHeight * 3;
}
}
}
}
@media only screen and (min-width: @widescreenMonitorBreakpoint) {
& when (@variationContainerScrollingShort) {
.ui.scrolling.container.short {
max-height: @scrollingWidescreenMaxHeight * 0.75;
&.resizable when (@variationContainerResizable) {
height: @scrollingWidescreenMaxHeight * 0.75;
}
}
}
& when (@variationContainerScrollingVeryShort) {
.ui.scrolling.container[class*="very short"] {
max-height: @scrollingWidescreenMaxHeight * 0.5;
&.resizable when (@variationContainerResizable) {
height: @scrollingWidescreenMaxHeight * 0.5;
}
}
}
.ui.scrolling.container {
max-height: @scrollingWidescreenMaxHeight;
&.resizable when (@variationContainerResizable) {
height: @scrollingWidescreenMaxHeight;
}
}
& when (@variationContainerScrollingLong) {
.ui.scrolling.container.long {
max-height: @scrollingWidescreenMaxHeight * 2;
&.resizable when (@variationContainerResizable) {
height: @scrollingWidescreenMaxHeight * 2;
}
}
}
& when (@variationContainerScrollingVeryLong) {
.ui.scrolling.container[class*="very long"] {
max-height: @scrollingWidescreenMaxHeight * 3;
&.resizable when (@variationContainerResizable) {
height: @scrollingWidescreenMaxHeight * 3;
}
}
}
}
& when (@variationContainerResizable) {
.ui.resizable.scrolling.container {
resize: @resizableDirection;
max-height: none;
}
}
}

// stylelint-disable no-invalid-position-at-import-rule
Expand Down

0 comments on commit 1e3f606

Please sign in to comment.