diff --git a/server/documents/collections/table.html.eco b/server/documents/collections/table.html.eco index 6520a7fb8..c40dcf50d 100755 --- a/server/documents/collections/table.html.eco +++ b/server/documents/collections/table.html.eco @@ -5,7 +5,14 @@ css : 'table' title : 'Table' description : 'Tables display collections of data grouped into rows' type : 'UI Collection' + +element : 'table' +elementType : 'collection' + +themes : ['Default'] --- + + <%- @partial('header') %> diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less index eceb0fcd0..1217b34dc 100755 --- a/src/definitions/collections/table.less +++ b/src/definitions/collections/table.less @@ -46,10 +46,12 @@ } /* Headers */ +.ui.table thead { + box-shadow: @headerBoxShadow; +} .ui.table thead th { - border-bottom: @headerBorder; cursor: auto; - background-color: @headerBackground; + background: @headerBackground; text-align: @headerAlign; color: @headerColor; padding: @headerVerticalPadding @headerHorizontalPadding; @@ -57,19 +59,25 @@ font-style: @headerFontStyle; font-weight: @headerFontWeight; text-transform: @headerTextTransform; + border-bottom: @headerBorder; + border-left: @headerDivider; } .ui.table thead th:first-child { border-radius: @borderRadius 0em 0em 0em; + border-left: none; } .ui.table thead th:last-child { border-radius: 0em @borderRadius 0em 0em; } /* Footer */ +.ui.table tfoot { + box-shadow: @footerBoxShadow; +} .ui.table tfoot th { cursor: auto; border-top: @footerBorder; - background-color: @footerBackground; + background: @footerBackground; text-align: @footerAlign; color: @footerColor; padding: @footerVerticalPadding @footerHorizontalPadding; @@ -602,6 +610,7 @@ } .ui.inverted.table th { background-color: @invertedHeaderBackground; + border-color: @invertedCellBorderColor; color: @invertedHeaderColor; } .ui.inverted.table tr td { diff --git a/src/themes/packages/default/collections/table.variables b/src/themes/packages/default/collections/table.variables index 19844515b..e6567c598 100644 --- a/src/themes/packages/default/collections/table.variables +++ b/src/themes/packages/default/collections/table.variables @@ -30,8 +30,9 @@ @cellBorder: 1px solid @solidBorderColor; /* Table Header */ -@headerBorder: 1px solid rgba(0, 0, 0, 0.1); -@headerBackground: transparent; +@headerBorder: 1px solid @solidBorderColor; +@headerDivider: 1px solid @solidBorderColor; +@headerBackground: linear-gradient(transparent, rgba(0, 0, 0, 0.03)); @headerAlign: left; @headerVerticalAlign: middle; @headerColor: @textColor; @@ -40,14 +41,17 @@ @headerFontStyle: none; @headerFontWeight: bold; @headerTextTransform: none; +@headerBoxShadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05); /* Table Footer */ -@footerBorder: 1px solid rgba(0, 0, 0, 0.1); +@footerBoxShadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.05); +@footerBorder: 1px solid @solidBorderColor; +@footerDivider: none; @footerBackground: rgba(0, 0, 0, 0.05); @footerAlign: left; @footerVerticalAlign: middle; @footerColor: @textColor; -@footerVerticalPadding: 1em; +@footerVerticalPadding: @cellVerticalPadding; @footerHorizontalPadding: @cellHorizontalPadding; @footerFontStyle: italic; @footerFontWeight: normal; @@ -132,12 +136,9 @@ @sortableIconFont: 'Icons'; @sortableIconAscending: '\f0d7'; @sortableIconDescending: '\f0d8'; - @sortableDisabledColor: @disabledTextColor; - @sortableHoverBackground: @strongTransparentBlack; @sortableHoverColor: @selectedTextColor; - @sortableInvertedHoverBackground: @strongTransparentWhite; @sortableInvertedHoverColor: @invertedSelectedTextColor; @@ -148,10 +149,8 @@ /* Inverted */ @invertedBackground: #333333; @invertedBorder: none; - @invertedCellBorderColor: rgba(0, 0, 0, 0.2); @invertedCellColor: @invertedTextColor; - @invertedHeaderBackground: rgba(0, 0, 0, 0.15); @invertedHeaderColor: rgba(255, 255, 255, 0.9); @@ -171,9 +170,8 @@ @basicTableCellHorizontalPadding: 0em; @basicTableStripedBackground: transparent; - /* Padded */ -@paddedVerticalPadding: 0.8em; +@paddedVerticalPadding: 1em; @paddedHorizontalPadding: 1em; @compactVerticalPadding: 0.5em;