add design for template and mapping
Issue-ID: CCSDK-2035
Signed-off-by: shady <snaguib.ext@orange.com>
Change-Id: I60d1fd623c84e98d0b762a0b5df0e375a7c75031
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index 17c49ce..91bc3f9 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -9,6 +9,7 @@
/* font-family: 'Nunito' !important; */
font-family: Arial, Helvetica, sans-serif !important;
color: #1B3E6F !important;
+ font-size: 14px;
}
*:focus{
outline: none;
@@ -250,7 +251,7 @@
.import-container{
width: 100%;
background: #E0E8F2;
- padding:30px ;
+ padding:25px ;
}
.import-container-input{
width: 40%;
@@ -264,8 +265,9 @@
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 @@
.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 @@
.accordion-delete:hover{
text-decoration: none;
}
-.card-header{
- background-color: #DEE8F3 !important;
-}
/* .userProfile .dropdown-toggle{
height: 40px;
} */
@@ -1448,16 +1442,16 @@
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 @@
}
.btn + .btn{
margin-left: 10px;
-}
+ }
.card.creat-card{
margin: 0;
border-radius: 2px;
@@ -1473,35 +1467,37 @@
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 @@
.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 @@
content: "\f105";
font-family:'FontAwesome';
position: relative;
- margin-right: 30px;
+ margin-right: 25px;
}
.btn-link i{
margin-right: 10px;
@@ -1631,13 +1638,19 @@
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 @@
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{