/*

* # Semantic - Table
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributor
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/

/*******************************

Theme

*******************************/

@type : ‘collection’; @element : ‘table’;

@import ‘../../theme.config’;

/*******************************

Table

*******************************/

/* Prototype */ .ui.table {

width: 100%;
background: @background;
margin: @margin;
border: @border;
box-shadow: @boxShadow;
border-radius: @borderRadius;
color: @color;
border-collapse: @borderCollapse;
border-spacing: @borderSpacing;

}

.ui.table:first-child {

margin-top: 0em;

} .ui.table:last-child {

margin-bottom: 0em;

}

/*******************************

Parts

*******************************/

/* Table Content */ .ui.table th, .ui.table td {

transition: @transition;

}

/* Headers */ .ui.table thead {

box-shadow: @headerBoxShadow;

} .ui.table thead 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 0em 0em 0em;

} .ui.table thead tr:first-child > th:last-child {

border-radius: 0em @borderRadius 0em 0em;

} .ui.table thead tr:first-child > th:only-child {

border-radius: @borderRadius @borderRadius 0em 0em;

}

/* Footer */ .ui.table tfoot {

box-shadow: @footerBoxShadow;

} .ui.table tfoot th {

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 {

border-left: none;

} .ui.table tfoot tr:first-child > th:first-child {

border-radius: 0em 0em 0em @borderRadius;

} .ui.table tfoot tr:first-child > th:last-child {

border-radius: 0em 0em @borderRadius 0em;

} .ui.table tfoot tr:first-child > th:only-child {

border-radius: 0em 0em @borderRadius @borderRadius;

}

/* Table Row */ .ui.table tr td {

border-top: @rowBorder;

} .ui.table tr:first-child td {

border-top: none;

}

/* Table Cells */ .ui.table td {

padding: @cellVerticalPadding @cellHorizontalPadding;
text-align: @cellTextAlign;
vertical-align: @cellVerticalAlign;

}

/* Icons */ .ui.table > .icon {

vertical-align: @iconVerticalAlign;

} .ui.table > .icon:only-child {

margin: 0em;

}

/* Table Segment */ .ui.table.segment {

padding: 0em;

} .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),
.ui.table:not(.unstackable) tbody,
.ui.table:not(.unstackable) tr,
.ui.table:not(.unstackable) tr > th,
.ui.table:not(.unstackable) tr > td  {
  display: block !important;
  width: 100% !important;
  display: block !important;
}

.ui.table:not(.unstackable) {
  padding: 0em;
}
.ui.table:not(.unstackable) thead {
  display: @responsiveHeaderDisplay;
}
.ui.table:not(.unstackable) tfoot {
  display: @responsiveFooterDisplay;
}
.ui.table:not(.unstackable) tr > th,
.ui.table:not(.unstackable) tr > td {
  background: none;
  border: none !important;
  padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding;
  box-shadow: @responsiveCellBoxShadow;
}
.ui.table:not(.unstackable) th:first-child,
.ui.table:not(.unstackable) td:first-child {
  font-weight: bold;
  padding-top: @responsiveRowVerticalPadding;
}
.ui.table:not(.unstackable) th:last-child,
.ui.table:not(.unstackable) td:last-child {
  box-shadow: @responsiveRowBoxShadow;
  padding-bottom: @responsiveRowVerticalPadding;
}

/* Clear BG Colors */
.ui.table:not(.unstackable) tr > td.warning,
.ui.table:not(.unstackable) tr > td.error,
.ui.table:not(.unstackable) tr > td.active,
.ui.table:not(.unstackable) tr > td.positive,
.ui.table:not(.unstackable) tr > td.negative {
  background-color: @responsiveStatusColor !important;
}

/* Definition Table */
.ui.definition.table:not(.unstackable) thead th:first-child {
  box-shadow: none !important;
}
.ui.definition.table:not(.unstackable) tr td:first-child {
  padding-bottom: @responsiveRowVerticalPadding;
}
.ui.definition.table:not(.unstackable) tr td:nth-child(n+2) {
  padding-top: @responsiveRowVerticalPadding;
}

}

