8ba1a5e06a
Horizon tables had many hardcoded padding and colors in them, which made them not theme-ready. This patch vets all the old table styles for their current usage (if any) and reimplemented the necessary rules to inherit from the theme. There were a number of styles that were obviously not being used any longer. These rules were removed. There were also many rules that were very difficult to determine their lineage, as the scss lacks much needed commentary on why some styles exist (if they are working around specific browser issues, or usability glitches, etc). A few examples of some of these removed styles include: * th.narrow * td.select * th span.required:after This patch does not include refactor of the dropdowns or inline edit. Immediate Improvements: * Table Actions are now all consistent heights * The cursor is a pointer ONLY on sortable rows now * The column sort indicator is now an icon font, therefore high def * table_header height no longer hardcoded, can grow with theme * Slow waiting cursor style using global selector * removed * Many dead styles were removed!! * Hovering on status_unknown rows now keeps proper color Partially-Implements: blueprint horizon-theme-css-reorg Partially-Implements: blueprint bootstrap-html-standards Change-Id: I4a904704926dc50010ad480539db828eff559fa0
132 lines
2.3 KiB
SCSS
132 lines
2.3 KiB
SCSS
.table {
|
|
& > thead,
|
|
& > tbody,
|
|
& > tfoot {
|
|
> tr {
|
|
& > th,
|
|
& > td {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
.multi_select_column {
|
|
text-align: center;
|
|
}
|
|
|
|
.empty {
|
|
text-align: center;
|
|
}
|
|
|
|
// Specificity Required!
|
|
& > tbody > tr > td {
|
|
&.loading {
|
|
background-color: $gray-lighter;
|
|
}
|
|
&.success {
|
|
background-color: lighten($brand-success, 35%);
|
|
}
|
|
}
|
|
|
|
tr.terminated {
|
|
color: $gray-light;
|
|
}
|
|
|
|
th.multi_select_column, td.multi_select_column {
|
|
width: $font-size-base * 3;
|
|
text-align: center;
|
|
}
|
|
|
|
.normal_column ul {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
// Sometimes the header is empty, lets keep the same look either way
|
|
.table_header {
|
|
min-height: $input-height-base;
|
|
|
|
// We put headings in the table for the title, so these headings shouldn't
|
|
// function like normal Type H3's ... remove the margin on top
|
|
h3 {
|
|
display: inline-block;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
// Sort Indicator
|
|
.tablesorter-header.sortable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tablesorter-header-inner {
|
|
display: inline;
|
|
}
|
|
|
|
.tablesorter-headerAsc:after,
|
|
.tablesorter-headerDesc:after {
|
|
@include fa-icon();
|
|
font-size: $font-size-h4;
|
|
color: $gray-light;
|
|
float: right;
|
|
}
|
|
|
|
.tablesorter-headerAsc:after {
|
|
content: $fa-var-caret-up;
|
|
}
|
|
|
|
.tablesorter-headerDesc:after {
|
|
content: $fa-var-caret-down;
|
|
}
|
|
|
|
///*
|
|
// * Bootstrap styles table backgrounds using nth-child(2n+1), which is
|
|
// * oblivious to hidden elements. The styles below allow us to override
|
|
// * the bootstrap style when necessary by setting the odd/even classes.
|
|
// */
|
|
.table-striped.datatable tbody {
|
|
td {
|
|
background-clip: padding-box;
|
|
}
|
|
tr.odd {
|
|
td {
|
|
background-color: $table-bg-odd;
|
|
}
|
|
|
|
&.status_unknown td {
|
|
background-color: lighten($brand-warning, 6%);
|
|
}
|
|
}
|
|
tr.even {
|
|
td {
|
|
background-color: inherit;
|
|
}
|
|
|
|
&.status_unknown td {
|
|
background-color: lighten($brand-warning, 10%);
|
|
}
|
|
}
|
|
|
|
// Hover stuffs!
|
|
tr.odd:hover td,
|
|
tr.even:hover td,
|
|
tr:hover th {
|
|
background-color: $table-bg-hover;
|
|
}
|
|
|
|
tr.odd.status_unknown:hover td,
|
|
tr.even.status_unknown:hover td {
|
|
background-color: lighten($brand-warning, 6%);
|
|
}
|
|
}
|
|
|
|
// Force Table Fixed
|
|
.table-fixed {
|
|
table-layout: fixed;
|
|
}
|
|
|
|
// Don't wrap a column
|
|
.nowrap-col {
|
|
white-space: nowrap;
|
|
}
|