Skip to content

Commit

Permalink
Update input text demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@mlynch
mlynch committed Dec 7, 2015
1 parent 1a91bb2 commit 9b19137
Showing 1 changed file with 104 additions and 104 deletions.
208 changes: 104 additions & 104 deletions test/css/input-text.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,164 +18,164 @@ <h1 class="title">Text Inputs</h1>

<h3>Default Text Input, Not Inset, No Content Padding</h3>
<div class="list">
<label class="item item-input">
<ion-input class="item item-input">
<input type="text" placeholder="First Name">
</label>
<label class="item item-input">
</ion-input>
<ion-input class="item item-input">
<input type="text" placeholder="Last Name">
</label>
<label class="item item-input">
</ion-input>
<ion-input class="item item-input">
<input type="email" placeholder="Email">
</label>
<label class="item item-input">
</ion-input>
<ion-input class="item item-input">
<input type="date" value="2011-03-14">
</label>
<label class="item item-input">
</ion-input>
<ion-input class="item item-input">
<input type="datetime-local" value="2013-12-09T18:38">
</label>
<label class="item item-input">
</ion-input>
<ion-input class="item item-input">
<input type="month" value="2011-03">
</label>
<label class="item item-input">
</ion-input>
<ion-input class="item item-input">
<input type="time" value="04:24">
</label>
<label class="item item-input">
</ion-input>
<ion-input class="item item-input">
<input type="week" value="2011-W11">
</label>
</ion-input>
</div>

<h3>Default Text Input, list-inset, No Content Padding</h3>
<div class="list list-inset">
<label class="item item-input">
<ion-input class="item item-input">
<input type="text" placeholder="First Name">
</label>
<label class="item item-input">
</ion-input>
<ion-input class="item item-input">
<input type="text" placeholder="Last Name">
</label>
<label class="item item-input">
</ion-input>
<ion-input class="item item-input">
<input type="email" placeholder="Email">
</label>
</ion-input>
</div>

<h3>Default Text Input, card, No Content Padding</h3>
<div class="list card">
<label class="item item-input">
<ion-input class="item item-input">
<input type="text" placeholder="First Name">
</label>
<label class="item item-input">
</ion-input>
<ion-input class="item item-input">
<input type="text" placeholder="Last Name">
</label>
<label class="item item-input">
</ion-input>
<ion-input class="item item-input">
<input type="email" placeholder="Email">
</label>
</ion-input>
</div>

<div class="padding">

<h3>Default Text Input, With Parent Content Padding</h3>
<div class="list">
<label class="item item-input">
<ion-input class="item item-input">
<input type="text" placeholder="Username">
</label>
<label class="item item-input">
</ion-input>
<ion-input class="item item-input">
<input type="email" placeholder="Email">
</label>
</ion-input>
</div>

<div class="list">
<label class="item item-input">
<ion-input class="item item-input">
<input type="text" placeholder="Filter by name">
</label>
</ion-input>
</div>

<h3>Default Text Input, list-inset, With Parent Content Padding</h3>
<div class="list list-inset">
<label class="item item-input">
<ion-input class="item item-input">
<input type="email" placeholder="Email">
</label>
<label class="item item-input">
</ion-input>
<ion-input class="item item-input">
<input type="text" placeholder="Name">
</label>
</ion-input>
</div>

</div>


<h3>Label left of input, No Parent Content Padding</h3>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<ion-input class="item item-input">
<ion-label class="input-ion-input">Username</ion-label>
<input type="text" placeholder="@drifty">
</label>
<label class="item item-input">
<span class="input-label">Email</span>
</ion-input>
<ion-input class="item item-input">
<ion-label class="input-ion-input">Email</ion-label>
<input type="email" placeholder="[email protected]">
</label>
<label class="item item-input">
<span class="input-label">First Name</span>
</ion-input>
<ion-input class="item item-input">
<ion-label class="input-ion-input">First Name</ion-label>
<input type="text" placeholder="Sir Derp">
</label>
</ion-input>
</div>


<h3>Label left of input (with icon), No Parent Content Padding</h3>
<div class="list">
<label class="item item-input">
<ion-input class="item item-input">
<i class="icon ion-person"></i>
<span class="input-label">Username</span>
<ion-label class="input-ion-input">Username</ion-label>
<input type="text" placeholder="@drifty">
</label>
<label class="item item-input">
</ion-input>
<ion-input class="item item-input">
<i class="icon ion-email"></i>
<span class="input-label">Email</span>
<ion-label class="input-ion-input">Email</ion-label>
<input type="email" placeholder="[email protected]">
</label>
</ion-input>
</div>


<h3>Placeholder icon</h3>
<div class="list">
<label class="item item-input">
<ion-input class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search">
</label>
</ion-input>
</div>


<h3>Inline Label On Top Of Text Input, list-inset, No Parent Content Padding</h3>
<div class="list list-inset">
<label class="item item-input">
<span class="input-label">Email</span>
<ion-input class="item item-input">
<ion-label class="input-ion-input">Email</ion-label>
<input type="text" placeholder="[email protected]">
</label>
</ion-input>
</div>