/*******************************

Coupling

*******************************/

/* UI Image */ .ui.table th .image, .ui.table th .image img, .ui.table td .image, .ui.table td .image img {

max-width: none;

}

/*******************************

Types

*******************************/

/*————–

Complex

—————*/

.ui.structured.table {

border-collapse: collapse;

} .ui.structured.table thead th {

border-left: @headerDivider;
border-right: @headerDivider;

} .ui.structured.sortable.table thead th {

border-left: @sortableBorder;
border-right: @sortableBorder;

} .ui.structured.basic.table th {

border-left: @basicTableHeaderDivider;
border-right: @basicTableHeaderDivider;

} .ui.structured.celled.table tr th, .ui.structured.celled.table tr td {

border-left: @cellBorder;
border-right: @cellBorder;

}

/*————–

Definition

—————*/

.ui.definition.table thead:not(.full-width) th:first-child {

pointer-events: none;
background: @definitionHeaderBackground;
font-weight: @definitionHeaderFontWeight;
color: @definitionHeaderColor;
box-shadow: -@borderWidth -@borderWidth 0px @borderWidth @definitionPageBackground;

}

.ui.definition.table tfoot:not(.full-width) th:first-child {

pointer-events: none;
background: @definitionFooterBackground;
font-weight: @definitionFooterColor;
color: @definitionFooterFontWeight;
box-shadow: @borderWidth @borderWidth 0px @borderWidth @definitionPageBackground;

}

/* Remove Border */ .ui.celled.definition.table thead:not(.full-width) th:first-child {

box-shadow: 0px -@borderWidth 0px @borderWidth @definitionPageBackground;

} .ui.celled.definition.table tfoot:not(.full-width) th:first-child {

box-shadow: 0px @borderWidth 0px @borderWidth @definitionPageBackground;

}

/* Highlight Defining Column */ .ui.definition.table tr td:first-child {

background: @definitionColumnBackground;
font-weight: @definitionColumnFontWeight;
color: @definitionColumnColor;

}

/* Fix 2nd Column */ .ui.definition.table thead:not(.full-width) th:nth-child(2) {

border-left: @borderWidth solid @borderColor;

} .ui.definition.table tfoot:not(.full-width) th:nth-child(2) {

border-left: @borderWidth solid @borderColor;

} .ui.definition.table td:nth-child(2) {

border-left: @borderWidth solid @borderColor;

}

/*******************************

States

*******************************/

/*————–

Positive

—————*/

.ui.table tr.positive, .ui.table td.positive {

box-shadow: @positiveBoxShadow;

} .ui.table tr.positive td, .ui.table td.positive {

background: @positiveBackgroundColor !important;
color: @positiveColor !important;

} .ui.celled.table tr.positive:hover td, .ui.celled.table tr:hover td.positive {

background: @positiveBackgroundHover !important;
color: @positiveColorHover !important;

}

/*————–

Negative

—————*/

.ui.table tr.negative, .ui.table td.negative {

box-shadow: @negativeBoxShadow;

} .ui.table tr.negative td, .ui.table td.negative {

background: @negativeBackgroundColor !important;
color: @negativeColor !important;

} .ui.celled.table tr.negative:hover td, .ui.celled.table tr:hover td.negative {

background: @negativeBackgroundHover !important;
color: @negativeColorHover !important;

}

/*————–

Error

—————*/

.ui.table tr.error, .ui.table td.error {

box-shadow: @errorBoxShadow;

} .ui.table tr.error td, .ui.table td.error {

background: @errorBackgroundColor !important;
color: @errorColor !important;

} .ui.celled.table tr.error:hover td, .ui.celled.table tr:hover td.error {

background: @errorBackgroundHover !important;
color: @errorColorHover !important;

}

/*————–

Warning

—————*/

.ui.table tr.warning, .ui.table td.warning {

box-shadow: @warningBoxShadow;

} .ui.table tr.warning td, .ui.table td.warning {

background: @warningBackgroundColor !important;
color: @warningColor !important;

} .ui.celled.table tr.warning:hover td, .ui.celled.table tr:hover td.warning {

background: @warningBackgroundHover !important;
color: @warningColorHover !important;

}

