javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +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 { textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } 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 { .input-wrapper {
display: block; display: block;
border-top: 1px solid #999999; border-top: 1px solid #bbbbbb;
border-bottom: 1px solid #999999; border-bottom: 1px solid #bbbbbb;
padding: 4px 7px 3px; } padding: 6px 8px 5px;
overflow: hidden; }
.input-wrapper input { .input-wrapper input {
background-color: transparent;
margin: 0; margin: 0;
-webkit-appearance: none; } -webkit-appearance: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0; }
.input-wrapper .input-label { .input-wrapper .input-label {
font-weight: bold; font-weight: bold;
line-height: 34px; } line-height: 34px; }
.content-padded > .input-wrapper, .form-group.stacked-label,
.input-wrapper.inset { .form-group.stacked-label .input-wrapper {
border-left: 1px solid #999999; background-color: transparent;
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 {
border: 0; } 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 { .form-group.stacked-label input {
border-left: 0 !important; border: 1px solid #bbbbbb;
border-right: 0 !important; background-color: white;
-webkit-border-radius: 0; padding: 4px 8px 3px;
-moz-border-radius: 0; overflow: hidden; }
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; }
select, select,
textarea, textarea,
@ -743,7 +729,6 @@ input[type="search"],
input[type="tel"], input[type="tel"],
input[type="color"], input[type="color"],
.uneditable-input { .uneditable-input {
background-color: white;
border: 0; } border: 0; }
textarea:focus, textarea:focus,
input[type="text"]:focus, input[type="text"]:focus,
@ -789,7 +774,7 @@ input[type="file"] {
select { select {
width: 220px; width: 220px;
border: 1px solid #999999; border: 1px solid #bbbbbb;
background-color: white; } background-color: white; }
select[multiple], select[multiple],
@ -808,7 +793,7 @@ input[type="checkbox"]:focus {
.uneditable-textarea { .uneditable-textarea {
color: #999999; color: #999999;
background-color: #fcfcfc; background-color: #fcfcfc;
border-color: #999999; border-color: #bbbbbb;
cursor: not-allowed; } cursor: not-allowed; }
.uneditable-input { .uneditable-input {

92
example/input-text.html
View File

@ -24,6 +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">
<label class="input-wrapper"> <label class="input-wrapper">
<input type="text" placeholder="First Name"> <input type="text" placeholder="First Name">
</label> </label>
@ -33,23 +34,48 @@
<label class="input-wrapper"> <label class="input-wrapper">
<input type="email" placeholder="Email"> <input type="email" placeholder="Email">
</label> </label>
</div>
<h3>Default Text Input, Is Inset, No Content Padding</h3> <h3>Default Text Input, Is Inset, No Content Padding</h3>
<label class="input-wrapper inset"> <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"> <input type="email" placeholder="Email">
</label> </label>
</div>
<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">
<label class="input-wrapper">
<input type="text" placeholder="Username">
</label>
<label class="input-wrapper"> <label class="input-wrapper">
<input type="email" placeholder="Email"> <input type="email" placeholder="Email">
</label> </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> <h3>Default Text Input, Is Inset, With Content Padding</h3>
<label class="input-wrapper inset"> <div class="form-group inset">
<label class="input-wrapper">
<input type="email" placeholder="Email"> <input type="email" placeholder="Email">
</label> </label>
<label class="input-wrapper">
<input type="text" placeholder="Name">
</label>
</div>
</div> </div>
@ -57,38 +83,46 @@
<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">
<label class="input-wrapper row-fluid"> <label class="input-wrapper row-fluid">
<span class="input-label span3">Email</span> <span class="input-label span4">Username</span>
<input class="span9" type="text" placeholder="your@email.com"> <input class="span8" type="text" placeholder="@drifty">
</label> </label>
<label class="input-wrapper row-fluid"> <label class="input-wrapper row-fluid">
<span class="input-label span3">Email</span> <span class="input-label span4">Email</span>
<input class="span9" type="text" placeholder="your@email.com"> <input class="span8" type="email" placeholder="your@email.com">
</label> </label>
<label class="input-wrapper row-fluid"> <label class="input-wrapper row-fluid">
<span class="input-label span3">Email</span> <span class="input-label span4">First Name</span>
<input class="span9" type="text" placeholder="your@email.com"> <input class="span8" type="text" placeholder="Sir Derp">
</label> </label>
</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>
<label class="input-wrapper row-fluid inset"> <div class="form-group inset">
<label class="input-wrapper row-fluid">
<span class="input-label span3">Email</span> <span class="input-label span3">Email</span>
<input class="span9" type="text" placeholder="your@email.com"> <input class="span9" type="text" placeholder="your@email.com">
</label> </label>
</div>
<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">
<label class="input-wrapper row-fluid"> <label class="input-wrapper row-fluid">
<span class="input-label span3">Email</span> <span class="input-label span3">Email</span>
<input class="span9" type="text" placeholder="your@email.com"> <input class="span9" type="text" placeholder="your@email.com">
</label> </label>
</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>
<label class="input-wrapper row-fluid inset"> <div class="form-group inset">
<label class="input-wrapper row-fluid">
<span class="input-label span3">Email</span> <span class="input-label span3">Email</span>
<input class="span9" type="text" placeholder="your@email.com"> <input class="span9" type="text" placeholder="your@email.com">
</label> </label>
</div>
</div> </div>
@ -96,30 +130,52 @@
<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>
<label class="input-wrapper stacked-label"> <div class="form-group stacked-label">
<span>Email</span> <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"> <input type="text" placeholder="your@email.com">
</label> </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> <h3>Stacked Label On Top Of Text Input, Is Inset, No Content Padding</h3>
<label class="input-wrapper stacked-label inset"> <div class="form-group stacked-label inset">
<span>Email</span> <label class="input-wrapper">
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com"> <input type="text" placeholder="your@email.com">
</label> </label>
</div>
<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>
<label class="input-wrapper stacked-label"> <div class="form-group stacked-label">
<span>Email</span> <label class="input-wrapper">
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com"> <input type="text" placeholder="your@email.com">
</label> </label>
</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>
<label class="input-wrapper stacked-label inset"> <div class="form-group stacked-label inset">
<span>Email</span> <label class="input-wrapper">
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com"> <input type="text" placeholder="your@email.com">
</label> </label>
</div>
</div> </div>

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

@ -48,7 +48,7 @@ $textColor: $grayDark !default;
// Forms // Forms
// ------------------------------- // -------------------------------
$inputBackground: $white !default; $inputBackground: $white !default;
$inputBorder: $grayLight !default; $inputBorder: #bbb !default;
$inputBorderRadius: 4px !default; $inputBorderRadius: 4px !default;
$inputDisabledBackground: $grayLighter !default; $inputDisabledBackground: $grayLighter !default;
$formActionsBackground: $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) 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 { .input-wrapper {
display: block; display: block;
border-top: 1px solid $inputBorder; border-top: 1px solid $inputBorder;
border-bottom: 1px solid $inputBorder; border-bottom: 1px solid $inputBorder;
padding: 4px 7px 3px; padding: 6px 8px 5px;
overflow: hidden;
input { input {
background-color: transparent;
margin: 0; margin: 0;
-webkit-appearance: none; -webkit-appearance: none;
@include border-radius(0);
} }
.input-label { .input-label {
font-weight: bold; font-weight: bold;
line-height: $baseLineHeightComputed + $baseFontSize; line-height: $baseLineHeightComputed + $baseFontSize;
} }
} }
.content-padded > .input-wrapper, .form-group.stacked-label,
.input-wrapper.inset .form-group.stacked-label .input-wrapper {
{ background-color: transparent;
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 {
border: 0; border: 0;
input {
border: 1px solid $inputBorder !important;
padding: $baseLineHeightComputed $baseLineHeightComputed/2 !important;
@include border-radius($textInputBorderRadius);
} }
span {
font-weight: bold; .form-group.stacked-label input {
line-height: $baseLineHeightComputed; border: 1px solid $inputBorder;
} background-color: $inputBackground;
} padding: 4px 8px 3px;
.content > .input-wrapper.stacked-label input { overflow: hidden;
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;
} }
@ -169,7 +156,6 @@ input[type="search"],
input[type="tel"], input[type="tel"],
input[type="color"], input[type="color"],
.uneditable-input { .uneditable-input {
background-color: $inputBackground;
border: 0; border: 0;
// Focus state // Focus state