js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added input hints

Browse Source
This commit is contained in:
Cory LaViska
2017-09-26 12:03:57 -04:00
parent 5d5e110536
commit 5f8cea437e
5 changed files with 79 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/shoelace.css vendored
View File

File diff suppressed because one or more lines are too long

31
docs/forms.html
View File

@@ -291,6 +291,37 @@
<button type="button">Option 3</button>
</div>
<h3 id="input-hints">Input Hints</h3>
<p>You can add textual hints below form controls with the <code>input-hint</code> class.</p>
<pre><code class="lang-html">&lt;div class=&quot;input-field&quot;&gt;
&lt;label&gt;Name&lt;/label&gt;
&lt;input type=&quot;text&quot;&gt;
&lt;p class=&quot;input-hint&quot;&gt;What do people call you?&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;input-field&quot;&gt;
&lt;label&gt;Age&lt;/label&gt;
&lt;input type=&quot;number&quot;&gt;
&lt;p class=&quot;input-hint&quot;&gt;Enter your age in years&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<div class="row">
<div class="col-sm-6">
<div class="input-field">
<label>Name</label>
<input type="text">
<p class="input-hint">What do people call you?</p>
</div>
</div>
<div class="col-sm-6">
<div class="input-field">
<label>Age</label>
<input type="number">
<p class="input-hint">Enter your age in years</p>
</div>
</div>
</div>
<h3 id="input-addons">Input Addons</h3>
<p>To create an input addon, use <code>&lt;span class=&quot;input-addon&quot;&gt;</code>. Addons can appear anywhere inside an input group. Use the <code>input-addon-[xs|sm|lg|xl]</code> modifiers to change the size to match adjacent form controls.</p>
<pre><code class="lang-html">&lt;div class=&quot;input-group&quot;&gt;

10
source/css/forms.css
View File

@@ -257,11 +257,19 @@ input[type="range"] {
}
}
/* Input singles */
/* Input fields */
.input-field {
margin-bottom: 1.5rem;
}
/* Input hints */
.input-hint {
font-size: var(--input-hint-font-size);
color: var(--input-hint-color);
margin: .25rem 0 0 0;
display: block;
}
/* Input groups */
.input-group {
width: 100%;

3
source/css/variables.css
View File

@@ -326,6 +326,9 @@
--input-addon-bg-color: var(--component-bg-color);
--input-addon-color: var(--body-color-muted);
--input-hint-color: var(--body-color-muted);
--input-hint-font-size: var(--font-size-small);
--input-icon-width: 2em;
--input-icon-offset: .5em;
--input-icon-color: var(--state-secondary);

35
source/docs/forms.md
View File

@@ -260,6 +260,41 @@ Form controls and buttons can be grouped by wrapping them in `input-group` conta
<button type="button">Option 3</button>
</div>
### Input Hints
You can add textual hints below form controls with the `input-hint` class.
```html
<div class="input-field">
<label>Name</label>
<input type="text">
<p class="input-hint">What do people call you?</p>
</div>
<div class="input-field">
<label>Age</label>
<input type="number">
<p class="input-hint">Enter your age in years</p>
</div>
```
<div class="row">
<div class="col-sm-6">
<div class="input-field">
<label>Name</label>
<input type="text">
<p class="input-hint">What do people call you?</p>
</div>
</div>
<div class="col-sm-6">
<div class="input-field">
<label>Age</label>
<input type="number">
<p class="input-hint">Enter your age in years</p>
</div>
</div>
</div>
### Input Addons
To create an input addon, use `<span class="input-addon">`. Addons can appear anywhere inside an input group. Use the `input-addon-[xs|sm|lg|xl]` modifiers to change the size to match adjacent form controls.