1 files changed, 164 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less
new file mode 100644
index 0000000000..0545874f53
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less
@@ -0,0 +1,164 @@
+
+@import './../../../../../assets/styles/variables.less';
+
+:host /deep/ input { width:100%;}
+
+.properties-table {
+    display:flex;
+    flex-direction:column;
+    flex: 1;
+    height:100%;
+    text-align:left;
+
+    .inner-cell-div{
+        width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        height: 20px;
+    }
+
+
+    .table-header {
+        font-weight:bold;
+        border-top: #d2d2d2 solid 1px;
+        background-color: #eaeaea;
+        color:#191919;
+
+        .table-cell {
+            font-size: 13px;
+        }
+        .valueCol {
+            justify-content: flex-start;
+            padding: 10px;
+        }
+    }
+    .table-header, .table-row {
+        display: flex;
+        flex-direction:row;
+        flex: 0 0 auto;
+    }
+
+    .table-body {
+        display:flex;
+        flex-direction: column;
+        overflow-y:auto;
+        flex: 1;
+
+        .no-data {
+            border: #d2d2d2 solid 1px;
+            border-top:none;
+            text-align: center;
+            height: 100%;
+            padding: 20px;
+        }
+        /deep/.selected{
+            background-color: #e6f6fb;
+            color:  #009fdb;
+        }
+    }
+
+    .table-row {
+        &:hover {
+             background-color:#f8f8f8; cursor:pointer;
+        }
+
+        &:last-child {
+            flex: 1 0 auto;
+        }
+        .selected-row {
+            background-color:#e6f6fb;
+        }
+    }
+
+     .table-cell {
+        font-size:13px;
+        flex:1;
+        border: #d2d2d2 solid 1px;
+        border-right:none;
+        border-top:none;
+        padding: 10px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+
+        &:last-child {
+            border-right:#d2d2d2 solid 1px;
+        }
+        &.col1 {
+            flex: 1 0 200px;
+            max-width:300px;
+            display: flex;
+            justify-content: space-between;
+
+            .property-name {
+                flex: 1;
+            }
+
+            .property-description-icon {
+                float: right;
+                margin-top: 4px;
+                margin-left: 5px;
+                flex: 0 0 auto;
+            }
+        }
+        &.col2 {
+            flex: 0 0 150px;
+            max-width:150px;
+        }
+
+        &.col3 {
+            flex:0 0 120px;
+            max-width:120px;
+        }
+
+        &.valueCol {
+            flex: 1 0 auto;
+            min-width: 350px;
+            display: flex;
+            justify-content: flex-end;
+            padding: 0px;
+            align-items: center;
+
+            .value-input {
+                flex: 1;
+                max-height: 24px;
+                border: none;
+                background-color: inherit;
+
+                &:focus, &:active {
+                    border:none;
+                    outline:none;
+                }
+            }
+
+            .delete-btn {
+                flex: 0 0 auto;
+            }
+
+            .delete-button-container {
+                max-height: 24px;
+            }
+
+            &.inner-table-container {
+                padding: 0px;
+
+                .delete-button-container {
+                    padding: 3px 5px 0 0 ;
+                }
+            }
+        }
+
+         &.input-value-col {
+             padding: 8px;
+         }
+
+
+    }
+
+    .filtered {
+        /deep/ .checkbox-label-content{
+            background-color: yellow;
+        }
+    }
+
+}