Display inherited rows a bit differenter

InvenTree/InvenTree/static/css/inventree.css

@@ -307,6 +307,11 @@
     font-style: italic;
 }
 
+.rowinherited {
+    background-color: #efe;
+    opacity: 90%;
+}
+
 .dropdown {
     padding-left: 1px;
     margin-left: 1px;

InvenTree/part/templates/part/bom.html

@@ -72,11 +72,9 @@
     </div>
 </div>
 
-<table class='table table-striped table-condensed' data-toolbar="#button-toolbar" id='bom-table'>
+<table class='table table-bom table-condensed' data-toolbar="#button-toolbar" id='bom-table'>
 </table>
 
-<table class='table table-striped table-condensed' id='test-table'></table>
-
 {% endblock %}
 
 {% block js_load %}

InvenTree/templates/js/bom.js

@@ -420,15 +420,24 @@ function loadBomTable(table, options) {
         sortable: true,
         search: true,
         rowStyle: function(row, index) {
-            if (row.validated) {
-                return {
-                    classes: 'rowvalid'
-                };
-            } else {
-                return {
-                    classes: 'rowinvalid'
-                };
+
+            var classes = [];
+
+            // Shade rows differently if they are for different parent parts
+            if (row.part != options.parent_id) {
+                classes.push('rowinherited');
             }
+
+            if (row.validated) {
+                classes.push('rowvalid');
+            } else {
+                classes.push('rowinvalid');
+            }
+
+            return {
+                classes: classes.join(' '),
+            };
+
         },
         formatNoMatches: function() {
             return '{% trans "No BOM items found" %}';