pip-webui
Version:
HTML5 UI for LOB applications
181 lines (150 loc) • 6.69 kB
text/less
// @file CSS styles for table component
// @copyright Digital Living Software Corp. 2014-2015
@color-active-tables: #f5f5f5;
@color-active-tables-hover: #e8e8e8;
@color-info-tables: #d9edf7;
@color-info-tables-hover: #c4e3f3;
@color-danger-tables: #f2dede;
@color-danger-tables-hover: #ebcccc;
@color-warning-tables: #fcf8e3;
@color-warning-tables-hover: #faf2cc;
@color-success-tables: #dff0d8;
@color-success-tables-hover: #d0e9c6;
.table-condensed {
& > thead > tr > th, & > tbody > tr > th, & > tfoot > tr > th, & > thead > tr > td, & > tbody > tr > td, & > tfoot > tr > td {
padding: 5px
}
}
.table-bordered {
& > thead > tr > th, & > tbody > tr > th, & > tfoot > tr > th, & > thead > tr > td, & > tbody > tr > td, & > tfoot > tr > td {
border: @divider-border;
}
& > thead > tr > th, & > thead > tr > td {
border-width: 1px
}
}
.table-striped {
& > tbody > tr:nth-child(odd) > td, & > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9
}
}
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
border-spacing: 0;
md-toolbar {
width: 280px;
border-radius: 2px;
}
.table {
background-color: #fff;
border-spacing: 0;
}
& > thead > tr > th, & > tbody > tr > th, & > tfoot > tr > th, & > thead > tr > td, & > tbody > tr > td, & > tfoot > tr > td {
padding: 8px;
line-height: 1.5em;
vertical-align: top;
border: @divider-border;
}
& > thead > tr > th {
vertical-align: bottom;
border: @divider-border;
}
& > caption + thead > tr:first-child > th, & > colgroup + thead > tr:first-child > th, & > thead:first-child > tr:first-child > th,
& > caption + thead > tr:first-child > td, & > colgroup + thead > tr:first-child > td, & > thead:first-child > tr:first-child > td {
border: @divider-border;
}
& > tbody + tbody {
border: @divider-border;
}
& > thead > tr > td.active, & > tbody > tr > td.active, & > tfoot > tr > td.active, & > thead > tr > th.active, & > tbody > tr > th.active,
& > tfoot > tr > th.active, & > thead > tr.active > td, & > tbody > tr.active > td, & > tfoot > tr.active > td, & > thead > tr.active > th,
& > tbody > tr.active > th, & > tfoot > tr.active > th {
background-color: @color-active-tables
}
& > thead > tr > td.success, & > tbody > tr > td.success, & > tfoot > tr > td.success, & > thead > tr > th.success, & > tbody > tr > th.success,
& > tfoot > tr > th.success, & > thead > tr.success > td, & > tbody > tr.success > td, & > tfoot > tr.success > td, & > thead > tr.success > th,
& > tbody > tr.success > th, & > tfoot > tr.success > th {
background-color: @color-success-tables
}
& > thead > tr > td.info, & > tbody > tr > td.info, & > tfoot > tr > td.info, & > thead > tr > th.info, & > tbody > tr > th.info,
& > tfoot > tr > th.info, & > thead > tr.info > td, & > tbody > tr.info > td, & > tfoot > tr.info > td, & > thead > tr.info > th,
& > tbody > tr.info > th, & > tfoot > tr.info > th {
background-color: @color-info-tables
}
& > thead > tr > td.warning, & > tbody > tr > td.warning, & > tfoot > tr > td.warning, & > thead > tr > th.warning, & > tbody > tr > th.warning,
& > tfoot > tr > th.warning, & > thead > tr.warning > td, & > tbody > tr.warning > td, & > tfoot > tr.warning > td, & > thead > tr.warning > th,
& > tbody > tr.warning > th, & > tfoot > tr.warning > th {
background-color: @color-warning-tables
}
& > thead > tr > td.danger, & > tbody > tr > td.danger, & > tfoot > tr > td.danger, & > thead > tr > th.danger, & > tbody > tr > th.danger,
& > tfoot > tr > th.danger, & > thead > tr.danger > td, & > tbody > tr.danger > td, & > tfoot > tr.danger > td, & > thead > tr.danger > th,
& > tbody > tr.danger > th, & > tfoot > tr.danger > th {
background-color: @color-danger-tables
}
}
.table-hover {
& > tbody > tr:hover > td, & > tbody > tr:hover > th {
background-color: #f5f5f5
}
& > tbody > tr > td.active:hover, & > tbody > tr > th.active:hover, & > tbody > tr.active:hover > td,
& > tbody > tr:hover > .active, & > tbody > tr.active:hover > th {
background-color: @color-active-tables-hover
}
& > tbody > tr > td.success:hover, & > tbody > tr > th.success:hover, & > tbody > tr.success:hover > td,
& > tbody > tr:hover > .success, & > tbody > tr.success:hover > th {
background-color: @color-success-tables-hover
}
& > tbody > tr > td.info:hover, & > tbody > tr > th.info:hover, & > tbody > tr.info:hover > td,
& > tbody > tr:hover > .info, & > tbody > tr.info:hover > th {
background-color: @color-info-tables-hover
}
& > tbody > tr > td.warning:hover, & > tbody > tr > th.warning:hover, & > tbody > tr.warning:hover > td,
& > tbody > tr:hover > .info, & > tbody > tr.warning:hover > th {
background-color: @color-warning-tables-hover
}
& > tbody > tr > td.danger:hover, & > tbody > tr > th.danger:hover, & > tbody > tr.danger:hover > td,
& > tbody > tr:hover > .danger, & > tbody > tr.danger:hover > th {
background-color: @color-warning-tables-hover
}
}
table col[class*=col-] {
position: static;
display: table-column;
float: none
}
table td[class*=col-], table th[class*=col-] {
position: static;
display: table-cell;
float: none
}
@media screen and (max-width: 768px) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
.scroll-x;
border: @divider-border;
& > .table {
margin-bottom: 0;
& > thead > tr > th, & > tbody > tr > th, & > tfoot > tr > th, & > thead > tr > td, & > tbody > tr > td, & > tfoot > tr > td {
white-space: nowrap
}
}
& > .table-bordered {
border: @divider-border;
& > thead > tr > th:first-child, & > tbody > tr > th:first-child, & > tfoot > tr > th:first-child,
& > thead > tr > td:first-child, & > tbody > tr > td:first-child, & > tfoot > tr > td:first-child {
border: @divider-border;
}
& > thead > tr > th:last-child, & > tbody > tr > th:last-child, & > tfoot > tr > th:last-child,
& > thead > tr > td:last-child, & > tbody > tr > td:last-child, & > tfoot > tr > td:last-child {
border: @divider-border;
}
& > tbody > tr:last-child > th, & > tfoot > tr:last-child > th,
& > tbody > tr:last-child > td, & > tfoot > tr:last-child > td {
border: @divider-border;
}
}
}
}