diff options
author | 2020-01-22 13:47:41 +0200 | |
---|---|---|
committer | 2020-01-23 20:43:51 +0000 | |
commit | b85e6de55f8c697f463584f43325c4777451253a (patch) | |
tree | d523cc332c4e35a145d3e8de757ec6d41c4ffa79 /cds-ui/designer-client/src/styles.css | |
parent | 0e5c78cec1e1b1ce4d1f6488f6264ca1daffef58 (diff) |
add design for template and mapping
Issue-ID: CCSDK-2035
Signed-off-by: shady <snaguib.ext@orange.com>
Change-Id: I60d1fd623c84e98d0b762a0b5df0e375a7c75031
Diffstat (limited to 'cds-ui/designer-client/src/styles.css')
-rw-r--r-- | cds-ui/designer-client/src/styles.css | 345 |
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{ |