javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

form row fixes

Browse Source
This commit is contained in:
Adam Bradley
2013-09-10 11:00:25 -05:00
parent 5a35604cbd
commit 8ba2411eb0
6 changed files with 47 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
dist/ionic.css vendored
View File

@@ -705,6 +705,13 @@ textarea {
-moz-border-radius: 4px;
border-radius: 4px; }
.input-wrapper.row {
margin-left: 0;
margin-right: 0; }
.input-wrapper.row [class*='col-'] {
padding-left: 0;
padding-right: 0; }
select,
textarea,
input[type="text"],

48
example/input-text.html
View File

@@ -84,25 +84,25 @@
<h3>Inline Label On Top Of Text Input, Not Inset, No Content Padding</h3>
<div class="form-group">
<label class="input-wrapper row-fluid">
<span class="input-label span4">Username</span>
<input class="span8" type="text" placeholder="@drifty">
<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-fluid">
<span class="input-label span4">Email</span>
<input class="span8" type="email" placeholder="your@email.com">
<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-fluid">
<span class="input-label span4">First Name</span>
<input class="span8" type="text" placeholder="Sir Derp">
<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 Input, Is Inset, No Content Padding</h3>
<div class="form-group inset">
<label class="input-wrapper row-fluid">
<span class="input-label span3">Email</span>
<input class="span9" type="text" placeholder="your@email.com">
<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>
@@ -110,27 +110,27 @@
<h3>Inline Label On Top Of Text Input, Not Inset, With Content Padding</h3>
<div class="form-group">
<label class="input-wrapper row-fluid">
<span class="input-label span3">First Name</span>
<input class="span9" type="text" placeholder="John">
<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-fluid">
<span class="input-label span3">Last Name</span>
<input class="span9" type="text" placeholder="Suhr">
<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 Input, Is Inset, With Content Padding</h3>
<div class="form-group inset">
<label class="input-wrapper row-fluid">
<span class="input-label span3">Email</span>
<input class="span9" type="text" placeholder="your@email.com">
<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">
<label class="input-wrapper row-fluid">
<span class="input-label span3">Filter By Name</span>
<input class="span9" type="text" placeholder="Enter keywords">
<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>

12
example/login/index.html
View File

@@ -36,16 +36,16 @@
<main class="content content-padded has-header">
<form class="form-horizontal">
<label class="input-wrapper row-fluid">
<span class="input-label span3">Full name</span>
<input class="span9" type="text" placeholder="">
<span class="input-label col-xs-4">Full name</span>
<input class="col-xs-8" type="text" placeholder="">
</label>
<label class="input-wrapper row-fluid">
<span class="input-label span3">Email</span>
<input class="span9" type="email" placeholder="">
<span class="input-label col-xs-4">Email</span>
<input class="col-xs-8" type="email" placeholder="">
</label>
<label class="input-wrapper row-fluid">
<span class="input-label span3">Password</span>
<input class="span9" type="password" placeholder="">
<span class="input-label col-xs-4">Password</span>
<input class="col-xs-8" type="password" placeholder="">
</label>
<button class="button button-info button-block">Sign up</button>
</form>

1
scss/ionic-theme.scss
View File

@@ -14,7 +14,6 @@
"ionic/theme/button",
"ionic/theme/card",
"ionic/theme/icon",
"ionic/theme/form",
"ionic/theme/listview",
"ionic/theme/menu",
"ionic/theme/pull-to-refresh",

11
scss/ionic/structure/_form.scss
View File

@@ -1,4 +1,4 @@
//
// Forms
// -------------------------------
@@ -99,6 +99,15 @@ textarea {
overflow: hidden;
@include border-radius($input-border-radius);
}
.input-wrapper.row {
margin-left: 0;
margin-right: 0;
[class*='col-'] {
padding-left: 0;
padding-right: 0;
}
}
// Form Controls

0
scss/ionic/theme/_form.scss
View File