<div class="padding">

<h3>Inline Label On Top Of Text Input, With Parent Content Padding</h3>
<div class="list">
<label class="item item-input">
<span class="input-label">First Name</span>
<ion-input class="item item-input">
<ion-label class="input-ion-input">First Name</ion-label>
<input type="text" placeholder="John">
</label>
<label class="item item-input">
<span class="input-label">Last Name</span>
</ion-input>
<ion-input class="item item-input">
<ion-label class="input-ion-input">Last Name</ion-label>
<input type="text" placeholder="Suhr">
</label>
</ion-input>
</div>

<h3>Inline Label On Top Of Text Input, list-inset, With Parent Content Padding</h3>
<div class="list list-inset">
<label class="item item-input">
<span class="input-label">Email</span>
<ion-input class="item item-input">
<ion-label class="input-ion-input">Email</ion-label>
<input type="text" placeholder="[email protected]">
</label>
</ion-input>
</div>
<div class="list list-inset">
<label class="item item-input">
<span class="input-label">Filter By Name</span>
<ion-input class="item item-input">
<ion-label class="input-ion-input">Filter By Name</ion-label>
<input type="text" placeholder="Enter keywords">
</label>
</ion-input>
</div>

</div>
Expand All @@ -185,98 +185,98 @@ <h3>Inline Label On Top Of Text Input, list-inset, With Parent Content Padding</

<h3>Stacked Label On Top Of Text Input, No Parent Content Padding</h3>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">First Name</span>
<ion-input class="item item-input item-stacked-ion-input">
<ion-label class="input-ion-input">First Name</ion-label>
<input type="text" placeholder="Drifty">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Last Name</span>
</ion-input>
<ion-input class="item item-input item-stacked-ion-input">
<ion-label class="input-ion-input">Last Name</ion-label>
<input type="text" placeholder="Co">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
</ion-input>
<ion-input class="item item-input item-stacked-ion-input">
<ion-label class="input-ion-input">Email</ion-label>
<input type="text" placeholder="[email protected]">
</label>
</ion-input>
</div>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Filter By Name</span>
<ion-input class="item item-input item-stacked-ion-input">
<ion-label class="input-ion-input">Filter By Name</ion-label>
<input type="text" placeholder="">
</label>
</ion-input>
</div>

<h3>Stacked Label On Top Of Text Input, list-inset, No Parent Content Padding</h3>
<div class="list list-inset">
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<ion-input class="item item-input item-stacked-ion-input">
<ion-label class="input-ion-input">Email</ion-label>
<input type="text" placeholder="[email protected]">
</label>
</ion-input>
</div>

<div class="padding">

<h3>Stacked Label On Top Of Text Input, With Parent Content Padding</h3>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<ion-input class="item item-input item-stacked-ion-input">
<ion-label class="input-ion-input">Email</ion-label>
<input type="text" placeholder="[email protected]">
</label>
</ion-input>
</div>

<h3>Stacked Label On Top Of Text Input, list-inset, With Parent Content Padding</h3>
<div class="list list-inset">
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<ion-input class="item item-input item-stacked-ion-input">
<ion-label class="input-ion-input">Email</ion-label>
<input type="text" placeholder="[email protected]">
</label>
</ion-input>
</div>

</div>

<h3>Default Text Input, No Parent Content Padding</h3>
<div class="list">
<label class="item item-input">
<ion-input class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
</ion-input>
</div>

<h3>Default Text Input, list-inset, No Parent Content Padding</h3>
<div class="list list-inset">
<label class="item item-input">
<ion-input class="item item-input">
<i class="icon ion-star placeholder-icon"></i>
<input type="text" placeholder="Favorites">
</label>
</ion-input>
</div>


<h3>Stacked Label On Top Of Text Input, No Parent Content Padding</h3>
<div class="list">
<label class="item item-input item-stacked-label">
<ion-input class="item item-input item-stacked-ion-input">
<i class="icon ion-email"></i>
<span class="input-label">Email</span>
<ion-label class="input-ion-input">Email</ion-label>
<input type="text" placeholder="[email protected]">
</label>
</ion-input>
</div>

<div class="padding">

<h3>Stacked Label On Top Of Text Input, With Parent Content Padding</h3>
<div class="list">
<label class="item item-input item-stacked-label">
<ion-input class="item item-input item-stacked-ion-input">
<i class="icon ion-cloud"></i>
<span class="input-label">SaaS</span>
<ion-label class="input-ion-input">SaaS</ion-label>
<input type="text" placeholder="Codiqa">
</label>
</ion-input>
</div>

<h3>Stacked Label On Top Of Text Input, list-inset, With Parent Content Padding</h3>
<div class="list list-inset">
<label class="item item-input item-stacked-label">
<ion-input class="item item-input item-stacked-ion-input">
<i class="icon ion-headphone"></i>
<span class="input-label">Favorite Music</span>
<ion-label class="input-ion-input">Favorite Music</ion-label>
<input type="text" placeholder="Bee Gees">
</label>
</ion-input>
</div>

</div>
Expand Down

0 comments on commit 9b19137

Please sign in to comment.