add design for template and mapping

Issue-ID: CCSDK-2035
Signed-off-by: shady <snaguib.ext@orange.com>
Change-Id: I60d1fd623c84e98d0b762a0b5df0e375a7c75031

1 files changed, 264 insertions, 81 deletions

diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index 17c49ce48..91bc3f9ad 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -9,6 +9,7 @@ body{
   /* font-family: 'Nunito' !important; */
   font-family: Arial, Helvetica, sans-serif !important;
   color: #1B3E6F !important;
+  font-size: 14px;
 }
 *:focus{
   outline: none;
@@ -250,7 +251,7 @@ background-color: #333;
 .import-container{
   width: 100%;
   background: #E0E8F2;
-  padding:30px ;
+  padding:25px ;
 }
 .import-container-input{
   width: 40%;
@@ -264,8 +265,9 @@ background-color: #333;
   padding: 5px 20px;
   border: 0px;
   -webkit-box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75);
-  -moz-box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75);
-  box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75);
+-moz-box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75);
+box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75);
+font-size: 13px;
 }
 .enter-link{
   position: absolute;
@@ -283,11 +285,6 @@ background-color: #333;
 .import-container-span{
   font-size: 12px;
 }
-.accordion .card{
-  margin-bottom: 0px !important;
-  background-color: #FAFAFA !important;
-  border: 0px;
-}
 .accordion-delete{
   color: #FF6469;
   font-size: 18px;
@@ -296,9 +293,6 @@ background-color: #333;
 .accordion-delete:hover{
   text-decoration: none;
 }
-.card-header{
-  background-color: #DEE8F3 !important;
-}
 /* .userProfile .dropdown-toggle{
 height: 40px;
 } */
@@ -1448,16 +1442,16 @@ ul.package-contributers{
   margin-bottom: -16px;
 }
 .btn{
-  padding-right: 20px !important;
-  padding-left: 20px !important;
-
+padding-right: 20px !important;
+padding-left: 20px !important;
+  
 }
 .btn.border-radius{
   border-radius: 20px !important;
 }
 .btn-primary{
-  background-color: #1273EB !important;
-  border-color: #1273EB !important;
+    background-color: #1273EB !important;
+    border-color: #1273EB !important;
 }
 .btn-primary:hover {
   background-color: #0069d9 !important;
@@ -1465,7 +1459,7 @@ ul.package-contributers{
 }
 .btn + .btn{
   margin-left: 10px;
-}
+  }
 .card.creat-card{
   margin: 0;
   border-radius: 2px;
@@ -1473,35 +1467,37 @@ ul.package-contributers{
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
 }
 .card.creat-card .single-line{
-  padding: 15px 70px 15px;
+  padding: 15px 25px 15px;
 }
 .single-line label{
   margin-bottom: 0px;
-}
-.label-name{
-  width: 300px;
-  display: inline-block;
-  margin-bottom: 0px;
-}
-.delete-key{
-  color: #FF6469;
-  font-size: 10px;
-  background: #FFE6E7;
-  border: 1px solid #FFC9CB;
-  padding: 3px 10px 2px;
-  margin-left: 10px;
-  border-radius: 5px;
-}
-.delete-key:hover{
-  color: #C94448;
-  background: #FFC9CB;
-  border: 1px solid #FF6469;
-  text-decoration: none;
-}
-.label-input{
-  width: calc(100% - 300px);
-  display: inline-block;
-}
+  }
+  .label-name{
+    width: 300px;
+    display: inline-block;
+    margin-bottom: 0px;
+    font-size: 14px;
+    font-weight: bold;
+  }
+  .delete-key{
+    color: #FF6469;
+    font-size: 10px;
+    background: #FFE6E7;
+    border: 1px solid #FFC9CB;
+    padding: 3px 10px 2px;
+    margin-left: 10px;
+    border-radius: 5px;
+  }
+  .delete-key:hover{
+    color: #C94448;
+    background: #FFC9CB;
+    border: 1px solid #FF6469;
+    text-decoration: none;
+  }
+  .label-input{
+    width: calc(100% - 300px);
+    display: inline-block;
+  }
 .form-check-input{
   margin-left: 0px !important;
   margin-top: 2px !important;
@@ -1509,44 +1505,55 @@ ul.package-contributers{
 .form-check-input+span{
   margin-left: 20px;
   margin-right: 50px;
-}
-.label-input input{
-  margin-bottom: 0px;
-  outline: 0px;
-  border: 0px;
-  font-size: 12px;
-  width: 100%;
-}
-.single-line select{
-  margin-bottom: 0px;
-  outline: 0px;
-  border: 0px;
-  background: none;
-  background: url(/assets/img/arrow.svg) center right no-repeat;
-  background-size: 10spx;
-  width: 100%;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  text-indent: 1px;
-  text-overflow: '';
-
-}
-.single-line select option:first-child{
-  color: #C3CDDB;
-}
-.single-line input::placeholder{
   font-size: 14px;
-  color: #C3CDDB;
-}
-.single-line .custom-key{
-  background: none;
-  border: 0px;
-  color:#1273EB ;
-  font-size: 15px;
-}
-.single-line .custom-key:focus{
-  outline: none;
 }
+  .label-input input{
+    margin-bottom: 0px;
+    outline: 0px;
+    border: 0px;
+    font-size: 14px;
+    width: 100%;
+    }
+    .label-input input[type=radio]{
+      width: auto;
+      
+    }
+    .label-input input[type=radio]+span{
+      font-size: 12px;
+      display: block;
+      margin-right: 100px;
+    }
+    .single-line select{
+      margin-bottom: 0px;
+      outline: 0px;
+      border: 0px;
+      background: none;
+      background: url(/assets/img/arrow.svg) center right no-repeat;
+      background-size: 10spx;
+      width: 100%;
+      -webkit-appearance: none;
+    -moz-appearance: none;
+    text-indent: 1px;
+    text-overflow: '';
+    font-size: 14px;
+    
+      }
+      .single-line select option:first-child{
+        color: #C3CDDB;
+      }
+    .single-line input::placeholder{
+      font-size: 14px;
+      color: #C3CDDB;
+      }
+  .single-line .custom-key{
+    background: none;
+    border: 0px;
+    color:#1273EB ;
+    font-size: 15px;
+  }
+  .single-line .custom-key:focus{
+    outline: none;
+  }
 .creat-container{
   padding:70px 100px 70px 70px;
   position: relative;
@@ -1609,7 +1616,7 @@ hr {
   content: "\f105";
   font-family:'FontAwesome';
   position: relative;
-  margin-right: 30px;
+  margin-right: 25px;
 }
 .btn-link i{
   margin-right: 10px;
@@ -1631,13 +1638,19 @@ hr {
   display: inline-block;
   text-align: center;
 }
+.btn-group-sm>.btn, .btn-sm{
+  font-size: 12px;
+}
+.create-title{
+  font-size: 14px;
+}
 .folder-upload-text{
   margin-top: 10px;
   width: 100%;
   display: inline-block;
   text-align: center;
   color:#242424 ;
-  font-size: 12px;
+  font-size: 14px;
 }
 .folder-upload-text button{
   margin-left: 10px;
@@ -1669,6 +1682,176 @@ hr {
   top: 11px;
   color: #66BB00;
 }
+.authentication-container-all{
+  background: #F4F9FE;
+  border:1px solid #D0DFF1 ;
+  flex: 1;
+  width: 100%;
+}
+.authentication-header{
+  width: 100%;
+  background: #fff;
+  font-size: 12px;
+  color: #C3CDDB;
+  font-weight: bold;
+  padding: 10px 20px ;
+}
+.authentication-search{
+  width: 100%;
+  background: #fff;
+  font-size: 12px;
+  color: #C3CDDB;
+  font-weight: bold;
+  position: relative;
+}
+.authentication-search::after{
+  content: "\f002";
+    font-family: 'FontAwesome';
+    position: absolute;
+    left: 20px;
+    top: 11px;
+}
+.authentication-search input{
+  width: 100%;
+  background: #fff;
+  font-size: 12px;
+  color: #C3CDDB;
+  font-weight: bold;
+  padding: 10px 20px 10px 35px;
+  border: 0px;
+  border-top: 1px solid #D7E7F9;
+}
+.authentication-search input::placeholder{
+  color: #D0D7E4;
+  font-size: 10px;
+  font-weight:100;
+}
+.authentication-accordion{
+  width: 100%; 
+  padding: 20px;
+  max-height: 300px;
+  overflow: auto;
+}
+.authentication-accordion .card{
+  border-radius: 0px !important;
+  margin-bottom: 10px !important;
+}
+.authentication-accordion .card-header{
+  padding: 0px !important;
+  background: #fff !important;
+  border-radius: 0px !important;
+  font-size: 18px;
+  font-weight: bold;
+}
+.authentication-accordion .card-header .btn-link{
+  color: #1B3E6F;
+  width: 100%;
+  text-align: left;
+  padding-left: 0px !important;
+  font-size: 14px;
+}
+.authentication-accordion .custom-control{
+  display: inline-block;
+}
+.authentication-accordion .btn-link::before{
+  margin-right: 10px;
+}
+.authentication-accordion .btn-link.collapsed::before{
+  margin-right: 14px;
+}
+.template-mapping-accordion{
+  width: 100%;
+}
+.card{
+  border-radius: 2px;
+  border: 0;
+  box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
+  border: 0px !important;
+}
+.card-header{
+  padding: 10px 25px !important;
+  background: #F4F9FE !important;
+  border-radius: 0px !important;
+  border-bottom: 1px solid #ECEDF2 !important;
+}
+.card-body {
+  padding: 20px 25px !important;
+  font-size: 14px;
+}
+.card-header .btn-link{
+  color: #1B3E6F;
+  width: 100%;
+  text-align: left;
+  padding-left: 0px !important;
+}
+.accordion .card{
+  margin-bottom: 0px !important;
+  border-top: 1px solid #ECEDF2 !important;
+}
+.template-mapping-accordion .card{
+  margin-bottom: 25px !important;
+}
+.custom-control{
+  display: inline-block;
+}
+.btn-link::before{
+  margin-right: 10px;
+}
+.btn-link.collapsed::before{
+  margin-right: 14px;
+}
+.drap-drop-action{
+  padding: 12px 20px 9px 20px;
+  color: #C3CDDB;
+  cursor:move;
+  font-size: 15px;
+}
+.modal-title {
+  font-size: 14px;
+}
+.select-type{
+  background: #F4F9FE;
+  border: 1px solid #D7E7F9;
+  padding: 10px;
+  text-align: center;
+  color: #1273EB;
+  font-size: 15px;
+  width: 100%;
+  position: relative;
+}
+.select-type:hover, .select-type.active{
+  background: #1B3E6F;
+  border: 1px solid #D7E7F9;
+  color: #fff; 
+  text-decoration: none;
+}
+.select-type-icon{
+  font-size: 35px;
+}
+.select-type::before{
+  content: '';
+  border: 1px solid #1273EB;
+  width: 18px;
+  height: 18px;
+  border-radius: 18px;
+  display: inline-block;
+  left: 10px;
+  position: absolute;
+}
+.select-type:hover::before, .select-type.active::before{
+  border: 1px solid #fff;
+}
+.select-type.active::after{
+  content: '';
+  background: #fff;
+  width: 12px;
+  height: 12px;
+  border-radius: 18px;
+  display: inline-block;
+  left: 13px;
+  position: absolute;
+  top: 13px;
+}
 /* Extra small devices (portrait phones, less than 576px) */
 @media (max-width: 575.98px) {
   .page-title{