Browse Source

Adds responsive styles to table

beta
jlukic 11 years ago
parent
commit
5fe1240d5d
  1. 67
      src/collections/table.less

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

Loading…
Cancel
Save