diff --git a/src/collections/table.less b/src/collections/table.less index c39738055..1a7b6f13c 100755 --- a/src/collections/table.less +++ b/src/collections/table.less @@ -100,6 +100,53 @@ display: block; } + +/* Responsive */ + +@media only screen and (max-width : 768px) { + .ui.table { + display: block; + padding: 0em; + } + .ui.table thead, + .ui.table tfoot { + display: none; + } + .ui.table tbody { + display: block; + } + .ui.table tr { + display: block; + } + + .ui.table tr > td { + width: 100% !important; + display: block; + border: none !important; + padding: 0.25em 0.75em; + box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important; + } + .ui.table td:first-child { + font-weight: bold; + padding-top: 1em; + } + .ui.table td:last-child { + box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; + padding-bottom: 1em; + } + + /* Clear BG Colors */ + .ui.table tr > td.warning, + .ui.table tr > td.error, + .ui.table tr > td.active, + .ui.table tr > td.positive, + .ui.table tr > td.negative { + background-color: transparent !important; + } +} + + + /******************************* States *******************************/ @@ -168,8 +215,8 @@ .ui.table tr.negative:hover td, .ui.table td:hover.negative, .ui.table th:hover.negative { - background-color: #F2E8E8 !important; - color: #CD2929 !important; + background-color: #F2E8E8; + color: #CD2929; } /*-------------- @@ -185,16 +232,16 @@ .ui.table tr.error td, .ui.table td.error, .ui.table th.error { - background-color: #F9F4F4 !important; - color: #CD2929 !important; + background-color: #F9F4F4; + color: #CD2929; } .ui.celled.table tr.error:hover td, .ui.celled.table tr:hover td.error, .ui.table tr.error:hover td, .ui.table td:hover.error, .ui.table th:hover.error { - background-color: #F2E8E8 !important; - color: #CD2929 !important; + background-color: #F2E8E8; + color: #CD2929; } /*-------------- @@ -211,15 +258,15 @@ .ui.table td.warning, .ui.table th.warning { background-color: #FBF6E9; - color: #7D6C00 !important; + color: #7D6C00; } .ui.celled.table tr.warning:hover td, .ui.celled.table tr:hover td.warning, .ui.table tr.warning:hover td, .ui.table td:hover.warning, .ui.table th:hover.warning { - background-color: #F3EDDC !important; - color: #7D6C00 !important; + background-color: #F3EDDC; + color: #7D6C00; } @@ -236,7 +283,7 @@ .ui.table tr.active td, .ui.table tr td.active { - background-color: #E0E0E0 !important; + background-color: #E0E0E0; color: rgba(50, 50, 50, 0.9); /* border-color: rgba(0, 0, 0, 0.15) !important; */ }