/*————–

Active

—————*/

.ui.table tr.active, .ui.table td.active {

box-shadow: @activeBoxShadow;

} .ui.table tr.active td, .ui.table td.active {

background: @activeBackgroundColor !important;
color: @activeColor !important;

} .ui.celled.table tr.active:hover td, .ui.celled.table tr:hover td.active {

background: @activeBackgroundColor !important;
color: @activeColor !important;

}

/*————–

Disabled

—————*/

.ui.table tr.disabled td, .ui.table tr td.disabled, .ui.table tr.disabled:hover td, .ui.table tr:hover td.disabled {

pointer-events: none;
color: @disabledTextColor;

}

/*******************************

Variations

*******************************/

/*————–

Stackable

—————*/

@media only screen and (max-width : @largestTabletScreen) {

.ui[class*="tablet stackable"].table,
.ui[class*="tablet stackable"].table tbody,
.ui[class*="tablet stackable"].table tr,
.ui[class*="tablet stackable"].table tr > th,
.ui[class*="tablet stackable"].table tr > td  {
  display: block !important;
  width: 100% !important;
  display: block !important;
}

.ui[class*="tablet stackable"].table {
  padding: 0em;
}
.ui[class*="tablet stackable"].table thead {
  display: @responsiveHeaderDisplay;
}
.ui[class*="tablet stackable"].table tfoot {
  display: @responsiveFooterDisplay;
}
.ui[class*="tablet stackable"].table tr > th,
.ui[class*="tablet stackable"].table tr > td {
  background: none;
  border: none !important;
  padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding;
  box-shadow: @responsiveCellBoxShadow;
}
.ui[class*="tablet stackable"].table th:first-child,
.ui[class*="tablet stackable"].table td:first-child {
  font-weight: bold;
  padding-top: @responsiveRowVerticalPadding;
}
.ui[class*="tablet stackable"].table th:last-child,
.ui[class*="tablet stackable"].table td:last-child {
  box-shadow: @responsiveRowBoxShadow;
  padding-bottom: @responsiveRowVerticalPadding;
}

/* Clear BG Colors */
.ui[class*="tablet stackable"].table tr > td.warning,
.ui[class*="tablet stackable"].table tr > td.error,
.ui[class*="tablet stackable"].table tr > td.active,
.ui[class*="tablet stackable"].table tr > td.positive,
.ui[class*="tablet stackable"].table tr > td.negative {
  background-color: @responsiveStatusColor !important;
}

/* Definition Table */
.ui.definition[class*="tablet stackable"].table thead th:first-child {
  box-shadow: none !important;
}
.ui.definition[class*="tablet stackable"].table tr td:first-child {
  padding-bottom: @responsiveRowVerticalPadding;
}
.ui.definition[class*="tablet stackable"].table tr td:nth-child(n+2) {
  padding-top: @responsiveRowVerticalPadding;
}

}

/*————–

Aligned

—————*/

.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;

}

/*————–

Collapsing

—————*/

.ui.table th.collapsing, .ui.table td.collapsing {

width: 1px;
white-space: nowrap;

}

/*————–

Attached

—————*/

/* All */ .ui.attached.table {

width: @attachedTableWidth;
margin: 0em @attachedHorizontalOffset;
border-radius: 0px;
box-shadow: @attachedBoxShadow;

}

/* Top */ .ui[class*=“top attached”].table {

margin-top: @margin;
border-radius: @borderRadius @borderRadius 0em 0em;

} .ui.table[class*=“top attached”]:first-child {

margin-top: 0em;

}

/* Bottom */ .ui.table[class*=“bottom attached”] {

margin-top: 0em;
margin-bottom: @margin;
border-radius: 0em 0em @borderRadius @borderRadius;

} .ui.table[class*=“bottom attached”]:last-child {

margin-bottom: 0em;

}

/*————–

Striped

—————*/

