1 files changed, 152 insertions, 0 deletions
diff --git a/openecomp-ui/resources/scss/components/_selectActionTable.scss b/openecomp-ui/resources/scss/components/_selectActionTable.scss
new file mode 100644
index 0000000000..fa17733374
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_selectActionTable.scss
@@ -0,0 +1,152 @@
+.select-action-table-view {
+	.svg-icon-wrapper {
+		flex-direction: row;
+		
+		&::before {
+			content:"";			
+		}
+		.svg-icon {
+			margin-left: 5px;
+			margin-right: 5px;
+			width:16px;
+			height:16px;
+		}	
+	}
+	.dummy-icon {
+		background-color: $white;
+		fill: $white;
+		.locked {
+			fill: $white;
+		}
+	}
+
+	.select-action-table-controllers {
+		display: flex;
+		.svg-icon-wrapper {
+			&:hover {
+				cursor: pointer;
+			}
+			&:first-child {
+				margin-left: auto;
+			}
+		}
+	}
+	.select-action-table {
+		display: flex;
+		flex-direction: column;
+		border-color: $light-gray;
+
+		.select-action-table-headers {
+			display: flex;
+			background-color: $tlv-light-gray;
+			border-color: inherit;						
+			.select-action-table-header {
+				@extend .body-1-medium;
+				flex: 1;
+				border-top: 1px solid;
+				border-right: 1px solid;				
+				border-color: inherit;
+				padding: 8px 0 7px 20px;
+				&:first-child {
+					border-left: 1px solid;
+					border-color: inherit;
+				}
+			}		
+		}
+		.select-action-table-row-wrapper {
+			display: flex;
+			flex-direction: row;			
+    		margin-bottom: 14px;
+			.svg-icon.trash-o {
+				
+				fill: $dark-gray;								
+			}
+			.svg-icon.error-circle {
+				fill: $red;				
+			}
+			.svg-icon.check-circle {
+				fill: $green;				
+			}			
+			.select-action-table-row {
+				display: flex;
+				flex: 1;
+				border: 1px solid;
+				border-color: $light-gray;
+				&.has-error {
+					border-color: $red;
+				}
+				.select-action-table-cell {
+					flex: 1;
+					border-right: 1px solid;
+					border-color: $light-gray;
+					@extend .body-1;
+					.dropdown-multi-select {
+						.form-group {
+							.Select{
+								&.is-open {
+									border: 1px solid $blue;
+								}
+							}
+						}
+					}
+					.form-group {
+						margin: 0;						
+						.Select-control {
+							height:36px;
+							border: none;
+							.is-open {
+								border-left-color: $blue;
+								border-right-color: $blue;
+							}
+							.Select-value, .Select-placeholder, .Select-input {
+								padding-left: 20px;
+								padding-right: 50px;
+								padding-top: 4px;
+								
+							}
+							.Select-placeholder {
+								color: $dark-gray;
+							}
+							.Select-arrow-zone {
+								padding-right: 15px;
+							}
+						}											
+					}
+					&:last-child {
+						border-right: none;
+					}											
+				}
+				.Select-menu-outer {
+						border-left: 1px solid $blue;
+						border-right: 1px solid $blue;
+						border-bottom: 1px solid $blue;
+						overflow: auto;
+						.Select-menu {																	
+							display: inline-block;
+							.Select-option {								
+								width: 100%;
+								display: inline-block;
+								border-bottom: 1px solid $light-gray;																					
+								&:hover {
+									background-color: $blue;
+									color: $white;
+									&.is-focused {
+										background-color: $blue;
+									}
+									&.is-focused {
+										background-color: $blue;
+									}
+								}
+								&.is-selected {
+									background-color: transparent;
+								}
+								&.is-focused {
+									background-color: transparent;
+								}								
+							}
+						}	
+					}
+			}
+		}
+	}
+}