[SDC] Onboarding 1710 rebase.

Change-Id: If3b6b81d221fde13908f1e8160db6f7d9433c535
Signed-off-by: Avi Ziv <avi.ziv@amdocs.com>

13 files changed, 115 insertions, 99 deletions

diff --git a/openecomp-ui/resources/scss/components/_activityLog.scss b/openecomp-ui/resources/scss/components/_activityLog.scss
index 1e31e06814..9ada804934 100644
--- a/openecomp-ui/resources/scss/components/_activityLog.scss
+++ b/openecomp-ui/resources/scss/components/_activityLog.scss
@@ -29,7 +29,7 @@ $message-info-icon-size: 16px;
 	height: 36px;
 	@extend .body-1;
 	&.header {
-	  @extend .body-1-medium;
+	  @extend .body-1-semibold;
 	  background-color: $tlv-light-gray;
 	  color: $text-black;
 	}
@@ -39,7 +39,7 @@ $message-info-icon-size: 16px;
 	.svg-icon-wrapper {
 	  float: right;
 	}
-	.check-circle {
+	.checkCircle {
 	  fill: $green;
 	  width: 16px;
 	  height: 16px;
diff --git a/openecomp-ui/resources/scss/components/_buttons.scss b/openecomp-ui/resources/scss/components/_buttons.scss
index fbf2c3e728..357a799e93 100644
--- a/openecomp-ui/resources/scss/components/_buttons.scss
+++ b/openecomp-ui/resources/scss/components/_buttons.scss
@@ -2,8 +2,7 @@
   border: 1px solid;
   border-color: $blue;
   color: $blue;
-  font-weight: bolder;
-  @extend .body-1;
+  @extend .body-1-semibold;
   text-align: center;
   padding: 7px;
   border-radius: 5px;
diff --git a/openecomp-ui/resources/scss/components/_datepicker.scss b/openecomp-ui/resources/scss/components/_datepicker.scss
new file mode 100644
index 0000000000..593bb09d7d
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_datepicker.scss
@@ -0,0 +1,51 @@
+.customized-date-picker {
+	margin-bottom: 24px;
+	.date-picker-label {
+		&.required {
+			&:before {
+				content: "*";
+				color: $red;
+				margin: 0 4px 0 0;
+			}
+		}
+
+		@extend .body-2-semibold;
+		color: $dark-gray;
+		margin-bottom: 8px;
+	}
+	.datepicker-custom-input {
+		display: flex;
+		justify-content: space-between;
+		width: 243px;
+		height: 30px;
+		border-radius: 2px;
+		color: $dark-gray;
+		border: 1px solid $light-gray;
+		padding: 6px 12px;
+		&:hover {
+			border-color: $gray;
+			.clear-input {
+				&:before {
+					cursor: pointer;
+					content: 'x';
+				}
+			}
+		}
+		.datepicker-text {
+			cursor: pointer;
+			width: 170px;
+			@extend .body-1;
+			&.placeholder {
+				color: $light-gray;
+			}
+
+		}
+		.calendar-input {
+			fill: $light-gray;
+		}
+	}
+
+
+
+}
+
diff --git a/openecomp-ui/resources/scss/components/_forms.scss b/openecomp-ui/resources/scss/components/_forms.scss
index 23c58ea4ac..b662ce873c 100644
--- a/openecomp-ui/resources/scss/components/_forms.scss
+++ b/openecomp-ui/resources/scss/components/_forms.scss
@@ -1,5 +1,5 @@
 .section-title {
-  @extend .heading-3-medium;
+  @extend .heading-3-semibold;
   padding: 50px 0 30px 0;
   &:first-child {
     padding: 0 0 30px 0;
diff --git a/openecomp-ui/resources/scss/components/_grid.scss b/openecomp-ui/resources/scss/components/_grid.scss
index d4d1fa7ccd..9a76f97546 100644
--- a/openecomp-ui/resources/scss/components/_grid.scss
+++ b/openecomp-ui/resources/scss/components/_grid.scss
@@ -1,7 +1,9 @@
 $gridItemSpace: 15%;
 
 .grid-section {
-		padding-bottom: 30px;
+		&:not(:last-of-type) {
+			padding-bottom: 30px;
+		}
 		.grid-items {
 			display: flex;
 			flex-direction: row;
diff --git a/openecomp-ui/resources/scss/components/_listEditorView.scss b/openecomp-ui/resources/scss/components/_listEditorView.scss
index 18d5426eb7..1c837ca4c2 100644
--- a/openecomp-ui/resources/scss/components/_listEditorView.scss
+++ b/openecomp-ui/resources/scss/components/_listEditorView.scss
@@ -15,16 +15,16 @@
     border-bottom: 1px solid $light-gray;
     padding-bottom: 5px;
     .list-editor-view-title {
-      @extend .heading-3-medium;
+      @extend .heading-3-semibold;
     }
     .list-editor-view-add-controller {
-      @extend .heading-4-medium;
+      @extend .body-1-semibold;
       color: $blue;
       display: table;
       cursor: pointer;
       position: relative;
-      padding-top: 0px;
-      padding-bottom: 0px;
+      padding-top: 0;
+      padding-bottom: 0;
       margin-left: auto;
       .list-editor-view-add-title {
         display: flex;
@@ -151,6 +151,13 @@
               }
             }
 
+            .details-col{
+              flex-direction: column;
+              .title {
+                padding-bottom: 0;
+              }
+            }
+
             .description {
               @extend .body-1;
               @include multiline-ellipsis(1.3em, 3);
diff --git a/openecomp-ui/resources/scss/components/_navigationSideBar.scss b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
index 36c14a2785..daf5025bee 100644
--- a/openecomp-ui/resources/scss/components/_navigationSideBar.scss
+++ b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
@@ -16,7 +16,7 @@
       flex-direction: column;
       background-color: $tlv-gray;
       .group-name {
-        @extend .heading-4-medium;
+        @extend .heading-4-semibold;
         @include ellipsis;
         min-height: 56px;
         display: block;
@@ -47,13 +47,13 @@
           @include ellipsis;
           white-space: normal;
           &.selected {
-            @extend .body-1-medium;
+            @extend .body-1-semibold;
             border-left: 4px solid $blue;
             padding-left: 18px;
             color: $blue;
           }
           &.bold-name {
-            @extend .body-1-medium;
+            @extend .body-1-semibold;
           }
         }
       }
diff --git a/openecomp-ui/resources/scss/components/_notifications.scss b/openecomp-ui/resources/scss/components/_notifications.scss
index 426f05cd89..7165e57ef9 100644
--- a/openecomp-ui/resources/scss/components/_notifications.scss
+++ b/openecomp-ui/resources/scss/components/_notifications.scss
@@ -5,12 +5,12 @@
     .modal-header {
       padding: 15px 10px 10px;
       .modal-title {
-        @extend .heading-5-medium;
+        @extend .heading-5-semibold;
       }
     }
     .modal-body {
       padding: 30px 15px;
-      @extend .body-1-medium;
+      @extend .body-1-semibold;
     }
   }
 
diff --git a/openecomp-ui/resources/scss/components/_selectActionTable.scss b/openecomp-ui/resources/scss/components/_selectActionTable.scss
index fa17733374..4e42b6ce5b 100644
--- a/openecomp-ui/resources/scss/components/_selectActionTable.scss
+++ b/openecomp-ui/resources/scss/components/_selectActionTable.scss
@@ -1,16 +1,16 @@
 .select-action-table-view {
 	.svg-icon-wrapper {
 		flex-direction: row;
-		
+
 		&::before {
-			content:"";			
+			content:"";
 		}
 		.svg-icon {
 			margin-left: 5px;
 			margin-right: 5px;
 			width:16px;
 			height:16px;
-		}	
+		}
 	}
 	.dummy-icon {
 		background-color: $white;
@@ -39,34 +39,39 @@
 		.select-action-table-headers {
 			display: flex;
 			background-color: $tlv-light-gray;
-			border-color: inherit;						
+			border-color: inherit;
 			.select-action-table-header {
-				@extend .body-1-medium;
+				@extend .body-1-semibold;
 				flex: 1;
 				border-top: 1px solid;
-				border-right: 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;			
+			flex-direction: row;
     		margin-bottom: 14px;
-			.svg-icon.trash-o {
-				
-				fill: $dark-gray;								
+			.svg-icon-wrapper.trashO {
+				.svg-icon {
+				  fill: $dark-gray;
+				}
+			}
+		  	.svg-icon-wrapper.errorCircle {
+			  .svg-icon {
+				fill: $red;
+			  }
 			}
-			.svg-icon.error-circle {
-				fill: $red;				
+		  	.svg-icon-wrapper.checkCircle {
+			  .svg-icon {
+				fill: $green;
+			  }
 			}
-			.svg-icon.check-circle {
-				fill: $green;				
-			}			
 			.select-action-table-row {
 				display: flex;
 				flex: 1;
@@ -90,7 +95,7 @@
 						}
 					}
 					.form-group {
-						margin: 0;						
+						margin: 0;
 						.Select-control {
 							height:36px;
 							border: none;
@@ -102,7 +107,7 @@
 								padding-left: 20px;
 								padding-right: 50px;
 								padding-top: 4px;
-								
+
 							}
 							.Select-placeholder {
 								color: $dark-gray;
@@ -110,23 +115,23 @@
 							.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 {																	
+						.Select-menu {
 							display: inline-block;
-							.Select-option {								
+							.Select-option {
 								width: 100%;
 								display: inline-block;
-								border-bottom: 1px solid $light-gray;																					
+								border-bottom: 1px solid $light-gray;
 								&:hover {
 									background-color: $blue;
 									color: $white;
@@ -142,9 +147,9 @@
 								}
 								&.is-focused {
 									background-color: transparent;
-								}								
+								}
 							}
-						}	
+						}
 					}
 			}
 		}
diff --git a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
index e34be01af2..b917dfefeb 100644
--- a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
+++ b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
@@ -26,7 +26,7 @@
       background-color: $tlv-gray;
       padding: 5px;
       cursor: pointer;
-      .chevron-down {
+      .chevronDown {
         width:10px;
         height:10px;
         margin-right: 10px;
@@ -54,7 +54,7 @@
     .component-name-header {
       margin-left: 45px;
       margin-top: 10px;
-      @extend .heading-5-medium;
+      @extend .heading-5-semibold;
     }
   }
 }
diff --git a/openecomp-ui/resources/scss/components/_svgIcon.scss b/openecomp-ui/resources/scss/components/_svgIcon.scss
deleted file mode 100644
index fc02f81fd4..0000000000
--- a/openecomp-ui/resources/scss/components/_svgIcon.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@mixin overrideBootstrapClose(){
-	opacity: 1;
-	float: none;
-	&:hover {
-		opacity: 1;
-	}
-}
-
-.svg-icon-wrapper {
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-	&.bottom {
-		flex-direction: column;
-		.svg-icon-label {
-			margin-bottom: 5px;
-		}
-	}
-	&.right {
-		float: none;
-		.svg-icon-label {
-			margin-left: 5px;
-		}
-	}
-	&.top {
-		flex-direction: column-reverse;;
-		.svg-icon-label {
-			margin-top: 5px;
-		}
-	}
-	&.left {
-		flex-direction: row-reverse;;
-		.svg-icon-label {
-			margin-right: 5px;
-		}
-	}
-	// bootstrap override
-	&.close {
-		@include overrideBootstrapClose();
-	}
-	.close {
-	@include overrideBootstrapClose();
-	}
-	.svg-icon {
-		width: 20px;
-		height: 20px;
-	}
-	.svg-icon-label {
-		@extend .body-1;
-	}
-}
diff --git a/openecomp-ui/resources/scss/components/_validationForm.scss b/openecomp-ui/resources/scss/components/_validationForm.scss
index 9404f2841a..46269ad699 100644
--- a/openecomp-ui/resources/scss/components/_validationForm.scss
+++ b/openecomp-ui/resources/scss/components/_validationForm.scss
@@ -4,6 +4,9 @@ form {
       position: relative;
       flex: 1;
     }
+    .validation-radio-wrapper {
+      position: relative;
+    }
     .nav-tabs {
       position: relative;
       .invalid-tab:not(.active) {
diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss
index 3c30cdcc37..b454d3496b 100644
--- a/openecomp-ui/resources/scss/components/_versionController.scss
+++ b/openecomp-ui/resources/scss/components/_versionController.scss
@@ -20,7 +20,7 @@
         padding-right: 10px;
         margin-right: 15px;
         margin-left: 10px;
-        @extend .body-1;        
+        @extend .body-1;
       }
       .version-section {
         .form-group {
@@ -59,7 +59,7 @@
           margin-right: 20px;
           padding-bottom: 5px;
 
-          .version-controller-lock-closed {
+          .versionControllerLockClosed {
             fill: $dark-gray;
             width: 21px;
             height: 23px;
@@ -71,7 +71,7 @@
               fill: $black;
             }
           }
-          .version-controller-lock-open {
+          .versionControllerLockOpen {
             fill: $dark-gray;
             width: 24px;
             height: 28px;
@@ -80,7 +80,7 @@
               fill: $black;
             }
           }
-          .version-controller-submit {
+          .versionControllerSubmit {
             fill: $blue;
             &.disabled {
               fill: $light-gray;
@@ -90,7 +90,7 @@
             }
           }
 
-          .version-controller-revert {
+          .versionControllerRevert {
             fill: $dark-gray;
             &.disabled {
               fill: $light-gray;
@@ -99,7 +99,7 @@
               fill: $black;
             }
           }
-          .version-controller-save {
+          .versionControllerSave {
             fill: $dark-gray;
             &.disabled {
               fill: $light-gray;