Skip to content
Permalink
Browse files

Forms: Added red asterisk to mandatory fields and red colour to requi…

…red text (partially fixes #4812)
  • Loading branch information...
pjackson28 committed Mar 15, 2014
1 parent b6ba124 commit a597809767e611c2ef9761b02f9971adcbe2d0b5
@@ -0,0 +1,21 @@
/*
WET-BOEW
@title: Form additions to WET-BOEW
*/
%forms-color-c00 {
color: #c00;
}
label, legend {
&.required {
&:before {
@extend %forms-color-c00;
content: "* ";
margin-left: -0.665em;
}
strong {
&.required {
@extend %forms-color-c00;
}
}
}
}
@@ -57,6 +57,7 @@ $icon-font-path: "../fonts/";
@import "partials/transitions";
@import "partials/proximity";
@import "partials/lists";
@import "partials/forms";

/*
Plugins
@@ -18,7 +18,7 @@
<input type="hidden" name="language" value="en" />
<div id="type">
<div class="form-group">
<label for="fbrsn"><span class="field-name">Reason for contacting us</span> <strong>(required)</strong></label>
<label for="fbrsn" class="required"><span class="field-name">Reason for contacting us</span> <strong class="required">(required)</strong></label>
<select class="form-control" name="fbrsn" id="fbrsn" required="required">
<option value=""> </option>
<option value="web">Critical problem with the website</option>
@@ -34,7 +34,7 @@
<input class="form-control" type="text" id="fbsbj" name="fbsbj" size="45" maxlength="60" />
</div>
<div class="form-group">
<label for="fbmsg"><span class="field-name">Message</span> <strong>(required)</strong></label>
<label for="fbmsg" class="required"><span class="field-name">Message</span> <strong class="required">(required)</strong></label>
<textarea class="form-control" id="fbmsg" name="fbmsg" rows="5" cols="45" required="required"></textarea>
</div>
</div>
@@ -160,7 +160,7 @@
<input class="form-control" type="text" id="fbnm" name="fbnm" size="45" maxlength="45" pattern=".{2,}" data-rule-minlength="2" />
</div>
<div class="form-group">
<label for="fbeml"><span class="field-name">E-mail address</span> <strong>(required)</strong></label>
<label for="fbeml" class="required"><span class="field-name">E-mail address</span> <strong class="required">(required)</strong></label>
<input class="form-control" type="email" id="fbeml" name="fbeml" size="45" maxlength="60" required="required" />
</div>
<div class="form-group">
@@ -18,7 +18,7 @@
<input type="hidden" name="language" value="fr" />
<div id="type">
<div class="form-group">
<label for="fbrsn"><span class="field-name">Raison pour communiquer avec nous</span> <strong>(obligatoire)</strong></label>
<label for="fbrsn" class="required"><span class="field-name">Raison pour communiquer avec nous</span> <strong class="required">(obligatoire)</strong></label>
<select class="form-control" name="fbrsn" id="fbrsn" required="required">
<option value=""> </option>
<option value="web">Problème critique avec le site Web</option>
@@ -34,7 +34,7 @@
<input class="form-control" type="text" id="fbsbj" name="fbsbj" size="45" maxlength="60" />
</div>
<div class="form-group">
<label for="fbmsg"><span class="field-name">Message</span> <strong>(obligatoire)</strong></label>
<label for="fbmsg" class="required"><span class="field-name">Message</span> <strong class="required">(obligatoire)</strong></label>
<textarea class="form-control" id="fbmsg" name="fbmsg" rows="5" cols="45" required="required"></textarea>
</div>
</div>
@@ -160,7 +160,7 @@
<input class="form-control" type="text" id="fbnm" name="fbnm" size="45" maxlength="45" pattern=".{2,}" data-rule-minlength="2" />
</div>
<div class="form-group">
<label for="fbeml"><span class="field-name">Adresse de courriel</span> <strong>(obligatoire)</strong></label>
<label for="fbeml" class="required"><span class="field-name">Adresse de courriel</span> <strong class="required">(obligatoire)</strong></label>
<input class="form-control" type="email" id="fbeml" name="fbeml" size="45" maxlength="60" required="required" />
</div>
<div class="form-group">
@@ -15,7 +15,7 @@
<fieldset>
<legend>Contact information</legend>
<div class="form-group">
<label for="title1"><span class="field-name">Title</span> <strong>(required)</strong></label>
<label for="title1" class="required"><span class="field-name">Title</span> <strong class="required">(required)</strong></label>
<select class="form-control" id="title1" name="title1" required="required">
<option label="Select a title"></option>
<option value="dr">Dr.</option>
@@ -25,15 +25,15 @@
</select>
</div>
<div class="form-group">
<label for="fname1"><span class="field-name">First Name</span> <strong>(required)</strong></label>
<label for="fname1" class="required"><span class="field-name">First Name</span> <strong class="required">(required)</strong></label>
<input class="form-control" id="fname1" name="fname1" type="text" required="required" pattern=".{2,}" data-rule-minlength="2" />
</div>
<div class="form-group">
<label for="lname1"><span class="field-name">Last Name</span> <strong>(required)</strong></label>
<label for="lname1" class="required"><span class="field-name">Last Name</span> <strong class="required">(required)</strong></label>
<input class="form-control" id="lname1" name="lname1" type="text" required="required" pattern=".{2,}" data-rule-minlength="2" />
</div>
<div class="form-group">
<label for="tel1"><span class="field-name">Telephone Number</span> (999-999-9999) <strong>(required)</strong></label>
<label for="tel1" class="required"><span class="field-name">Telephone Number</span> (999-999-9999) <strong class="required">(required)</strong></label>
<input class="form-control" id="tel1" name="tel1" type="tel" required="required" data-rule-phoneUS="true" />
</div>
<div class="form-group">
@@ -83,7 +83,7 @@
</fieldset>

<fieldset>
<legend><span class="field-name">Favourite pet</span> (select at least one of the following options)</legend>
<legend class="required"><span class="field-name">Favourite pet</span> <strong class="required">(required)</strong></legend>
<div class="checkbox">
<label for="animal1"><input type="checkbox" name="animal" value="1" id="animal1" required="required" />&#160;&#160;Dog</label>
</div>
@@ -99,7 +99,7 @@
</fieldset>

<fieldset>
<legend><span class="field-name">Citizenship status</span></legend>
<legend class="required"><span class="field-name">Citizenship status</span> <strong class="required">(required)</strong></legend>
<div class="radio">
<label for="status1"><input type="radio" name="status" value="1" id="status1" required="required" />&#160;&#160;Canadian citizen</label>
</div>
@@ -15,7 +15,7 @@
<fieldset>
<legend>Coordonnées</legend>
<div class="form-group">
<label for="title1"><span class="field-name">Titre</span> <strong>(obligatoire)</strong></label>
<label for="title1" class="required"><span class="field-name">Titre</span> <strong class="required">(obligatoire)</strong></label>
<select class="form-control" id="title1" name="title1" required="required">
<option label="Sélectionner un titre"></option>
<option value="dr">D. Ph.</option>
@@ -25,15 +25,15 @@
</select>
</div>
<div class="form-group">
<label for="fname"><span class="field-name">Prénom</span> <strong>(obligatoire)</strong></label>
<label for="fname" class="required"><span class="field-name">Prénom</span> <strong class="required">(obligatoire)</strong></label>
<input class="form-control" id="fname" name="fname" type="text" required="required" pattern=".{2,}" data-rule-minlength="2" />
</div>
<div class="form-group">
<label for="lname"><span class="field-name">Nom de famille</span> <strong>(obligatoire)</strong></label>
<label for="lname" class="required"><span class="field-name">Nom de famille</span> <strong class="required">(obligatoire)</strong></label>
<input class="form-control" id="lname" name="lname" type="text" required="required" pattern=".{2,}" data-rule-minlength="2" />
</div>
<div class="form-group">
<label for="tel"><span class="field-name">Numéro de téléphone</span> (999-999-9999) <strong>(obligatoire)</strong></label>
<label for="tel" class="required"><span class="field-name">Numéro de téléphone</span> (999-999-9999) <strong class="required">(obligatoire)</strong></label>
<input class="form-control" id="tel" name="tel" type="tel" required="required" data-rule-phoneUS="true" />
</div>
<div class="form-group">
@@ -83,7 +83,7 @@
</fieldset>

<fieldset>
<legend><span class="field-name">Animal favori</span> (sélectionner au moins une des options ci-dessous)</legend>
<legend class="required"><span class="field-name">Animal favori</span> <strong class="required">(obligatoire)</strong></legend>
<div class="checkbox">
<label for="animal1"><input type="checkbox" name="animal" value="1" id="animal1" required="required" />&#160;&#160;Chien</label>
</div>
@@ -99,9 +99,9 @@
</fieldset>

<fieldset>
<legend><span class="field-name">Statut de citoyen</span></legend>
<legend class="required"><span class="field-name">Statut de citoyen</span> <strong class="required">(obligatoire)</strong></legend>
<div class="radio">
<label for="status1"><input type="radio" name="status" value="1" id="status1" required="required" />&#160;&#160;Citoyen canadien</label>
<label for="status1" class="required"><input type="radio" name="status" value="1" id="status1" required="required" />&#160;&#160;Citoyen canadien</label>
</div>
<div class="radio">
<label for="status2"><input type="radio" name="status" value="2" id="status2" />&#160;&#160;Résident permanent</label>

0 comments on commit a597809

Please sign in to comment.
You can’t perform that action at this time.