mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
inputs with placeholder icons
This commit is contained in:
Adam Bradley
@ -5,33 +5,42 @@
|
||||
[class^="icon-"],
|
||||
[class*=" icon-"] {
|
||||
display: inline;
|
||||
margin-top: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
vertical-align: baseline;
|
||||
background-image: none;
|
||||
background-position: 0% 0%;
|
||||
background-repeat: repeat;
|
||||
margin-top: 0;
|
||||
vertical-align: baseline;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/* more sprites.less reset */
|
||||
.icon-white,
|
||||
.nav-pills > .active > a > [class^="icon-"],
|
||||
.nav-pills > .active > a > [class*=" icon-"],
|
||||
.nav-list > .active > a > [class^="icon-"],
|
||||
.nav-list > .active > a > [class*=" icon-"],
|
||||
.navbar-inverse .nav > .active > a > [class^="icon-"],
|
||||
.navbar-inverse .nav > .active > a > [class*=" icon-"],
|
||||
.dropdown-menu > li > a:hover > [class^="icon-"],
|
||||
.dropdown-menu > li > a:hover > [class*=" icon-"],
|
||||
.dropdown-menu > .active > a > [class^="icon-"],
|
||||
.dropdown-menu > .active > a > [class*=" icon-"],
|
||||
.dropdown-submenu:hover > a > [class^="icon-"],
|
||||
.dropdown-submenu:hover > a > [class*=" icon-"] {
|
||||
background-image: none;
|
||||
.placeholder-icon {
|
||||
input {
|
||||
padding-left: 20px !important;
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
color: $iconPlaceholder;
|
||||
top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.stacked-label .placeholder-icon {
|
||||
input {
|
||||
padding-left: 30px !important;
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
color: $iconPlaceholder;
|
||||
top: 57px;
|
||||
left: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* keeps Bootstrap styles with and without icons the same */
|
||||
.btn, .nav {
|
||||
|
||||
@ -5,6 +5,7 @@ $IoniconPath: "../ionicons/font" !default;
|
||||
$IoniconVersion: "0.0.1" !default;
|
||||
$borderColor: #eeeeee !default;
|
||||
$iconMuted: #eeeeee !default;
|
||||
$iconPlaceholder: #aaa !default;
|
||||
$iconLight: white !default;
|
||||
$iconDark: #333333 !default;
|
||||
$icons-li-width: (30em/14);
|
||||
|
||||
@ -69,6 +69,7 @@ textarea {
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 6px 8px 5px;
|
||||
@ -101,6 +102,9 @@ textarea {
|
||||
border: $input-border-width solid $input-border-color;
|
||||
background-color: $input-bg;
|
||||
}
|
||||
.input-group.stacked-label input {
|
||||
height: $line-height-computed + $font-size-base + 12px;
|
||||
}
|
||||
.input-wrapper.row {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
@ -174,7 +178,6 @@ input[type="color"],
|
||||
// Focus state
|
||||
&:focus {
|
||||
outline: 0;
|
||||
outline: thin dotted \9; /* IE6-9 */
|
||||
}
|
||||
}
|
||||
|
||||
@ -184,7 +187,6 @@ input[type="color"],
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin: 4px 0 0;
|
||||
margin-top: 1px \9; /* IE8-9 */
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
@ -202,7 +204,6 @@ input[type="checkbox"] {
|
||||
// Set the height of select and file controls to match text inputs
|
||||
select,
|
||||
input[type="file"] {
|
||||
height: $input-height-base; /* In IE7, the height of the select element cannot be changed by height, only font-size */
|
||||
line-height: $input-height-base;
|
||||
}
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
<p><a class="button button-block button-default" href="input-slider.html">Input: Slider</a></p>
|
||||
<p><a class="button button-block button-default" href="input-text.html">Input: Text (single-line)</a></p>
|
||||
<p><a class="button button-block button-default" href="input-textarea.html">Input: Text (multi-line)</a></p>
|
||||
<p><a class="button button-block button-default" href="input-search.html">Input: Search</a></p>
|
||||
<p><a class="button button-block button-default" href="input-with-icons.html">Inputs With Icons</a></p>
|
||||
<p><a class="button button-block button-default" href="input-toggle.html">Input: Toggle</a></p>
|
||||
<p><a class="button button-block button-default" href="lists.html">Lists</a></p>
|
||||
<p><a class="button button-block button-default" href="modals.html">Modals</a></p>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Search Inputs</title>
|
||||
<title>Inputs With Icons</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
@ -13,7 +13,7 @@
|
||||
<section class="view">
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Search Inputs</h1>
|
||||
<h1 class="title">Inputs With Icons</h1>
|
||||
</header>
|
||||
|
||||
<header class="bar bar-footer bar-dark">
|
||||
@ -25,73 +25,39 @@
|
||||
<h3>Default Text Input, Not Inset, No Content Padding</h3>
|
||||
<div class="input-group">
|
||||
<label class="input-wrapper">
|
||||
<input type="search" placeholder="Search">
|
||||
<div class="icon-search placeholder-icon">
|
||||
<input type="search" placeholder="Search">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Default Text Input, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<label class="input-wrapper">
|
||||
<input type="search" class="icon search" placeholder="Search">
|
||||
<div class="icon-star placeholder-icon">
|
||||
<input type="text" placeholder="Favorites">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="padded">
|
||||
|
||||
<h3>Default Text Input, Not Inset, With Content Padding</h3>
|
||||
<div class="input-group">
|
||||
<label class="input-wrapper">
|
||||
<input type="search" placeholder="Search Books">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label class="input-wrapper">
|
||||
<input type="search" placeholder="Search Movies">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Default Text Input, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<label class="input-wrapper">
|
||||
<input type="search" placeholder="Search Books">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<input type="search" placeholder="Search Movies">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Not Inset, No Content Padding</h3>
|
||||
<div class="input-group stacked-label">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">First Name</span>
|
||||
<input type="text" placeholder="Drifty">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Last Name</span>
|
||||
<input type="text" placeholder="Co">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-group stacked-label">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Filter By Name</span>
|
||||
<input type="text" placeholder="">
|
||||
<div class="icon-envelope placeholder-icon">
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group stacked-label inset">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
<span class="input-label">Send Money</span>
|
||||
<div class="icon-money placeholder-icon">
|
||||
<input type="text" placeholder="Dollar Greens">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -100,16 +66,20 @@
|
||||
<h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3>
|
||||
<div class="input-group stacked-label">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
<span class="input-label">SaaS</span>
|
||||
<div class="icon-cloud placeholder-icon">
|
||||
<input type="text" placeholder="Codiqa">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group stacked-label inset">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
<span class="input-label">Favorite Music</span>
|
||||
<div class="icon-headphones placeholder-icon">
|
||||
<input type="text" placeholder="Bee Gees">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user