Only highlight relevant cells

diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js
index 6299a8e7bb474be53c6266761d40d049d86a72b1..fa31bec9c027ca950c2040a3f141f6e65cc7dd7d 100644 (file)
--- a/docs/_javascript/main.js
+++ b/docs/_javascript/main.js
@@ -366,16 +366,22 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   function resetTable() {
-    spacingRows.forEach(el => el.classList.remove('bd-current-row'));
-    spacingCells.forEach(el => el.classList.remove('bd-current-column'));
+    // spacingRows.forEach(el => el.classList.remove('bd-current-row'));
+    spacingCells.forEach(el => el.classList.remove('bd-current-row', 'bd-current-column'));
     spacingValues.forEach(el => el.classList.remove('bd-current-value'));
   }
 
   function highlightRowAndColumn(rowIndex, columnIndex) {
     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');
     });
 

diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass
index 82ca37a94a918f4d7e9f72150833d7c78f245893..322ff1844c228796a80e0d0bac9d789b57bada14 100644 (file)
--- a/docs/_sass/specific.sass
+++ b/docs/_sass/specific.sass
@@ -6,13 +6,18 @@
       color: $border
   .bd-current-row
     background-color: $background
-    td:first-child,
-    .bd-current-column:not(:first-child)
+    &:first-child
       background-color: $danger-light
       color: $text-strong
       code
         background-color: $danger
         color: $danger-invert
+    &.bd-current-column
+      background-color: $primary-light
+      color: $text-strong
+      code
+        background-color: $primary
+        color: $primary-invert
   .bd-current-column
     background-color: $background
   .bd-current-value

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 9d01c9ed34249e49ee5c4253264772b42538f0c6..8a8d4951149237d519e84dfd8d8add05bdca6226 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -13176,18 +13176,26 @@ svg {
   background-color: whitesmoke;
 }
 
-#spacingTable .bd-current-row td:first-child,
-#spacingTable .bd-current-row .bd-current-column:not(:first-child) {
+#spacingTable .bd-current-row:first-child {
   background-color: #feecf0;
   color: #363636;
 }
 
-#spacingTable .bd-current-row td:first-child code,
-#spacingTable .bd-current-row .bd-current-column:not(:first-child) code {
+#spacingTable .bd-current-row:first-child code {
   background-color: #f14668;
   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 {
   background-color: whitesmoke;
 }

diff --git a/docs/lib/main.js b/docs/lib/main.js
index 001741b309f3b8aa193283f23a207e56ba708151..5b47259ae96adf1accc141812d1e8e030319d847 100644 (file)
--- a/docs/lib/main.js
+++ b/docs/lib/main.js
@@ -370,11 +370,9 @@ document.addEventListener('DOMContentLoaded', function () {
   });
 
   function resetTable() {
-    spacingRows.forEach(function (el) {
-      return el.classList.remove('bd-current-row');
-    });
+    // spacingRows.forEach(el => el.classList.remove('bd-current-row'));
     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) {
       return el.classList.remove('bd-current-value');
@@ -383,9 +381,15 @@ document.addEventListener('DOMContentLoaded', function () {
 
   function highlightRowAndColumn(rowIndex, columnIndex) {
     var row = spacingRows[rowIndex];
-    row.classList.add('bd-current-row');
+    var i = columnIndex;
+
+    while (i > -1) {
+      row.children[i].classList.add('bd-current-row');
+      i--;
+    }
 
-    spacingRows.forEach(function (r) {
+    var nextRows = spacingRows.slice(rowIndex);
+    nextRows.forEach(function (r) {
       r.children[columnIndex].classList.add('bd-current-column');
     });