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

renamed .form-group to .input-group

Browse Source
This commit is contained in:
Adam Bradley
2013-09-10 14:25:42 -05:00
parent 137a4d339c
commit 2fefe19b65
2 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
example/input-text.html
View File

@ -24,7 +24,7 @@
<div class="content has-header has-footer"> <div class="content has-header has-footer">
<h3>Default Text Input, Not Inset, No Content Padding</h3> <h3>Default Text Input, Not Inset, No Content Padding</h3>
<div class="form-group"> <div class="input-group">
<label class="input-wrapper"> <label class="input-wrapper">
<input type="text" placeholder="First Name"> <input type="text" placeholder="First Name">
</label> </label>
@ -37,7 +37,7 @@
</div> </div>
<h3>Default Text Input, Is Inset, No Content Padding</h3> <h3>Default Text Input, Is Inset, No Content Padding</h3>
<div class="form-group inset"> <div class="input-group inset">
<label class="input-wrapper"> <label class="input-wrapper">
<input type="text" placeholder="First Name"> <input type="text" placeholder="First Name">
</label> </label>
@ -52,7 +52,7 @@
<div class="content-padded"> <div class="content-padded">
<h3>Default Text Input, Not Inset, With Content Padding</h3> <h3>Default Text Input, Not Inset, With Content Padding</h3>
<div class="form-group"> <div class="input-group">
<label class="input-wrapper"> <label class="input-wrapper">
<input type="text" placeholder="Username"> <input type="text" placeholder="Username">
</label> </label>
@ -61,14 +61,14 @@
</label> </label>
</div> </div>
<div class="form-group"> <div class="input-group">
<label class="input-wrapper"> <label class="input-wrapper">
<input type="text" placeholder="Filter by name"> <input type="text" placeholder="Filter by name">
</label> </label>
</div> </div>
<h3>Default Text Input, Is Inset, With Content Padding</h3> <h3>Default Text Input, Is Inset, With Content Padding</h3>
<div class="form-group inset"> <div class="input-group inset">
<label class="input-wrapper"> <label class="input-wrapper">
<input type="email" placeholder="Email"> <input type="email" placeholder="Email">
</label> </label>
@ -83,7 +83,7 @@
<h3>Inline Label On Top Of Text Input, Not Inset, No Content Padding</h3> <h3>Inline Label On Top Of Text Input, Not Inset, No Content Padding</h3>
<div class="form-group"> <div class="input-group">
<label class="input-wrapper row"> <label class="input-wrapper row">
<span class="input-label col-xs-4">Username</span> <span class="input-label col-xs-4">Username</span>
<input class="col-xs-8" type="text" placeholder="@drifty"> <input class="col-xs-8" type="text" placeholder="@drifty">
@ -99,7 +99,7 @@
</div> </div>
<h3>Inline Label On Top Of Text Input, Is Inset, No Content Padding</h3> <h3>Inline Label On Top Of Text Input, Is Inset, No Content Padding</h3>
<div class="form-group inset"> <div class="input-group inset">
<label class="input-wrapper row"> <label class="input-wrapper row">
<span class="input-label col-xs-4">Email</span> <span class="input-label col-xs-4">Email</span>
<input class="col-xs-8" type="text" placeholder="your@email.com"> <input class="col-xs-8" type="text" placeholder="your@email.com">
@ -109,7 +109,7 @@
<div class="content-padded"> <div class="content-padded">
<h3>Inline Label On Top Of Text Input, Not Inset, With Content Padding</h3> <h3>Inline Label On Top Of Text Input, Not Inset, With Content Padding</h3>
<div class="form-group"> <div class="input-group">
<label class="input-wrapper row"> <label class="input-wrapper row">
<span class="input-label col-xs-4">First Name</span> <span class="input-label col-xs-4">First Name</span>
<input class="col-xs-8" type="text" placeholder="John"> <input class="col-xs-8" type="text" placeholder="John">
@ -121,13 +121,13 @@
</div> </div>
<h3>Inline Label On Top Of Text Input, Is Inset, With Content Padding</h3> <h3>Inline Label On Top Of Text Input, Is Inset, With Content Padding</h3>
<div class="form-group inset"> <div class="input-group inset">
<label class="input-wrapper row"> <label class="input-wrapper row">
<span class="input-label col-xs-4">Email</span> <span class="input-label col-xs-4">Email</span>
<input class="col-xs-8" type="text" placeholder="your@email.com"> <input class="col-xs-8" type="text" placeholder="your@email.com">
</label> </label>
</div> </div>
<div class="form-group inset"> <div class="input-group inset">
<label class="input-wrapper row"> <label class="input-wrapper row">
<span class="input-label col-xs-4">Filter By Name</span> <span class="input-label col-xs-4">Filter By Name</span>
<input class="col-xs-8" type="text" placeholder="Enter keywords"> <input class="col-xs-8" type="text" placeholder="Enter keywords">
@ -140,7 +140,7 @@
<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="form-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">First Name</span>
<input type="text" placeholder="Drifty"> <input type="text" placeholder="Drifty">
@ -154,7 +154,7 @@
<input type="text" placeholder="your@email.com"> <input type="text" placeholder="your@email.com">
</label> </label>
</div> </div>
<div class="form-group stacked-label"> <div class="input-group stacked-label">
<label class="input-wrapper"> <label class="input-wrapper">
<span class="input-label">Filter By Name</span> <span class="input-label">Filter By Name</span>
<input type="text" placeholder=""> <input type="text" placeholder="">
@ -162,7 +162,7 @@
</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="form-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">Email</span>
<input type="text" placeholder="your@email.com"> <input type="text" placeholder="your@email.com">
@ -172,7 +172,7 @@
<div class="content-padded"> <div class="content-padded">
<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="form-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">Email</span>
<input type="text" placeholder="your@email.com"> <input type="text" placeholder="your@email.com">
@ -180,7 +180,7 @@
</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="form-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">Email</span>
<input type="text" placeholder="your@email.com"> <input type="text" placeholder="your@email.com">

