fomantic-ui
Version:
Fomantic empowers designers and developers by creating a shared vocabulary for UI.
1,528 lines (1,445 loc) • 66.1 kB
text/less
/*!
* # Fomantic-UI - Table
* https://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* https://opensource.org/licenses/MIT
*
*/
/*******************************
Theme
*******************************/
@type: "collection";
@element: "table";
@import (multiple) "../../theme.config";
/*******************************
Table
*******************************/
/* Prototype */
.ui.table {
width: 100%;
background: @background;
margin: @margin;
border: @border;
box-shadow: @boxShadow;
border-radius: @borderRadius;
text-align: @textAlign;
vertical-align: @verticalAlign;
color: @color;
border-collapse: @borderCollapse;
border-spacing: @borderSpacing;
}
.ui.table:first-child {
margin-top: 0;
}
.ui.table:last-child {
margin-bottom: 0;
}
.ui.table > thead,
.ui.table > tbody {
text-align: inherit;
vertical-align: inherit;
}
/*******************************
Parts
*******************************/
/* Table Content */
.ui.table th,
.ui.table td {
transition: @transition;
}
/* Rowspan helper class */
.ui.table th.rowspanned,
.ui.table td.rowspanned {
display: none;
}
/* Headers */
.ui.table > thead {
box-shadow: @headerBoxShadow;
}
.ui.table > thead > tr > th {
cursor: auto;
background: @headerBackground;
text-align: @headerAlign;
color: @headerColor;
padding: @headerVerticalPadding @headerHorizontalPadding;
vertical-align: @headerVerticalAlign;
font-style: @headerFontStyle;
font-weight: @headerFontWeight;
text-transform: @headerTextTransform;
border-bottom: @headerBorder;
border-left: @headerDivider;
}
.ui.table > thead > tr > th:first-child {
border-left: none;
}
.ui.table > thead > tr:first-child > th:first-child {
border-radius: @borderRadius 0 0 0;
}
.ui.table > thead > tr:first-child > th:last-child {
border-radius: 0 @borderRadius 0 0;
}
.ui.table > thead > tr:first-child > th:only-child {
border-radius: @borderRadius @borderRadius 0 0;
}
/* Footer */
.ui.table > tfoot {
box-shadow: @footerBoxShadow;
}
.ui.table > tfoot > tr > th,
.ui.table > tfoot > tr > td {
cursor: auto;
border-top: @footerBorder;
background: @footerBackground;
text-align: @footerAlign;
color: @footerColor;
padding: @footerVerticalPadding @footerHorizontalPadding;
vertical-align: @footerVerticalAlign;
font-style: @footerFontStyle;
font-weight: @footerFontWeight;
text-transform: @footerTextTransform;
}
.ui.table > tfoot > tr > th:first-child,
.ui.table > tfoot > tr > td:first-child {
border-left: none;
}
.ui.table > tfoot > tr:first-child > th:first-child,
.ui.table > tfoot > tr:first-child > td:first-child {
border-radius: 0 0 0 @borderRadius;
}
.ui.table > tfoot > tr:first-child > th:last-child,
.ui.table > tfoot > tr:first-child > td:last-child {
border-radius: 0 0 @borderRadius 0;
}
.ui.table > tfoot > tr:first-child > th:only-child,
.ui.table > tfoot > tr:first-child > td:only-child {
border-radius: 0 0 @borderRadius @borderRadius;
}
/* Table Row */
.ui.table > tr > td,
.ui.table > tbody > tr > td {
border-top: @rowBorder;
}
.ui.table > tr:first-child > td,
.ui.table > tbody > tr:first-child > td {
border-top: none;
}
/* Repeated tbody */
.ui.table > tbody + tbody tr:first-child > td {
border-top: @rowBorder;
}
/* Table Cells */
.ui.table > tbody > tr > td,
.ui.table > tr > td {
padding: @cellVerticalPadding @cellHorizontalPadding;
text-align: @cellTextAlign;
}
/* Icons */
.ui.table > i.icon {
vertical-align: @iconVerticalAlign;
}
.ui.table > i.icon:only-child {
margin: 0;
}
/* Table Segment */
.ui.table.segment {
padding: 0;
}
.ui.table.segment::after {
display: none;
}
.ui.table.segment.stacked::after {
display: block;
}
/* Responsive */
@media only screen and (max-width: @largestMobileScreen) {
.ui.table:not(.unstackable) {
width: 100%;
padding: 0;
}
.ui.table:not(.unstackable) > thead,
.ui.table:not(.unstackable) > thead > tr,
.ui.table:not(.unstackable) > tfoot,
.ui.table:not(.unstackable) > tfoot > tr,
.ui.table:not(.unstackable) > tbody,
.ui.table:not(.unstackable) > tr,
.ui.table:not(.unstackable) > tbody > tr,
.ui.table:not(.unstackable) > tr > th:not(.rowspanned),
.ui.table:not(.unstackable) > thead > tr > th:not(.rowspanned),
.ui.table:not(.unstackable) > tbody > tr > th:not(.rowspanned),
.ui.table:not(.unstackable) > tfoot > tr > th:not(.rowspanned),
.ui.table:not(.unstackable) > tr > td:not(.rowspanned),
.ui.table:not(.unstackable) > tbody > tr > td:not(.rowspanned),
.ui.table:not(.unstackable) > tfoot > tr > td:not(.rowspanned) {
display: block !important;
width: auto !important;
}
.ui.table:not(.unstackable) > thead {
display: @responsiveHeaderDisplay;
}
.ui.table:not(.unstackable) > tfoot {
display: @responsiveFooterDisplay;
}
.ui.ui.ui.ui.table:not(.unstackable) > tr,
.ui.ui.ui.ui.table:not(.unstackable) > thead > tr,
.ui.ui.ui.ui.table:not(.unstackable) > tbody > tr,
.ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr {
padding-top: @responsiveRowVerticalPadding;
padding-bottom: @responsiveRowVerticalPadding;
box-shadow: @responsiveRowBoxShadow;
}
.ui.ui.ui.ui.table:not(.unstackable) > tr > th,
.ui.ui.ui.ui.table:not(.unstackable) > thead > tr > th,
.ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > th,
.ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > th,
.ui.ui.ui.ui.table:not(.unstackable) > tr > td,
.ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > td,
.ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > td {
background: none;
border: none;
padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding;
box-shadow: @responsiveCellBoxShadow;
}
.ui.table:not(.unstackable) > tr > th:first-child,
.ui.table:not(.unstackable) > thead > tr > th:first-child,
.ui.table:not(.unstackable) > tbody > tr > th:first-child,
.ui.table:not(.unstackable) > tfoot > tr > th:first-child,
.ui.table:not(.unstackable) > tr > td:first-child,
.ui.table:not(.unstackable) > tbody > tr > td:first-child,
.ui.table:not(.unstackable) > tfoot > tr > td:first-child {
font-weight: @responsiveCellHeaderFontWeight;
}
/* Definition Table */
.ui.definition.table:not(.unstackable) > thead > tr > th:first-child {
box-shadow: none !important;
}
& when (@variationTableMarked) and not (@variationTableColors = false) {
each(@variationTableColors, {
@color: @value;
@c: @colors[@@color][color];
@l: @colors[@@color][light];
.ui.ui.ui.ui.table:not(.unstackable) tr[class*="@{color} marked"] {
&.left {
box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @c inset;
}
&.right {
box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @c inset;
}
}
& when (@variationTableInverted) {
.ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="@{color} marked"] {
&.left {
box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @l inset;
}
&.right {
box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @l inset;
}
}
}
});
}
& when (@variationTableScrolling) {
& 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;
}
}
}
}
& 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) {
/* --------------
Scrolling
--------------- */
@media only screen and (min-width: @tabletBreakpoint) {
& 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;
}
}
}
}
.ui.scrolling.table > thead,
.ui.scrolling.table > tfoot,
.ui.scrolling.table > tbody {
display: block;
overflow-y: scroll;
overscroll-behavior: @overscrollBehavior;
scrollbar-width: thin; /* Firefox */
& > tr {
display: table;
table-layout: fixed;
width: 100%;
}
}
/* Camouflage scrollbars, we need them only to gain the same width as tbody */
.ui.scrolling.table > thead {
background: @headerBackground;
color: @headerBackground;
border-radius: @borderRadius @borderRadius 0 0;
}
.ui.scrolling.table > tfoot {
background: @footerBackground;
color: @footerBackground;
border-radius: 0 0 @borderRadius @borderRadius;
}
& when (@variationTableInverted) {
.ui.inverted.scrolling.table > thead {
background: @invertedHeaderBackground;
color: @invertedHeaderBackground;
}
.ui.inverted.scrolling.table > tfoot {
background: @invertedFooterBackground;
color: @invertedFooterBackground;
}
}
.ui.scrolling.table > thead::-webkit-scrollbar-track,
.ui.scrolling.table > tfoot::-webkit-scrollbar-track {
background: inherit;
border-radius: @borderRadius;
}
/* Firefox & IE */
.ui.scrolling.table > thead,
.ui.scrolling.table > tfoot {
scrollbar-color: currentColor currentColor;
& when (@supportIE) {
scrollbar-face-color: currentColor;
scrollbar-shadow-color: currentColor;
scrollbar-track-color: currentColor;
scrollbar-arrow-color: currentColor;
}
}
& when (@supportIE) {
/* IE scrollbar color needs hex values */
@media all and (-ms-high-contrast: none) {
.ui.scrolling.table > thead {
color: @headerBackgroundHex;
}
.ui.scrolling.table > tfoot {
color: @footerBackgroundHex;
}
& when (@variationTableInverted) {
.ui.inverted.scrolling.table > thead {
color: @invertedHeaderBackgroundHex;
}
.ui.inverted.scrolling.table > tfoot {
color: @invertedFooterBackgroundHex;
}
}
}
}
& when (@variationTableInverted) {
.ui.inverted.scrolling.table > tbody::-webkit-scrollbar-track {
background: @trackInvertedBackground;
}
.ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb {
background: @thumbInvertedBackground;
}
.ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb:window-inactive {
background: @thumbInvertedInactiveBackground;
}
.ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb:hover {
background: @thumbInvertedHoverBackground;
}
.ui.inverted.scrolling.table > tbody {
& when (@supportIE) {
/* IE11 */
scrollbar-face-color: @thumbInvertedBackgroundHex;
scrollbar-shadow-color: @thumbInvertedBackgroundHex;
scrollbar-track-color: @trackInvertedBackgroundHex;
scrollbar-arrow-color: @trackInvertedBackgroundHex;
}
/* firefox: first color thumb, second track */
scrollbar-color: @thumbInvertedBackground @trackInvertedBackground;
}
}
& when (@variationTableResizable) {
.ui.resizable.scrolling.table > tbody {
resize: @resizableDirection;
max-height: none;
}
}
}
& when (@variationTableOverflowing) {
/* --------------
Overflowing
--------------- */
.ui.overflowing.table {
display: block;
overflow: auto;
overscroll-behavior: @overscrollBehavior;
}
@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;
}
}
}
}
/*******************************
Coupling
*******************************/
/* UI Image */
.ui.table .collapsing .image,
.ui.table .collapsing .image img {
max-width: none;
}
/*******************************
Types
*******************************/
/* --------------
Complex
--------------- */
& when (@variationTableStructured) {
.ui.structured.table {
border-collapse: collapse;
}
.ui.structured.table > thead > tr > th {
border-left: @headerDivider;
border-right: @headerDivider;
}
& when (@variationTableSortable) {
.ui.structured.sortable.table > thead > tr > th {
border-left: @sortableBorder;
border-right: @sortableBorder;
}
}
& when (@variationTableBasic) {
.ui.structured.basic.table > tr > th,
.ui.structured.basic.table > thead > tr > th,
.ui.structured.basic.table > tbody > tr > th,
.ui.structured.basic.table > tfoot > tr > th {
border-left: @basicTableHeaderDivider;
border-right: @basicTableHeaderDivider;
}
}
& when (@variationTableCelled) {
.ui.structured.celled.table > tr > th,
.ui.structured.celled.table > thead > tr > th,
.ui.structured.celled.table > tbody > tr > th,
.ui.structured.celled.table > tfoot > tr > th,
.ui.structured.celled.table > tr > td,
.ui.structured.celled.table > tbody > tr > td,
.ui.structured.celled.table > tfoot > tr > td {
border-left: @cellBorder;
border-right: @cellBorder;
}
}
}
& when (@variationTableDefinition) {
/* --------------
Definition
--------------- */
.ui.definition.table > thead:not(.full-width) > tr > th:first-child {
pointer-events: none;
background: @definitionHeaderBackground;
font-weight: @definitionHeaderFontWeight;
color: @definitionHeaderColor;
box-shadow: -@coloredBorderSizeCover -@coloredBorderSize 0 @coloredBorderSizeCover @definitionPageBackground;
// https://github.com/fomantic/Fomantic-UI/pull/884
// stylelint-disable-next-line property-no-vendor-prefix
-moz-transform: scale(1);
}
.ui.definition.table > thead:not(.full-width) > tr > th:first-child:not(:empty) {
pointer-events: auto;
}
.ui.definition.table > tfoot:not(.full-width) > tr > th:first-child {
pointer-events: none;
background: @definitionFooterBackground;
font-weight: @definitionFooterFontWeight;
color: @definitionFooterColor;
box-shadow: -@coloredBorderSizeCover @coloredBorderSize 0 @coloredBorderSizeCover @definitionPageBackground;
// https://github.com/fomantic/Fomantic-UI/pull/884
// stylelint-disable-next-line property-no-vendor-prefix
-moz-transform: scale(1);
}
/* Highlight Defining Column */
.ui.definition.table > tr > td:first-child:not(.ignored),
.ui.definition.table > tbody > tr > td:first-child:not(.ignored),
.ui.definition.table > tfoot > tr > td:first-child:not(.ignored),
.ui.definition.table tr td.definition {
background: @definitionColumnBackground;
font-weight: @definitionColumnFontWeight;
color: @definitionColumnColor;
text-transform: @definitionColumnTextTransform;
box-shadow: @definitionColumnBoxShadow;
text-align: @definitionColumnTextAlign;
font-size: @definitionColumnFontSize;
padding-left: @definitionColumnHorizontalPadding;
padding-right: @definitionColumnHorizontalPadding;
}
/* Fix 2nd Column */
.ui.definition.table > thead:not(.full-width) > tr > th:nth-child(2) {
border-left: @borderWidth solid @borderColor;
}
.ui.definition.table > tfoot:not(.full-width) > tr > th:nth-child(2),
.ui.definition.table > tfoot:not(.full-width) > tr > td:nth-child(2) {
border-left: @borderWidth solid @borderColor;
}
.ui.definition.table > tr > td:nth-child(2),
.ui.definition.table > tbody > tr > td:nth-child(2) {
border-left: @borderWidth solid @borderColor;
}
}
/*******************************
States
*******************************/
& when (@variationTablePositive) {
/* --------------
Positive
--------------- */
.ui.ui.ui.ui.table tr.positive,
.ui.ui.table td.positive {
box-shadow: @positiveBoxShadow;
background: @positiveBackgroundColor;
color: @positiveColor;
}
& when (@variationTableInverted) {
.ui.ui.ui.ui.inverted.table tr.positive,
.ui.ui.inverted.table td.positive {
background: @invertedPositiveBackgroundColor;
color: @invertedPositiveColor;
}
}
}
& when (@variationTableNegative) {
/* --------------
Negative
--------------- */
.ui.ui.ui.ui.table tr.negative,
.ui.ui.table td.negative {
box-shadow: @negativeBoxShadow;
background: @negativeBackgroundColor;
color: @negativeColor;
}
& when (@variationTableInverted) {
.ui.ui.ui.ui.inverted.table tr.negative,
.ui.ui.inverted.table td.negative {
background: @invertedNegativeBackgroundColor;
color: @invertedNegativeColor;
}
}
}
& when (@variationTableError) {
/* --------------
Error
--------------- */
.ui.ui.ui.ui.table tr.error,
.ui.ui.table td.error {
box-shadow: @errorBoxShadow;
background: @errorBackgroundColor;
color: @errorColor;
}
& when (@variationTableInverted) {
.ui.ui.ui.ui.inverted.table tr.error,
.ui.ui.inverted.table td.error {
background: @invertedErrorBackgroundColor;
color: @invertedErrorColor;
}
}
}
& when (@variationTableWarning) {
/* --------------
Warning
--------------- */
.ui.ui.ui.ui.table tr.warning,
.ui.ui.table td.warning {
box-shadow: @warningBoxShadow;
background: @warningBackgroundColor;
color: @warningColor;
}
& when (@variationTableInverted) {
.ui.ui.ui.ui.inverted.table tr.warning,
.ui.ui.inverted.table td.warning {
background: @invertedWarningBackgroundColor;
color: @invertedWarningColor;
}
}
}
& when (@variationTableActive) {
/* --------------
Active
--------------- */
.ui.ui.ui.ui.table tr.active,
.ui.ui.table td.active {
box-shadow: @activeBoxShadow;
background: @activeBackgroundColor;
color: @activeColor;
}
& when (@variationTableInverted) {
.ui.ui.ui.ui.inverted.table tr.active,
.ui.ui.inverted.table td.active {
background: @invertedActiveBackgroundColor;
color: @invertedActiveColor;
}
}
}
& when (@variationTableDisabled) {
/* --------------
Disabled
--------------- */
.ui.ui.ui.table tr.disabled td,
.ui.ui.ui.table tr td.disabled,
.ui.table tr.disabled:hover,
.ui.table tr:hover td.disabled {
pointer-events: none;
color: @disabledTextColor;
}
}
/*******************************
Variations
*******************************/
& when (@variationTableStackable) {
/* --------------
Stackable
--------------- */
@media only screen and (max-width: @largestTabletScreen) {
.ui[class*="tablet stackable"].table,
.ui[class*="tablet stackable"].table > thead,
.ui[class*="tablet stackable"].table > thead > tr,
.ui[class*="tablet stackable"].table > tfoot,
.ui[class*="tablet stackable"].table > tfoot > tr,
.ui[class*="tablet stackable"].table > tbody,
.ui[class*="tablet stackable"].table > tbody > tr,
.ui[class*="tablet stackable"].table > tr,
.ui[class*="tablet stackable"].table > thead > tr > th:not(.rowspanned),
.ui[class*="tablet stackable"].table > tbody > tr > th:not(.rowspanned),
.ui[class*="tablet stackable"].table > tfoot > tr > th:not(.rowspanned),
.ui[class*="tablet stackable"].table > tr > th:not(.rowspanned),
.ui[class*="tablet stackable"].table > tbody > tr > td:not(.rowspanned),
.ui[class*="tablet stackable"].table > tfoot > tr > td:not(.rowspanned),
.ui[class*="tablet stackable"].table > tr > td:not(.rowspanned) {
display: block !important;
width: 100% !important;
}
.ui[class*="tablet stackable"].table {
padding: 0;
}
.ui[class*="tablet stackable"].table > thead {
display: @responsiveHeaderDisplay;
}
.ui[class*="tablet stackable"].table > tfoot {
display: @responsiveFooterDisplay;
}
.ui.ui.ui.ui[class*="tablet stackable"].table > thead > tr,
.ui.ui.ui.ui[class*="tablet stackable"].table > tbody > tr,
.ui.ui.ui.ui[class*="tablet stackable"].table > tfoot > tr,
.ui.ui.ui.ui[class*="tablet stackable"].table > tr {
padding-top: @responsiveRowVerticalPadding;
padding-bottom: @responsiveRowVerticalPadding;
box-shadow: @responsiveRowBoxShadow;
}
.ui[class*="tablet stackable"].table > thead > tr > th,
.ui[class*="tablet stackable"].table > tbody > tr > th,
.ui[class*="tablet stackable"].table > tfoot > tr > th,
.ui[class*="tablet stackable"].table > tr > th,
.ui[class*="tablet stackable"].table > tbody > tr > td,
.ui[class*="tablet stackable"].table > tfoot > tr > td,
.ui[class*="tablet stackable"].table > tr > td {
background: none;
border: none !important;
padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding;
box-shadow: @responsiveCellBoxShadow;
}
& when (@variationTableDefinition) {
/* Definition Table */
.ui.definition[class*="tablet stackable"].table > thead > tr > th:first-child {
box-shadow: none !important;
}
}
}
& when (@variationTableMarked) and not (@variationTableColors = false) {
each(@variationTableColors, {
@color: @value;
@c: @colors[@@color][color];
@l: @colors[@@color][light];
.ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="@{color} marked"] {
&.left {
box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @c inset;
}
&.right {
box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @c inset;
}
}
& when (@variationTableInverted) {
.ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="@{color} marked"] {
&.left {
box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @l inset;
}
&.right {
box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @l inset;
}
}
}
});
}
}
& when (@variationTableAligned) {
/* --------------
Text Alignment
--------------- */
.ui.table[class*="left aligned"],
.ui.table [class*="left aligned"] {
text-align: left;
}
.ui.table[class*="center aligned"],
.ui.table [class*="center aligned"] {
text-align: center;
}
.ui.table[class*="right aligned"],
.ui.table [class*="right aligned"] {
text-align: right;
}
/* ------------------
Vertical Alignment
------------------ */
.ui.table[class*="top aligned"],
.ui.table [class*="top aligned"] {
vertical-align: top;
}
.ui.table[class*="middle aligned"],
.ui.table [class*="middle aligned"] {
vertical-align: middle;
}
.ui.table[class*="bottom aligned"],
.ui.table [class*="bottom aligned"] {
vertical-align: bottom;
}
}
& when (@variationTableCollapsing) {
/* --------------
Collapsing
--------------- */
.ui.table th.collapsing,
.ui.table td.collapsing {
width: 1px;
white-space: nowrap;
}
}
& when (@variationTableFixed) {
/* --------------
Fixed
--------------- */
.ui.fixed.table {
table-layout: fixed;
}
.ui.fixed.table th,
.ui.fixed.table td {
overflow: hidden;
text-overflow: ellipsis;
}
}
& when (@variationTableSelectable) {
/* --------------
Selectable
--------------- */
.ui.ui.selectable.table > tbody > tr:hover,
.ui.table tbody tr td.selectable:hover {
background: @selectableBackground;
color: @selectableTextColor;
}
& when (@variationTableInverted) {
.ui.ui.selectable.inverted.table > tbody > tr:hover,
.ui.inverted.table tbody tr td.selectable:hover {
background: @selectableInvertedBackground;
color: @selectableInvertedTextColor;
}
}
/* Selectable Cell Link */
.ui.table tbody tr td.selectable {
padding: 0;
}
.ui.table tbody tr td.selectable > a:not(.ui) {
display: block;
color: inherit;
}
.ui.table:not(.compact) tbody tr td.selectable > a:not(.ui) {
padding: @cellVerticalPadding @cellHorizontalPadding;
}
.ui.table > tr > td.selectable,
.ui.table > tbody > tr > td.selectable,
.ui.selectable.table > tbody > tr,
.ui.selectable.table > tr {
cursor: pointer;
}
& when (@variationTableError) {
/* Other States */
.ui.ui.selectable.table tr.error:hover,
.ui.table tr td.selectable.error:hover,
.ui.selectable.table tr:hover td.error {
background: @errorBackgroundHover;
color: @errorColorHover;
}
}
& when (@variationTableWarning) {
.ui.ui.selectable.table tr.warning:hover,
.ui.table tr td.selectable.warning:hover,
.ui.selectable.table tr:hover td.warning {
background: @warningBackgroundHover;
color: @warningColorHover;
}
}
& when (@variationTableActive) {
.ui.ui.selectable.table tr.active:hover,
.ui.table tr td.selectable.active:hover,
.ui.selectable.table tr:hover td.active {
background: @activeBackgroundColor;
color: @activeColor;
}
}
& when (@variationTablePositive) {
.ui.ui.selectable.table tr.positive:hover,
.ui.table tr td.selectable.positive:hover,
.ui.selectable.table tr:hover td.positive {
background: @positiveBackgroundHover;
color: @positiveColorHover;
}
}
& when (@variationTableNegative) {
.ui.ui.selectable.table tr.negative:hover,
.ui.table tr td.selectable.negative:hover,
.ui.selectable.table tr:hover td.negative {
background: @negativeBackgroundHover;
color: @negativeColorHover;
}
}
}
& when (@variationTableAttached) {
/* -------------------
Attached
-------------------- */
/* Middle */
.ui.attached.table {
top: 0;
bottom: 0;
border-radius: 0;
margin: 0 @attachedHorizontalOffset;
width: @attachedWidth;
max-width: @attachedWidth;
box-shadow: @attachedBoxShadow;
border: @attachedBorder;
}
.ui.attached + .ui.attached.table:not(.top) {
border-top: none;
}
/* Top */
.ui[class*="top attached"].table {
bottom: 0;
margin-bottom: 0;
top: @attachedTopOffset;
margin-top: @verticalMargin;
border-radius: @borderRadius @borderRadius 0 0;
}
.ui.table[class*="top attached"]:first-child {
margin-top: 0;
}
/* Bottom */
.ui[class*="bottom attached"].table {
bottom: 0;
margin-top: 0;
top: @attachedBottomOffset;
margin-bottom: @verticalMargin;
box-shadow: @attachedBottomBoxShadow;
border-radius: 0 0 @borderRadius @borderRadius;
}
.ui[class*="bottom attached"].table:last-child {
margin-bottom: 0;
}
}
& when (@variationTableStriped) {
/* --------------
Striped
--------------- */
/* Table Striping */
.ui.striped.table > tr:nth-child(2n),
.ui.striped.table > tbody > tr:nth-child(2n) {
background-color: @stripedBackground;
}
& when (@variationTableInverted) {
/* Stripes */
.ui.inverted.striped.table > tr:nth-child(2n),
.ui.inverted.striped.table > tbody > tr:nth-child(2n) {
background-color: @invertedStripedBackground;
}
}
& when (@variationTableSelectable) {
/* Allow striped active hover */
.ui.striped.selectable.selectable.selectable.table tbody tr.active:hover {
background: @activeBackgroundHover;
color: @activeColorHover;
}
}
}
/* --------------
Single Line
--------------- */
.ui.table[class*="single line"],
.ui.table [class*="single line"] {
white-space: nowrap;
}
/* -------------------
Colors
-------------------- */
& when not (@variationTableColors = false) {
each(@variationTableColors, {
@color: @value;
@c: @colors[@@color][color];
@t: @colors[@@color][text];
@ht: @colors[@@color][hoverText];
@l: @colors[@@color][light];
@lh: @colors[@@color][lightHover];
@r: @colors[@@color][ribbon];
@b: @colors[@@color][bright];
@bh: @colors[@@color][brightHover];
@isDark: @colors[@@color][isDark];
@isVeryDark: @colors[@@color][isVeryDark];
.ui.@{color}.table {
border-top: @coloredBorderSize solid @c;
}
& when (@variationTableInverted) {
.ui.inverted.@{color}.table {
background: @c;
color: @white;
}
}
/* Same color for background and color to camouflage the scrollbar */
& when (@variationTableScrolling) {
.ui.scrolling.table > thead.@{color},
.ui.scrolling.table > tfoot.@{color} {
& when (@isDark) {
background: @l;
color: @l;
}
& when not (@isDark) {
background: @b;
color: @b;
}
& > tr > th,
> tr > td {
background: inherit;
& when (@isVeryDark) {
color: @white;
}
& when not (@isVeryDark) {
color: @t;
}
}
}
& when (@variationTableInverted) {
.ui.inverted.scrolling.table > thead.@{color},
.ui.inverted.scrolling.table > tfoot.@{color} {
background: @c;
color: @c;
& > tr > th,
> tr > td {
background: inherit;
color: @white;
}
}
}
}
.ui.ui.ui.ui.table tr[class*="@{color} colored"],
.ui.ui.table th[class*="@{color} colored"],
.ui.ui.table td[class*="@{color} colored"],
.ui.ui.ui.ui.table tr.@{color}:not(.marked),
.ui.ui.table th.@{color}:not(.marked),
.ui.ui.table td.@{color}:not(.marked) {
& when (@stateMarkerWidth > 0) {
box-shadow: @stateMarkerWidth 0 0 @r inset;
}
& when (@isDark) {
background: @l;
}
& when not (@isDark) {
background: @b;
}
& when (@isVeryDark) {
color: @white;
}
& when not (@isVeryDark) {
color: @t;
}
}
.ui.table > thead > tr[class*="@{color} colored"] > th,
.ui.table > tfoot > tr[class*="@{color} colored"] > th,
.ui.table > tfoot > tr[class*="@{color} colored"] > td,
.ui.table > thead > tr.@{color}:not(.marked) > th,
.ui.table > tfoot > tr.@{color}:not(.marked) > th,
.ui.table > tfoot > tr.@{color}:not(.marked) > td {
background: inherit;
& when (@isVeryDark) {
color: @white;
}
& when not (@isVeryDark) {
color: @t;
}
}
& when (@variationTableInverted) {
.ui.ui.ui.ui.inverted.table tr[class*="@{color} colored"],
.ui.ui.inverted.table th[class*="@{color} colored"],
.ui.ui.inverted.table td[class*="@{color} colored"],
.ui.ui.ui.ui.inverted.table tr.@{color}:not(.marked),
.ui.ui.inverted.table th.@{color}:not(.marked),
.ui.ui.inverted.table td.@{color}:not(.marked) {
background: @c;
color: @white;
}
.ui.inverted.table > thead > tr[class*="@{color} colored"] > th,
.ui.inverted.table > tfoot > tr[class*="@{color} colored"] > th,
.ui.inverted.table > tfoot > tr[class*="@{color} colored"] > td,
.ui.inverted.table > thead > tr.@{color}:not(.marked) > th,
.ui.inverted.table > tfoot > tr.@{color}:not(.marked) > th,
.ui.inverted.table > tfoot > tr.@{color}:not(.marked) > td {
background: inherit;
color: @white;
}
}
& when (@variationTableSelectable) {
.ui.ui.selectable.table tr[class*="@{color} colored"]:hover,
.ui.table tr td.selectable[class*="@{color} colored"]:hover,
.ui.selectable.table tr:hover td[class*="@{color} colored"],
.ui.ui.selectable.table tr.@{color}:not(.marked):hover,
.ui.table tr td.selectable.@{color}:not(.marked):hover,
.ui.selectable.table tr:hover td.@{color}:not(.marked) {
& when (@isDark) {
background: @lh;
}
& when not (@isDark) {
background: @bh;
}
& when (@isVeryDark) {
color: @white;
}
& when not (@isVeryDark) {
color: @ht;
}
}
& when (@variationTableInverted) {
.ui.ui.inverted.selectable.table tr[class*="@{color} colored"]:hover,
.ui.inverted.table tr td.selectable[class*="@{color} colored"]:hover,
.ui.inverted.selectable.table tr:hover td[class*="@{color} colored"],
.ui.ui.inverted.selectable.table tr.@{color}:not(.marked):hover,
.ui.inverted.table tr td.selectable.@{color}:not(.marked):hover,
.ui.inverted.selectable.table tr:hover td.@{color}:not(.marked) {
& when (@isDark) {
background: @bh;
}
& when not (@isDark) {
background: @lh;
}
& when (@isVeryDark) {
color: @ht;
}
& when not (@isVeryDark) {
color: @white;
}
}
}
}
& when (@variationTableMarked) {
.ui.table td[class*="@{color} marked"],
.ui.table tr[class*="@{color} marked"] {
&.left {
box-shadow: @coloredBorderSize 0 0 0 @c inset;
}
&.right {
box-shadow: -@coloredBorderSize 0 0 0 @c inset;
}
}
& when (@variationTableInverted) {
.ui.inverted.table td[class*="@{color} marked"],
.ui.inverted.table tr[class*="@{color} marked"] {
&.left {
box-shadow: @coloredBorderSize 0 0 0 @l inset;
}
&.right {
box-shadow: -@coloredBorderSize 0 0 0 @l inset;
}
}
}
}
});
}
& when (@variationTableEqualWidth) {
/* --------------
Column Count
--------------- */
/* Grid Based */
.ui.one.column.table td {
width: @oneColumn;
}
.ui.two.column.table td {
width: @twoColumn;
}
.ui.three.column.table td {
width: @threeColumn;
}
.ui.four.column.table td {
width: @fourColumn;
}
.ui.five.column.table td {
width: @fiveColumn;
}
.ui.six.column.table td {
width: @sixColumn;
}
.ui.seven.column.table td {
width: @sevenColumn;
}
.ui.eight.column.table td {
width: @eightColumn;
}
.ui.nine.column.table td {
width: @nineColumn;
}
.ui.ten.column.table td {
width: @tenColumn;
}
.ui.eleven.column.table td {
width: @elevenColumn;
}
.ui.twelve.column.table td {
width: @twelveColumn;
}
.ui.thirteen.column.table td {
width: @thirteenColumn;
}
.ui.fourteen.column.table td {
width: @fourteenColumn;
}
.ui.fifteen.column.table td {
width: @fifteenColumn;
}
.ui.sixteen.column.table td {
width: @sixteenColumn;
}
}
& when (@variationTableWide) {
/* Column Width */
.ui.table th.one.wide,
.ui.table td.one.wide {
width: @oneWide;
}
.ui.table th.two.wide,
.ui.table td.two.wide {
width: @twoWide;
}
.ui.table th.three.wide,
.ui.table td.three.wide {
width: @threeWide;
}
.ui.table th.four.wide,
.ui.table td.four.wide {
width: @fourWide;
}
.ui.table th.five.wide,
.ui.table td.five.wide {
width: @fiveWide;
}
.ui.table th.six.wide,
.ui.table td.six.wide {
width: @sixWide;
}
.ui.table th.seven.wide,
.ui.table td.seven.wide {
width: @sevenWide;
}
.ui.table th.eight.wide,
.ui.table td.eight.wide {
width: @eightWide;
}
.ui.table th.nine.wide,
.ui.table td.nine.wide {
width: @nineWide;
}
.ui.table th.ten.wide,
.ui.table td.ten.wide {
width: @tenWide;
}
.ui.table th.eleven.wide,
.ui.table td.eleven.wide {
width: @elevenWide;
}
.ui.table th.twelve.wide,
.ui.table td.twelve.wide {
width: @twelveWide;
}
.ui.table th.thirteen.wide,
.ui.table td.thirteen.wide {
width: @thirteenWide;
}
.ui.table th.fourteen.wide,
.ui.table td.fourteen.wide {
width: @fourteenWide;
}
.ui.table th.fifteen.wide,
.ui.table td.fifteen.wide {
width: @fifteenWide;
}
.ui.table th.sixteen.wide,
.ui.table td.sixteen.wide {
width: @sixteenWide;
}
}
& when (@variationTableSortable) {
/* --------------
Sortable
--------------- */
.ui.sortable.table > thead > tr > th {
cursor: pointer;
white-space: nowrap;
color: @sortableColor;
}
& when (@variationTableCelled) {
.ui.celled.sortable.table > thead > tr > th:not(:first-child) {
border-left: @sortableBorder;
}
}
.ui.sortable.table thead th.sorted,
.ui.sortable.table thead th.sorted:hover {
user-select: none;
}
.ui.sortable.table > thead > tr > th::after {
display: none;
font-style: normal;
font-weight: @normal;
text-decoration: inherit;