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

text input updates

Browse Source
This commit is contained in:
Adam Bradley
2013-09-09 20:43:40 -05:00
parent 30718279a5
commit 1ee6027ff8
4 changed files with 180 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
dist/ionic.css vendored
View File

@ -638,62 +638,48 @@ select,
textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.form-group {
background-color: white;
overflow: hidden; }
.content-padded > .form-group,
.form-group.inset {
border-left: 1px solid #bbbbbb;
border-right: 1px solid #bbbbbb; }
.form-group .input-wrapper + .input-wrapper {
border-top: 0; }
.form-group + .form-group {
margin-top: 10px; }
.input-wrapper {
display: block;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
padding: 4px 7px 3px; }
border-top: 1px solid #bbbbbb;
border-bottom: 1px solid #bbbbbb;
padding: 6px 8px 5px;
overflow: hidden; }
.input-wrapper input {
background-color: transparent;
margin: 0;
-webkit-appearance: none; }
-webkit-appearance: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0; }
.input-wrapper .input-label {
font-weight: bold;
line-height: 34px; }
.content-padded > .input-wrapper,
.input-wrapper.inset {
border-left: 1px solid #999999;
border-right: 1px solid #999999;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px; }
.input-wrapper.row-fluid {
width: auto; }
.stacked-label {
padding: 0; }
.stacked-label input {
border: 1px solid #999999; }
.stacked-label {
.form-group.stacked-label,
.form-group.stacked-label .input-wrapper {
background-color: transparent;
border: 0; }
.stacked-label input {
border: 1px solid #999999 !important;
padding: 20px 10px !important;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px; }
.stacked-label span {
font-weight: bold;
line-height: 20px; }
.content > .input-wrapper.stacked-label input {
border-left: 0 !important;
border-right: 0 !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0; }
.content-padded > .input-wrapper.stacked-label,
.content > .input-wrapper.stacked-label.inset {
border: 0 !important; }
.content > .input-wrapper.stacked-label.inset input {
border: 1px solid #999999 !important; }
.input-wrapper + .input-wrapper {
border-top: 0 !important; }
.form-group.stacked-label input {
border: 1px solid #bbbbbb;
background-color: white;
padding: 4px 8px 3px;
overflow: hidden; }
select,
textarea,
@ -743,7 +729,6 @@ input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
background-color: white;
border: 0; }
textarea:focus,
input[type="text"]:focus,
@ -789,7 +774,7 @@ input[type="file"] {
select {
width: 220px;
border: 1px solid #999999;
border: 1px solid #bbbbbb;
background-color: white; }
select[multiple],
@ -808,7 +793,7 @@ input[type="checkbox"]:focus {
.uneditable-textarea {
color: #999999;
background-color: #fcfcfc;
border-color: #999999;
border-color: #bbbbbb;
cursor: not-allowed; }
.uneditable-input {

172
example/input-text.html
View File

@ -24,32 +24,58 @@
<div class="content has-header has-footer">
<h3>Default Text Input, Not Inset, No Content Padding</h3>
<label class="input-wrapper">
<input type="text" placeholder="First Name">
</label>
<label class="input-wrapper">
<input type="text" placeholder="Last Name">
</label>
<label class="input-wrapper">
<input type="email" placeholder="Email">
</label>
<div class="form-group">
<label class="input-wrapper">
<input type="text" placeholder="First Name">
</label>
<label class="input-wrapper">
<input type="text" placeholder="Last Name">
</label>
<label class="input-wrapper">
<input type="email" placeholder="Email">
</label>
</div>
<h3>Default Text Input, Is Inset, No Content Padding</h3>
<label class="input-wrapper inset">
<input type="email" placeholder="Email">
</label>
<div class="form-group inset">
<label class="input-wrapper">
<input type="text" placeholder="First Name">
</label>
<label class="input-wrapper">
<input type="text" placeholder="Last Name">
</label>
<label class="input-wrapper">
<input type="email" placeholder="Email">
</label>
</div>
<div class="content-padded">
<h3>Default Text Input, Not Inset, With Content Padding</h3>
<label class="input-wrapper">
<input type="email" placeholder="Email">
</label>
<div class="form-group">
<label class="input-wrapper">
<input type="text" placeholder="Username">
</label>
<label class="input-wrapper">
<input type="email" placeholder="Email">
</label>
</div>
<div class="form-group">
<label class="input-wrapper">
<input type="text" placeholder="Filter by name">
</label>
</div>
<h3>Default Text Input, Is Inset, With Content Padding</h3>
<label class="input-wrapper inset">
<input type="email" placeholder="Email">
</label>
<div class="form-group inset">
<label class="input-wrapper">
<input type="email" placeholder="Email">
</label>
<label class="input-wrapper">
<input type="text" placeholder="Name">
</label>
</div>
</div>
@ -57,38 +83,46 @@
<h3>Inline Label On Top Of Text Input, Not Inset, No Content Padding</h3>
<label class="input-wrapper row-fluid">
<span class="input-label span3">Email</span>
<input class="span9" type="text" placeholder="your@email.com">
</label>
<label class="input-wrapper row-fluid">
<span class="input-label span3">Email</span>
<input class="span9" type="text" placeholder="your@email.com">
</label>
<label class="input-wrapper row-fluid">
<span class="input-label span3">Email</span>
<input class="span9" type="text" placeholder="your@email.com">
</label>
<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>
<label class="input-wrapper row-fluid">
<span class="input-label span4">Email</span>
<input class="span8" 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>
</div>
<h3>Inline Label On Top Of Text Input, Is Inset, No Content Padding</h3>
<label class="input-wrapper row-fluid inset">
<span class="input-label span3">Email</span>
<input class="span9" type="text" placeholder="your@email.com">
</label>
<div class="content-padded">
<h3>Inline Label On Top Of Text Input, Not 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>
</div>
<div class="content-padded">
<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">Email</span>
<input class="span9" type="text" placeholder="your@email.com">
</label>
</div>
<h3>Inline Label On Top Of Text Input, Is Inset, With Content Padding</h3>
<label class="input-wrapper row-fluid inset">
<span class="input-label span3">Email</span>
<input class="span9" type="text" placeholder="your@email.com">
</label>
<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>
</div>
</div>
@ -96,30 +130,52 @@
<h3>Stacked Label On Top Of Text Input, Not Inset, No Content Padding</h3>
<label class="input-wrapper stacked-label">
<span>Email</span>
<input type="text" placeholder="your@email.com">
</label>
<div class="form-group stacked-label">
<label class="input-wrapper">
<span class="input-label">First Name</span>
<input type="text" placeholder="Drifty">
</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="form-group stacked-label">
<label class="input-wrapper">
<span class="input-label">Filter By Name</span>
<input type="text" placeholder="">
</label>
</div>
<h3>Stacked Label On Top Of Text Input, Is Inset, No Content Padding</h3>
<label class="input-wrapper stacked-label inset">
<span>Email</span>
<input type="text" placeholder="your@email.com">
</label>
<div class="form-group stacked-label inset">
<label class="input-wrapper">
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com">
</label>
</div>
<div class="content-padded">
<h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3>
<label class="input-wrapper stacked-label">
<span>Email</span>
<input type="text" placeholder="your@email.com">
</label>
<div class="form-group stacked-label">
<label class="input-wrapper">
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com">
</label>
</div>
<h3>Stacked Label On Top Of Text Input, Is Inset, With Content Padding</h3>
<label class="input-wrapper stacked-label inset">
<span>Email</span>
<input type="text" placeholder="your@email.com">
</label>
<div class="form-group stacked-label inset">
<label class="input-wrapper">
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com">
</label>
</div>
</div>

2
scss/ionic/_theme-variables.scss
View File

@ -48,7 +48,7 @@ $textColor: $grayDark !default;
// Forms
// -------------------------------
$inputBackground: $white !default;
$inputBorder: $grayLight !default;
$inputBorder: #bbb !default;
$inputBorderRadius: 4px !default;
$inputDisabledBackground: $grayLighter !default;
$formActionsBackground: $grayLighter !default;

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

@ -47,68 +47,55 @@ textarea {
font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
}
.form-group {
background-color: $inputBackground;
overflow: hidden;
}
.content-padded > .form-group,
.form-group.inset {
border-left: 1px solid $inputBorder;
border-right: 1px solid $inputBorder;
}
.form-group .input-wrapper + .input-wrapper {
border-top: 0;
}
.form-group + .form-group {
margin-top: $contentPadding;
}
.input-wrapper {
display: block;
border-top: 1px solid $inputBorder;
border-bottom: 1px solid $inputBorder;
padding: 4px 7px 3px;
padding: 6px 8px 5px;
overflow: hidden;
input {
background-color: transparent;
margin: 0;
-webkit-appearance: none;
@include border-radius(0);
}
.input-label {
font-weight: bold;
line-height: $baseLineHeightComputed + $baseFontSize;
}
}
.content-padded > .input-wrapper,
.input-wrapper.inset
{
border-left: 1px solid $inputBorder;
border-right: 1px solid $inputBorder;
@include border-radius($textInputBorderRadius);
}
.input-wrapper.row-fluid {
width: auto;
}
.stacked-label {
padding: 0;
input {
border: 1px solid $inputBorder;
}
}
.stacked-label {
.form-group.stacked-label,
.form-group.stacked-label .input-wrapper {
background-color: transparent;
border: 0;
input {
border: 1px solid $inputBorder !important;
padding: $baseLineHeightComputed $baseLineHeightComputed/2 !important;
@include border-radius($textInputBorderRadius);
}
span {
font-weight: bold;
line-height: $baseLineHeightComputed;
}
}
.content > .input-wrapper.stacked-label input {
border-left: 0 !important;
border-right: 0 !important;
@include border-radius(0);
}
.content-padded > .input-wrapper.stacked-label,
.content > .input-wrapper.stacked-label.inset
{
border: 0 !important;
}
.content > .input-wrapper.stacked-label.inset input {
border: 1px solid $inputBorder !important;
}
.input-wrapper + .input-wrapper {
border-top: 0 !important;
.form-group.stacked-label input {
border: 1px solid $inputBorder;
background-color: $inputBackground;
padding: 4px 8px 3px;
overflow: hidden;
}
@ -169,7 +156,6 @@ input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
background-color: $inputBackground;
border: 0;
// Focus state