Improve SideBySide CSS for nonexistent blocks

Signed-off-by: Jack Cherng <[email protected]>

Author: jfcherng

example/diff-table.css

@@ -71,6 +71,10 @@
 .diff-wrapper.diff.diff-html .change.change-eq .new {
   background: #fff;
 }
+.diff-wrapper.diff.diff-html .change.change-ins .old, .diff-wrapper.diff.diff-html .change.change-del .new {
+  cursor: not-allowed;
+  background: #ebebeb;
+}
 .diff-wrapper.diff.diff-html .change .old {
   background: #fbe1e1;
 }

example/diff-table.scss

@@ -26,6 +26,10 @@
   $table-sidebar-color: mix($bg-color, $text-color, 80%);
   $border-color: $text-color;
 
+  // color for the nonexistent block
+  // for example, there are a deleted line that has no corresponding one
+  $bg-color-nonexistent-block: mix($bg-color, $table-sidebar-color, 60%);
+
   background-color: $bg-color;
   border-collapse: collapse;
   border-spacing: 0;
@@ -108,6 +112,12 @@
         }
       }
 
+      &.change-ins .old,
+      &.change-del .new {
+        cursor: not-allowed;
+        background: $bg-color-nonexistent-block;
+      }
+
       .old {
         background: $bg-color-delete;
       }