mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Only highlight relevant cells
This commit is contained in:
parent
f79d8c09e2
commit
64bb3085b5
@ -366,16 +366,22 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
function resetTable() {
|
function resetTable() {
|
||||||
spacingRows.forEach(el => el.classList.remove('bd-current-row'));
|
// spacingRows.forEach(el => el.classList.remove('bd-current-row'));
|
||||||
spacingCells.forEach(el => el.classList.remove('bd-current-column'));
|
spacingCells.forEach(el => el.classList.remove('bd-current-row', 'bd-current-column'));
|
||||||
spacingValues.forEach(el => el.classList.remove('bd-current-value'));
|
spacingValues.forEach(el => el.classList.remove('bd-current-value'));
|
||||||
}
|
}
|
||||||
|
|
||||||
function highlightRowAndColumn(rowIndex, columnIndex) {
|
function highlightRowAndColumn(rowIndex, columnIndex) {
|
||||||
const row = spacingRows[rowIndex];
|
const row = spacingRows[rowIndex];
|
||||||
row.classList.add('bd-current-row');
|
let i = columnIndex;
|
||||||
|
|
||||||
spacingRows.forEach(r => {
|
while (i > -1) {
|
||||||
|
row.children[i].classList.add('bd-current-row');
|
||||||
|
i--;
|
||||||
|
}
|
||||||
|
|
||||||
|
const nextRows = spacingRows.slice(rowIndex);
|
||||||
|
nextRows.forEach(r => {
|
||||||
r.children[columnIndex].classList.add('bd-current-column');
|
r.children[columnIndex].classList.add('bd-current-column');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -6,13 +6,18 @@
|
|||||||
color: $border
|
color: $border
|
||||||
.bd-current-row
|
.bd-current-row
|
||||||
background-color: $background
|
background-color: $background
|
||||||
td:first-child,
|
&:first-child
|
||||||
.bd-current-column:not(:first-child)
|
|
||||||
background-color: $danger-light
|
background-color: $danger-light
|
||||||
color: $text-strong
|
color: $text-strong
|
||||||
code
|
code
|
||||||
background-color: $danger
|
background-color: $danger
|
||||||
color: $danger-invert
|
color: $danger-invert
|
||||||
|
&.bd-current-column
|
||||||
|
background-color: $primary-light
|
||||||
|
color: $text-strong
|
||||||
|
code
|
||||||
|
background-color: $primary
|
||||||
|
color: $primary-invert
|
||||||
.bd-current-column
|
.bd-current-column
|
||||||
background-color: $background
|
background-color: $background
|
||||||
.bd-current-value
|
.bd-current-value
|
||||||
|
@ -13176,18 +13176,26 @@ svg {
|
|||||||
background-color: whitesmoke;
|
background-color: whitesmoke;
|
||||||
}
|
}
|
||||||
|
|
||||||
#spacingTable .bd-current-row td:first-child,
|
#spacingTable .bd-current-row:first-child {
|
||||||
#spacingTable .bd-current-row .bd-current-column:not(:first-child) {
|
|
||||||
background-color: #feecf0;
|
background-color: #feecf0;
|
||||||
color: #363636;
|
color: #363636;
|
||||||
}
|
}
|
||||||
|
|
||||||
#spacingTable .bd-current-row td:first-child code,
|
#spacingTable .bd-current-row:first-child code {
|
||||||
#spacingTable .bd-current-row .bd-current-column:not(:first-child) code {
|
|
||||||
background-color: #f14668;
|
background-color: #f14668;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#spacingTable .bd-current-row.bd-current-column {
|
||||||
|
background-color: #ebfffc;
|
||||||
|
color: #363636;
|
||||||
|
}
|
||||||
|
|
||||||
|
#spacingTable .bd-current-row.bd-current-column code {
|
||||||
|
background-color: #00d1b2;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
#spacingTable .bd-current-column {
|
#spacingTable .bd-current-column {
|
||||||
background-color: whitesmoke;
|
background-color: whitesmoke;
|
||||||
}
|
}
|
||||||
|
@ -370,11 +370,9 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
});
|
});
|
||||||
|
|
||||||
function resetTable() {
|
function resetTable() {
|
||||||
spacingRows.forEach(function (el) {
|
// spacingRows.forEach(el => el.classList.remove('bd-current-row'));
|
||||||
return el.classList.remove('bd-current-row');
|
|
||||||
});
|
|
||||||
spacingCells.forEach(function (el) {
|
spacingCells.forEach(function (el) {
|
||||||
return el.classList.remove('bd-current-column');
|
return el.classList.remove('bd-current-row', 'bd-current-column');
|
||||||
});
|
});
|
||||||
spacingValues.forEach(function (el) {
|
spacingValues.forEach(function (el) {
|
||||||
return el.classList.remove('bd-current-value');
|
return el.classList.remove('bd-current-value');
|
||||||
@ -383,9 +381,15 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
|
|
||||||
function highlightRowAndColumn(rowIndex, columnIndex) {
|
function highlightRowAndColumn(rowIndex, columnIndex) {
|
||||||
var row = spacingRows[rowIndex];
|
var row = spacingRows[rowIndex];
|
||||||
row.classList.add('bd-current-row');
|
var i = columnIndex;
|
||||||
|
|
||||||
spacingRows.forEach(function (r) {
|
while (i > -1) {
|
||||||
|
row.children[i].classList.add('bd-current-row');
|
||||||
|
i--;
|
||||||
|
}
|
||||||
|
|
||||||
|
var nextRows = spacingRows.slice(rowIndex);
|
||||||
|
nextRows.forEach(function (r) {
|
||||||
r.children[columnIndex].classList.add('bd-current-column');
|
r.children[columnIndex].classList.add('bd-current-column');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user