From 257be28220d6dc96db061af8a8707ffd414f5bbd Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 7 May 2015 15:54:30 -0400 Subject: [PATCH] #2153, fix stacked tables from removing sortable/warning/error styles. Add selectable table variation #1803 --- src/definitions/collections/table.less | 135 +++++++----------- .../default/collections/table.variables | 10 +- 2 files changed, 61 insertions(+), 84 deletions(-) diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less index da27f20d0..ec5cb92b3 100755 --- a/src/definitions/collections/table.less +++ b/src/definitions/collections/table.less @@ -172,6 +172,12 @@ .ui.table:not(.unstackable) tfoot { display: @responsiveFooterDisplay; } + .ui.table:not(.unstackable) tr { + padding-top: @responsiveRowVerticalPadding; + padding-bottom: @responsiveRowVerticalPadding; + box-shadow: @responsiveRowBoxShadow; + } + .ui.table:not(.unstackable) tr > th, .ui.table:not(.unstackable) tr > td { background: none; @@ -182,34 +188,12 @@ .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; - } - } @@ -314,16 +298,11 @@ .ui.table td.positive { box-shadow: @positiveBoxShadow; } -.ui.table tr.positive td, +.ui.table tr.positive, .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 @@ -333,16 +312,11 @@ .ui.table td.negative { box-shadow: @negativeBoxShadow; } -.ui.table tr.negative td, +.ui.table tr.negative, .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 @@ -352,17 +326,11 @@ .ui.table td.error { box-shadow: @errorBoxShadow; } -.ui.table tr.error td, +.ui.table tr.error, .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 ---------------*/ @@ -371,16 +339,11 @@ .ui.table td.warning { box-shadow: @warningBoxShadow; } -.ui.table tr.warning td, +.ui.table tr.warning, .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 @@ -390,16 +353,12 @@ .ui.table td.active { box-shadow: @activeBoxShadow; } -.ui.table tr.active td, +.ui.table tr.active, .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; -} + /*-------------- @@ -408,7 +367,7 @@ .ui.table tr.disabled td, .ui.table tr td.disabled, -.ui.table tr.disabled:hover td, +.ui.table tr.disabled:hover, .ui.table tr:hover td.disabled { pointer-events: none; color: @disabledTextColor; @@ -443,6 +402,11 @@ .ui[class*="tablet stackable"].table tfoot { display: @responsiveFooterDisplay; } + .ui[class*="tablet stackable"].table tr { + padding-top: @responsiveRowVerticalPadding; + padding-bottom: @responsiveRowVerticalPadding; + box-shadow: @responsiveRowBoxShadow; + } .ui[class*="tablet stackable"].table tr > th, .ui[class*="tablet stackable"].table tr > td { background: none; @@ -450,37 +414,11 @@ 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; - } - } /*-------------- @@ -527,6 +465,43 @@ white-space: nowrap; } +/*-------------- + Hoverable +---------------*/ + +.ui.selectable.table tr:hover { + background: @selectableBackground !important; + color: @selectableTextColor !important; +} + +/* Other States */ +.ui.selectable.table tr.error:hover, +.ui.selectable.table tr:hover td.error { + background: @errorBackgroundHover !important; + color: @errorColorHover !important; +} +.ui.selectable.table tr.warning:hover, +.ui.selectable.table tr:hover td.warning { + background: @warningBackgroundHover !important; + color: @warningColorHover !important; +} +.ui.selectable.table tr.active:hover, +.ui.selectable.table tr:hover td.active { + background: @activeBackgroundColor !important; + color: @activeColor !important; +} +.ui.selectable.table tr.positive:hover, +.ui.selectable.table tr:hover td.positive { + background: @positiveBackgroundHover !important; + color: @positiveColorHover !important; +} +.ui.selectable.table tr.negative:hover, +.ui.selectable.table tr:hover td.negative { + background: @negativeBackgroundHover !important; + color: @negativeColorHover !important; +} + + /*-------------- Attached diff --git a/src/themes/default/collections/table.variables b/src/themes/default/collections/table.variables index e306de2ae..5c18e1861 100644 --- a/src/themes/default/collections/table.variables +++ b/src/themes/default/collections/table.variables @@ -27,19 +27,19 @@ ---------------*/ /* Table Row */ -@rowBorder: 1px solid @borderColor; +@rowBorder: 1px solid @internalBorderColor; /* Table Cell */ @cellVerticalPadding: @relativeMini; @cellHorizontalPadding: @relativeMini; @cellVerticalAlign: inherit; @cellTextAlign: inherit; -@cellBorder: 1px solid @borderColor; +@cellBorder: 1px solid @internalBorderColor; /* Table Header */ @headerBorder: 1px solid @borderColor; @headerDivider: none; -@headerBackground: @darkWhite; +@headerBackground: @offWhite; @headerAlign: inherit; @headerVerticalAlign: inherit; @headerColor: @textColor; @@ -72,7 +72,6 @@ @responsiveCellVerticalPadding: 0.25em; @responsiveCellHorizontalPadding: 0.75em; @responsiveCellBoxShadow: none !important; -@responsiveStatusColor: transparent; /*------------------- Types @@ -151,6 +150,9 @@ @stripedBackground: rgba(0, 0, 50, 0.03); @invertedStripedBackground: rgba(255, 255, 255, 0.06); +@selectableBackground: @subtleTransparentBlack; +@selectableTextColor: @selectedTextColor; + /* Sortable */ @sortableBackground: ''; @sortableColor: @textColor;