javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +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">
<h3>Default Text Input, Not Inset, No Content Padding</h3>
<div class="form-group">
<div class="input-group">
<label class="input-wrapper">
<input type="text" placeholder="First Name">
</label>
@ -37,7 +37,7 @@
</div>
<h3>Default Text Input, Is Inset, No Content Padding</h3>
<div class="form-group inset">
<div class="input-group inset">
<label class="input-wrapper">
<input type="text" placeholder="First Name">
</label>
@ -52,7 +52,7 @@
<div class="content-padded">
<h3>Default Text Input, Not Inset, With Content Padding</h3>
<div class="form-group">
<div class="input-group">
<label class="input-wrapper">
<input type="text" placeholder="Username">
</label>
@ -61,14 +61,14 @@
</label>
</div>
<div class="form-group">
<div class="input-group">
<label class="input-wrapper">
<input type="text" placeholder="Filter by name">
</label>
</div>
<h3>Default Text Input, Is Inset, With Content Padding</h3>
<div class="form-group inset">
<div class="input-group inset">
<label class="input-wrapper">
<input type="email" placeholder="Email">
</label>
@ -83,7 +83,7 @@
<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">
<span class="input-label col-xs-4">Username</span>
<input class="col-xs-8" type="text" placeholder="@drifty">
@ -99,7 +99,7 @@
</div>
<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">
<span class="input-label col-xs-4">Email</span>
<input class="col-xs-8" type="text" placeholder="your@email.com">
@ -109,7 +109,7 @@
<div class="content-padded">
<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">
<span class="input-label col-xs-4">First Name</span>
<input class="col-xs-8" type="text" placeholder="John">
@ -121,13 +121,13 @@
</div>
<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">
<span class="input-label col-xs-4">Email</span>
<input class="col-xs-8" type="text" placeholder="your@email.com">
</label>
</div>
<div class="form-group inset">
<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">
@ -140,7 +140,7 @@
<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">
<span class="input-label">First Name</span>
<input type="text" placeholder="Drifty">
@ -154,7 +154,7 @@
<input type="text" placeholder="your@email.com">
</label>
</div>
<div class="form-group stacked-label">
<div class="input-group stacked-label">
<label class="input-wrapper">
<span class="input-label">Filter By Name</span>
<input type="text" placeholder="">
@ -162,7 +162,7 @@
</div>
<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">
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com">
@ -172,7 +172,7 @@
<div class="content-padded">
<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">
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com">
@ -180,7 +180,7 @@
</div>
<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">
<span class="input-label">Email</span>
<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)
}
.form-group {
.input-group {
border-top: $input-border-width solid $input-border-color;
border-bottom: $input-border-width solid $input-border-color;
background-color: $input-bg;
overflow: hidden;
}
.content-padded > .form-group,
.form-group.inset {
.content-padded > .input-group,
.input-group.inset {
border-left: $input-border-width solid $input-border-color;
border-right: $input-border-width solid $input-border-color;
@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;
}
.form-group + .form-group {
.input-group + .input-group {
margin-top: $content-padding;
}
@ -86,13 +86,13 @@ textarea {
}
}
.form-group.stacked-label,
.form-group.stacked-label .input-wrapper {
.input-group.stacked-label,
.input-group.stacked-label .input-wrapper {
background-color: transparent;
border: 0;
}
.form-group.stacked-label input {
.input-group.stacked-label input {
border: $input-border-width solid $input-border-color;
background-color: $input-bg;
padding: 4px 8px 3px;