javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

forms w/ flexbox

Browse Source
This commit is contained in:
Adam Bradley
2013-10-14 09:25:57 -05:00
parent 2f2cf12471
commit f04f3632d1
7 changed files with 227 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
dist/css/ionic-ios7.css vendored
View File

@ -314,7 +314,7 @@ a {
a:focus, button:focus { a:focus, button:focus {
outline: 0; } outline: 0; }
body { body, .ionic-body {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
@ -1237,48 +1237,64 @@ textarea {
.input-group { .input-group {
overflow: hidden; overflow: hidden;
/* border-top: 1px solid #cccccc;
border-top: $input-border-width solid $input-border-color; border-bottom: 1px solid #cccccc;
border-bottom: $input-border-width solid $input-border-color; background-color: white; }
background-color: $input-bg;
*/ }
.padded > .input-group, .padded > .input-group,
.input-group.inset { .input-group.inset {
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
/* border-right: 1px solid #cccccc;
border-right: $input-border-width solid $input-border-color; border-left: 1px solid #cccccc; }
border-left: $input-border-width solid $input-border-color;
*/ }
.input-group .input-wrapper + .input-wrapper { .input-group .input-row + .input-row {
border-top: 1px solid #cccccc; } border-top: 1px solid #cccccc; }
.input-group + .input-group { .input-group + .input-group {
margin-top: 10px; } margin-top: 10px; }
.input-wrapper { .input-row {
position: relative; position: relative;
display: block; display: -webkit-flex;
display: flex;
overflow: hidden; overflow: hidden;
padding: 6px 8px 5px; } padding: 6px 8px 5px; }
.input-wrapper input { .input-row input {
-webkit-border-radius: 0; -webkit-border-radius: 0;
-moz-border-radius: 0; -moz-border-radius: 0;
border-radius: 0; border-radius: 0;
margin: 0; margin: 0;
background-color: transparent; background-color: transparent;
flex: 1 0 220px;
-webkit-appearance: none; } -webkit-appearance: none; }
.input-wrapper .input-label { .input-row .input-label {
padding: 7px 10px 7px 3px;
max-width: 200px;
font-weight: bold; font-weight: bold;
line-height: 34px; } flex: 1 0 100px; }
.input-row [class^="icon-"], .input-row [class*=" icon-"] {
display: inline-block;
text-align: center;
font-size: 16px;
flex: 0 0 24px;
align-self: center; }
.input-row .placeholder-icon {
color: #999; }
.input-group.stacked-label, .input-group.stacked-label,
.input-group.stacked-label .input-wrapper { .input-group.stacked-label .input-row {
display: block;
border: 0; border: 0;
background-color: transparent; } background-color: transparent; }
.input-group.stacked-label .input-label, .input-group.stacked-label [class^="icon-"], .input-group.stacked-label [class*=" icon-"],
.input-group.stacked-label .input-row .input-label,
.input-group.stacked-label .input-row [class^="icon-"],
.input-group.stacked-label .input-row [class*=" icon-"] {
display: inline-block;
padding: 4px 0;
vertical-align: middle; }
.input-group.stacked-label input, .input-group.stacked-label input,
.input-group.stacked-label textarea { .input-group.stacked-label textarea {
@ -1293,13 +1309,6 @@ textarea {
.input-group.stacked-label input { .input-group.stacked-label input {
height: 46px; } height: 46px; }
.input-wrapper.row {
margin-right: 0;
margin-left: 0; }
.input-wrapper.row [class*='col-'] {
padding-right: 0;
padding-left: 0; }
select, select,
textarea, textarea,
input[type="text"], input[type="text"],

59
dist/css/ionic-scoped.css vendored
View File

@ -1,3 +1,4 @@
@charset "UTF-8";
.ionic { .ionic {
@font-face { @font-face {
font-family: 'ionicons'; font-family: 'ionicons';
@ -1056,7 +1057,7 @@
-webkit-tap-highlight-color: transparent; } -webkit-tap-highlight-color: transparent; }
.ionic a:focus, .ionic button:focus { .ionic a:focus, .ionic button:focus {
outline: 0; } outline: 0; }
.ionic body { .ionic body, .ionic .ionic-body {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
@ -1271,34 +1272,50 @@
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
border-color: #dddddd; border-color: #dddddd;
color: #333333; } color: #333333; }
.ionic .bar.bar-default .title {
color: #333333; }
.ionic .bar.bar-secondary { .ionic .bar.bar-secondary {
background-color: rgba(245, 245, 245, 0.9); background-color: rgba(245, 245, 245, 0.9);
border-color: #bbbbbb; border-color: #bbbbbb;
color: #333333; } color: #333333; }
.ionic .bar.bar-secondary .title {
color: #333333; }
.ionic .bar.bar-primary { .ionic .bar.bar-primary {
background-color: rgba(74, 135, 238, 0.9); background-color: rgba(74, 135, 238, 0.9);
border-color: #3b6dc2; border-color: #3b6dc2;
color: white; } color: white; }
.ionic .bar.bar-primary .title {
color: white; }
.ionic .bar.bar-info { .ionic .bar.bar-info {
background-color: rgba(67, 206, 230, 0.9); background-color: rgba(67, 206, 230, 0.9);
border-color: #3bb3c8; border-color: #3bb3c8;
color: white; } color: white; }
.ionic .bar.bar-info .title {
color: white; }
.ionic .bar.bar-success { .ionic .bar.bar-success {
background-color: rgba(102, 204, 51, 0.9); background-color: rgba(102, 204, 51, 0.9);
border-color: #5bb22f; border-color: #5bb22f;
color: white; } color: white; }
.ionic .bar.bar-success .title {
color: white; }
.ionic .bar.bar-warning { .ionic .bar.bar-warning {
background-color: rgba(240, 184, 64, 0.9); background-color: rgba(240, 184, 64, 0.9);
border-color: #d29f31; border-color: #d29f31;
color: white; } color: white; }
.ionic .bar.bar-warning .title {
color: white; }
.ionic .bar.bar-danger { .ionic .bar.bar-danger {
background-color: rgba(239, 78, 58, 0.9); background-color: rgba(239, 78, 58, 0.9);
border-color: #c73927; border-color: #c73927;
color: white; } color: white; }
.ionic .bar.bar-danger .title {
color: white; }
.ionic .bar.bar-dark { .ionic .bar.bar-dark {
background-color: rgba(68, 68, 68, 0.9); background-color: rgba(68, 68, 68, 0.9);
border-color: #111111; border-color: #111111;
color: white; } color: white; }
.ionic .bar.bar-dark .title {
color: white; }
.ionic .bar .title { .ionic .bar .title {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
@ -1877,29 +1894,49 @@
border-radius: 2px; border-radius: 2px;
border-right: 1px solid #cccccc; border-right: 1px solid #cccccc;
border-left: 1px solid #cccccc; } border-left: 1px solid #cccccc; }
.ionic .input-group .input-wrapper + .input-wrapper { .ionic .input-group .input-row + .input-row {
border-top: 1px solid #cccccc; } border-top: 1px solid #cccccc; }
.ionic .input-group + .input-group { .ionic .input-group + .input-group {
margin-top: 10px; } margin-top: 10px; }
.ionic .input-wrapper { .ionic .input-row {
position: relative; position: relative;
display: block; display: -webkit-flex;
display: flex;
overflow: hidden; overflow: hidden;
padding: 6px 8px 5px; } padding: 6px 8px 5px; }
.ionic .input-wrapper input { .ionic .input-row input {
-webkit-border-radius: 0; -webkit-border-radius: 0;
-moz-border-radius: 0; -moz-border-radius: 0;
border-radius: 0; border-radius: 0;
margin: 0; margin: 0;
background-color: transparent; background-color: transparent;
flex: 1 0 220px;
-webkit-appearance: none; } -webkit-appearance: none; }
.ionic .input-wrapper .input-label { .ionic .input-row .input-label {
padding: 7px 10px 7px 3px;
max-width: 200px;
font-weight: bold; font-weight: bold;
line-height: 34px; } flex: 1 0 100px; }
.ionic .input-row [class^="icon-"], .ionic .input-row [class*=" icon-"] {
display: inline-block;
text-align: center;
font-size: 16px;
flex: 0 0 24px;
align-self: center; }
.ionic .input-row .placeholder-icon {
color: #999; }
.ionic .input-group.stacked-label, .ionic .input-group.stacked-label,
.ionic .input-group.stacked-label .input-wrapper { .ionic .input-group.stacked-label .input-row {
display: block;
border: 0; border: 0;
background-color: transparent; } background-color: transparent; }
.ionic .input-group.stacked-label .input-label, .ionic .input-group.stacked-label [class^="icon-"], .ionic .input-group.stacked-label [class*=" icon-"],
.ionic .input-group.stacked-label .input-row .input-label,
.ionic .input-group.stacked-label .input-row [class^="icon-"],
.ionic .input-group.stacked-label .input-row [class*=" icon-"] {
display: inline-block;
padding: 4px 0;
vertical-align: middle; }
.ionic .input-group.stacked-label input, .ionic .input-group.stacked-label input,
.ionic .input-group.stacked-label textarea { .ionic .input-group.stacked-label textarea {
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
@ -1911,12 +1948,6 @@
background-color: white; } background-color: white; }
.ionic .input-group.stacked-label input { .ionic .input-group.stacked-label input {
height: 46px; } height: 46px; }
.ionic .input-wrapper.row {
margin-right: 0;
margin-left: 0; }
.ionic .input-wrapper.row [class*='col-'] {
padding-right: 0;
padding-left: 0; }
.ionic select, .ionic select,
.ionic textarea, .ionic textarea,
.ionic input[type="text"], .ionic input[type="text"],

44
dist/css/ionic.css vendored
View File

@ -1,3 +1,4 @@
@charset "UTF-8";
@font-face { @font-face {
font-family: 'ionicons'; font-family: 'ionicons';
src: url("fonts/ionicons.eot"); src: url("fonts/ionicons.eot");
@ -1377,7 +1378,7 @@ a {
a:focus, button:focus { a:focus, button:focus {
outline: 0; } outline: 0; }
body { body, .ionic-body {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
@ -2335,32 +2336,52 @@ textarea {
border-right: 1px solid #cccccc; border-right: 1px solid #cccccc;
border-left: 1px solid #cccccc; } border-left: 1px solid #cccccc; }
.input-group .input-wrapper + .input-wrapper { .input-group .input-row + .input-row {
border-top: 1px solid #cccccc; } border-top: 1px solid #cccccc; }
.input-group + .input-group { .input-group + .input-group {
margin-top: 10px; } margin-top: 10px; }
.input-wrapper { .input-row {
position: relative; position: relative;
display: block; display: -webkit-flex;
display: flex;
overflow: hidden; overflow: hidden;
padding: 6px 8px 5px; } padding: 6px 8px 5px; }
.input-wrapper input { .input-row input {
-webkit-border-radius: 0; -webkit-border-radius: 0;
-moz-border-radius: 0; -moz-border-radius: 0;
border-radius: 0; border-radius: 0;
margin: 0; margin: 0;
background-color: transparent; background-color: transparent;
flex: 1 0 220px;
-webkit-appearance: none; } -webkit-appearance: none; }
.input-wrapper .input-label { .input-row .input-label {
padding: 7px 10px 7px 3px;
max-width: 200px;
font-weight: bold; font-weight: bold;
line-height: 34px; } flex: 1 0 100px; }
.input-row [class^="icon-"], .input-row [class*=" icon-"] {
display: inline-block;
text-align: center;
font-size: 16px;
flex: 0 0 24px;
align-self: center; }
.input-row .placeholder-icon {
color: #999; }
.input-group.stacked-label, .input-group.stacked-label,
.input-group.stacked-label .input-wrapper { .input-group.stacked-label .input-row {
display: block;
border: 0; border: 0;
background-color: transparent; } background-color: transparent; }
.input-group.stacked-label .input-label, .input-group.stacked-label [class^="icon-"], .input-group.stacked-label [class*=" icon-"],
.input-group.stacked-label .input-row .input-label,
.input-group.stacked-label .input-row [class^="icon-"],
.input-group.stacked-label .input-row [class*=" icon-"] {
display: inline-block;
padding: 4px 0;
vertical-align: middle; }
.input-group.stacked-label input, .input-group.stacked-label input,
.input-group.stacked-label textarea { .input-group.stacked-label textarea {
@ -2375,13 +2396,6 @@ textarea {
.input-group.stacked-label input { .input-group.stacked-label input {
height: 46px; } height: 46px; }
.input-wrapper.row {
margin-right: 0;
margin-left: 0; }
.input-wrapper.row [class*='col-'] {
padding-right: 0;
padding-left: 0; }
select, select,
textarea, textarea,
input[type="text"], input[type="text"],

30
example/toderp2/index.html
View File

@ -51,20 +51,20 @@
<div class="toderp-logo"></div> <div class="toderp-logo"></div>
</div> </div>
<div class="input-group"> <div class="input-group">
<label class="input-wrapper row"> <label class="input-row">
<span class="input-label col-xs-3">Full name</span> <span class="input-label">Full name</span>
<input class="col-xs-8" type="text" placeholder="" ng-model="signupForm.name" required> <input type="text" placeholder="" ng-model="signupForm.name" required>
</label> </label>
<label class="input-wrapper row"> <label class="input-row">
<span class="input-label col-xs-3">Email</span> <span class="input-label">Email</span>
<input class="col-xs-8" type="email" placeholder="" ng-model="signupForm.email" required> <input type="email" placeholder="" ng-model="signupForm.email" required>
</label> </label>
<label class="input-wrapper row"> <label class="input-row">
<span class="input-label col-xs-3">Password</span> <span class="input-label">Password</span>
<input class="col-xs-8" type="password" placeholder="" ng-model="signupForm.password" required> <input type="password" placeholder="" ng-model="signupForm.password" required>
</label> </label>
</div> </div>
<div class="input-group"> <div class="inset">
<button type="submit" class="button button-primary button-block">Get derp'n</button> <button type="submit" class="button button-primary button-block">Get derp'n</button>
<div id="signup-error" ng-show="signupError">Unable to signup, please try again.</div> <div id="signup-error" ng-show="signupError">Unable to signup, please try again.</div>
</div> </div>
@ -87,16 +87,16 @@
<main class="content padded has-header"> <main class="content padded has-header">
<form class="form-horizontal" ng-submit="tryLogin(loginForm)"> <form class="form-horizontal" ng-submit="tryLogin(loginForm)">
<div class="input-group inset"> <div class="input-group inset">
<label class="input-wrapper row"> <label class="input-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="email" placeholder="" ng-model="loginForm.email"> <input type="email" placeholder="" ng-model="loginForm.email">
</label> </label>
<label class="input-wrapper row"> <label class="input-row">
<span class="input-label col-xs-4">Password</span> <span class="input-label col-xs-4">Password</span>
<input class="col-xs-8" type="password" placeholder="" ng-model="loginForm.password"> <input type="password" placeholder="" ng-model="loginForm.password">
</label> </label>
</div> </div>
<div class="input-group inset"> <div class="inset">
<button class="button button-primary button-block">Log in</button> <button class="button button-primary button-block">Log in</button>
<div id="login-error" ng-show="loginError">Invalid email/password. Please try again.</div> <div id="login-error" ng-show="loginError">Invalid email/password. Please try again.</div>
</div> </div>

44
scss/ionic/_form.scss
View File

@ -47,6 +47,10 @@ 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)
} }
// Input groups
// -------------------------------
.input-group { .input-group {
overflow: hidden; overflow: hidden;
border-top: $input-border-width solid $input-border-color; border-top: $input-border-width solid $input-border-color;
@ -60,7 +64,7 @@ textarea {
border-left: $input-border-width solid $input-border-color; border-left: $input-border-width solid $input-border-color;
} }
.input-group .input-wrapper + .input-wrapper { .input-group .input-row + .input-row {
border-top: $input-border-width solid $input-border-color; border-top: $input-border-width solid $input-border-color;
} }
@ -68,9 +72,10 @@ textarea {
margin-top: $content-padding; margin-top: $content-padding;
} }
.input-wrapper { .input-row {
position: relative; position: relative;
display: block; display: -webkit-flex;
display: flex;
overflow: hidden; overflow: hidden;
padding: 6px 8px 5px; padding: 6px 8px 5px;
@ -78,19 +83,39 @@ textarea {
@include border-radius(0); @include border-radius(0);
margin: 0; margin: 0;
background-color: transparent; background-color: transparent;
flex: 1 0 220px;
-webkit-appearance: none; -webkit-appearance: none;
} }
.input-label { .input-label {
padding: 7px 10px 7px 3px;
max-width: 200px;
font-weight: bold; font-weight: bold;
line-height: $line-height-computed + $font-size-base; flex: 1 0 100px;
}
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
text-align: center;
font-size: 16px;
flex: 0 0 24px;
align-self: center;
}
.placeholder-icon {
color: #999;
} }
} }
.input-group.stacked-label, .input-group.stacked-label,
.input-group.stacked-label .input-wrapper { .input-group.stacked-label .input-row {
display: block;
border: 0; border: 0;
background-color: transparent; background-color: transparent;
.input-label, [class^="icon-"], [class*=" icon-"] {
display: inline-block;
padding: 4px 0;
vertical-align: middle;
}
} }
.input-group.stacked-label input, .input-group.stacked-label input,
@ -105,15 +130,6 @@ textarea {
.input-group.stacked-label input { .input-group.stacked-label input {
height: $line-height-computed + $font-size-base + 12px; height: $line-height-computed + $font-size-base + 12px;
} }
.input-wrapper.row {
margin-right: 0;
margin-left: 0;
[class*='col-'] {
padding-right: 0;
padding-left: 0;
}
}
// Form Controls // Form Controls

2
scss/ionic/_scaffolding.scss
View File

@ -15,7 +15,7 @@ a, button {
} }
} }
body { body, .ionic-body {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;

139
test/input-text.html
View File

@ -24,26 +24,26 @@
<h3>Default Text Input, Not Inset, No Content Padding</h3> <h3>Default Text Input, Not Inset, No Content Padding</h3>
<div class="input-group"> <div class="input-group">
<label class="input-wrapper"> <label class="input-row">
<input type="text" placeholder="First Name"> <input type="text" placeholder="First Name">
</label> </label>
<label class="input-wrapper"> <label class="input-row">
<input type="text" placeholder="Last Name"> <input type="text" placeholder="Last Name">
</label> </label>
<label class="input-wrapper"> <label class="input-row">
<input type="email" placeholder="Email"> <input type="email" placeholder="Email">
</label> </label>
</div> </div>
<h3>Default Text Input, Is Inset, No Content Padding</h3> <h3>Default Text Input, Is Inset, No Content Padding</h3>
<div class="input-group inset"> <div class="input-group inset">
<label class="input-wrapper"> <label class="input-row">
<input type="text" placeholder="First Name"> <input type="text" placeholder="First Name">
</label> </label>
<label class="input-wrapper"> <label class="input-row">
<input type="text" placeholder="Last Name"> <input type="text" placeholder="Last Name">
</label> </label>
<label class="input-wrapper"> <label class="input-row">
<input type="email" placeholder="Email"> <input type="email" placeholder="Email">
</label> </label>
</div> </div>
@ -52,26 +52,26 @@
<h3>Default Text Input, Not Inset, With Content Padding</h3> <h3>Default Text Input, Not Inset, With Content Padding</h3>
<div class="input-group"> <div class="input-group">
<label class="input-wrapper"> <label class="input-row">
<input type="text" placeholder="Username"> <input type="text" placeholder="Username">
</label> </label>
<label class="input-wrapper"> <label class="input-row">
<input type="email" placeholder="Email"> <input type="email" placeholder="Email">
</label> </label>
</div> </div>
<div class="input-group"> <div class="input-group">
<label class="input-wrapper"> <label class="input-row">
<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="input-group inset"> <div class="input-group inset">
<label class="input-wrapper"> <label class="input-row">
<input type="email" placeholder="Email"> <input type="email" placeholder="Email">
</label> </label>
<label class="input-wrapper"> <label class="input-row">
<input type="text" placeholder="Name"> <input type="text" placeholder="Name">
</label> </label>
</div> </div>
@ -81,27 +81,42 @@
<h3>Inline Label On Top Of Text Input, Not Inset, No Content Padding</h3> <h3>Label left of input, Not Inset, No Content Padding</h3>
<div class="input-group"> <div class="input-group">
<label class="input-wrapper row"> <label class="input-row">
<span class="input-label col-xs-4">Username</span> <span class="input-label">Username</span>
<input class="col-xs-8" type="text" placeholder="@drifty"> <input type="text" placeholder="@drifty">
</label> </label>
<label class="input-wrapper row"> <label class="input-row">
<span class="input-label col-xs-4">Email</span> <span class="input-label">Email</span>
<input class="col-xs-8" type="email" placeholder="your@email.com"> <input type="email" placeholder="your@email.com">
</label> </label>
<label class="input-wrapper row"> <label class="input-row">
<span class="input-label col-xs-4">First Name</span> <span class="input-label">First Name</span>
<input class="col-xs-8" type="text" placeholder="Sir Derp"> <input type="text" placeholder="Sir Derp">
</label>
</div>
<h3>Label left of input, Not Inset, No Content Padding</h3>
<div class="input-group">
<label class="input-row">
<i class="icon-person"></i>
<span class="input-label">Username</span>
<input type="text" placeholder="@drifty">
</label>
<label class="input-row">
<i class="icon-email"></i>
<span class="input-label">Email</span>
<input type="email" placeholder="your@email.com">
</label> </label>
</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="input-group inset"> <div class="input-group inset">
<label class="input-wrapper row"> <label class="input-row">
<span class="input-label col-xs-4">Email</span> <span class="input-label">Email</span>
<input class="col-xs-8" type="text" placeholder="your@email.com"> <input type="text" placeholder="your@email.com">
</label> </label>
</div> </div>
@ -109,27 +124,27 @@
<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="input-group"> <div class="input-group">
<label class="input-wrapper row"> <label class="input-row">
<span class="input-label col-xs-4">First Name</span> <span class="input-label">First Name</span>
<input class="col-xs-8" type="text" placeholder="John"> <input type="text" placeholder="John">
</label> </label>
<label class="input-wrapper row"> <label class="input-row">
<span class="input-label col-xs-4">Last Name</span> <span class="input-label">Last Name</span>
<input class="col-xs-8" type="text" placeholder="Suhr"> <input type="text" placeholder="Suhr">
</label> </label>
</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="input-group inset"> <div class="input-group inset">
<label class="input-wrapper row"> <label class="input-row">
<span class="input-label col-xs-4">Email</span> <span class="input-label">Email</span>
<input class="col-xs-8" type="text" placeholder="your@email.com"> <input type="text" placeholder="your@email.com">
</label> </label>
</div> </div>
<div class="input-group inset"> <div class="input-group inset">
<label class="input-wrapper row"> <label class="input-row">
<span class="input-label col-xs-4">Filter By Name</span> <span class="input-label">Filter By Name</span>
<input class="col-xs-8" type="text" placeholder="Enter keywords"> <input type="text" placeholder="Enter keywords">
</label> </label>
</div> </div>
@ -140,21 +155,21 @@
<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="input-group stacked-label"> <div class="input-group stacked-label">
<label class="input-wrapper"> <label class="input-row">
<span class="input-label">First Name</span> <span class="input-label">First Name</span>
<input type="text" placeholder="Drifty"> <input type="text" placeholder="Drifty">
</label> </label>
<label class="input-wrapper"> <label class="input-row">
<span class="input-label">Last Name</span> <span class="input-label">Last Name</span>
<input type="text" placeholder="Co"> <input type="text" placeholder="Co">
</label> </label>
<label class="input-wrapper"> <label class="input-row">
<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">
</label> </label>
</div> </div>
<div class="input-group stacked-label"> <div class="input-group stacked-label">
<label class="input-wrapper"> <label class="input-row">
<span class="input-label">Filter By Name</span> <span class="input-label">Filter By Name</span>
<input type="text" placeholder=""> <input type="text" placeholder="">
</label> </label>
@ -162,7 +177,7 @@
<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="input-group stacked-label inset"> <div class="input-group stacked-label inset">
<label class="input-wrapper"> <label class="input-row">
<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">
</label> </label>
@ -172,7 +187,7 @@
<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="input-group stacked-label"> <div class="input-group stacked-label">
<label class="input-wrapper"> <label class="input-row">
<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">
</label> </label>
@ -180,7 +195,7 @@
<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="input-group stacked-label inset"> <div class="input-group stacked-label inset">
<label class="input-wrapper"> <label class="input-row">
<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">
</label> </label>
@ -190,40 +205,27 @@
<h3>Default Text Input, Not Inset, No Content Padding</h3> <h3>Default Text Input, Not Inset, No Content Padding</h3>
<div class="input-group"> <div class="input-group">
<label class="input-wrapper"> <label class="input-row">
<div class="icon-search placeholder-icon"> <i class="icon-search placeholder-icon"></i>
<input type="search" placeholder="Search"> <input type="search" placeholder="Search">
</div>
</label> </label>
</div> </div>
<h3>Default Text Input, Is Inset, No Content Padding</h3> <h3>Default Text Input, Is Inset, No Content Padding</h3>
<div class="input-group inset"> <div class="input-group inset">
<label class="input-wrapper"> <label class="input-row">
<div class="icon-star placeholder-icon"> <i class="icon-star placeholder-icon"></i>
<input type="text" placeholder="Favorites"> <input type="text" placeholder="Favorites">
</div>
</label> </label>
</div> </div>
<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="input-group stacked-label"> <div class="input-group stacked-label">
<label class="input-wrapper"> <label class="input-row">
<i class="icon-email"></i>
<span class="input-label">Email</span> <span class="input-label">Email</span>
<div class="icon-envelope placeholder-icon">
<input type="text" placeholder="your@email.com"> <input type="text" placeholder="your@email.com">
</div>
</label>
</div>
<h3>Stacked Label On Top Of Text Input, Is Inset, No Content Padding</h3>
<div class="input-group stacked-label inset">
<label class="input-wrapper">
<span class="input-label">Send Money</span>
<div class="icon-money placeholder-icon">
<input type="text" placeholder="Dollar Greens">
</div>
</label> </label>
</div> </div>
@ -231,29 +233,26 @@
<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="input-group stacked-label"> <div class="input-group stacked-label">
<label class="input-wrapper"> <label class="input-row">
<i class="icon-cloud"></i>
<span class="input-label">SaaS</span> <span class="input-label">SaaS</span>
<div class="icon-cloud placeholder-icon">
<input type="text" placeholder="Codiqa"> <input type="text" placeholder="Codiqa">
</div>
</label> </label>
</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="input-group stacked-label inset"> <div class="input-group stacked-label inset">
<label class="input-wrapper"> <label class="input-row">
<i class="icon-headphone"></i>
<span class="input-label">Favorite Music</span> <span class="input-label">Favorite Music</span>
<div class="icon-headphones placeholder-icon">
<input type="text" placeholder="Bee Gees"> <input type="text" placeholder="Bee Gees">
</div>
</label> </label>
</div> </div>
</div> </div>
<p><a class="button button-secondary" href="index.html">Homepage</a></p> <p><a class="button button-secondary" href="index.html">Homepage</a></p>
</div> </div>
</div> </div>