diff --git a/styleguide/merch.html b/styleguide/merch.html
index 5b97db2..43ff3ef 100644
--- a/styleguide/merch.html
+++ b/styleguide/merch.html
@@ -61,7 +61,7 @@
}
td.val:not(.empty):hover {
- background-color: var(--color-primary);
+ background-color: var(--color-shade-4);
}
td.val {
@@ -109,11 +109,11 @@
}
table > thead > tr > th.highlighted {
- background-color: var(--color-primary);
+ background-color: var(--color-shade-4);
}
tr:hover td.dimension {
- background-color: var(--color-primary);
+ background-color: var(--color-shade-4);
}
tr > td.dimension.currentDimension {
@@ -150,7 +150,7 @@
Merch
- A - width
- - B - height
+ - B - length
- C - sleeve
@@ -1183,7 +1183,6 @@
group.querySelectorAll(`td[data-col='${col}']`).forEach(match =>{
values[match.dataset.dim] = parseFloat(match.dataset.val);
})
- console.log(values);
document.querySelectorAll('td.val:not(.empty)').forEach(match => {
match.style.backgroundColor = ``
@@ -1218,17 +1217,26 @@
});
}
+ function hoverOff() {
+ document.querySelectorAll('table > thead > tr > th').forEach(match => {
+ match.classList.remove('highlighted')
+ });
+ }
+
+ document.querySelectorAll('td.val').forEach(cell => {
+ const rowTitle = cell.parentElement.querySelector('th');
+ cell.dataset.col = sizes[rowTitle !== null ? cell.cellIndex - 4 : cell.cellIndex - 1];
+ cell.addEventListener('pointerenter', hoverCell);
+ cell.addEventListener('pointerleave', hoverOff);
+ });
+
// initialize table
document.querySelectorAll('td.val:not(.empty)').forEach(cell => {
cell.dataset.val = cell.innerText;
cell.dataset.diff = '';
cell.dataset.dim = cell.parentElement.querySelector('td.dimension').innerHTML;
- const rowTitle = cell.parentElement.querySelector('th');
- cell.dataset.col = sizes[rowTitle !== null ? cell.cellIndex - 4 : cell.cellIndex - 1];
-
cell.addEventListener('pointerdown', selectCellPlus);
- cell.addEventListener('pointerenter', hoverCell);
});