16
scss/ionic/_form.scss
View File

@ -47,24 +47,24 @@ textarea {
font-family: $base-font-family; // And only set font-family here for those that need it (note the missing label element) font-family: $base-font-family; // And only set font-family here for those that need it (note the missing label element)
} }
.form-group { .input-group {
border-top: $input-border-width solid $input-border-color; border-top: $input-border-width solid $input-border-color;
border-bottom: $input-border-width solid $input-border-color; border-bottom: $input-border-width solid $input-border-color;
background-color: $input-bg; background-color: $input-bg;
overflow: hidden; overflow: hidden;
} }
.content-padded > .form-group, .content-padded > .input-group,
.form-group.inset { .input-group.inset {
border-left: $input-border-width solid $input-border-color; border-left: $input-border-width solid $input-border-color;
border-right: $input-border-width solid $input-border-color; border-right: $input-border-width solid $input-border-color;
@include border-radius($input-border-radius); @include border-radius($input-border-radius);
} }
.form-group .input-wrapper + .input-wrapper { .input-group .input-wrapper + .input-wrapper {
border-top: $input-border-width solid $input-border-color; border-top: $input-border-width solid $input-border-color;
} }
.form-group + .form-group { .input-group + .input-group {
margin-top: $content-padding; margin-top: $content-padding;
} }
@ -86,13 +86,13 @@ textarea {
} }
} }
.form-group.stacked-label, .input-group.stacked-label,
.form-group.stacked-label .input-wrapper { .input-group.stacked-label .input-wrapper {
background-color: transparent; background-color: transparent;
border: 0; border: 0;
} }
.form-group.stacked-label input { .input-group.stacked-label input {
border: $input-border-width solid $input-border-color; border: $input-border-width solid $input-border-color;
background-color: $input-bg; background-color: $input-bg;
padding: 4px 8px 3px; padding: 4px 8px 3px;