change the passport form style

Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>

themes/openpowerfoundation/assets/css/forms.scss

@@ -1,3 +1,78 @@
+#contact .form #sendmessage {
+	color: #ff8800;
+	border: 1px solid #1dc8cd;
+	display: none;
+	text-align: center;
+	padding: 15px;
+	font-weight: 600;
+	margin-bottom: 15px;
+}
+#contact .form #errormessage {
+	color: red;
+	display: none;
+	border: 1px solid red;
+	text-align: center;
+	padding: 15px;
+	font-weight: 600;
+	margin-bottom: 15px;
+}
+.contactee select {
+	background-color: #2566f4;
+	color: white;
+	padding: 12px;
+	width: 100%;
+	border: none;
+	font-size: 20px;
+	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);   -webkit-appearance: button;   appearance: button;   outline: none;
+}
+
+#passport .form #sendmessage {
+	color: #2566f4;
+	border: 2px solid #008800;
+	display: none;
+	text-align: center;
+	padding: 15px;
+	font-weight: 600;
+	margin-bottom: 15px;
+}
+#passport .form #errormessage {
+	color: #ff0000;
+	display: none;
+	border: 2px solid #880000;
+	text-align: center;
+	padding: 15px;
+	font-weight: 600;
+	margin-bottom: 15px;
+}
+#passport .form #sendmessage.show,
+#passport .form #errormessage.show,
+#passport .form .show {
+	display: block;
+}
+#passport .form .validation {
+	color: #880000;
+	display: none;
+	margin: 0 0 20px;
+	font-weight: 400;
+	font-size: 13px;
+}
+#passport .form input, #contact .form textarea {
+	border-radius: 0;
+	box-shadow: none;
+	font-size: 14px;
+}
+#passport .form button[type="submit"] {
+	background: #2566f4;
+	border: 0;
+	border-radius: 2rem;
+	padding: 1rem 5rem 1rem 5rem;
+	color: #ffffff;
+}
+#passport .form button[type="submit"]:hover {
+	background: #000000;
+	cursor: pointer;
+}
+
 .member-value,
 .member-list {
 	width: 100%;

themes/openpowerfoundation/assets/css/main.css

@@ -4983,35 +4983,6 @@ textarea.form-control-lg {
 	line-height: 6px;
 }
 
-#contact .form #sendmessage {
-	color: #ff8800;
-	border: 1px solid #1dc8cd;
-	display: none;
-	text-align: center;
-	padding: 15px;
-	font-weight: 600;
-	margin-bottom: 15px;
-}
-#contact .form #errormessage {
-	color: red;
-	display: none;
-	border: 1px solid red;
-	text-align: center;
-	padding: 15px;
-	font-weight: 600;
-	margin-bottom: 15px;
-}
-
-.contactee select {
-	background-color: #2566f4;
-	color: white;
-	padding: 12px;
-	width: 100%;
-	border: none;
-	font-size: 20px;
-	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);   -webkit-appearance: button;   appearance: button;   outline: none;
-}
-
 .fa-file-pdf {
 	color: #ff0000;
 }

themes/openpowerfoundation/assets/css/style.css

@@ -1245,7 +1245,7 @@ body.mobile-nav-active #mobile-nav-toggle {
 	font-size: 12px;
 }
 #contact .form #sendmessage {
-	color: #ff8800;
+	color: #2544f8;
 	border: 1px solid #1dc8cd;
 	display: none;
 	text-align: center;
@@ -1334,6 +1334,53 @@ body.mobile-nav-active #mobile-nav-toggle {
 	cursor: pointer;
 }
 
+#passport .form #sendmessage {
+	color: #007aad;
+	border: 1px solid #00ff00;
+	display: none;
+	text-align: center;
+	padding: 15px;
+	font-weight: 600;
+	margin-bottom: 15px;
+}
+#passport .form #errormessage {
+	color: #ff0000;
+	display: none;
+	border: 1px solid #880000;
+	text-align: center;
+	padding: 15px;
+	font-weight: 600;
+	margin-bottom: 15px;
+}
+#passport .form #sendmessage.show,
+#passport .form #errormessage.show,
+#passport .form .show {
+	display: block;
+}
+#passport .form .validation {
+	color: #ff0000;
+	display: none;
+	margin: 0 0 20px;
+	font-weight: 400;
+	font-size: 13px;
+}
+#passport .form input, #contact .form textarea {
+	border-radius: 0;
+	box-shadow: none;
+	font-size: 14px;
+}
+#passport .form button[type="submit"] {
+	background: #007aad;
+	border: 0;
+	border-radius: 20px;
+	padding: 8px 30px;
+	color: #fff;
+}
+#passport .form button[type="submit"]:hover {
+	background: #007ddd;
+	cursor: pointer;
+}
+
 #footer {
 	background: #007aad;
 	color: #ffffff;

themes/openpowerfoundation/layouts/partials/passportform.html

@@ -7,10 +7,10 @@ var goal = "{{ .Site.Params.forms.passport.goal }}";
 </script>
 <section id="passport">
 <div class="container"><div class="row wow fadeInUp">
-	<div class="col-lg-8 offset-lg-2 col-md-12 mt-5 mb-5"><div class="form">
+	<div class="col-lg-8 offset-lg-2 col-md-12"><div class="form">
-		<div id="sendmessage" style="display:none">Your request has been sent. Thank you!</div>
+	<form role="form" name="passportForm" class="passportForm" id="passportForm" action="" method="post">
-		<div id="errormessage" style="display:none">Error</div>
+		<div id="sendmessage">Your request has been sent. Thank you!</div>
-		<form role="form" name="passportForm" class="passportForm" id="passportForm" action="" method="post">
+		<div id="errormessage">Error</div>
 		<div class="form-row">
 			<div class="form-group col-lg-12">
 				<input type="text" name="uid" class="form-control" id="uid" placeholder="Your Unique OPF Passport User ID" data-rule="minlen:2" data-msg="Please enter at least 2 characters" />
@@ -62,7 +62,7 @@ var goal = "{{ .Site.Params.forms.passport.goal }}";
 				<button class="btn btn-outline-primary" type="submit" title="Send Message">Request your passport</button>
 			</div>
 		</div>
-		</form></div>
+	</form></div>
 	</div></div>
 </div>
 </section>