From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Tue, 6 Nov 2018 18:52:37 +0800
Subject: Update the Docs completely

---
 docs/src/contents/forms.pug | 697 --------------------------------------------
 1 file changed, 697 deletions(-)
 delete mode 100644 docs/src/contents/forms.pug

(limited to 'docs/src/contents/forms.pug')

diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug
deleted file mode 100644
index e812aef..0000000
--- a/docs/src/contents/forms.pug
+++ /dev/null
@@ -1,697 +0,0 @@
-p
-  | Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
-
-.docs-demo.columns
-  .column.col-6.col-xs-12
-    .form-group
-      label.form-label(for="input-example-1") Name
-      input#input-example-1.form-input(type="text" placeholder="Name")
-    .form-group
-      label.form-label(for="input-example-2") Email
-      input#input-example-2.form-input(type="email" placeholder="Email")
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      <!-- form input control -->
-      <div class="form-group">
-        <label class="form-label" for="input-example-1">Name</label>
-        <input class="form-input" type="text" id="input-example-1" placeholder="Name">
-      </div>
-
-.docs-demo.columns
-  .column.col-6.col-xs-12
-    .form-group
-      label.form-label(for="input-example-3") Message
-      textarea#input-example-3.form-input(placeholder="Textarea" rows="3")
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      <!-- form textarea control -->
-      <div class="form-group">
-        <label class="form-label" for="input-example-3">Message</label>
-        <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
-      </div>
-
-.docs-demo.columns
-  .column.col-6.col-xs-12
-    .form-group
-      select.form-select
-        option Choose an option
-        option Slack
-        option Skype
-        option Hipchat
-    .form-group
-      select.form-select(multiple="")
-        option Choose an option
-        option Slack
-        option Skype
-        option Hipchat
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      <!-- form select control -->
-      <div class="form-group">
-        <select class="form-select">
-          <option>Choose an option</option>
-          <option>Slack</option>
-          <option>Skype</option>
-          <option>Hipchat</option>
-        </select>
-      </div>
-
-.docs-demo.columns
-  .column.col-6.col-xs-12
-    form
-      .form-group
-        label.form-label Gender
-        label.form-radio
-          input(type="radio" name="gender" checked="")
-          i.form-icon
-          |  Male
-        label.form-radio
-          input(type="radio" name="gender")
-          i.form-icon
-          |  Female
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      <!-- form radio control -->
-      <div class="form-group">
-        <label class="form-label">Gender</label>
-        <label class="form-radio">
-          <input type="radio" name="gender" checked>
-          <i class="form-icon"></i> Male
-        </label>
-        <label class="form-radio">
-          <input type="radio" name="gender">
-          <i class="form-icon"></i> Female
-        </label>
-      </div>
-
-.docs-demo.columns
-  .column.col-6.col-xs-12
-    .form-group
-      label.form-switch
-        input(type="checkbox")
-        i.form-icon
-        |  Send me emails with news and tips
-    .form-group
-      label.form-switch
-        input(type="checkbox" checked="")
-        i.form-icon
-        |  Send me emails with news and tips
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      <!-- form switch control -->
-      <div class="form-group">
-        <label class="form-switch">
-          <input type="checkbox">
-          <i class="form-icon"></i> Send me emails with news and tips
-        </label>
-      </div>
-
-.docs-demo.columns
-  .column.col-6.col-xs-12
-    .form-group
-      label.form-checkbox
-        input(type="checkbox")
-        i.form-icon
-        |  Remember me
-    .form-group
-      label.form-checkbox
-        input(type="checkbox" checked="")
-        i.form-icon
-        |  Remember me
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      <!-- form checkbox control -->
-      <div class="form-group">
-        <label class="form-checkbox">
-          <input type="checkbox">
-          <i class="form-icon"></i> Remember me
-        </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 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')
-
-p
-  | If you want to have a horizontal form, add the #[code form-horizontal] class to the #{'<form>'} container.
-  | And add the #[code col-<1-12>] and #[code col-xs/sm/lg/xl-<1-12>] class to the child elements for responsive form row layout.
-
-.docs-demo.columns
-  .column.col-9.col-sm-12
-    form.form-horizontal(action="#forms")
-      .form-group
-        .col-3.col-sm-12
-          label.form-label(for="input-example-4") Name
-        .col-9.col-sm-12
-          input#input-example-4.form-input(type="text" placeholder="Name")
-      .form-group
-        .col-3.col-sm-12
-          label.form-label(for="input-example-5") Email
-        .col-9.col-sm-12
-          input#input-example-5.form-input(type="email" placeholder="Email")
-      .form-group
-        .col-3.col-sm-12
-          label.form-label Gender
-        .col-9.col-sm-12
-          label.form-radio
-            input(type="radio" name="gender")
-            i.form-icon
-            |  Male
-          label.form-radio
-            input(type="radio" name="gender" checked="")
-            i.form-icon
-            |  Female
-      .form-group
-        .col-3.col-sm-12
-          label.form-label Source
-        .col-9.col-sm-12
-          select.form-select(multiple="")
-            option Slack
-            option Skype
-            option Hipchat
-      .form-group
-        .col-9.col-sm-12.col-ml-auto
-          label.form-switch
-            input(type="checkbox")
-            i.form-icon
-            |  Send me emails with news and tips
-      .form-group
-        .col-3.col-sm-12
-          label.form-label(for="input-example-6") Message
-        .col-9.col-sm-12
-          textarea#input-example-6.form-input(placeholder="Textarea" rows="3")
-      .form-group
-        .col-9.col-sm-12.col-ml-auto
-          label.form-checkbox
-            input(type="checkbox")
-            i.form-icon
-            |  Remember me
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      <form class="form-horizontal">
-        <div class="form-group">
-          <div class="col-3 col-sm-12">
-            <label class="form-label" for="input-example-1">Name</label>
-          </div>
-          <div class="col-9 col-sm-12">
-            <input class="form-input" type="text" id="input-example-1" placeholder="Name">
-          </div>
-        </div>
-        <!-- form structure -->
-      </form>
-
-+docs-subheading('forms-sizes', 'Form sizes')
-
-p
-  | For smaller or larger input and select controls, you could add the #[code input-sm]/#[code input-lg], #[code select-sm]/#[code select-lg] and #[code label-sm]/#[code label-lg] classes to the elements.
-
-.docs-demo.columns
-  .column.col-4.col-xs-12
-    label.form-label.label-sm Label
-  .column.col-4.col-xs-12
-    input.form-input.input-sm(type="text" placeholder="Name")
-  .column.col-4.col-xs-12
-    select.form-select.select-sm
-      option Choose an option
-      option Slack
-      option Skype
-      option Hipchat
-  .column.col-4.col-xs-12
-    label.form-label.label-lg Label
-  .column.col-4.col-xs-12
-    input.form-input.input-lg(type="text" placeholder="Name")
-  .column.col-4.col-xs-12
-    select.form-select.select-lg
-      option Choose an option
-      option Slack
-      option Skype
-      option Hipchat
-
-p
-  | You can add the #[code input-sm]/#[code input-lg] classes to the input-checkbox, input-radio and input-switch to have different sizes.
-
-+docs-subheading('forms-icons', 'Form icons')
-
-p
-  | Spectre Form components has 
-  a(href="#icons") Spectre Icons
-  |  support.
-p
-  | Add a wrapper with the #[code has-icon-left]/#[code has-icon-right] class to #{'<input>'} element.
-  | And add the icon with #[code form-icon] class next to the #{'<input>'}.
-
-.docs-demo.columns
-  .column.col-4.col-xs-12
-    .has-icon-left
-      input.form-input.input-sm(type="text" placeholder="Name")
-      i.form-icon.icon.icon-arrow-right
-  .column.col-4.col-xs-12
-    .has-icon-left.tooltip(data-tooltip="Lorem ipsum dolor sit amet")
-      input.form-input(type="text" placeholder="Name")
-      i.form-icon.icon.icon-arrow-right
-  .column.col-4.col-xs-12
-    .has-icon-left
-      input.form-input.input-lg(type="text" placeholder="Name")
-      i.form-icon.icon.icon-arrow-right
-  .column.col-4.col-xs-12
-    .has-icon-right
-      input.form-input.input-sm(type="text" placeholder="Name")
-      i.form-icon.icon.icon-check
-  .column.col-4.col-xs-12
-    .has-icon-right
-      input.form-input(type="text" placeholder="Name")
-      i.form-icon.icon.icon-check
-  .column.col-4.col-xs-12
-    .has-icon-right
-      input.form-input.input-lg(type="text" placeholder="Name")
-      i.form-icon.icon.icon-check
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      <!-- form input with Spectre icon -->
-      <div class="has-icon-left">
-        <input type="text" class="form-input" placeholder="...">
-        <i class="form-icon icon icon-check"></i>
-      </div>
-
-p
-  | You can use the #[code loading] class for loading or posting state.
-
-.docs-demo.columns
-  .column.col-4.col-xs-12
-    .has-icon-right
-      input.form-input.input-sm(type="text" placeholder="Name")
-      i.form-icon.loading
-  .column.col-4.col-xs-12
-    .has-icon-right
-      input.form-input(type="text" placeholder="Name")
-      i.form-icon.loading
-  .column.col-4.col-xs-12
-    .has-icon-right
-      input.form-input.input-lg(type="text" placeholder="Name")
-      i.form-icon.loading
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      <!-- form input with loading icon -->
-      <div class="has-icon-right">
-        <input type="text" class="form-input" placeholder="...">
-        <i class="form-icon loading"></i>
-      </div>
-
-+docs-subheading('forms-input', 'Input types')
-
-.docs-demo.columns
-  .column.col-9.col-sm-12
-    form.form-horizontal(action="#forms")
-      .form-group
-        .col-3
-          label.form-label(for="input-example-8") Email
-        .col-9
-          input#input-example-8.form-input(type="email" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$")
-      .form-group
-        .col-3
-          label.form-label(for="input-example-9") URL
-        .col-9
-          input#input-example-9.form-input(type="url" placeholder="URL" value="https://github.com/picturepan2/spectre")
-      .form-group
-        .col-3
-          label.form-label(for="input-example-10") Search
-        .col-9
-          input#input-example-10.form-input(type="search" placeholder="Search")
-      .form-group
-        .col-3
-          label.form-label(for="input-example-11") Tel
-        .col-9
-          input#input-example-11.form-input(type="tel" placeholder="Tel" value="1-(888)-888-8888")
-      .form-group
-        .col-3
-          label.form-label(for="input-example-12") Password
-        .col-9
-          input#input-example-12.form-input(type="password" placeholder="Password" value="123456789")
-      .form-group
-        .col-3
-          label.form-label(for="input-example-13") Number
-        .col-9
-          input#input-example-13.form-input(type="number" placeholder="00" value="66")
-      .form-group
-        .col-3
-          label.form-label(for="input-example-14") Date
-        .col-9
-          input#input-example-14.form-input(type="date" value="2016-12-31")
-      .form-group
-        .col-3
-          label.form-label(for="input-example-15") Color
-        .col-9
-          input#input-example-15.form-input(type="color" value="#5755d9")
-      .form-group
-        .col-3
-          label.form-label(for="input-example-16") File
-        .col-9
-          input#input-example-16.form-input(type="file")
-
-+docs-subheading('forms-input-groups', 'Input groups')
-
-.docs-demo.columns
-  .column.col-6.col-xs-12
-    .input-group
-      input.form-input.input-sm(type="text" placeholder="username")
-      select.form-select.select-sm
-        option Slack
-        option Skype
-        option Hipchat
-  .column.col-6.col-xs-12
-    .input-group
-      span.input-group-addon.addon-sm slack.com/
-      input.form-input.input-sm(type="text" placeholder="site name")
-      button.btn.btn-primary.input-group-btn.btn-sm Submit
-  .column.col-6.col-xs-12
-    .input-group
-      input.form-input(type="text" placeholder="username")
-      select.form-select
-        option Slack
-        option Skype
-        option Hipchat
-  .column.col-6.col-xs-12
-    .input-group
-      span.input-group-addon slack.com/
-      input.form-input(type="text" placeholder="site name")
-      button.btn.btn-primary.input-group-btn Submit
-  .column.col-6.col-xs-12
-    .input-group
-      label.form-switch
-        input(type="checkbox")
-        i.form-icon
-      input.form-input(type="text" placeholder="name")
-  .column.col-6.col-xs-12
-    .input-group
-      label.form-checkbox
-        input(type="checkbox")
-        i.form-icon
-      input.form-input(type="text" placeholder="name")
-  .column.col-6.col-xs-12
-    .input-group
-      input.form-input.input-lg(type="text" placeholder="username")
-      select.form-select.select-lg
-        option Slack
-        option Skype
-        option Hipchat
-  .column.col-6.col-xs-12
-    .input-group
-      span.input-group-addon.addon-lg slack.com/
-      input.form-input.input-lg(type="text" placeholder="site name")
-      button.btn.btn-primary.input-group-btn.btn-lg Submit
-
-p
-  | If you want to attach text and button along with an input, add the #[code input-group] class to the input container.
-  | And add the #[code input-group-addon] class to the text element and #[code input-group-btn] to the button element.
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      <!-- normal input group -->
-      <div class="input-group">
-        <span class="input-group-addon">...</span>
-        <input type="text" class="form-input" placeholder="...">
-      </div>
-
-      <!-- large input group -->
-      <div class="input-group">
-        <span class="input-group-addon addon-lg">...</span>
-        <input type="text" class="form-input input-lg" placeholder="...">
-      </div>
-
-      <!-- normal input group with button -->
-      <div class="input-group">
-        <span class="input-group-addon">...</span>
-        <input type="text" class="form-input" placeholder="...">
-        <button class="btn btn-primary input-group-btn">Submit</button>
-      </div>
-
-+docs-subheading('forms-validation', 'Form validation styles')
-
-.docs-demo.columns
-  .column.col-9.col-sm-12
-    fieldset
-      legend Input
-      .form-group
-        label.form-label(for="input-example-17") Name
-        input#input-example-17.form-input.is-success(type="text" placeholder="Name")
-        p.form-input-hint The name is valid.
-      .form-group.has-error
-        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.
-    fieldset
-      legend Select
-      .form-group
-        select.form-select.is-error
-          option Choose an option
-          option Slack
-          option Skype
-          option Hipchat
-        p.form-input-hint The option is invalid.
-      .form-group.has-success
-        select.form-select
-          option Choose an option
-          option Slack
-          option Skype
-          option Hipchat
-        p.form-input-hint The option is available.
-    fieldset
-      legend Checkbox, Radio and Switch (Error state only)
-      .form-group
-        label.form-checkbox.is-error
-          input(type="checkbox" checked="")
-          i.form-icon
-          |  I'm not a robot.
-      .form-group.has-error
-        label.form-radio
-          input(type="radio" name="gender" checked="")
-          i.form-icon
-          |  Male
-        label.form-radio
-          input(type="radio" name="gender")
-          i.form-icon
-          |  Female
-      .form-group
-        label.form-switch.is-error
-          input(type="checkbox" checked="")
-          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")
-      <form>
-        <!-- form validation class: has-success -->
-        <div class="form-group has-success">
-          <label class="form-label" for="input-example-1">Name</label>
-          <input class="form-input" type="text" id="input-example-1" placeholder="...">
-          <p class="form-input-hint">The name is invalid.</p>
-        </div>
-
-        <!-- form validation class: is-success -->
-        <div class="form-group">
-          <label class="form-label" for="input-example-1">Name</label>
-          <input class="form-input is-success" type="text" id="input-example-1" placeholder="...">
-          <p class="form-input-hint">The name is invalid.</p>
-        </div>
-
-        <!-- form validation example for checkbox, radio and switch -->
-        <div class="form-group">
-          <label class="form-checkbox is-error">
-            <input type="checkbox">
-            <i class="form-icon"></i> Remember me
-          </label>
-        </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 
-  | Add the #[code disabled] attribute to the element or #{'<fieldset>'} for a disabled form components style.
-
-.docs-demo.columns
-  .column.col-6.col-xs-12
-    form(action="#forms")
-      fieldset(disabled="")
-        .form-group
-          label.form-label(for="input-example-19") Name
-          input#input-example-19.form-input(type="text" placeholder="Name")
-        .form-group
-          label.form-label Gender
-          label.form-radio
-            input(type="radio" name="gender" disabled="")
-            i.form-icon
-            |  Male
-          label.form-radio
-            input(type="radio" name="gender" disabled="")
-            i.form-icon
-            |  Female
-        .form-group
-          select.form-select(disabled="")
-            option Choose an option
-            option Slack
-            option Skype
-            option Hipchat
-        .form-group
-          label.form-switch
-            input(type="checkbox" disabled="")
-            i.form-icon
-            |  Send me emails with news and tips
-        .form-group
-          label.form-label(for="input-example-20") Message
-          textarea#input-example-20.form-input(placeholder="Textarea" rows="3" disabled="")
-        .form-group
-          label.form-checkbox
-            input(type="checkbox" disabled="")
-            i.form-icon
-            |  Remember me
-
-pre.code(data-lang='HTML')
-  code
-    :highlight(lang="html")
-      <form action="#forms">
-        <fieldset disabled>
-          <div class="form-group">
-            <label class="form-label" for="input-example-19">Name</label>
-            <input class="form-input" type="text" id="input-example-19" placeholder="Name">
-          </div>
-          <div class="form-group">
-            <label class="form-label">Gender</label>
-            <label class="form-radio">
-              <input type="radio" name="gender" disabled>
-              <i class="form-icon"></i> Male
-            </label>
-            <label class="form-radio">
-              <input type="radio" name="gender" disabled>
-              <i class="form-icon"></i> Female
-            </label>
-          </div>
-          <div class="form-group">
-            <select class="form-select" disabled>
-              <option>Choose an option</option>
-              <option>Slack</option>
-              <option>Skype</option>
-              <option>Hipchat</option>
-            </select>
-          </div>
-          <div class="form-group">
-            <label class="form-switch">
-              <input type="checkbox" disabled>
-              <i class="form-icon"></i> Send me emails with news and tips
-            </label>
-          </div>
-          <div class="form-group">
-            <label class="form-label" for="input-example-20">Message</label>
-            <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled></textarea>
-          </div>
-          <div class="form-group">
-            <label class="form-checkbox">
-              <input type="checkbox" disabled>
-              <i class="form-icon"></i> Remember me
-            </label>
-          </div>
-        </fieldset>
\ No newline at end of file
-- 
cgit v1.3.1-26-gb76a