Merge pull request #456 from picturepan2/0.5.3 v0.5.3

0.5.3

1 files changed, 85 insertions, 9 deletions

diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug
index 75c096e..e812aef 100644
--- a/docs/src/contents/forms.pug
+++ b/docs/src/contents/forms.pug
@@ -140,8 +140,67 @@ pre.code(data-lang='HTML')
         </label>
       </div>
 
+.docs-demo.columns
+  .column
+    .form-group
+      label.form-checkbox
+        input#docs-demo-checkbox(type="checkbox")
+        i.form-icon
+        |  Select all
+
+script.
+  document.getElementById("docs-demo-checkbox").indeterminate = true;
+
 p
-  | You can use #[code :indeterminate] pseudo class for indeterminate state of checkboxes.
+  | You can change checkbox to indeterminate state by setting the #[code indeterminate] property of input checkboxes to #[code true].
+
++docs-subheading('forms-inline', 'Inline forms')
+
+.docs-demo.columns
+  .column.col-6.col-xs-12
+    form
+      .form-group
+        label.form-radio.form-inline
+          input(type="radio" name="gender" checked="")
+          i.form-icon
+          |  Male
+        label.form-radio.form-inline
+          input(type="radio" name="gender")
+          i.form-icon
+          |  Female
+      .form-group
+        label.form-checkbox.form-inline
+          input(type="checkbox")
+          i.form-icon
+          |  Checkbox 1
+        label.form-checkbox.form-inline
+          input(type="checkbox" checked="")
+          i.form-icon
+          |  Checkbox 2
+
+p
+  | You can add the #[code form-inline] class to the form components to make them inline in one row.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <div class="form-group">
+        <label class="form-radio form-inline">
+          <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
+        </label>
+        <label class="form-radio form-inline">
+          <input type="radio" name="gender"><i class="form-icon"></i> Female
+        </label>
+      </div>
+
+      <div class="form-group">
+        <label class="form-checkbox form-inline">
+          <input type="checkbox"><i class="form-icon"></i> Checkbox 1
+        </label>
+        <label class="form-checkbox form-inline">
+          <input type="checkbox" checked=""><i class="form-icon"></i> Checkbox 2
+        </label>
+      </div>
 
 +docs-subheading('forms-horizontal', 'Horizontal forms')
 
@@ -447,10 +506,6 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('forms-validation', 'Form validation styles')
 
-p
-  | To use form validation styles, you can either add #[code is-success] or #[code is-error] class to the controls or add #[code has-success] or #[code has-error] class to parent elements.
-  | Use the #[code form-input-hint] class to provide form validation success and error messages.
-
 .docs-demo.columns
   .column.col-9.col-sm-12
     fieldset
@@ -463,10 +518,6 @@ p
         label.form-label(for="input-example-18") Password
         input#input-example-18.form-input(type="password" placeholder="Password")
         p.form-input-hint Passwords must have at least 8 characters.
-      .form-group
-        label.form-label(for="input-example-21") Email
-        input#input-example-21.form-input(type="text" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$")
-        p.form-input-hint The Email address is unavailable.
     fieldset
       legend Select
       .form-group
@@ -505,6 +556,10 @@ p
           i.form-icon
           |  Send me emails with news and tips
 
+p
+  | To use form validation styles, you can either add #[code is-success] or #[code is-error] class to the controls or add #[code has-success] or #[code has-error] class to parent elements.
+  | Use the #[code form-input-hint] class to provide form validation success and error messages.
+
 pre.code(data-lang='HTML')
   code
     :highlight(lang="html")
@@ -532,6 +587,27 @@ pre.code(data-lang='HTML')
         </div>
       </form>
 
+.docs-demo.columns
+  .column.col-9.col-sm-12
+    .form-group
+      label.form-label(for="input-example-21") Email
+      input#input-example-21.form-input(type="text" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$")
+    .form-group
+      label.form-label(for="input-example-22") Password
+      input#input-example-22.form-input(type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$")
+
+p
+  | You can use input #[code pattern] attribute to validate the value as well.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <!-- pattern validation example for Email -->
+      <input class="form-input" type="email" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$">
+
+      <!-- pattern validation example for password (8 or more characters that are of at least one number, and one uppercase and lowercase letter) -->
+      <input class="form-input" type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$">
+
 +docs-subheading('forms-disabled', 'Form disabled styles')
 
 p