diff options
Change naming `danger` to `error`
1 files changed, 99 insertions, 99 deletions
| -rw-r--r-- | docs/elements.html | 198 |
diff --git a/docs/elements.html b/docs/elements.html index 2157e6c..85448a3 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -711,6 +711,43 @@ <<span class="tag">/form</span>> </code></pre> + <header class="text-center"><h4>Form sizes</h4></header> + <section class="notes"> + <p>For smaller or larger input and select controls, you could add the <code>input-sm</code>/<code>input-lg</code>, <code>select-sm</code>/<code>select-lg</code> and <code>label-sm</code>/<code>label-lg</code> classes to the elements.</p> + </section> + <div class="columns"> + <div class="column col-4"> + <input class="form-input input-sm" type="text" placeholder="Name" /> + </div> + <div class="column col-4"> + <select class="form-select select-sm"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + <div class="column col-4"> + <label class="form-label label-sm">Label</label> + </div> + </div> + <div class="columns"> + <div class="column col-4"> + <input class="form-input input-lg" type="text" placeholder="Name" /> + </div> + <div class="column col-4"> + <select class="form-select select-lg"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + <div class="column col-4"> + <label class="form-label label-lg">Label</label> + </div> + </div> + <header class="text-center"><h4>Input types</h4></header> <div class="columns"> <div class="column col-9 col-sm-12"> @@ -720,7 +757,7 @@ <label class="form-label" for="input-example-8">Email</label> </div> <div class="col-9"> - <input class="form-input" type="email" id="input-example-8" placeholder="Email" value="spectre@example.com" /> + <input class="form-input" type="email" id="input-example-8" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$" /> </div> </div> <div class="form-group"> @@ -791,102 +828,6 @@ </div> </div> - <header class="text-center"><h4>Form validation styles</h4></header> - <section class="notes"> - <p>To use form validation styles, add <code>is-success</code> or <code>is-danger</code> class to the controls or add <code>has-success</code> or <code>has-danger</code> class to parent elements. You can use the <code>form-input-hint</code> class to provide form validation success and error messages.</p> - </section> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="form-group"> - <label class="form-label" for="input-example-17">Name</label> - <input class="form-input is-danger" type="text" id="input-example-17" placeholder="Name" /> - <p class="form-input-hint">The name is invalid.</p> - </div> - <div class="form-group has-success"> - <label class="form-label" for="input-example-18">Email</label> - <input class="form-input" type="email" id="input-example-18" placeholder="Email" /> - <p class="form-input-hint">The email is available.</p> - </div> - </div> - </div> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="form-group"> - <select class="form-select is-danger"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - <p class="form-input-hint">The option is invalid.</p> - </div> - <div class="form-group has-success"> - <select class="form-select"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - <p class="form-input-hint">The option is available.</p> - </div> - </div> - </div> - -<!-- forms example --> -<pre class="code" data-lang="HTML"><code><<span class="tag">form</span>> - <span class="com"><!-- form validation class: has-success --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group has-success"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span> /> - <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invalid.<<span class="tag">/p</span>> - <<span class="tag">/div</span>> - - <span class="com"><!-- form validation class: is-success --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input is-success"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span> /> - <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invalid.<<span class="tag">/p</span>> - <<span class="tag">/div</span>> -<<span class="tag">/form</span>> -</code></pre> - - <header class="text-center"><h4>Form sizes</h4></header> - <section class="notes"> - <p>For smaller or larger input and select controls, you could add the <code>input-sm</code>/<code>input-lg</code>, <code>select-sm</code>/<code>select-lg</code> and <code>label-sm</code>/<code>label-lg</code> classes to the elements.</p> - </section> - <div class="columns"> - <div class="column col-4"> - <input class="form-input input-sm" type="text" placeholder="Name" /> - </div> - <div class="column col-4"> - <select class="form-select select-sm"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> - <div class="column col-4"> - <label class="form-label label-sm">Label</label> - </div> - </div> - <div class="columns"> - <div class="column col-4"> - <input class="form-input input-lg" type="text" placeholder="Name" /> - </div> - <div class="column col-4"> - <select class="form-select select-lg"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> - <div class="column col-4"> - <label class="form-label label-lg">Label</label> - </div> - </div> - <header class="text-center"><h4>Input groups</h4></header> <div class="columns"> <div class="column col-xs-12"> @@ -958,6 +899,65 @@ <<span class="tag">/div</span>> </code></pre> + <header class="text-center"><h4>Form validation styles</h4></header> + <section class="notes"> + <p>To use form validation styles, add <code>is-success</code> or <code>is-error</code> class to the controls or add <code>has-success</code> or <code>has-error</code> class to parent elements. You can use the <code>form-input-hint</code> class to provide form validation success and error messages.</p> + </section> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <div class="form-group"> + <label class="form-label" for="input-example-17">Name</label> + <input class="form-input is-error" type="text" id="input-example-17" placeholder="Name" /> + <p class="form-input-hint">The name is invalid.</p> + </div> + <div class="form-group has-success"> + <label class="form-label" for="input-example-18">Email</label> + <input class="form-input" type="email" id="input-example-18" placeholder="Email" /> + <p class="form-input-hint">The email is available.</p> + </div> + </div> + </div> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <div class="form-group"> + <select class="form-select is-error"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + <p class="form-input-hint">The option is invalid.</p> + </div> + <div class="form-group has-success"> + <select class="form-select"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + <p class="form-input-hint">The option is available.</p> + </div> + </div> + </div> + +<!-- forms example --> +<pre class="code" data-lang="HTML"><code><<span class="tag">form</span>> + <span class="com"><!-- form validation class: has-success --></span> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group has-success"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span> /> + <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invalid.<<span class="tag">/p</span>> + <<span class="tag">/div</span>> + + <span class="com"><!-- form validation class: is-success --></span> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input is-success"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span> /> + <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invalid.<<span class="tag">/p</span>> + <<span class="tag">/div</span>> +<<span class="tag">/form</span>> +</code></pre> + <header class="text-center"><h4>Form disabled styles</h4></header> <section class="notes"> <p>Add the <code>disabled</code> attribute to the element or <fieldset> for a disabled form components style.</p> @@ -1271,11 +1271,11 @@ <span class="label label-primary">primary label</span> <span class="label label-success">success label</span> <span class="label label-warning">warning label</span> - <span class="label label-danger">danger label</span> + <span class="label label-error">error label</span> </div> </div> <section class="notes"> - <p>Add the <code>label</code> class to <span> or <small> elements. You can add another class <code>label-primary</code>, <code>label-success</code>, <code>label-warning</code> and <code>label-danger</code> for a primary colored label.</p> + <p>Add the <code>label</code> class to <span> or <small> elements. You can add another class <code>label-primary</code>, <code>label-success</code>, <code>label-warning</code> and <code>label-error</code> for a primary colored label.</p> </section> <!-- labels example --> |