javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

inputs with placeholder icons

Browse Source
This commit is contained in:
Adam Bradley
2013-09-23 14:41:18 -05:00
parent 9429a6cd84
commit 5ef7911cc1
5 changed files with 56 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
ionicons/scss/_ionic.scss
View File

@ -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 {

1
ionicons/scss/_variables.scss
View File

@ -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);

7
scss/ionic/_form.scss
View File

@ -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;
}

2
test/index.html
View File

@ -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>

70
test/input-search.html → test/input-with-icons.html
View File

@ -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">
<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>
<div class="icon-envelope placeholder-icon">
<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="">
</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>