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

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; background-color: transparent;
} }
.input-group.stacked-label input { .input-group.stacked-label input,
.input-group.stacked-label textarea
{
@include border-radius($input-border-radius); @include border-radius($input-border-radius);
overflow: hidden; overflow: hidden;
padding: 4px 8px 3px; 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> <h3>Default Text Area, Not Inset, No Content Padding</h3>
<div class="input-group"> <div class="input-group">
<label class="input-wrapper"> <label class="input-wrapper">
<textarea placeholder="First Name"></textarea> <textarea rows="5" placeholder="5 Rows"></textarea>
</label>
<label class="input-wrapper">
<textarea placeholder="Last Name"></textarea>
</label> </label>
</div> </div>
<h3>Default Text Area, Is Inset, No Content Padding</h3> <h3>Default Text Area, Is Inset, No Content Padding</h3>
<div class="input-group inset"> <div class="input-group inset">
<label class="input-wrapper"> <label class="input-wrapper">
<textarea placeholder="First Name"></textarea> <textarea rows="3" placeholder="Summary"></textarea>
</label> </label>
<label class="input-wrapper"> <label class="input-wrapper">
<textarea placeholder="Last Name"></textarea> <textarea rows="5" placeholder="Description"></textarea>
</label>
<label class="input-wrapper">
<textarea placeholder="Email"></textarea>
</label> </label>
</div> </div>
@ -50,118 +44,46 @@
<h3>Default Text Area, Not Inset, With Content Padding</h3> <h3>Default Text Area, Not Inset, With Content Padding</h3>
<div class="input-group"> <div class="input-group">
<label class="input-wrapper"> <label class="input-wrapper">
<textarea placeholder="Username"></textarea> <textarea placeholder="No rows set"></textarea>
</label> </label>
<label class="input-wrapper"> <label class="input-wrapper">
<textarea placeholder="Email"></textarea> <textarea rows="4" placeholder="4 rows"></textarea>
</label> </label>
</div> </div>
<div class="input-group"> <div class="input-group">
<label class="input-wrapper"> <label class="input-wrapper">
<textarea placeholder="Filter by name"></textarea> <textarea rows="5" placeholder="Description"></textarea>
</label> </label>
</div> </div>
<h3>Default Text Area, Is Inset, With Content Padding</h3> <h3>Default Text Area, Is Inset, With Content Padding</h3>
<div class="input-group inset"> <div class="input-group inset">
<label class="input-wrapper"> <label class="input-wrapper">
<input type="email" placeholder="Email"> <textarea rows="3" placeholder="3 Rows"></textarea>
</label>
<label class="input-wrapper">
<input type="text" placeholder="Name">
</label> </label>
</div> </div>
</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> <h3>Stacked Label On Top Of Text Area, Not Inset, No 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">First Name</span> <span class="input-label">Summary</span>
<input type="text" placeholder="Drifty"> <textarea rows="3" placeholder="3 Rows"></textarea>
</label> </label>
<label class="input-wrapper"> <label class="input-wrapper">
<span class="input-label">Last Name</span> <span class="input-label">Description</span>
<input type="text" placeholder="Co"> <textarea rows="6" placeholder="6 Rows"></textarea>
</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="">
</label> </label>
</div> </div>
<h3>Stacked Label On Top Of Text Area, Is Inset, No Content Padding</h3> <h3>Stacked Label On Top Of Text Area, 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">Summary</span>
<input type="text" placeholder="your@email.com"> <textarea rows="3" placeholder="3 Rows"></textarea>
</label> </label>
</div> </div>
@ -170,16 +92,16 @@
<h3>Stacked Label On Top Of Text Area, Not Inset, With Content Padding</h3> <h3>Stacked Label On Top Of Text Area, 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">Summary</span>
<input type="text" placeholder="your@email.com"> <textarea rows="3" placeholder="3 Rows"></textarea>
</label> </label>
</div> </div>
<h3>Stacked Label On Top Of Text Area, Is Inset, With Content Padding</h3> <h3>Stacked Label On Top Of Text Area, 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">Summary</span>
<input type="text" placeholder="your@email.com"> <textarea rows="3" placeholder="3 Rows"></textarea>
</label> </label>
</div> </div>