diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less index b9cea28a37..5c76139069 100755 --- a/src/definitions/collections/table.less +++ b/src/definitions/collections/table.less @@ -288,6 +288,31 @@ } } } + & when (@variationTableOverflowing) { + & when (@variationTableOverflowingShort) { + .ui.overflowing.table.short { + max-height: @overflowingMobileMaxHeight * 0.75; + } + } + & when (@variationTableOverflowingVeryShort) { + .ui.overflowing.table[class*="very short"] { + max-height: @overflowingMobileMaxHeight * 0.5; + } + } + .ui.overflowing.table { + max-height: @overflowingMobileMaxHeight; + } + & when (@variationTableOverflowingLong) { + .ui.overflowing.table.long { + max-height: @overflowingMobileMaxHeight * 2; + } + } + & when (@variationTableOverflowingVeryLong) { + .ui.overflowing.table[class*="very long"] { + max-height: @overflowingMobileMaxHeight * 3; + } + } + } } & when (@variationTableScrolling) { /*-------------- @@ -461,6 +486,90 @@ } } +& when (@variationTableOverflowing) { + /*-------------- + Overflowing + ---------------*/ + .ui.overflowing.table { + display: block; + overflow: auto; + } + @media only screen and (min-width: @tabletBreakpoint) { + & when (@variationTableOverflowingShort) { + .ui.overflowing.table.short { + max-height: @overflowingTabletMaxHeight * 0.75; + } + } + & when (@variationTableOverflowingVeryShort) { + .ui.overflowing.table[class*="very short"] { + max-height: @overflowingTabletMaxHeight * 0.5; + } + } + .ui.overflowing.table { + max-height: @overflowingTabletMaxHeight; + } + & when (@variationTableOverflowingLong) { + .ui.overflowing.table.long { + max-height: @overflowingTabletMaxHeight * 2; + } + } + & when (@variationTableOverflowingVeryLong) { + .ui.overflowing.table[class*="very long"] { + max-height: @overflowingTabletMaxHeight * 3; + } + } + } + @media only screen and (min-width: @computerBreakpoint) { + & when (@variationTableOverflowingShort) { + .ui.overflowing.table.short { + max-height: @overflowingComputerMaxHeight * 0.75; + } + } + & when (@variationTableOverflowingVeryShort) { + .ui.overflowing.table[class*="very short"] { + max-height: @overflowingComputerMaxHeight * 0.5; + } + } + .ui.overflowing.table { + max-height: @overflowingComputerMaxHeight; + } + & when (@variationTableOverflowingLong) { + .ui.overflowing.table.long { + max-height: @overflowingComputerMaxHeight * 2; + } + } + & when (@variationTableOverflowingVeryLong) { + .ui.overflowing.table[class*="very long"]{ + max-height: @overflowingComputerMaxHeight * 3; + } + } + } + @media only screen and (min-width: @widescreenMonitorBreakpoint) { + & when (@variationTableOverflowingShort) { + .ui.overflowing.table.short { + max-height: @overflowingWidescreenMaxHeight * 0.75; + } + } + & when (@variationTableOverflowingVeryShort) { + .ui.overflowing.table[class*="very short"] { + max-height: @overflowingWidescreenMaxHeight * 0.5; + } + } + .ui.overflowing.table { + max-height: @overflowingWidescreenMaxHeight; + } + & when (@variationTableOverflowingLong) { + .ui.overflowing.table.long { + max-height: @overflowingWidescreenMaxHeight * 2; + } + } + & when (@variationTableOverflowingVeryLong) { + .ui.overflowing.table[class*="very long"] { + max-height: @overflowingWidescreenMaxHeight * 3; + } + } + } +} /******************************* @@ -1638,6 +1747,150 @@ } } +& when (@variationTableStuck) { + /*-------------- + Stuck + ---------------*/ + + .ui.stuck.table:not(.inverted) { + background: @stuckBackground; + & > thead > tr { + background: @stuckHeaderBackground; + } + & > tbody > tr { + background: @stuckBackground; + } + & > tfoot > tr { + background: @stuckFooterBackground; + } + &.basic when (@variationTableBasic) { + & > thead > tr, + > tfoot > tr { + background: @stuckBackground; + } + } + } + .ui.inverted.stuck.table when (@variationTableInverted) { + & > thead > tr { + background: @invertedStuckHeaderBackground; + } + & > tbody > tr { + background: @invertedStuckBackground; + } + & > tfoot > tr { + background: @invertedStuckFooterBackground; + } + &.basic when (@variationTableBasic){ + & > thead > tr, + > tfoot > tr { + background: @invertedStuckBackground; + } + } + } + & when (@variationTableStuckHead) or (@variationTableStuckFoot) { + .ui.head.stuck.table > thead, + .ui.foot.stuck.table > tfoot { + position: -webkit-sticky; + position: sticky; + z-index: @stuckZIndex; + } + } + .ui.head.stuck.table when (@variationTableStuckHead) { + border-top: 0; + & > thead { + top: 0; + bottom: auto; + & > tr:first-child > th { + border-top: @cellBorder; + } + } + &.inverted > thead > tr:first-child > th when (@variationTableInverted) { + border-top: @invertedCellBorder; + } + } + .ui.foot.stuck.table when (@variationTableStuckFoot) { + border-bottom: 0; + & > tfoot { + top: auto; + bottom: 0; + & > tr:last-child > td, + > tr:last-child > th { + border-bottom: @cellBorder; + } + } + & when (@variationTableInverted) { + &.inverted > tfoot > tr:first-child > td, + &.inverted > tfoot > tr:first-child > th { + border-top: @invertedCellBorder; + } + } + } + + .ui.first.stuck.table when (@variationTableStuckFirst) { + border-left: 0; + & th:first-child, + td:first-child { + position: -webkit-sticky; + position: sticky; + left: 0; + border-left: @cellBorder; + background: inherit; + } + & when (@variationTableInverted) { + &.inverted th:first-child, + &.inverted td:first-child { + border-left: @invertedCellBorder; + } + } + } + + .ui.last.stuck.table when (@variationTableStuckLast) { + border-right: 0; + & th:last-child, + td:last-child { + position: -webkit-sticky; + position: sticky; + right: 0; + border-right: @cellBorder; + background: inherit; + } + & when (@variationTableInverted) { + &.inverted th:last-child, + &.inverted td:last-child { + border-right: @invertedCellBorder; + } + } + } + & when (@variationTableCelled) { + & when (@variationTableStuckFirst) { + .ui.celled.first.stuck.table th:first-child, + .ui.celled.first.stuck.table td:first-child { + border-right: @cellBorder; + } + } + & when (@variationTableStuckLast) { + .ui.celled.last.stuck.table th:last-child, + .ui.celled.last.stuck.table td:last-child { + border-left: @cellBorder; + } + } + & when (@variationTableInverted) { + & when (@variationTableStuckFirst) { + .ui.inverted.celled.first.stuck.table th:first-child, + .ui.inverted.celled.first.stuck.table td:first-child { + border-right: @invertedCellBorder; + } + } + & when (@variationTableStuckLast) { + .ui.inverted.celled.last.stuck.table th:last-child, + .ui.inverted.celled.last.stuck.table td:last-child { + border-left: @invertedCellBorder; + } + } + } + } +} + /*-------------- Sizes ---------------*/ diff --git a/src/definitions/elements/container.less b/src/definitions/elements/container.less index 627be8f9e8..1d8a76b0e5 100644 --- a/src/definitions/elements/container.less +++ b/src/definitions/elements/container.less @@ -164,5 +164,115 @@ hyphens: auto; } } +& when (@variationContainerScrolling) { + /*-------------- + Scrolling + ---------------*/ + .ui.scrolling.container { + overflow: auto; + } + @media only screen and (max-width : @largestMobileScreen) { + & when (@variationContainerScrollingShort) { + .ui.scrolling.container.short { + max-height: @scrollingMobileMaxHeight * 0.75; + } + } + & when (@variationContainerScrollingVeryShort) { + .ui.scrolling.container[class*="very short"] { + max-height: @scrollingMobileMaxHeight * 0.5; + } + } + .ui.scrolling.container { + max-height: @scrollingMobileMaxHeight; + } + & when (@variationContainerScrollingLong) { + .ui.scrolling.container.long { + max-height: @scrollingMobileMaxHeight * 2; + } + } + & when (@variationContainerScrollingVeryLong) { + .ui.scrolling.container[class*="very long"] { + max-height: @scrollingMobileMaxHeight * 3; + } + } + } + + @media only screen and (min-width: @tabletBreakpoint) { + & when (@variationContainerScrollingShort) { + .ui.scrolling.container.short { + max-height: @scrollingTabletMaxHeight * 0.75; + } + } + & when (@variationContainerScrollingVeryShort) { + .ui.scrolling.container[class*="very short"] { + max-height: @scrollingTabletMaxHeight * 0.5; + } + } + .ui.scrolling.container { + max-height: @scrollingTabletMaxHeight; + } + & when (@variationContainerScrollingLong) { + .ui.scrolling.container.long { + max-height: @scrollingTabletMaxHeight * 2; + } + } + & when (@variationContainerScrollingVeryLong) { + .ui.scrolling.container[class*="very long"] { + max-height: @scrollingTabletMaxHeight * 3; + } + } + } + @media only screen and (min-width: @computerBreakpoint) { + & when (@variationContainerScrollingShort) { + .ui.scrolling.container.short { + max-height: @scrollingComputerMaxHeight * 0.75; + } + } + & when (@variationContainerScrollingVeryShort) { + .ui.scrolling.container[class*="very short"] { + max-height: @scrollingComputerMaxHeight * 0.5; + } + } + .ui.scrolling.container { + max-height: @scrollingComputerMaxHeight; + } + & when (@variationContainerScrollingLong) { + .ui.scrolling.container.long { + max-height: @scrollingComputerMaxHeight * 2; + } + } + & when (@variationContainerScrollingVeryLong) { + .ui.scrolling.container[class*="very long"]{ + max-height: @scrollingComputerMaxHeight * 3; + } + } + } + @media only screen and (min-width: @widescreenMonitorBreakpoint) { + & when (@variationContainerScrollingShort) { + .ui.scrolling.container.short { + max-height: @scrollingWidescreenMaxHeight * 0.75; + } + } + & when (@variationContainerScrollingVeryShort) { + .ui.scrolling.container[class*="very short"] { + max-height: @scrollingWidescreenMaxHeight * 0.5; + } + } + .ui.scrolling.container { + max-height: @scrollingWidescreenMaxHeight; + } + & when (@variationContainerScrollingLong) { + .ui.scrolling.container.long { + max-height: @scrollingWidescreenMaxHeight * 2; + } + } + & when (@variationContainerScrollingVeryLong) { + .ui.scrolling.container[class*="very long"] { + max-height: @scrollingWidescreenMaxHeight * 3; + } + } + } +} + .loadUIOverrides(); diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less index 8399cb2adc..8b37ff294b 100755 --- a/src/definitions/elements/segment.less +++ b/src/definitions/elements/segment.less @@ -783,6 +783,115 @@ } } +& when (@variationSegmentScrolling) { + /*-------------- + Scrolling + ---------------*/ + .ui.scrolling.segment { + overflow: auto; + } + @media only screen and (max-width : @largestMobileScreen) { + & when (@variationSegmentScrollingShort) { + .ui.scrolling.segment.short { + max-height: @scrollingMobileMaxHeight * 0.75; + } + } + & when (@variationSegmentScrollingVeryShort) { + .ui.scrolling.segment[class*="very short"] { + max-height: @scrollingMobileMaxHeight * 0.5; + } + } + .ui.scrolling.segment { + max-height: @scrollingMobileMaxHeight; + } + & when (@variationSegmentScrollingLong) { + .ui.scrolling.segment.long { + max-height: @scrollingMobileMaxHeight * 2; + } + } + & when (@variationSegmentScrollingVeryLong) { + .ui.scrolling.segment[class*="very long"] { + max-height: @scrollingMobileMaxHeight * 3; + } + } + } + + @media only screen and (min-width: @tabletBreakpoint) { + & when (@variationSegmentScrollingShort) { + .ui.scrolling.segment.short { + max-height: @scrollingTabletMaxHeight * 0.75; + } + } + & when (@variationSegmentScrollingVeryShort) { + .ui.scrolling.segment[class*="very short"] { + max-height: @scrollingTabletMaxHeight * 0.5; + } + } + .ui.scrolling.segment { + max-height: @scrollingTabletMaxHeight; + } + & when (@variationSegmentScrollingLong) { + .ui.scrolling.segment.long { + max-height: @scrollingTabletMaxHeight * 2; + } + } + & when (@variationSegmentScrollingVeryLong) { + .ui.scrolling.segment[class*="very long"] { + max-height: @scrollingTabletMaxHeight * 3; + } + } + } + @media only screen and (min-width: @computerBreakpoint) { + & when (@variationSegmentScrollingShort) { + .ui.scrolling.segment.short { + max-height: @scrollingComputerMaxHeight * 0.75; + } + } + & when (@variationSegmentScrollingVeryShort) { + .ui.scrolling.segment[class*="very short"] { + max-height: @scrollingComputerMaxHeight * 0.5; + } + } + .ui.scrolling.segment { + max-height: @scrollingComputerMaxHeight; + } + & when (@variationSegmentScrollingLong) { + .ui.scrolling.segment.long { + max-height: @scrollingComputerMaxHeight * 2; + } + } + & when (@variationSegmentScrollingVeryLong) { + .ui.scrolling.segment[class*="very long"]{ + max-height: @scrollingComputerMaxHeight * 3; + } + } + } + @media only screen and (min-width: @widescreenMonitorBreakpoint) { + & when (@variationSegmentScrollingShort) { + .ui.scrolling.segment.short { + max-height: @scrollingWidescreenMaxHeight * 0.75; + } + } + & when (@variationSegmentScrollingVeryShort) { + .ui.scrolling.segment[class*="very short"] { + max-height: @scrollingWidescreenMaxHeight * 0.5; + } + } + .ui.scrolling.segment { + max-height: @scrollingWidescreenMaxHeight; + } + & when (@variationSegmentScrollingLong) { + .ui.scrolling.segment.long { + max-height: @scrollingWidescreenMaxHeight * 2; + } + } + & when (@variationSegmentScrollingVeryLong) { + .ui.scrolling.segment[class*="very long"] { + max-height: @scrollingWidescreenMaxHeight * 3; + } + } + } +} /*------------------- Size --------------------*/ diff --git a/src/themes/default/collections/table.variables b/src/themes/default/collections/table.variables index 822a04a590..5e2182d762 100644 --- a/src/themes/default/collections/table.variables +++ b/src/themes/default/collections/table.variables @@ -273,6 +273,29 @@ @scrollingComputerMaxBodyHeight: (@scrollingItemHeight * @scrollingComputerMaxItems); @scrollingWidescreenMaxBodyHeight: (@scrollingItemHeight * @scrollingWidescreenMaxItems); +/* Stuck */ +@stuckBackground: @background; +@stuckHeaderBackground: @offWhite; +@stuckFooterBackground: @stuckHeaderBackground; + +@invertedStuckBackground: @invertedBackground; +@invertedStuckHeaderBackground: @invertedHeaderBackgroundHex; +@invertedStuckFooterBackground: @invertedStuckHeaderBackground; + +@stuckZIndex: 800; + +@overflowingMobileMaxItems: 5; +@overflowingTabletMaxItems: 6; +@overflowingComputerMaxItems: 8; +@overflowingWidescreenMaxItems: 10; + +@overflowingItemHeight: (@cellVerticalPadding * 2) + @lineHeight; +@overflowingMobileMaxHeight: (@overflowingItemHeight * @overflowingMobileMaxItems); +@overflowingTabletMaxHeight: (@overflowingItemHeight * @overflowingTabletMaxItems); +@overflowingComputerMaxHeight: (@overflowingItemHeight * @overflowingComputerMaxItems); +@overflowingWidescreenMaxHeight: (@overflowingItemHeight * @overflowingWidescreenMaxItems); + + /* Sizes */ @small: 0.9em; @medium: 1em; diff --git a/src/themes/default/elements/container.variables b/src/themes/default/elements/container.variables index 29bddcd735..789aba67cd 100644 --- a/src/themes/default/elements/container.variables +++ b/src/themes/default/elements/container.variables @@ -47,6 +47,14 @@ @computerVeryRelaxedGridWidth: e(%("calc(%d + %d)", @computerWidth, @veryRelaxedGridGutterWidth)); @largeMonitorVeryRelaxedGridWidth: e(%("calc(%d + %d)", @largeMonitorWidth, @veryRelaxedGridGutterWidth)); +/*------------------- + Scrolling +--------------------*/ +@scrollingMobileMaxHeight: 15em; +@scrollingTabletMaxHeight: 18em; +@scrollingComputerMaxHeight: 24em; +@scrollingWidescreenMaxHeight: 30em; + /*------------------- Types --------------------*/ diff --git a/src/themes/default/elements/segment.variables b/src/themes/default/elements/segment.variables index 3d29bff8ea..144933ba35 100644 --- a/src/themes/default/elements/segment.variables +++ b/src/themes/default/elements/segment.variables @@ -153,3 +153,11 @@ ) ; @tertiaryInvertedColor: @invertedMutedTextColor; + +/*------------------- + Scrolling +--------------------*/ +@scrollingMobileMaxHeight: 15em; +@scrollingTabletMaxHeight: 18em; +@scrollingComputerMaxHeight: 24em; +@scrollingWidescreenMaxHeight: 30em; diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables index 19c384706e..2e289d683d 100644 --- a/src/themes/default/globals/variation.variables +++ b/src/themes/default/globals/variation.variables @@ -45,6 +45,11 @@ @variationContainerFluid: true; @variationContainerAligned: true; @variationContainerJustified: true; +@variationContainerScrolling: true; +@variationContainerScrollingShort: true; +@variationContainerScrollingVeryShort: true; +@variationContainerScrollingLong: true; +@variationContainerScrollingVeryLong: true; /* Divider */ @variationDividerInverted: true; @@ -220,6 +225,11 @@ @variationSegmentTertiary: true; @variationSegmentAttached: true; @variationSegmentFitted: true; +@variationSegmentScrolling: true; +@variationSegmentScrollingShort: true; +@variationSegmentScrollingVeryShort: true; +@variationSegmentScrollingLong: true; +@variationSegmentScrollingVeryLong: true; @variationSegmentSizes: @variationAllSizes; @variationSegmentColors: @variationAllColors; @@ -354,6 +364,16 @@ @variationTableScrollingVeryShort: true; @variationTableScrollingLong: true; @variationTableScrollingVeryLong: true; +@variationTableStuck: true; +@variationTableStuckHead: true; +@variationTableStuckFoot: true; +@variationTableStuckFirst: true; +@variationTableStuckLast: true; +@variationTableOverflowing: true; +@variationTableOverflowingShort: true; +@variationTableOverflowingVeryShort: true; +@variationTableOverflowingLong: true; +@variationTableOverflowingVeryLong: true; @variationTableSizes: @variationAllSizes; @variationTableColors: @variationAllColors;