Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add hidden labels on inputs for SR #66

Closed
wants to merge 2 commits into from
Closed

Add hidden labels on inputs for SR #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
680e767
Add hidden labels on inputs for SR
Errec Jan 6, 2018
67b99a4
Recover dist files
Errec Feb 13, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions src/html/contacts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,21 +48,25 @@ <h2>Contact Us</h2>
<form>
<div class="row">
<div class="col">
<label for="" class="visuallyhidden">First name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<label for="" class="visuallyhidden">Last name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>

<div class="row mt-4">
<div class="col">
<label for="" class="visuallyhidden">Enter email</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
</div>

<div class="row mt-4">
<div class="col">
<label for="" class="visuallyhidden">Subject</label>
<input type="email" class="form-control" placeholder="Subject">
</div>
</div>
Expand Down Expand Up @@ -96,18 +100,22 @@ <h2>We love to hear from you!</h2>
<form>
<div class="row">
<div class="col-12 col-md">
<label for="" class="visuallyhidden">Name</label>
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="col-12 col-md mt-4 mt-md-0">
<label for="" class="visuallyhidden">Email</label>
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="col-12 col-md mt-4 mt-md-0">
<label for="" class="visuallyhidden">Phone (optional)</label>
<input type="text" class="form-control" placeholder="Phone (optional)">
</div>
</div>

<div class="row mt-4">
<div class="col">
<label for="" class="visuallyhidden">Subject</label>
<input type="email" class="form-control" placeholder="Subject">
</div>
</div>
Expand Down Expand Up @@ -146,12 +154,14 @@ <h1>Contact Us</h1>
<form>
<div class="row">
<div class="col">
<label for="" class="visuallyhidden">Enter email</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
</div>

<div class="row mt-4">
<div class="col">
<label for="" class="visuallyhidden">Subject</label>
<input type="email" class="form-control" placeholder="Subject">
</div>
</div>
Expand Down Expand Up @@ -188,15 +198,18 @@ <h1>Contact Us</h1>
<form>
<div class="row">
<div class="col-12 col-md">
<label for="" class="visuallyhidden">Name</label>
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="col-12 col-md mt-4 mt-md-0">
<label for="" class="visuallyhidden">Email</label>
<input type="text" class="form-control" placeholder="Email">
</div>
</div>

<div class="row mt-4">
<div class="col">
<label for="" class="visuallyhidden">Subject</label>
<input type="email" class="form-control" placeholder="Subject">
</div>
</div>
Expand Down Expand Up @@ -236,12 +249,14 @@ <h1>Contact Us</h1>
<form>
<div class="row">
<div class="col">
<label for="" class="visuallyhidden">Email</label>
<input type="text" class="form-control" placeholder="Email">
</div>
</div>

<div class="row mt-4">
<div class="col">
<label for="" class="visuallyhidden">Subject</label>
<input type="email" class="form-control" placeholder="Subject">
</div>
</div>
Expand Down Expand Up @@ -457,30 +472,36 @@ <h2>Drop us a line</h2>
<form>
<div class="row">
<div class="col">
<label for="" class="visuallyhidden">First name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<label for="" class="visuallyhidden">Last name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>

<div class="row mt-4">
<div class="col">
<label for="" class="visuallyhidden">Company Name</label>
<input type="text" class="form-control" placeholder="Company Name">
</div>
</div>

<div class="row mt-4">
<div class="col">
<label for="" class="visuallyhidden">Email</label>
<input type="email" class="form-control" placeholder="Email">
</div>
</div>

<div class="row mt-4">
<div class="col">
<label for="" class="visuallyhidden">Phone</label>
<input type="text" class="form-control" placeholder="Phone">
</div>
<div class="col">
<label for="" class="visuallyhidden">Country</label>
<input type="text" class="form-control" placeholder="Country">
</div>
</div>
Expand Down Expand Up @@ -544,12 +565,14 @@ <h1>Contact Us</h1>
<form>
<div class="row">
<div class="col">
<label for="" class="visuallyhidden">Enter email</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
</div>

