Browse Source

change the passport form style

Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>
master
Toshaan Bharvani 8 months ago
parent
commit
504545309c
  1. 75
      themes/openpowerfoundation/assets/css/forms.scss
  2. 29
      themes/openpowerfoundation/assets/css/main.css
  3. 49
      themes/openpowerfoundation/assets/css/style.css
  4. 10
      themes/openpowerfoundation/layouts/partials/passportform.html

75
themes/openpowerfoundation/assets/css/forms.scss

@ -1,3 +1,78 @@ @@ -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%;

29
themes/openpowerfoundation/assets/css/main.css

@ -4983,35 +4983,6 @@ textarea.form-control-lg { @@ -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;
}

49
themes/openpowerfoundation/assets/css/style.css

@ -1245,7 +1245,7 @@ body.mobile-nav-active #mobile-nav-toggle { @@ -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 { @@ -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;

10
themes/openpowerfoundation/layouts/partials/passportform.html

@ -7,10 +7,10 @@ var goal = "{{ .Site.Params.forms.passport.goal }}"; @@ -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 id="sendmessage" style="display:none">Your request has been sent. Thank you!</div>
<div id="errormessage" style="display:none">Error</div>
<form role="form" name="passportForm" class="passportForm" id="passportForm" action="" method="post">
<div class="col-lg-8 offset-lg-2 col-md-12"><div class="form">
<form role="form" name="passportForm" class="passportForm" id="passportForm" action="" method="post">
<div id="sendmessage">Your request has been sent. Thank you!</div>
<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 }}"; @@ -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>

Loading…
Cancel
Save