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

Fixes #47

Browse Source
This commit is contained in:
Cory LaViska
2017-08-29 22:05:15 -04:00
parent 1756c58157
commit 3cbbdc058b
4 changed files with 64 additions and 11 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

23
docs/forms.html
View File

@@ -411,7 +411,28 @@
</div>
</div>
<p>Use the <code>input-icon-[xs|sm|lg|xs]</code> modifiers to change the size of input icons.</p>
<p>Input icons can be used inside form groups.</p>
<pre><code class="lang-html">&lt;div class=&quot;input-group&quot;&gt;
&lt;span class=&quot;input-addon&quot;&gt;Location&lt;/span&gt;
&lt;div class=&quot;input-icon&quot;&gt;
&lt;i class=&quot;fa fa-fw fa-map-marker&quot;&gt;&lt;/i&gt;
&lt;input type=&quot;text&quot;&gt;
&lt;i class=&quot;fa fa-fw fa-check&quot;&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;button type=&quot;button&quot;&gt;Submit&lt;/button&gt;
&lt;/div&gt;
</code></pre>
<div class="input-group">
<span class="input-addon">Location</span>
<div class="input-icon">
<i class="fa fa-fw fa-map-marker"></i>
<input type="text">
<i class="fa fa-fw fa-check"></i>
</div>
<button type="button">Submit</button>
</div>
<p>Use the <code>input-icon-[xs|sm|lg|xs]</code> modifiers to change the size of input icons to match form controls.</p>
<pre><code class="lang-html">&lt;div class=&quot;input-icon input-icon-xs&quot;&gt;
&lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
&lt;input class=&quot;input-xs&quot; type=&quot;text&quot;&gt;

24
source/css/forms.css
View File

@@ -67,7 +67,7 @@ textarea {
&:focus {
outline: none;
border-color: var(--input-border-color-focus);
border-color: var(--input-focus-color);
}
&[disabled] {
@@ -184,7 +184,7 @@ input[type="range"] {
}
&::-webkit-slider-thumb {
box-shadow: 0 0 0 var(--input-focus-width) color(var(--input-range-thumb-color) alpha(50%));
box-shadow: 0 0 0 var(--component-focus-width) color(var(--input-range-thumb-color) alpha(50%));
}
}
@@ -209,7 +209,7 @@ input[type="range"] {
}
&:focus::-moz-range-thumb {
box-shadow: 0 0 0 var(--input-focus-width) color(var(--input-range-thumb-color) alpha(50%));
box-shadow: 0 0 0 var(--component-focus-width) color(var(--input-range-thumb-color) alpha(50%));
}
/* IE / Edge */
@@ -245,7 +245,7 @@ input[type="range"] {
}
&:focus::-ms-thumb {
box-shadow: 0 0 0 var(--input-focus-width) color(var(--input-range-thumb-color) alpha(50%));
box-shadow: 0 0 0 var(--component-focus-width) color(var(--input-range-thumb-color) alpha(50%));
}
&:focus::-ms-fill-lower {
@@ -272,7 +272,9 @@ input[type="range"] {
& > button,
& > .button,
& > .dropdown button,
& > .dropdown .button {
& > .dropdown .button,
& > .input-icon input,
& > .input-icon select {
border-radius: 0;
}
@@ -280,7 +282,9 @@ input[type="range"] {
& > button:first-child,
& > .button:first-child,
& > .dropdown:first-child button,
& > .dropdown:first-child .button {
& > .dropdown:first-child .button,
& > .input-icon:first-child input,
& > .input-icon:first-child select {
border-top-left-radius: var(--input-border-radius);
border-bottom-left-radius: var(--input-border-radius);
}
@@ -289,7 +293,9 @@ input[type="range"] {
& > button:last-child,
& > .button:last-child,
& > .dropdown:last-child button,
& > .dropdown:last-child .button {
& > .dropdown:last-child .button,
& > .input-icon:last-child input,
& > .input-icon:last-child select {
border-top-right-radius: var(--input-border-radius);
border-bottom-right-radius: var(--input-border-radius);
}
@@ -303,7 +309,8 @@ input[type="range"] {
margin-left: calc(var(--input-border-width) * -1);
}
& :focus {
& button:focus,
& .button:focus {
/* Force a new stacking context so focus rings don't get truncated by adjacent elements */
transform: translateZ(0);
}
@@ -361,6 +368,7 @@ input[type="range"] {
/* Input icons */
.input-icon {
position: relative;
width: 100%;
/* Change default position for select controls so icons don't get hidden */
& select {

26
source/docs/forms.md
View File

@@ -390,7 +390,31 @@ This example uses Font Awesome, but you can use whatever icon library you want.
</div>
</div>
Use the `input-icon-[xs|sm|lg|xs]` modifiers to change the size of input icons.
Input icons can be used inside form groups.
```html
<div class="input-group">
<span class="input-addon">Location</span>
<div class="input-icon">
<i class="fa fa-fw fa-map-marker"></i>
<input type="text">
<i class="fa fa-fw fa-check"></i>
</div>
<button type="button">Submit</button>
</div>
```
<div class="input-group">
<span class="input-addon">Location</span>
<div class="input-icon">
<i class="fa fa-fw fa-map-marker"></i>
<input type="text">
<i class="fa fa-fw fa-check"></i>
</div>
<button type="button">Submit</button>
</div>
Use the `input-icon-[xs|sm|lg|xs]` modifiers to change the size of input icons to match form controls.
```html
<div class="input-icon input-icon-xs">