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

textarea ready for review

Browse Source
This commit is contained in:
Adam Bradley
2013-09-23 12:13:11 -05:00
parent 1241ac15d8
commit bdb36d5a42
2 changed files with 20 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
scss/ionic/_form.scss
View File

@ -92,7 +92,9 @@ textarea {
background-color: transparent;
}
.input-group.stacked-label input {
.input-group.stacked-label input,
.input-group.stacked-label textarea
{
@include border-radius($input-border-radius);
overflow: hidden;
padding: 4px 8px 3px;

112
test/input-textarea.html
View File

@ -25,23 +25,17 @@
<h3>Default Text Area, Not Inset, No Content Padding</h3>
<div class="input-group">
<label class="input-wrapper">
<textarea placeholder="First Name"></textarea>
</label>
<label class="input-wrapper">
<textarea placeholder="Last Name"></textarea>
<textarea rows="5" placeholder="5 Rows"></textarea>
</label>
</div>
<h3>Default Text Area, Is Inset, No Content Padding</h3>
<div class="input-group inset">
<label class="input-wrapper">
<textarea placeholder="First Name"></textarea>
<textarea rows="3" placeholder="Summary"></textarea>
</label>
<label class="input-wrapper">
<textarea placeholder="Last Name"></textarea>
</label>
<label class="input-wrapper">
<textarea placeholder="Email"></textarea>
<textarea rows="5" placeholder="Description"></textarea>
</label>
</div>
@ -50,118 +44,46 @@
<h3>Default Text Area, Not Inset, With Content Padding</h3>
<div class="input-group">
<label class="input-wrapper">
<textarea placeholder="Username"></textarea>
<textarea placeholder="No rows set"></textarea>
</label>
<label class="input-wrapper">
<textarea placeholder="Email"></textarea>
<textarea rows="4" placeholder="4 rows"></textarea>
</label>
</div>
<div class="input-group">
<label class="input-wrapper">
<textarea placeholder="Filter by name"></textarea>
<textarea rows="5" placeholder="Description"></textarea>
</label>
</div>
<h3>Default Text Area, Is Inset, With Content Padding</h3>
<div class="input-group inset">
<label class="input-wrapper">
<input type="email" placeholder="Email">
</label>
<label class="input-wrapper">
<input type="text" placeholder="Name">
<textarea rows="3" placeholder="3 Rows"></textarea>
</label>
</div>
</div>
<h3>Inline Label On Top Of Text Area, Not Inset, No Content Padding</h3>
<div class="input-group">
<label class="input-wrapper row">
<span class="input-label col-xs-4">Username</span>
<input class="col-xs-8" type="text" placeholder="@drifty">
</label>
<label class="input-wrapper row">
<span class="input-label col-xs-4">Email</span>
<input class="col-xs-8" type="email" placeholder="your@email.com">
</label>
<label class="input-wrapper row">
<span class="input-label col-xs-4">First Name</span>
<input class="col-xs-8" type="text" placeholder="Sir Derp">
</label>
</div>
<h3>Inline Label On Top Of Text Area, Is Inset, No Content Padding</h3>
<div class="input-group inset">
<label class="input-wrapper row">
<span class="input-label col-xs-4">Email</span>
<input class="col-xs-8" type="text" placeholder="your@email.com">
</label>
</div>
<div class="padded">
<h3>Inline Label On Top Of Text Area, Not Inset, With Content Padding</h3>
<div class="input-group">
<label class="input-wrapper row">
<span class="input-label col-xs-4">First Name</span>
<input class="col-xs-8" type="text" placeholder="John">
</label>
<label class="input-wrapper row">
<span class="input-label col-xs-4">Last Name</span>
<input class="col-xs-8" type="text" placeholder="Suhr">
</label>
</div>
<h3>Inline Label On Top Of Text Area, Is Inset, With Content Padding</h3>
<div class="input-group inset">
<label class="input-wrapper row">
<span class="input-label col-xs-4">Email</span>
<input class="col-xs-8" type="text" placeholder="your@email.com">
</label>
</div>
<div class="input-group inset">
<label class="input-wrapper row">
<span class="input-label col-xs-4">Filter By Name</span>
<input class="col-xs-8" type="text" placeholder="Enter keywords">
</label>
</div>
</div>
<h3>Stacked Label On Top Of Text Area, 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">
<span class="input-label">Summary</span>
<textarea rows="3" placeholder="3 Rows"></textarea>
</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="">
<span class="input-label">Description</span>
<textarea rows="6" placeholder="6 Rows"></textarea>
</label>
</div>
<h3>Stacked Label On Top Of Text Area, 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">Summary</span>
<textarea rows="3" placeholder="3 Rows"></textarea>
</label>
</div>
@ -170,16 +92,16 @@
<h3>Stacked Label On Top Of Text Area, 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">Summary</span>
<textarea rows="3" placeholder="3 Rows"></textarea>
</label>
</div>
<h3>Stacked Label On Top Of Text Area, 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">Summary</span>
<textarea rows="3" placeholder="3 Rows"></textarea>
</label>
</div>