/* Table Striping */ .ui.striped.table > tr:nth-child(2n), .ui.striped.table tbody tr:nth-child(2n) {

background-color: @stripedBackground;

}

/* Stripes */ .ui.inverted.striped.table > tr:nth-child(2n), .ui.inverted.striped.table tbody tr:nth-child(2n) {

background-color: @invertedStripedBackground;

}

/*——————-

Colors

——————–*/

.ui.black.table {

border-top: @coloredBorderSize solid @black;

} .ui.blue.table {

border-top: @coloredBorderSize solid @blue;

} .ui.green.table {

border-top: @coloredBorderSize solid @green;

} .ui.orange.table {

border-top: @coloredBorderSize solid @orange;

} .ui.pink.table {

border-top: @coloredBorderSize solid @pink;

} .ui.purple.table {

border-top: @coloredBorderSize solid @purple;

} .ui.red.table {

border-top: @coloredBorderSize solid @red;

} .ui.teal.table {

border-top: @coloredBorderSize solid @teal;

} .ui.yellow.table {

border-top: @coloredBorderSize solid @yellow;

}

/*——————-

Inverted Colors

——————–*/

.ui.inverted.table, .ui.inverted.black.table {

background-color: @black !important;
color: @white !important;

} .ui.inverted.blue.table {

background-color: @blue !important;
color: @white !important;

} .ui.inverted.green.table {

background-color: @green !important;
color: @white !important;

} .ui.inverted.orange.table {

background-color: @orange !important;
color: @white !important;

} .ui.inverted.pink.table {

background-color: @pink !important;
color: @white !important;

} .ui.inverted.purple.table {

background-color: @purple !important;
color: @white !important;

} .ui.inverted.red.table {

background-color: @red !important;
color: @white !important;

} .ui.inverted.teal.table {

background-color: @teal !important;
color: @white !important;

} .ui.inverted.yellow.table {

background-color: @yellow !important;
color: @white !important;

}

/*————–

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;

}

/* 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;

}

/*————–

Sortable

—————*/

.ui.sortable.table thead th {

cursor: pointer;
white-space: nowrap;
border-left: @sortableBorder;
color: @sortableColor;

} .ui.sortable.table thead th:first-child {

border-left: none;

} .ui.sortable.table thead th.sorted, .ui.sortable.table thead th.sorted:hover {

user-select: none;

}

.ui.sortable.table thead th:after {

display: inline-block;
content: '';
width: @sortableIconWidth;
height: 1em;
opacity: @sortableIconOpacity;

margin: 0em 0em 0em @sortableIconDistance;

font-family: @sortableIconFont;
font-style: normal;
font-weight: normal;
text-decoration: inherit;

} .ui.sortable.table thead th.ascending:after {

content: @sortableIconAscending;

} .ui.sortable.table thead th.descending:after {

content: @sortableIconDescending;

}

/* Hover */ .ui.sortable.table th.disabled:hover {

cursor: auto;
color: @sortableDisabledColor;

} .ui.sortable.table thead th:hover {

background: @sortableHoverBackground;
color: @sortableHoverColor;

}

/* Sorted */ .ui.sortable.table thead th.sorted {

background: @sortableActiveBackground;
color: @sortableActiveColor;

}

/* Sorted Hover */ .ui.sortable.table thead th.sorted:hover {

background: @sortableActiveHoverBackground;
color: @sortableActiveHoverColor;

}

/* Inverted */ .ui.inverted.sortable.table thead th.sorted {

background: @sortableInvertedActiveBackground;
color: @sortableInvertedActiveColor;

} .ui.inverted.sortable.table thead th:hover {

background: @sortableInvertedHoverBackground;
color: @sortableInvertedHoverColor;

} .ui.inverted.sortable.table thead th {

border-left-color: @sortableInvertedBorderColor;
border-right-color: @sortableInvertedBorderColor;

}

/*————–

Inverted

—————*/

