mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Added input icons
This commit is contained in:
Cory LaViska
2
dist/shoelace.css
vendored
2
dist/shoelace.css
vendored
File diff suppressed because one or more lines are too long
124
docs/forms.html
124
docs/forms.html
@@ -9,6 +9,7 @@
|
||||
<link rel="stylesheet" href="../dist/shoelace.css">
|
||||
<link rel="stylesheet" href="../source/css/_docs.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
|
||||
<title>Forms</title>
|
||||
</head>
|
||||
<body>
|
||||
@@ -357,6 +358,129 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 id="input-icons">Input Icons</h3>
|
||||
<p>Input icons add visual context to form controls. To add icons to a form control, wrap it with an <code>input-icon</code> element and add icons before and after it.</p>
|
||||
<p>This example uses Font Awesome, but you can use whatever icon library you want. For consistency, use fixed with icons if your icon library supports them.</p>
|
||||
<pre><code class="lang-html"><div class="input-icon">
|
||||
<i class="fa fa-fw fa-phone"></i>
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<div class="input-icon">
|
||||
<input type="text">
|
||||
<i class="fa fa-fw fa-envelope-o"></i>
|
||||
</div>
|
||||
|
||||
<div class="input-icon">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
|
||||
<div class="input-icon">
|
||||
<i class="fa fa-fw fa-map-marker"></i>
|
||||
<select><option></option></select>
|
||||
</div>
|
||||
</code></pre>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mar-b-md">
|
||||
<div class="input-icon">
|
||||
<i class="fa fa-fw fa-phone"></i>
|
||||
<input type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mar-b-md">
|
||||
<div class="input-icon">
|
||||
<input type="text">
|
||||
<i class="fa fa-fw fa-envelope-o"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mar-b-md">
|
||||
<div class="input-icon">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mar-b-md">
|
||||
<div class="input-icon">
|
||||
<i class="fa fa-fw fa-map-marker"></i>
|
||||
<select><option></option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Use the <code>input-icon-[xs|sm|lg|xs]</code> modifiers to change the size of input icons.</p>
|
||||
<pre><code class="lang-html"><div class="input-icon input-icon-xs">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input class="input-xs" type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
|
||||
<div class="input-icon input-icon-sm">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input class="input-sm" type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
|
||||
<div class="input-icon">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
|
||||
<div class="input-icon input-icon-lg">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input class="input-lg" type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
|
||||
<div class="input-icon input-icon-xl">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input class="input-xl" type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
</code></pre>
|
||||
<div class="input-field">
|
||||
<div class="input-icon input-icon-xs">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input class="input-xs" type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<div class="input-icon input-icon-sm">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input class="input-sm" type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<div class="input-icon">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<div class="input-icon input-icon-lg">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input class="input-lg" type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<div class="input-icon input-icon-xl">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input class="input-xl" type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 id="form-groups">Form Groups</h3>
|
||||
<p>Related form controls can be grouped in a <code><fieldset></code>. An optional <code><legend></code> can be used to display a name for the group.</p>
|
||||
<pre><code class="lang-html"><fieldset>
|
||||
|
||||
@@ -358,6 +358,73 @@ input[type="range"] {
|
||||
}
|
||||
}
|
||||
|
||||
/* Input icons */
|
||||
.input-icon {
|
||||
position: relative;
|
||||
|
||||
/* Change default position for select controls so icons don't get hidden */
|
||||
& select {
|
||||
position: static;
|
||||
}
|
||||
|
||||
& input:not(:first-child),
|
||||
& select:not(:first-child) {
|
||||
padding-left: var(--input-icon-width);
|
||||
}
|
||||
|
||||
& input:not(:last-child) {
|
||||
padding-right: var(--input-icon-width);
|
||||
}
|
||||
|
||||
& :first-child:not(input, select),
|
||||
& :last-child:not(input, select) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: var(--input-icon-offset);
|
||||
line-height: var(--input-height);
|
||||
color: var(--input-icon-color);
|
||||
vertical-align: middle;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
& :last-child:not(input, select) {
|
||||
left: auto;
|
||||
right: var(--input-icon-offset);
|
||||
}
|
||||
|
||||
&.input-icon-xs {
|
||||
& :first-child:not(input, select),
|
||||
& :last-child:not(input, select) {
|
||||
font-size: var(--input-font-size-xs);
|
||||
line-height: var(--input-height-xs);
|
||||
}
|
||||
}
|
||||
|
||||
&.input-icon-sm {
|
||||
& :first-child:not(input, select),
|
||||
& :last-child:not(input, select) {
|
||||
font-size: var(--input-font-size-sm);
|
||||
line-height: var(--input-height-sm);
|
||||
}
|
||||
}
|
||||
|
||||
&.input-icon-lg {
|
||||
& :first-child:not(input, select),
|
||||
& :last-child:not(input, select) {
|
||||
font-size: var(--input-font-size-lg);
|
||||
line-height: var(--input-height-lg);
|
||||
}
|
||||
}
|
||||
|
||||
&.input-icon-xl {
|
||||
& :first-child:not(input, select),
|
||||
& :last-child:not(input, select) {
|
||||
font-size: var(--input-font-size-xl);
|
||||
line-height: var(--input-height-xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Validation */
|
||||
.input-invalid {
|
||||
& label {
|
||||
|
||||
@@ -313,6 +313,10 @@
|
||||
--input-addon-bg-color: var(--component-bg-color);
|
||||
--input-addon-color: var(--state-secondary);
|
||||
|
||||
--input-icon-width: 2em;
|
||||
--input-icon-offset: .5em;
|
||||
--input-icon-color: var(--state-secondary);
|
||||
|
||||
--input-range-track-height: .5rem;
|
||||
--input-range-track-color: var(--component-bg-color);
|
||||
--input-range-track-box-shadow: var(--component-box-shadow-inner);
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
layout: default.html
|
||||
title: Forms
|
||||
description: Default form control styles.
|
||||
stylesheets:
|
||||
- https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css
|
||||
---
|
||||
|
||||
## Forms
|
||||
@@ -331,6 +333,137 @@ To create an input addon, use `<span class="input-addon">`. Addons can appear an
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Input Icons
|
||||
|
||||
Input icons add visual context to form controls. To add icons to a form control, wrap it with an `input-icon` element and add icons before and after it.
|
||||
|
||||
This example uses Font Awesome, but you can use whatever icon library you want. For consistency, use fixed with icons if your icon library supports them.
|
||||
|
||||
```html
|
||||
<div class="input-icon">
|
||||
<i class="fa fa-fw fa-phone"></i>
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<div class="input-icon">
|
||||
<input type="text">
|
||||
<i class="fa fa-fw fa-envelope-o"></i>
|
||||
</div>
|
||||
|
||||
<div class="input-icon">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
|
||||
<div class="input-icon">
|
||||
<i class="fa fa-fw fa-map-marker"></i>
|
||||
<select><option></option></select>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mar-b-md">
|
||||
<div class="input-icon">
|
||||
<i class="fa fa-fw fa-phone"></i>
|
||||
<input type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mar-b-md">
|
||||
<div class="input-icon">
|
||||
<input type="text">
|
||||
<i class="fa fa-fw fa-envelope-o"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mar-b-md">
|
||||
<div class="input-icon">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mar-b-md">
|
||||
<div class="input-icon">
|
||||
<i class="fa fa-fw fa-map-marker"></i>
|
||||
<select><option></option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Use the `input-icon-[xs|sm|lg|xs]` modifiers to change the size of input icons.
|
||||
|
||||
```html
|
||||
<div class="input-icon input-icon-xs">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input class="input-xs" type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
|
||||
<div class="input-icon input-icon-sm">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input class="input-sm" type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
|
||||
<div class="input-icon">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
|
||||
<div class="input-icon input-icon-lg">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input class="input-lg" type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
|
||||
<div class="input-icon input-icon-xl">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input class="input-xl" type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="input-field">
|
||||
<div class="input-icon input-icon-xs">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input class="input-xs" type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<div class="input-icon input-icon-sm">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input class="input-sm" type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<div class="input-icon">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<div class="input-icon input-icon-lg">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input class="input-lg" type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<div class="input-icon input-icon-xl">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<input class="input-xl" type="text">
|
||||
<i class="fa fa-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Form Groups
|
||||
|
||||
Related form controls can be grouped in a `<fieldset>`. An optional `<legend>` can be used to display a name for the group.
|
||||
|
||||
Reference in New Issue
Block a user