Skip to content

fix(table): prevent hover style on busy/empty row (closes #3079) #3086

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 12, 2019
Merged

fix(table): prevent hover style on busy/empty row (closes #3079) #3086

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bad916b
fix(table): prevent hover style on busy/empty row
jacobmllr95 Apr 11, 2019
ef24caf
remove `table-hover` class when busy/empty
jacobmllr95 Apr 12, 2019
26fa4bb
Merge branch 'dev' into fix-table-busy-empty-row-hover-styles
tmorehouse Apr 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
150 changes: 74 additions & 76 deletions src/components/table/_table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
// --- <b-table>: general styling ---
.b-table.table {
.table.b-table {
// --- General styling ---

// Table fixed header width layout
&.b-table-fixed {
// Fixed width columns
Expand All @@ -15,6 +16,7 @@
> tbody > tr.b-table-details > td {
border-top: none !important;
}

// Caption positioning
> caption {
caption-side: bottom;
Expand All @@ -35,11 +37,8 @@
}
}
}
}

// --- <b-table>: header sort styling ---
.b-table.table {
// Sort styling
// --- Header sort styling ---
> thead,
> tfoot {
> tr {
Expand Down Expand Up @@ -81,94 +80,93 @@
}
}
}
}

// --- <b-table>: stacked tables ---
// Generate series of `.table-stacked-*` classes for configuring the screen
// size of where your table will be stacked
.b-table.table.b-table-stacked {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);

&#{$infix} {
@include media-breakpoint-down($breakpoint) {
display: block;
width: 100%;

// Convert to blocks when stacked
> caption,
> tbody,
> tbody > tr,
> tbody > tr > td,
> tbody > tr > td {
display: block;
}
// --- Stacked tables ---
&.b-table-stacked {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);

// Hide when stacked
> thead,
> tfoot {
display: none;
&#{$infix} {
@include media-breakpoint-down($breakpoint) {
display: block;
width: 100%;

// Convert to blocks when stacked
> caption,
> tbody,
> tbody > tr,
> tbody > tr > td,
> tbody > tr > td {
display: block;
}

> tr.b-table-top-row,
> tr.b-table-bottom-row {
// Hide when stacked
> thead,
> tfoot {
display: none;

> tr.b-table-top-row,
> tr.b-table-bottom-row {
display: none;
}
}
}

// Caption positioning
> caption {
caption-side: top !important;
}
// Caption positioning
> caption {
caption-side: top !important;
}

> tbody {
> tr {
// Turn cells with labels into micro-grids
> [data-label] {
// Convert <td>/<th> contents to "cells"
// Caveat: child elements become cells!
display: grid;
grid-template-columns: 40% auto;
grid-gap: 0.25rem 1rem;

// Add the cell header label pseudo element
&::before {
content: attr(data-label);
display: inline;
text-align: right;
overflow-wrap: break-word;
font-weight: bold;
font-style: normal;
> tbody {
> tr {
// Turn cells with labels into micro-grids
> [data-label] {
// Convert <td>/<th> contents to "cells"
// Caveat: child elements become cells!
display: grid;
grid-template-columns: 40% auto;
grid-gap: 0.25rem 1rem;

// Add the cell header label pseudo element
&::before {
content: attr(data-label);
display: inline;
text-align: right;
overflow-wrap: break-word;
font-weight: bold;
font-style: normal;
}
}
}

// Dont show the fixed top/bottom rows
&.top-row,
&.bottom-row {
display: none;
}
// Dont show the fixed top/bottom rows
&.top-row,
&.bottom-row {
display: none;
}

// Give the top of each "row" a heavy border
> :first-child {
border-top-width: (3 * $table-border-width);
// Give the top of each "row" a heavy border
> :first-child {
border-top-width: (3 * $table-border-width);
}
}
}
}
}
}
}
}

// --- <b-table>: selectable rows ---
.b-table.table.b-table-selectable {
& > tbody > tr {
cursor: pointer;
}
// --- Selectable rows ---
&.b-table-selectable {
& > tbody > tr {
cursor: pointer;
}

&.b-table-selecting {
// Disabled text-selection when in mode range when at least one row selected
&.b-table-select-range > tbody > tr {
user-select: none;
&.b-table-selecting {
// Disabled text-selection when in range mode when
// at least one row selected
&.b-table-select-range > tbody > tr {
user-select: none;
}
}
}
}
2 changes: 1 addition & 1 deletion src/components/table/table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export default Vue.extend({
return [
{
'table-striped': this.striped,
'table-hover': this.hover,
'table-hover': this.hover && this.computedItems.length > 0 && !this.computedBusy,
'table-dark': this.dark,
'table-bordered': this.bordered,
'table-borderless': this.borderless,
Expand Down