Skip to content

C
Cigna_KYC_Document_Upload
Commit 0cdef40b by Satyendra Singh
Options

modified

parent a900902b
Showing with 301 additions and 267 deletions
css/kyc-uploads.css
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
} }
.main_uploads_container .main_content { .main_uploads_container .main_content {
border: solid 2px #dfdfdf; border: solid 1px #dfdfdf;
margin: 20px; margin: 20px;
padding: 15px; padding: 15px;
} }
...@@ -52,140 +52,87 @@ ...@@ -52,140 +52,87 @@
font-style: normal; font-style: normal;
} }
.main_uploads_container .f_c .file-upload { .main_uploads_container .f_c .dropdown {
display: block; width: 100%;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
.main_uploads_container .f_c .file-upload .file-select {
display: block;
color: #34495e;
cursor: pointer;
height: 40px;
line-height: 40px;
text-align: left;
overflow: hidden;
position: relative;
-webkit-box-shadow: inset 0 0 2px #ccc; -webkit-box-shadow: inset 0 0 2px #ccc;
box-shadow: inset 0 0 2px #ccc; box-shadow: inset 0 0 2px #ccc;
height: 44px;
padding: 6px 12px;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
} }
.main_uploads_container .f_c .file-upload .file-select .file-select-button { .main_uploads_container .m-b {
background: #dce4ec; margin-bottom: 15px;
padding: 0 10px;
display: inline-block;
height: 40px;
line-height: 40px;
}
.main_uploads_container .f_c .file-upload .file-select .file-select-name {
line-height: 40px;
display: inline-block;
padding: 0 10px;
}
.main_uploads_container .f_c .file-upload .file-select:hover {
border-color: #34495e;
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
.main_uploads_container .f_c .file-upload .file-select:hover .file-select-button {
background: #34495e;
color: #FFFFFF;
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
.main_uploads_container .f_c .file-upload.active .file-select {
border-color: #3fa46a;
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
} }
.main_uploads_container .f_c .file-upload.active .file-select .file-select-button { .main_uploads_container .btn-primary {
background: #3fa46a; background-color: #04c55b;
color: #FFFFFF; color: #fff;
transition: all .2s ease-in-out; border: solid 1px #999797;
-moz-transition: all .2s ease-in-out; outline: none;
-webkit-transition: all .2s ease-in-out; height: 42px;
-o-transition: all .2s ease-in-out;
} }
.main_uploads_container .f_c .file-upload .file-select input[type=file] { .main_uploads_container .btn-primary:focus {
cursor: pointer; background-color: #04c55b !important;
position: absolute; outline: none;
height: 100%; border: none;
width: 100%;
top: 0;
left: 0;
opacity: 0;
filter: alpha(opacity=0);
} }
.main_uploads_container .f_c .file-upload .file-select.file-select-disabled { .main_uploads_container .btn-secondary {
opacity: 0.65; height: 42px;
} }
.main_uploads_container .f_c .file-upload .file-select.file-select-disabled:hover { .main_uploads_container .btn-danger {
cursor: default; height: 42px;
display: block;
border: 2px solid #dce4ec;
color: #34495e;
cursor: pointer;
height: 40px;
line-height: 40px;
margin-top: 5px;
text-align: left;
background: #FFFFFF;
overflow: hidden;
position: relative;
} }
.main_uploads_container .f_c .file-upload .file-select.file-select-disabled:hover .file-select-button { .main_uploads_container .c_text {
background: #dce4ec; display: -webkit-box;
color: #666666; display: -ms-flexbox;
padding: 0 10px; display: flex;
display: inline-block; -webkit-box-align: center;
height: 40px; -ms-flex-align: center;
line-height: 40px; align-items: center;
margin-bottom: 30px;
margin-top: 25px;
} }
.main_uploads_container .f_c .file-upload .file-select.file-select-disabled:hover .file-select-name { .main_uploads_container .c_text p {
line-height: 40px; font-size: 12px;
display: inline-block; font-style: normal;
padding: 0 10px; margin-left: 5px;
} }
.main_uploads_container .f_c .dropdown { .main_uploads_container .c_text input[type="checkbox"] {
width: 100%; margin: 0px;
-webkit-box-shadow: inset 0 0 2px #ccc;
box-shadow: inset 0 0 2px #ccc;
height: 44px;
padding: 6px 12px;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
} }
.main_uploads_container .m-b { .main_uploads_container .btn_strip {
margin-bottom: 15px; text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
} }
.main_uploads_container .btn-primary { .main_uploads_container .u_l_b {
background-color: #04c55b; font-size: 20px;
text-align: center;
background-color: #6bc660;
color: #fff; color: #fff;
border: solid 1px #999797; border-radius: 17px;
outline: none; max-width: 250px;
width: 100%;
height: 50px;
margin-top: 50px;
margin-bottom: 30px;
border: none;
} }
.main_uploads_container .upload-card { .main_uploads_container .upload-card {
...@@ -193,13 +140,10 @@ ...@@ -193,13 +140,10 @@
} }
.main_uploads_container .imagePreview { .main_uploads_container .imagePreview {
width: 38px;
height: 38px;
border-radius: 4px; border-radius: 4px;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-right: 15px;
} }
.main_uploads_container .file-upload { .main_uploads_container .file-upload {
...@@ -214,6 +158,10 @@ ...@@ -214,6 +158,10 @@
border-radius: 4px; border-radius: 4px;
background-color: #fff; background-color: #fff;
border: 1px solid #ccc; border: 1px solid #ccc;
height: 44px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
} }
.main_uploads_container .file-select { .main_uploads_container .file-select {
...@@ -225,13 +173,14 @@ ...@@ -225,13 +173,14 @@
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
width: 80%;
} }
.main_uploads_container .file-select-name { .main_uploads_container .file-select-name {
margin-left: 15px; margin-left: 15px;
} }
.main_uploads_container .file-select input[type=file] { .main_uploads_container .file-select input[type="file"] {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
...@@ -243,52 +192,16 @@ ...@@ -243,52 +192,16 @@
.main_uploads_container .file-remove { .main_uploads_container .file-remove {
margin-left: 15px; margin-left: 15px;
position: absolute; position: absolute;
right: 6px; right: 0px;
top: 3px; top: 0px;
}
.main_uploads_container .c_text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 30px;
margin-top: 25px;
} }
.main_uploads_container .c_text p { .main_uploads_container .error {
font-size: 12px; display: none;
font-style: normal; color: red;
margin-left: 5px;
} }
.main_uploads_container .c_text input[type=checkbox] { .main_uploads_container .error.state-visible {
margin: 0px; display: block;
}
.main_uploads_container .btn_strip {
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.main_uploads_container .u_l_b {
font-size: 20px;
text-align: center;
background-color: #6BC660;
color: #fff;
border-radius: 17px;
max-width: 250px;
width: 100%;
height: 50px;
margin-top: 50px;
margin-bottom: 30px;
border: none;
} }
/*# sourceMappingURL=kyc-uploads.css.map */ /*# sourceMappingURL=kyc-uploads.css.map */
\ No newline at end of file
css/kyc-uploads.css.map
{ {
"version": 3, "version": 3,
"mappings": "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", "mappings": "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",
"sources": [ "sources": [
"../scss/kyc-uploads.scss" "../scss/kyc-uploads.scss"
], ],
......
index.html
...@@ -389,19 +389,32 @@ ...@@ -389,19 +389,32 @@
<form method="post" enctype="multipart/form-data"> <form method="post" enctype="multipart/form-data">
<div class="f_c"> <div class="f_c">
<div class="row m-b"> <div class="row m-b">
<div class="col-lg-3 col-sm-4 col-xs-12"><label>User Photo </label><p>Upload valid passport size photo</p></div> <div class="col-lg-3 col-sm-4 col-xs-12">
<label>User Photo </label>
<p>Upload valid passport size photo</p>
</div>
<div class="col-lg-7 col-sm-8 col-xs-12"> <div class="col-lg-7 col-sm-8 col-xs-12">
<div class="upload-card" id="upload-card0">
<div class="file-upload"> <div class="file-upload">
<div class="file-select"> <div class="file-select">
<div class="file-select-button" id="fileName">Choose File</div> <div class="imagePreview"></div>
<div class="file-select-name" id="noFile">No file chosen...</div> <button class="btn btn-secondary">Choose Files</button>
<input type="file" name="chooseFile" id="chooseFile"> <div class="file-select-name">No File Chosen</div>
<input type="file" name="files[]" class="profileimg" id="image">
</div>
</div> </div>
<p class="error" id="error-file-too-large">Sorry, this file is too large! Maximum file size is <strong>5 MB</strong>.</p>
<p class="error" id="error-invalid-type">Sorry, this file type is not supported. Please choose a JPEG, GIF, or PNG image.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="row m-b"> <div class="row m-b">
<div class="col-lg-3 col-sm-4 col-xs-12"><label>Identity Proof </label><p>Upload valid Idendity proof </p></div> <div class="col-lg-3 col-sm-4 col-xs-12">
<label>Identity Proof </label>
<p>Upload valid Idendity proof </p>
</div>
<div class="col-lg-7 col-sm-8 col-xs-12"> <div class="col-lg-7 col-sm-8 col-xs-12">
<select id="state" class="dropdown" name="user_state"> <select id="state" class="dropdown" name="user_state">
<option value="" disabled="disabled" selected="selected">Choose ID Type</option> <option value="" disabled="disabled" selected="selected">Choose ID Type</option>
...@@ -410,23 +423,28 @@ ...@@ -410,23 +423,28 @@
<option>Bank Passbook</option> <option>Bank Passbook</option>
<option>Voter Id</option> <option>Voter Id</option>
</select> </select>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-3 col-sm-4 col-xs-12"></div> <div class="col-lg-3 col-sm-4 col-xs-12"></div>
<div class="col-lg-7 col-sm-8 col-xs-12"> <div class="col-lg-7 col-sm-8 col-xs-12">
<div class="upload-card" id="upload-card1"> <div class="upload-card" id="upload-card1">
<div class="text-right"> <div class="file-upload" id="file1">
<button class="btn btn-primary m-b file-add" id="add1">+Add More File</button>
</div>
<div class="file-upload">
<div class="file-select"> <div class="file-select">
<div class="file-select-button" id="fileName2">Choose File</div> <div class="imagePreview"></div>
<div class="file-select-name" id="noFile1">No file chosen...</div> <button class="btn btn-secondary">Choose File2</button>
<input type="file" name="chooseFile1" id="chooseFile1"> <div class="file-select-name">No File Chosen</div>
<input type="file" name="files[]" class="profileimg" id="image">
</div>
<!-- <p class="error" id="error-file-too-large">Sorry, this file is too large! Maximum file size is <strong>5 MB</strong>.</p>
<p class="error" id="error-invalid-type">Sorry, this file type is not supported. Please choose a JPEG, GIF, or PNG image.</p> -->
<div class="text-right">
<button class="btn btn-primary mb-3 file-add">Add More </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -438,9 +456,11 @@ ...@@ -438,9 +456,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row m-b"> <div class="row m-b">
<div class="col-lg-3 col-sm-4 col-xs-12"><label>Address Proof </label><p>Upload Valid Address proof with the document having validation for customer Address </p></div> <div class="col-lg-3 col-sm-4 col-xs-12">
<label>Address Proof </label>
<p>Upload Valid Address proof with the document having validation for customer Address </p>
</div>
<div class="col-lg-7 col-sm-8 col-xs-12"> <div class="col-lg-7 col-sm-8 col-xs-12">
<select id="state" class="dropdown" name="user_state"> <select id="state" class="dropdown" name="user_state">
<option value="" disabled="disabled" selected="selected">Choose Document Type</option> <option value="" disabled="disabled" selected="selected">Choose Document Type</option>
...@@ -454,42 +474,36 @@ ...@@ -454,42 +474,36 @@
<option>Voter Id</option> <option>Voter Id</option>
<option>Ration Card</option> <option>Ration Card</option>
</select> </select>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-3 col-sm-4 col-xs-12"></div> <div class="col-lg-3 col-sm-4 col-xs-12"></div>
<div class="col-lg-7 col-sm-8 col-xs-12"> <div class="col-lg-7 col-sm-8 col-xs-12">
<div class="upload-card" id="upload-card2"> <div class="upload-card" id="upload-card2">
<div class="text-right">
<button class="btn btn-primary m-b file-add" id="add2">+Add More File</button>
</div>
<div class="file-upload"> <div class="file-upload">
<div class="file-select"> <div class="file-select">
<div class="file-select-button" id="fileName2">Choose File</div> <div class="imagePreview"></div>
<div class="file-select-name" id="noFile1">No file chosen...</div> <button class="btn btn-secondary">Choose File</button>
<input type="file" name="chooseFile1" id="chooseFile1"> <div class="file-select-name">No File Chosen</div>
<input type="file" name="files[]" class="profileimg">
</div>
<div class="text-right">
<button class="btn btn-primary mb-3 file-add1">Add More </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="btn_strip"><input type="submit" value="Confirm Uploads" class="u_l_b"></div></div> <div class="btn_strip">
<input type="submit" value="Confirm Uploads" class="u_l_b">
</div>
</div>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
......
js/script.js
...@@ -58,7 +58,7 @@ function customInput(el) { ...@@ -58,7 +58,7 @@ function customInput(el) {
} }
} }
}) });
...@@ -74,8 +74,7 @@ function customInput(el) { ...@@ -74,8 +74,7 @@ function customInput(el) {
// $("#noFile").text(filename.replace("C:\\fakepath\\", "")); // $("#noFile").text(filename.replace("C:\\fakepath\\", ""));
// } // }
// }); // });
// satyendra js
$(document).ready(function() { $(document).ready(function() {
$(document).on('change', '.file-upload input[type="file"]', function() { $(document).on('change', '.file-upload input[type="file"]', function() {
var filename = $(this).val(); var filename = $(this).val();
...@@ -99,15 +98,14 @@ $(document).ready(function() { ...@@ -99,15 +98,14 @@ $(document).ready(function() {
} }
} }
}); });
$(document).on('click', '.file-remove', function(e) { $(document).on('click', '.file-remove', function(e) {
e.preventDefault(); e.preventDefault();
$(this).closest('.file-upload').remove(); $(this).closest('.file-upload').remove();
return false; return false;
}); });
$(document).on('click', '#add1', function(e) { $(document).on('click', '.file-add', function(e) {
e.preventDefault(); e.preventDefault();
$("#upload-card1").append('<div class="file-upload">' + $("#upload-card1").prepend('<div class="file-upload">' +
'<div class="file-select">' + '<div class="file-select">' +
'<div class="imagePreview"></div>' + '<div class="imagePreview"></div>' +
'<button class="btn btn-secondary">Choose File</button>' + '<button class="btn btn-secondary">Choose File</button>' +
...@@ -119,17 +117,10 @@ $(document).ready(function() { ...@@ -119,17 +117,10 @@ $(document).ready(function() {
return false; return false;
}); });
});
$(document).on('click', '.file-remove', function(e) {
e.preventDefault();
$(this).closest('.file-upload').remove();
return false;
});
$(document).on('click', '#add2', function(e) {
$(document).on('click', '.file-add1', function(e) {
e.preventDefault(); e.preventDefault();
$("#upload-card2").append('<div class="file-upload">' + $("#upload-card2").prepend('<div class="file-upload" id="file2">' +
'<div class="file-select">' + '<div class="file-select">' +
'<div class="imagePreview"></div>' + '<div class="imagePreview"></div>' +
'<button class="btn btn-secondary">Choose File</button>' + '<button class="btn btn-secondary">Choose File</button>' +
...@@ -144,6 +135,54 @@ $(document).on('click', '#add2', function(e) { ...@@ -144,6 +135,54 @@ $(document).on('click', '#add2', function(e) {
});
var MAX_SIZE = 1024 * 1024 * 5; // 5 MB
var VALID_TYPES = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
function validateFile() {
if (this.files && this.files.length) {
var file = this.files[0];
//console.log(file);
var type = file.type;
var size = file.size;
var fileNameSplit = file.name.split('.');
var extension = fileNameSplit[fileNameSplit.length - 1];
//console.log(type);
//console.log(extension);
//console.log(size);
if (size > MAX_SIZE) {
$('#error-file-too-large').addClass('state-visible');
} else {
$('#error-file-too-large').removeClass('state-visible');
}
if (VALID_TYPES.indexOf(type) < 0) {
$('#error-invalid-type').addClass('state-visible');
} else {
$('#error-invalid-type').removeClass('state-visible');
}
}
}
$(document).ready(function() {
$('#image').on('change', validateFile);
});
......
scss/kyc-uploads.scss
.main_uploads_container{border: solid 1px #dfdfdf;border-top-left-radius: 5px; border-top-right-radius: 5px; margin-bottom: 20px; .main_uploads_container {
.title{font-size: 22px; text-align: center; background-color:#0063aa; color: #fff; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 16px;} border: solid 1px #dfdfdf;
.main_content{border: solid 2px #dfdfdf; margin:20px; padding: 15px; h2{font-size: 20px;} border-top-left-radius: 5px;
p{font-size: 12px; font-style: italic;} border-top-right-radius: 5px;
.uplaod_strip{background-color: #d2e9fb; padding: 10px; border-radius: 5px; :nth-child(1) {color: #5679de;} margin-bottom: 20px;
:nth-child(2) {color: #5da5dc;} .title {
font-size: 22px;
text-align: center;
background-color: #0063aa;
color: #fff;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 16px;
}
.main_content {
border: solid 1px #dfdfdf;
margin: 20px;
padding: 15px;
h2 {
font-size: 20px;
}
p {
font-size: 12px;
font-style: italic;
}
.uplaod_strip {
background-color: #d2e9fb;
padding: 10px;
border-radius: 5px;
:nth-child(1) {
color: #5679de;
}
:nth-child(2) {
color: #5da5dc;
}
}
}
.f_c {
margin-top: 20px;
p {
font-style: normal;
}
.dropdown {
} width: 100%;
} box-shadow: inset 0 0 2px #ccc;
.f_c{margin-top: 20px; height: 44px;
p{font-style: normal;} padding: 6px 12px;
.file-upload{display:block;text-align:center;font-family: Helvetica, Arial, sans-serif;font-size: 12px;}
.file-upload .file-select{display:block;color: #34495e;cursor:pointer;height:40px;line-height:40px;text-align:left;overflow:hidden;position:relative;box-shadow: inset 0 0 2px #ccc;}
.file-upload .file-select .file-select-button{background:#dce4ec;padding:0 10px;display:inline-block;height:40px;line-height:40px;}
.file-upload .file-select .file-select-name{line-height:40px;display:inline-block;padding:0 10px;}
.file-upload .file-select:hover{border-color:#34495e;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload .file-select:hover .file-select-button{background:#34495e;color:#FFFFFF;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload.active .file-select{border-color:#3fa46a;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload.active .file-select .file-select-button{background:#3fa46a;color:#FFFFFF;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload .file-select input[type=file]{cursor:pointer;position:absolute;height:100%;width:100%;top:0;left:0;opacity:0;filter:alpha(opacity=0);}
.file-upload .file-select.file-select-disabled{opacity:0.65;}
.file-upload .file-select.file-select-disabled:hover{cursor:default;display:block;border: 2px solid #dce4ec;color: #34495e;cursor:pointer;height:40px;line-height:40px;margin-top:5px;text-align:left;background:#FFFFFF;overflow:hidden;position:relative;}
.file-upload .file-select.file-select-disabled:hover .file-select-button{background:#dce4ec;color:#666666;padding:0 10px;display:inline-block;height:40px;line-height:40px;}
.file-upload .file-select.file-select-disabled:hover .file-select-name{line-height:40px;display:inline-block;padding:0 10px;}
.dropdown{width: 100%;box-shadow: inset 0 0 2px #ccc;
height: 44px;padding: 6px 12px;
background-color: #fff; background-color: #fff;
background-image: none; background-image: none;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px;} border-radius: 4px;
} }
.m-b{margin-bottom: 15px;} }
.btn-primary{background-color: rgb(4, 197, 91); color: #fff; border: solid 1px rgb(153, 151, 151); outline: none;} .m-b {
margin-bottom: 15px;
}
.btn-primary {
background-color: rgb(4, 197, 91);
color: #fff;
border: solid 1px rgb(153, 151, 151);
outline: none;
height: 42px;
.upload-card{ }
.btn-primary:focus{background-color: #04c55b !important; outline: none; border: none;}
.btn-secondary{height: 42px;}
.btn-danger{height: 42px;}
.c_text {
display: flex;
align-items: center;
margin-bottom: 30px;
margin-top: 25px;
p {
font-size: 12px;
font-style: normal;
margin-left: 5px;
}
input[type="checkbox"] {
margin: 0px;
}
}
.btn_strip {
text-align: center;
display: flex;
justify-content: center;
}
.u_l_b {
font-size: 20px;
text-align: center;
background-color: #6bc660;
color: #fff;
border-radius: 17px;
max-width: 250px;
width: 100%;
height: 50px;
margin-top: 50px;
margin-bottom: 30px;
border: none;
}
.upload-card {
margin: 0 auto; margin: 0 auto;
}
} .imagePreview {
.imagePreview{ // width: 38px;
width: 38px; // height: 38px;
height: 38px;
border-radius: 4px; border-radius: 4px;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-right: 15px; // margin-right: 15px;
} }
.file-upload{ .file-upload {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 15px; margin-bottom: 15px;
...@@ -57,40 +120,45 @@ ...@@ -57,40 +120,45 @@
border-radius: 4px; border-radius: 4px;
background-color: #fff; background-color: #fff;
border: 1px solid #ccc; border: 1px solid #ccc;
} height: 44px;
.file-select { justify-content: space-between;
}
.file-select {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
align-items: center; align-items: center;
} width: 80%;
}
.file-select-name {
.file-select-name{
margin-left: 15px; margin-left: 15px;
} }
.file-select input[type=file] { .file-select input[type="file"] {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
opacity: 0; opacity: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.file-remove{ .file-remove {
margin-left: 15px; margin-left: 15px;
position: absolute; position: absolute;
right: 6px; right: 0px;
top: 3px; top: 0px;
} }
.error {
display: none;
color: red;
&.state-visible {
display: block;
}
}
}
.c_text{ display: flex; align-items: center;margin-bottom: 30px;margin-top:25px; p{font-size: 12px; font-style: normal; margin-left: 5px;}
input[type=checkbox]{margin: 0px;}
\ No newline at end of file
}
.btn_strip{text-align: center; display: flex; justify-content: center;}
.u_l_b{font-size: 20px; text-align: center; background-color: #6BC660; color: #fff; border-radius: 17px;
max-width: 250px; width: 100%; height: 50px; margin-top: 50px; margin-bottom: 30px; border: none;}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment