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-"],
[class*=" icon-"] { [class*=" icon-"] {
display: inline; display: inline;
margin-top: 0;
width: auto; width: auto;
height: auto; height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none; background-image: none;
background-position: 0% 0%; background-position: 0% 0%;
background-repeat: repeat; background-repeat: repeat;
margin-top: 0; vertical-align: baseline;
line-height: normal;
} }
/* more sprites.less reset */ .placeholder-icon {
.icon-white, input {
.nav-pills > .active > a > [class^="icon-"], padding-left: 20px !important;
.nav-pills > .active > a > [class*=" icon-"], }
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"], &:before {
.navbar-inverse .nav > .active > a > [class^="icon-"], position: absolute;
.navbar-inverse .nav > .active > a > [class*=" icon-"], display: block;
.dropdown-menu > li > a:hover > [class^="icon-"], color: $iconPlaceholder;
.dropdown-menu > li > a:hover > [class*=" icon-"], top: 16px;
.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;
} }
.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 */ /* keeps Bootstrap styles with and without icons the same */
.btn, .nav { .btn, .nav {

1
ionicons/scss/_variables.scss
View File

@ -5,6 +5,7 @@ $IoniconPath: "../ionicons/font" !default;
$IoniconVersion: "0.0.1" !default; $IoniconVersion: "0.0.1" !default;
$borderColor: #eeeeee !default; $borderColor: #eeeeee !default;
$iconMuted: #eeeeee !default; $iconMuted: #eeeeee !default;
$iconPlaceholder: #aaa !default;
$iconLight: white !default; $iconLight: white !default;
$iconDark: #333333 !default; $iconDark: #333333 !default;
$icons-li-width: (30em/14); $icons-li-width: (30em/14);

7
scss/ionic/_form.scss
View File

@ -69,6 +69,7 @@ textarea {
} }
.input-wrapper { .input-wrapper {
position: relative;
display: block; display: block;
overflow: hidden; overflow: hidden;
padding: 6px 8px 5px; padding: 6px 8px 5px;
@ -101,6 +102,9 @@ textarea {
border: $input-border-width solid $input-border-color; border: $input-border-width solid $input-border-color;
background-color: $input-bg; background-color: $input-bg;
} }
.input-group.stacked-label input {
height: $line-height-computed + $font-size-base + 12px;
}
.input-wrapper.row { .input-wrapper.row {
margin-right: 0; margin-right: 0;
margin-left: 0; margin-left: 0;
@ -174,7 +178,6 @@ input[type="color"],
// Focus state // Focus state
&:focus { &:focus {
outline: 0; outline: 0;
outline: thin dotted \9; /* IE6-9 */
} }
} }
@ -184,7 +187,6 @@ input[type="color"],
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
margin: 4px 0 0; margin: 4px 0 0;
margin-top: 1px \9; /* IE8-9 */
line-height: normal; line-height: normal;
} }
@ -202,7 +204,6 @@ input[type="checkbox"] {
// Set the height of select and file controls to match text inputs // Set the height of select and file controls to match text inputs
select, select,
input[type="file"] { 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; 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-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-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-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="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="lists.html">Lists</a></p>
<p><a class="button button-block button-default" href="modals.html">Modals</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> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Search Inputs</title> <title>Inputs With Icons</title>
<!-- Sets initial viewport load and disables zooming --> <!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
@ -13,7 +13,7 @@
<section class="view"> <section class="view">
<header class="bar bar-header bar-dark"> <header class="bar bar-header bar-dark">
<h1 class="title">Search Inputs</h1> <h1 class="title">Inputs With Icons</h1>
</header> </header>
<header class="bar bar-footer bar-dark"> <header class="bar bar-footer bar-dark">
@ -25,73 +25,39 @@
<h3>Default Text Input, Not Inset, No Content Padding</h3> <h3>Default Text Input, Not Inset, No Content Padding</h3>
<div class="input-group"> <div class="input-group">
<label class="input-wrapper"> <label class="input-wrapper">
<div class="icon-search placeholder-icon">
<input type="search" placeholder="Search"> <input type="search" placeholder="Search">
</div>
</label> </label>
</div> </div>
<h3>Default Text Input, Is Inset, No Content Padding</h3> <h3>Default Text Input, Is Inset, No Content Padding</h3>
<div class="input-group inset"> <div class="input-group inset">
<label class="input-wrapper"> <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> </label>
</div> </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> <h3>Stacked Label On Top Of Text Input, Not Inset, No Content Padding</h3>
<div class="input-group stacked-label"> <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"> <label class="input-wrapper">
<span class="input-label">Email</span> <span class="input-label">Email</span>
<div class="icon-envelope placeholder-icon">
<input type="text" placeholder="your@email.com"> <input type="text" placeholder="your@email.com">
</label>
</div> </div>
<div class="input-group stacked-label">
<label class="input-wrapper">
<span class="input-label">Filter By Name</span>
<input type="text" placeholder="">
</label> </label>
</div> </div>
<h3>Stacked Label On Top Of Text Input, Is Inset, No Content Padding</h3> <h3>Stacked Label On Top Of Text Input, Is Inset, No Content Padding</h3>
<div class="input-group stacked-label inset"> <div class="input-group stacked-label inset">
<label class="input-wrapper"> <label class="input-wrapper">
<span class="input-label">Email</span> <span class="input-label">Send Money</span>
<input type="text" placeholder="your@email.com"> <div class="icon-money placeholder-icon">
<input type="text" placeholder="Dollar Greens">
</div>
</label> </label>
</div> </div>
@ -100,16 +66,20 @@
<h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3> <h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3>
<div class="input-group stacked-label"> <div class="input-group stacked-label">
<label class="input-wrapper"> <label class="input-wrapper">
<span class="input-label">Email</span> <span class="input-label">SaaS</span>
<input type="text" placeholder="your@email.com"> <div class="icon-cloud placeholder-icon">
<input type="text" placeholder="Codiqa">
</div>
</label> </label>
</div> </div>
<h3>Stacked Label On Top Of Text Input, Is Inset, With Content Padding</h3> <h3>Stacked Label On Top Of Text Input, Is Inset, With Content Padding</h3>
<div class="input-group stacked-label inset"> <div class="input-group stacked-label inset">
<label class="input-wrapper"> <label class="input-wrapper">
<span class="input-label">Email</span> <span class="input-label">Favorite Music</span>
<input type="text" placeholder="your@email.com"> <div class="icon-headphones placeholder-icon">
<input type="text" placeholder="Bee Gees">
</div>
</label> </label>
</div> </div>