mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
forms w/ flexbox
This commit is contained in:
Adam Bradley
57
dist/css/ionic-ios7.css
vendored
57
dist/css/ionic-ios7.css
vendored
@ -314,7 +314,7 @@ a {
|
||||
a:focus, button:focus {
|
||||
outline: 0; }
|
||||
|
||||
body {
|
||||
body, .ionic-body {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@ -1237,48 +1237,64 @@ textarea {
|
||||
|
||||
.input-group {
|
||||
overflow: hidden;
|
||||
/*
|
||||
border-top: $input-border-width solid $input-border-color;
|
||||
border-bottom: $input-border-width solid $input-border-color;
|
||||
background-color: $input-bg;
|
||||
*/ }
|
||||
border-top: 1px solid #cccccc;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
background-color: white; }
|
||||
|
||||
.padded > .input-group,
|
||||
.input-group.inset {
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
/*
|
||||
border-right: $input-border-width solid $input-border-color;
|
||||
border-left: $input-border-width solid $input-border-color;
|
||||
*/ }
|
||||
border-right: 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; }
|
||||
|
||||
.input-group + .input-group {
|
||||
margin-top: 10px; }
|
||||
|
||||
.input-wrapper {
|
||||
.input-row {
|
||||
position: relative;
|
||||
display: block;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
padding: 6px 8px 5px; }
|
||||
.input-wrapper input {
|
||||
.input-row input {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
flex: 1 0 220px;
|
||||
-webkit-appearance: none; }
|
||||
.input-wrapper .input-label {
|
||||
.input-row .input-label {
|
||||
padding: 7px 10px 7px 3px;
|
||||
max-width: 200px;
|
||||
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-wrapper {
|
||||
.input-group.stacked-label .input-row {
|
||||
display: block;
|
||||
border: 0;
|
||||
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 textarea {
|
||||
@ -1293,13 +1309,6 @@ textarea {
|
||||
.input-group.stacked-label input {
|
||||
height: 46px; }
|
||||
|
||||
.input-wrapper.row {
|
||||
margin-right: 0;
|
||||
margin-left: 0; }
|
||||
.input-wrapper.row [class*='col-'] {
|
||||
padding-right: 0;
|
||||
padding-left: 0; }
|
||||
|
||||
select,
|
||||
textarea,
|
||||
input[type="text"],
|
||||
|
||||
59
dist/css/ionic-scoped.css
vendored
59
dist/css/ionic-scoped.css
vendored
@ -1,3 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
.ionic {
|
||||
@font-face {
|
||||
font-family: 'ionicons';
|
||||
@ -1056,7 +1057,7 @@
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
.ionic a:focus, .ionic button:focus {
|
||||
outline: 0; }
|
||||
.ionic body {
|
||||
.ionic body, .ionic .ionic-body {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@ -1271,34 +1272,50 @@
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border-color: #dddddd;
|
||||
color: #333333; }
|
||||
.ionic .bar.bar-default .title {
|
||||
color: #333333; }
|
||||
.ionic .bar.bar-secondary {
|
||||
background-color: rgba(245, 245, 245, 0.9);
|
||||
border-color: #bbbbbb;
|
||||
color: #333333; }
|
||||
.ionic .bar.bar-secondary .title {
|
||||
color: #333333; }
|
||||
.ionic .bar.bar-primary {
|
||||
background-color: rgba(74, 135, 238, 0.9);
|
||||
border-color: #3b6dc2;
|
||||
color: white; }
|
||||
.ionic .bar.bar-primary .title {
|
||||
color: white; }
|
||||
.ionic .bar.bar-info {
|
||||
background-color: rgba(67, 206, 230, 0.9);
|
||||
border-color: #3bb3c8;
|
||||
color: white; }
|
||||
.ionic .bar.bar-info .title {
|
||||
color: white; }
|
||||
.ionic .bar.bar-success {
|
||||
background-color: rgba(102, 204, 51, 0.9);
|
||||
border-color: #5bb22f;
|
||||
color: white; }
|
||||
.ionic .bar.bar-success .title {
|
||||
color: white; }
|
||||
.ionic .bar.bar-warning {
|
||||
background-color: rgba(240, 184, 64, 0.9);
|
||||
border-color: #d29f31;
|
||||
color: white; }
|
||||
.ionic .bar.bar-warning .title {
|
||||
color: white; }
|
||||
.ionic .bar.bar-danger {
|
||||
background-color: rgba(239, 78, 58, 0.9);
|
||||
border-color: #c73927;
|
||||
color: white; }
|
||||
.ionic .bar.bar-danger .title {
|
||||
color: white; }
|
||||
.ionic .bar.bar-dark {
|
||||
background-color: rgba(68, 68, 68, 0.9);
|
||||
border-color: #111111;
|
||||
color: white; }
|
||||
.ionic .bar.bar-dark .title {
|
||||
color: white; }
|
||||
.ionic .bar .title {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
@ -1877,29 +1894,49 @@
|
||||
border-radius: 2px;
|
||||
border-right: 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; }
|
||||
.ionic .input-group + .input-group {
|
||||
margin-top: 10px; }
|
||||
.ionic .input-wrapper {
|
||||
.ionic .input-row {
|
||||
position: relative;
|
||||
display: block;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
padding: 6px 8px 5px; }
|
||||
.ionic .input-wrapper input {
|
||||
.ionic .input-row input {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
flex: 1 0 220px;
|
||||
-webkit-appearance: none; }
|
||||
.ionic .input-wrapper .input-label {
|
||||
.ionic .input-row .input-label {
|
||||
padding: 7px 10px 7px 3px;
|
||||
max-width: 200px;
|
||||
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 .input-wrapper {
|
||||
.ionic .input-group.stacked-label .input-row {
|
||||
display: block;
|
||||
border: 0;
|
||||
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 textarea {
|
||||
-webkit-border-radius: 2px;
|
||||
@ -1911,12 +1948,6 @@
|
||||
background-color: white; }
|
||||
.ionic .input-group.stacked-label input {
|
||||
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 textarea,
|
||||
.ionic input[type="text"],
|
||||
|
||||
44
dist/css/ionic.css
vendored
44
dist/css/ionic.css
vendored
@ -1,3 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
@font-face {
|
||||
font-family: 'ionicons';
|
||||
src: url("fonts/ionicons.eot");
|
||||
@ -1377,7 +1378,7 @@ a {
|
||||
a:focus, button:focus {
|
||||
outline: 0; }
|
||||
|
||||
body {
|
||||
body, .ionic-body {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@ -2335,32 +2336,52 @@ textarea {
|
||||
border-right: 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; }
|
||||
|
||||
.input-group + .input-group {
|
||||
margin-top: 10px; }
|
||||
|
||||
.input-wrapper {
|
||||
.input-row {
|
||||
position: relative;
|
||||
display: block;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
padding: 6px 8px 5px; }
|
||||
.input-wrapper input {
|
||||
.input-row input {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
flex: 1 0 220px;
|
||||
-webkit-appearance: none; }
|
||||
.input-wrapper .input-label {
|
||||
.input-row .input-label {
|
||||
padding: 7px 10px 7px 3px;
|
||||
max-width: 200px;
|
||||
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-wrapper {
|
||||
.input-group.stacked-label .input-row {
|
||||
display: block;
|
||||
border: 0;
|
||||
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 textarea {
|
||||
@ -2375,13 +2396,6 @@ textarea {
|
||||
.input-group.stacked-label input {
|
||||
height: 46px; }
|
||||
|
||||
.input-wrapper.row {
|
||||
margin-right: 0;
|
||||
margin-left: 0; }
|
||||
.input-wrapper.row [class*='col-'] {
|
||||
padding-right: 0;
|
||||
padding-left: 0; }
|
||||
|
||||
select,
|
||||
textarea,
|
||||
input[type="text"],
|
||||
|
||||
@ -51,20 +51,20 @@
|
||||
<div class="toderp-logo"></div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-3">Full name</span>
|
||||
<input class="col-xs-8" type="text" placeholder="" ng-model="signupForm.name" required>
|
||||
<label class="input-row">
|
||||
<span class="input-label">Full name</span>
|
||||
<input type="text" placeholder="" ng-model="signupForm.name" required>
|
||||
</label>
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-3">Email</span>
|
||||
<input class="col-xs-8" type="email" placeholder="" ng-model="signupForm.email" required>
|
||||
<label class="input-row">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="email" placeholder="" ng-model="signupForm.email" required>
|
||||
</label>
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-3">Password</span>
|
||||
<input class="col-xs-8" type="password" placeholder="" ng-model="signupForm.password" required>
|
||||
<label class="input-row">
|
||||
<span class="input-label">Password</span>
|
||||
<input type="password" placeholder="" ng-model="signupForm.password" required>
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="inset">
|
||||
<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>
|
||||
@ -87,16 +87,16 @@
|
||||
<main class="content padded has-header">
|
||||
<form class="form-horizontal" ng-submit="tryLogin(loginForm)">
|
||||
<div class="input-group inset">
|
||||
<label class="input-wrapper row">
|
||||
<label class="input-row">
|
||||
<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 class="input-wrapper row">
|
||||
<label class="input-row">
|
||||
<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>
|
||||
</div>
|
||||
<div class="input-group inset">
|
||||
<div class="inset">
|
||||
<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>
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
|
||||
// Input groups
|
||||
// -------------------------------
|
||||
|
||||
.input-group {
|
||||
overflow: hidden;
|
||||
border-top: $input-border-width solid $input-border-color;
|
||||
@ -60,7 +64,7 @@ textarea {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -68,9 +72,10 @@ textarea {
|
||||
margin-top: $content-padding;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
.input-row {
|
||||
position: relative;
|
||||
display: block;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
padding: 6px 8px 5px;
|
||||
|
||||
@ -78,19 +83,39 @@ textarea {
|
||||
@include border-radius(0);
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
flex: 1 0 220px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
padding: 7px 10px 7px 3px;
|
||||
max-width: 200px;
|
||||
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-wrapper {
|
||||
.input-group.stacked-label .input-row {
|
||||
display: block;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
|
||||
.input-label, [class^="icon-"], [class*=" icon-"] {
|
||||
display: inline-block;
|
||||
padding: 4px 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group.stacked-label input,
|
||||
@ -105,15 +130,6 @@ textarea {
|
||||
.input-group.stacked-label input {
|
||||
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
|
||||
|
||||
@ -15,7 +15,7 @@ a, button {
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body, .ionic-body {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
@ -24,26 +24,26 @@
|
||||
|
||||
<h3>Default Text Input, Not Inset, No Content Padding</h3>
|
||||
<div class="input-group">
|
||||
<label class="input-wrapper">
|
||||
<label class="input-row">
|
||||
<input type="text" placeholder="First Name">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<label class="input-row">
|
||||
<input type="text" placeholder="Last Name">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<label class="input-row">
|
||||
<input type="email" placeholder="Email">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Default Text Input, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<label class="input-wrapper">
|
||||
<label class="input-row">
|
||||
<input type="text" placeholder="First Name">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<label class="input-row">
|
||||
<input type="text" placeholder="Last Name">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<label class="input-row">
|
||||
<input type="email" placeholder="Email">
|
||||
</label>
|
||||
</div>
|
||||
@ -52,26 +52,26 @@
|
||||
|
||||
<h3>Default Text Input, Not Inset, With Content Padding</h3>
|
||||
<div class="input-group">
|
||||
<label class="input-wrapper">
|
||||
<label class="input-row">
|
||||
<input type="text" placeholder="Username">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<label class="input-row">
|
||||
<input type="email" placeholder="Email">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label class="input-wrapper">
|
||||
<label class="input-row">
|
||||
<input type="text" placeholder="Filter by name">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Default Text Input, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<label class="input-wrapper">
|
||||
<label class="input-row">
|
||||
<input type="email" placeholder="Email">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<label class="input-row">
|
||||
<input type="text" placeholder="Name">
|
||||
</label>
|
||||
</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">
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-4">Username</span>
|
||||
<input class="col-xs-8" type="text" placeholder="@drifty">
|
||||
<label class="input-row">
|
||||
<span class="input-label">Username</span>
|
||||
<input type="text" placeholder="@drifty">
|
||||
</label>
|
||||
<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 class="input-row">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="email" placeholder="your@email.com">
|
||||
</label>
|
||||
<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 class="input-row">
|
||||
<span class="input-label">First Name</span>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<h3>Inline Label On Top Of Text Input, Is Inset, No Content Padding</h3>
|
||||
<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 class="input-row">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -109,27 +124,27 @@
|
||||
|
||||
<h3>Inline Label On Top Of Text Input, Not Inset, With Content Padding</h3>
|
||||
<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">
|
||||
<label class="input-row">
|
||||
<span class="input-label">First Name</span>
|
||||
<input type="text" placeholder="John">
|
||||
</label>
|
||||
<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 class="input-row">
|
||||
<span class="input-label">Last Name</span>
|
||||
<input type="text" placeholder="Suhr">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Inline Label On Top Of Text Input, Is Inset, With Content Padding</h3>
|
||||
<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 class="input-row">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
<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">
|
||||
<label class="input-row">
|
||||
<span class="input-label">Filter By Name</span>
|
||||
<input type="text" placeholder="Enter keywords">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -140,21 +155,21 @@
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Not Inset, No Content Padding</h3>
|
||||
<div class="input-group stacked-label">
|
||||
<label class="input-wrapper">
|
||||
<label class="input-row">
|
||||
<span class="input-label">First Name</span>
|
||||
<input type="text" placeholder="Drifty">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<label class="input-row">
|
||||
<span class="input-label">Last Name</span>
|
||||
<input type="text" placeholder="Co">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<label class="input-row">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-group stacked-label">
|
||||
<label class="input-wrapper">
|
||||
<label class="input-row">
|
||||
<span class="input-label">Filter By Name</span>
|
||||
<input type="text" placeholder="">
|
||||
</label>
|
||||
@ -162,7 +177,7 @@
|
||||
|
||||
<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">
|
||||
<label class="input-row">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
@ -172,7 +187,7 @@
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3>
|
||||
<div class="input-group stacked-label">
|
||||
<label class="input-wrapper">
|
||||
<label class="input-row">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
@ -180,7 +195,7 @@
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group stacked-label inset">
|
||||
<label class="input-wrapper">
|
||||
<label class="input-row">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
@ -190,40 +205,27 @@
|
||||
|
||||
<h3>Default Text Input, Not Inset, No Content Padding</h3>
|
||||
<div class="input-group">
|
||||
<label class="input-wrapper">
|
||||
<div class="icon-search placeholder-icon">
|
||||
<label class="input-row">
|
||||
<i class="icon-search placeholder-icon"></i>
|
||||
<input type="search" placeholder="Search">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Default Text Input, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<label class="input-wrapper">
|
||||
<div class="icon-star placeholder-icon">
|
||||
<label class="input-row">
|
||||
<i class="icon-star placeholder-icon"></i>
|
||||
<input type="text" placeholder="Favorites">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Not Inset, No Content Padding</h3>
|
||||
<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>
|
||||
<div class="icon-envelope placeholder-icon">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@ -231,29 +233,26 @@
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3>
|
||||
<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>
|
||||
<div class="icon-cloud placeholder-icon">
|
||||
<input type="text" placeholder="Codiqa">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Is Inset, With Content Padding</h3>
|
||||
<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>
|
||||
<div class="icon-headphones placeholder-icon">
|
||||
<input type="text" placeholder="Bee Gees">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user