mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-02 20:07:40 +02:00
77 lines
9.7 KiB
JavaScript
77 lines
9.7 KiB
JavaScript
module.exports = {
|
|
id: 'forms-and-input',
|
|
title: 'Forms & input',
|
|
keywords: [`form`, `fieldset`, `legend`, `input`, `type`, `text`, `checkbox`, `radio`, `email`, `password`, `tel`, `input-group`, `input group`, `row`, `col`, `column`, `vertical`, `fluid`, `file`, `upload`, `select`, `textarea`, `option`, `label`],
|
|
description: `<p>Forms, labels and common HTML5 input elements have been styled using clean, modern rules, improving the accessibility and usability of your web apps' forms.</p>`,
|
|
example: `<form><fieldset><legend class="doc">Sample form</legend>
|
|
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-text" class="doc">Text</label></div>
|
|
<div class="col-sm-12 col-md"><input type="text" placeholder="Text" id="sf1-text" style="width:85%;" class="doc"></div></div>
|
|
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-pwd" class="doc">Password</label></div>
|
|
<div class="col-sm-12 col-md"><input type="password" placeholder="Password" id="sf1-pwd" style="width:85%;" class="doc"></div></div>
|
|
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-num" class="doc">Number</label></div>
|
|
<div class="col-sm-12 col-md"><input type="number" value="42" id="sf1-num" style="width:85%;" class="doc"></div></div>
|
|
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-select" class="doc">Select</label></div>
|
|
<div class="col-sm-12 col-md"><select id="sf1-select" style="width:85%;" class="doc"><option class="doc">Apples</option><option class="doc">Oranges</option></select></div></div>
|
|
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-check" class="doc">Checkbox</label></div>
|
|
<div class="col-sm-12 col-md"><input type="checkbox" autocomplete="off" id="sf1-check" class="doc"></div></div>
|
|
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-radio" class="doc">Radio</label></div>
|
|
<div class="col-sm-12 col-md"><input type="radio" autocomplete="off" id="sf1-radio" class="doc"></div></div>
|
|
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-textarea" class="doc">Textarea</label></div>
|
|
<div class="col-sm-12 col-md"><textarea class="doc" style="width:85%;" placeholder="Textarea"></textarea></div></div>
|
|
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-invalid" class="doc">Invalid</label></div>
|
|
<div class="col-sm-12 col-md"><input value="Invalid" id="sf1-invalid" style="width:85%;" class="doc"></div>
|
|
<script>document.getElementById("sf1-invalid").setCustomValidity("This field is invalid");</script></div>
|
|
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-disabled" class="doc">Disabled</label></div>
|
|
<div class="col-sm-12 col-md"><input disabled value="Disabled" id="sf1-disabled" style="width:85%;" class="doc"></div></div>
|
|
<div class="row responsive-label"><div class="col-sm-12 col-md-3"><label for="sf1-readonly" class="doc">Readonly</label></div>
|
|
<div class="col-sm-12 col-md"><input readonly value="Readonly" id="sf1-readonly" style="width:85%;" class="doc"></div></div>
|
|
</fieldset></form>`,
|
|
samples: [`<pre><span class="code-line"><span class="highlight-a"><form></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><fieldset></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><legend></span>Simple form<span class="highlight-a"></legend></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"username"</span><span class="highlight-a">></span>Username<span class="highlight-a"></label></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"text"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"Username"</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">"Username"</span><span class="highlight-a">/></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"password"</span><span class="highlight-a">></span>Password<span class="highlight-a"></label></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"password"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"password"</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">"Password"</span><span class="highlight-a">/></span></span>
|
|
<span class="code-line"> <span class="highlight-a"></fieldset></span></span>
|
|
<span class="code-line"><span class="highlight-a"></form></span></span></pre>`],
|
|
notes: [
|
|
`Using the <code><fieldset></code> and <code><legend></code> elements is highly recommended, as it improves semantic markup and accessibility.`,
|
|
`Some input elements, such as date & time, color and range types, are not supported and, as a result, do not have a default style defined for them. You can define said styles manually if you need to use them in your web app.`
|
|
],
|
|
customization: [
|
|
`Text color for forms and legend elements can be changed by changing the value of the <code>--form-fore-color</code> variable.`,
|
|
`Background color for forms can be changed by changing the value of the <code>--form-back-color</code> variable.`,
|
|
`Border color for forms and fieldset elements can be changed by changing the value of the <code>--form-border-color</code> variable.`,
|
|
`Text color for input elements can be changed by changing the value of the <code>--input-fore-color</code> variable.`,
|
|
`Background color for input elements can be changed by changing the value of the <code>--input-back-color</code> variable.`,
|
|
`Border color for input elements can be changed by changing the value of the <code>--input-border-color</code> variable.`,
|
|
`Border color for focused and invalid input elements can be changed by changing the value of the <code>--input-focus-color</code> and <code>--input-invalid-color</code> variables respectively.`,
|
|
`Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`,
|
|
`Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.`,
|
|
`Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.`
|
|
],
|
|
modifiers: [],
|
|
dos: [
|
|
{
|
|
description: 'Form inputs are inline by default, however you can combine forms with the <a href="#grid">grid system</a> to create aligned forms.',
|
|
sample: `<pre><span class="code-line"><span class="highlight-a"><form></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><fieldset></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><legend></span>Simple form<span class="highlight-a"></legend></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"row"</span><span class="highlight-a">></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"col-sm-12 col-md-6"</span><span class="highlight-a">></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"username"</span><span class="highlight-a">></span>Username<span class="highlight-a"></label></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"text"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"Username"</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">"Username"</span><span class="highlight-a">/></span></span>
|
|
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"col-sm-12 col-md-6"</span><span class="highlight-a">></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"password"</span><span class="highlight-a">></span>Password<span class="highlight-a"></label></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"password"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"password"</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">"Password"</span><span class="highlight-a">/></span></span>
|
|
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
|
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
|
<span class="code-line"> <span class="highlight-a"></fieldset></span></span>
|
|
<span class="code-line"><span class="highlight-a"></form></span></span></pre>`
|
|
}
|
|
],
|
|
donts: []
|
|
}
|