<div class="row mt-4">
<div class="col">
<label for="" class="visuallyhidden">Subject</label>
<input type="email" class="form-control" placeholder="Subject">
</div>
</div>
Expand Down
22 changes: 22 additions & 0 deletions src/html/forms.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
<div class="col-12 col-md-8 col-lg-6 text-center">
<h1>Subscribe</h1>
<div class="input-group mt-4 mb-4">
<label for="" class="visuallyhidden">Enter your email address</label>
<input type="text" class="form-control" placeholder="Enter your email address">
<span class="input-group-btn">
<button class="btn" type="button">Submit</button>
Expand All @@ -47,6 +48,7 @@ <h2>Join us!</h2>
</div>
<div class="col-12 col-lg-5 text-center">
<div class="input-group mt-4">
<label for="" class="visuallyhidden">Enter your email address</label>
<input type="text" class="form-control" placeholder="Enter your email address">
<span class="input-group-btn">
<button class="btn" type="button">Submit</button>
Expand All @@ -70,9 +72,11 @@ <h1>Register</h1>
</div>
<div class="row align-items-center">
<div class="col-12 col-md-5 mt-4">
<label for="" class="visuallyhidden">Email</label>
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="col-12 col-md-5 mt-4">
<label for="" class="visuallyhidden">Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="col-12 col-md-2 mt-4">
Expand All @@ -96,11 +100,13 @@ <h1>Sign Up</h1>
</div>
<div class="row">
<div class="col mt-4">
<label for="" class="visuallyhidden">Email</label>
<input type="text" class="form-control" placeholder="Email">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for="" class="visuallyhidden">Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
Expand All @@ -127,11 +133,13 @@ <h1>Log In</h1>
</div>
<div class="row">
<div class="col mt-4">
<label for="" class="visuallyhidden">Email</label>
<input type="text" class="form-control" placeholder="Email">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for="" class="visuallyhidden">Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
Expand All @@ -158,26 +166,31 @@ <h1>Register</h1>
</div>
<div class="row align-items-center">
<div class="col mt-4">
<label for="" class="visuallyhidden">Company Name</label>
<input type="text" class="form-control" placeholder="Company Name">
</div>
</div>
<div class="row align-items-center mt-4">
<div class="col">
<label for="" class="visuallyhidden">Email</label>
<input type="email" class="form-control" placeholder="Email">
</div>
</div>
<div class="row align-items-center mt-4">
<div class="col">
<label for="" class="visuallyhidden">Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="col">
<label for="" class="visuallyhidden">Confirm Password</label>
<input type="password" class="form-control" placeholder="Confirm Password">
</div>
</div>
<div class="row justify-content-start mt-4">
<div class="col">
<div class="form-check">
<label class="form-check-label">
<label for="" class="visuallyhidden">input</label>
<input type="checkbox" class="form-check-input">
I Read and Accept <a href="https://www.froala.com">Terms and Conditions</a>
</label>
Expand All @@ -203,11 +216,13 @@ <h1>Log In</h1>
</div>
<div class="row mt-4">
<div class="col">
<label for="" class="visuallyhidden">Email</label>
<input type="text" class="form-control" placeholder="Email">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for="" class="visuallyhidden">Password</label>
<input type="password" class="form-control mb-1" placeholder="Password">
<p class="text-right"><a href="https://www.froala.com">Recover Password</a></p>
</div>
Expand Down Expand Up @@ -235,16 +250,19 @@ <h1>Register</h1>
</div>
<div class="row">
<div class="col mt-4">
<label for="" class="visuallyhidden">Name</label>
<input type="text" class="form-control" placeholder="Name">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for="" class="visuallyhidden">Email</label>
<input type="text" class="form-control" placeholder="Email">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for="" class="visuallyhidden">Password</label>
<input type="password" class="form-control mb-1" placeholder="Password">
<p class="text-right"><a href="https://www.froala.com">Already have an account?</a></p>
</div>
Expand All @@ -268,6 +286,7 @@ <h1>Register</h1>
<h1>Never miss an update</h1>
<p class="text-h3">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
<div class="input-group mt-4 mb-4">
<label for="" class="visuallyhidden">Enter your email address</label>
<input type="text" class="form-control" placeholder="Enter your email address">
<span class="input-group-btn">
<button class="btn" type="button">Submit</button>
Expand All @@ -286,6 +305,7 @@ <h1>Never miss an update</h1>
<h1>Company Name</h1>
<p class="text-h3">When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown.</p>
<div class="input-group mt-5 mb-5">
<label for="" class="visuallyhidden">Enter your email address</label>
<input type="text" class="form-control" placeholder="Enter your email address">
<span class="input-group-btn">
<button class="btn" type="button">Submit</button>
Expand Down Expand Up @@ -319,6 +339,7 @@ <h1>Subscribe</h1>
<div class="row mt-4">
<div class="col">
<div class="input-group">
<label for="" class="visuallyhidden">Enter your email address</label>
<input type="text" class="form-control" placeholder="Enter your email address">
<span class="input-group-btn">
<button class="btn" type="button">Submit</button>
Expand Down Expand Up @@ -351,6 +372,7 @@ <h1>Subscribe</h1>
<div class="row justify-content-center mt-4">
<div class="col-12 col-lg-10">
<div class="input-group">
<label for="" class="visuallyhidden">Enter your email address</label>
<input type="text" class="form-control" placeholder="Enter your email address">
<span class="input-group-btn">
<button class="btn" type="button">Submit</button>
Expand Down
11 changes: 11 additions & 0 deletions src/scss/froala_blocks.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,3 +244,14 @@ table {
}
}
}

.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}