added invalidity hints to item side-properties

- added :invalid definition to side-properties CSS
-  defined common color for invalidity
- now using disabled input for automatically calculated properties

src/scss/components/_description.scss

@@ -22,7 +22,12 @@
             text-align: left;
             width: calc(100% - 2px);
         }
-
+        input:invalid {
+            background-color: $c-invalid-input;
+        }
+        input:disabled {
+            background-color: transparent;
+        }
         input[type="checkbox"] {
             width: auto;
             height: 100%;

src/scss/components/_items.scss

@@ -31,6 +31,7 @@
         input {
             border: 0;
             padding: 0;
+            background-color: transparent;
         }
 
         input[type="checkbox"] {
@@ -38,6 +39,9 @@
             height: 100%;
             margin: 0px;
         }
+        input:invalid {
+            background-color: $c-invalid-input;
+        }
     }
 
     .item-name {
@@ -54,9 +58,6 @@
         width: 2.5em;
         padding: 0;
     }
-    .item-num-val:invalid {
-        background-color: color.mix(lightcoral, $c-light-grey, 25%);
-    }
 
     .item-description {
         font-size: 75%;

src/scss/utils/_colors.scss

@@ -2,3 +2,4 @@ $c-white: #fff;
 $c-black: #000;
 $c-light-grey: #777;
 $c-border-groove: #eeede0;
+$c-invalid-input: rgba(lightcoral, 50%);