/* Text Color */ .ui.inverted.table {

background: @invertedBackground;
color: @invertedCellColor;
border: @invertedBorder;

} .ui.inverted.table th {

background-color: @invertedHeaderBackground;
border-color: @invertedCellBorderColor !important;
color: @invertedHeaderColor;

} .ui.inverted.table tr td {

border-color: @invertedCellBorderColor !important;

}

.ui.inverted.table tr.disabled td, .ui.inverted.table tr td.disabled, .ui.inverted.table tr.disabled:hover td, .ui.inverted.table tr:hover td.disabled {

pointer-events: none;
color: @invertedDisabledTextColor;

}

/* Definition */ .ui.inverted.definition.table tfoot:not(.full-width) th:first-child, .ui.inverted.definition.table thead:not(.full-width) th:first-child {

background: @definitionPageBackground;

} .ui.inverted.definition.table tr td:first-child {

background: @invertedDefinitionColumnBackground;
color: @invertedDefinitionColumnColor;

}

/*————–

Collapsing

—————*/

.ui.collapsing.table {

width: auto;

}

/*————–

Basic

—————*/

.ui.basic.table {

background: @basicTableBackground;
border: @basicTableBorder;
box-shadow: @basicBoxShadow;

} .ui.basic.table thead, .ui.basic.table tfoot {

box-shadow: none;

} .ui.basic.table th {

background: @basicTableHeaderBackground;
border-left: @basicTableHeaderDivider;

} .ui.basic.table tbody tr {

border-bottom: @basicTableCellBorder;

} .ui.basic.table td {

background: @basicTableCellBackground;

} .ui.basic.striped.table tbody tr:nth-child(2n) {

background-color: @basicTableStripedBackground !important;

}

/* Very Basic */ .ui[class*=“very basic”].table {

border: none;

} .ui[class*=“very basic”].table:not(.sortable):not(.striped) th, .ui[class*=“very basic”].table:not(.sortable):not(.striped) td {

padding: @basicTableCellVerticalPadding @basicTableCellHorizontalPadding;

} .ui[class*=“very basic”].table:not(.sortable):not(.striped) th:first-child, .ui[class*=“very basic”].table:not(.sortable):not(.striped) td:first-child {

padding-left: 0em;

} .ui[class*=“very basic”].table:not(.sortable):not(.striped) th:last-child, .ui[class*=“very basic”].table:not(.sortable):not(.striped) td:last-child {

padding-right: 0em;

} .ui[class*=“very basic”].table:not(.sortable):not(.striped) thead tr:first-child th {

padding-top: 0em;

}

/*————–

Celled

—————*/

.ui.celled.table tr th, .ui.celled.table tr td {

border-left: @cellBorder;

} .ui.celled.table tr th:first-child, .ui.celled.table tr td:first-child {

border-left: none;

}

/*————–

Padded

—————*/

.ui.padded.table th {

padding-left: @paddedHorizontalPadding;
padding-right: @paddedHorizontalPadding;

} .ui.padded.table th, .ui.padded.table td {

padding: @paddedVerticalPadding @paddedHorizontalPadding;

}

/* Very */ .ui[class*=“very padded”].table th {

padding-left: @veryPaddedHorizontalPadding;
padding-right: @veryPaddedHorizontalPadding;

} .ui[class*=“very padded”].table td {

padding: @veryPaddedVerticalPadding @veryPaddedHorizontalPadding;

}

/*————–

Compact

—————*/

.ui.compact.table th {

padding-left: @compactHorizontalPadding;
padding-right: @compactHorizontalPadding;

} .ui.compact.table td {

padding: @compactVerticalPadding @compactHorizontalPadding;

}

/* Very */ .ui[class*=“very compact”].table th {

padding-left: @veryCompactHorizontalPadding;
padding-right: @veryCompactHorizontalPadding;

} .ui[class*=“very compact”].table td {

padding: @veryCompactVerticalPadding @veryCompactHorizontalPadding;

}

/*————–

Sizes

—————*/

/* Small */ .ui.small.table {

font-size: @small;

}

/* Standard */ .ui.table {

font-size: @medium;

}

/* Large */ .ui.large.table {

font-size: @large;

}

.loadUIOverrides();