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

changed .list.stacked-label to .item-stacked-label

Browse Source
This commit is contained in:
Adam Bradley
2013-10-25 10:45:34 -05:00
parent f23588559b
commit 9ce398c368
6 changed files with 347 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -182,7 +182,7 @@ sub {
fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; }
border: 1px solid #c0c0c0; }
/**
* 1. Correct `color` not being inherited in IE 8/9.
@@ -1445,49 +1445,67 @@ textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.item-input {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
position: relative;
overflow: hidden;
padding: 6px 8px 5px; }
.item-input input {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-flex: 1;
-webkit-flex: 1 0 220px;
-moz-box-flex: 1;
-moz-flex: 1 0 220px;
-ms-flex: 1 0 220px;
flex: 1 0 220px;
margin: 0;
background-color: transparent;
flex: 1 0 220px;
-webkit-appearance: none; }
.item-input .input-label {
-webkit-box-flex: 1;
-webkit-flex: 1 0 100px;
-moz-box-flex: 1;
-moz-flex: 1 0 100px;
-ms-flex: 1 0 100px;
flex: 1 0 100px;
padding: 7px 10px 7px 3px;
max-width: 200px;
color: black;
font-weight: bold;
flex: 1 0 100px; }
font-weight: bold; }
.item-input [class^="icon-"], .item-input [class*=" icon-"] {
-webkit-box-flex: 0;
-webkit-flex: 0 0 24px;
-moz-box-flex: 0;
-moz-flex: 0 0 24px;
-ms-flex: 0 0 24px;
flex: 0 0 24px;
display: inline-block;
text-align: center;
font-size: 16px;
flex: 0 0 24px;
align-self: center; }
font-size: 16px; }
.item-input .placeholder-icon {
color: #999; }
.list.stacked-label,
.list.stacked-label .item-input {
.item-stacked-label {
display: block;
background-color: transparent;
box-shadow: none; }
.list.stacked-label .input-label, .list.stacked-label [class^="icon-"], .list.stacked-label [class*=" icon-"],
.list.stacked-label .item-input .input-label,
.list.stacked-label .item-input [class^="icon-"],
.list.stacked-label .item-input [class*=" icon-"] {
.item-stacked-label .input-label, .item-stacked-label [class^="icon-"], .item-stacked-label [class*=" icon-"] {
display: inline-block;
padding: 4px 0;
vertical-align: middle; }
.list.stacked-label input,
.list.stacked-label textarea {
.item-stacked-label input,
.item-stacked-label textarea {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
@@ -1497,7 +1515,7 @@ textarea {
background-color: white;
box-shadow: inset 0 0 1px #666666; }
.list.stacked-label input {
.item-stacked-label input {
height: 46px; }
select,
@@ -1638,7 +1656,7 @@ input[type="checkbox"][readonly] {
right: 20px;
transition: 0.2s ease;
transition-property: left, right;
transition-delay: 0s, 0.05s; }
transition-delay: 0s, .05s; }
.toggle :checked + .track {
/* When the toggle is "on" */
@@ -1653,7 +1671,7 @@ input[type="checkbox"][readonly] {
right: 0;
left: 20px;
-webkit-transform: none;
transition-delay: 0.05s, 0s; }
transition-delay: .05s, 0s; }
.item-radio .item-content {
/* give some room to the right for the checkmark icon */
@@ -1923,7 +1941,7 @@ input[type="range"] {
.button.button-icon:active, .button.button-icon.active {
background: none;
box-shadow: none;
text-shadow: 0px 0px 10px white; }
text-shadow: 0px 0px 10px #fff; }
.button.block, .button.button-full {
margin-top: 10px;
margin-bottom: 10px; }
@@ -2262,9 +2280,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
.icon-loading:before {
content: "\e144"; }
@@ -2277,9 +2295,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
.icon-refreshing:before {
content: "\e144"; }

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

@@ -1027,7 +1027,7 @@
.ionic fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; }
border: 1px solid #c0c0c0; }
.ionic legend {
padding: 0;
/* 2 */
@@ -2118,47 +2118,65 @@
.ionic textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.ionic .item-input {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
position: relative;
overflow: hidden;
padding: 6px 8px 5px; }
.ionic .item-input input {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-flex: 1;
-webkit-flex: 1 0 220px;
-moz-box-flex: 1;
-moz-flex: 1 0 220px;
-ms-flex: 1 0 220px;
flex: 1 0 220px;
margin: 0;
background-color: transparent;
flex: 1 0 220px;
-webkit-appearance: none; }
.ionic .item-input .input-label {
-webkit-box-flex: 1;
-webkit-flex: 1 0 100px;
-moz-box-flex: 1;
-moz-flex: 1 0 100px;
-ms-flex: 1 0 100px;
flex: 1 0 100px;
padding: 7px 10px 7px 3px;
max-width: 200px;
color: black;
font-weight: bold;
flex: 1 0 100px; }
font-weight: bold; }
.ionic .item-input [class^="icon-"], .ionic .item-input [class*=" icon-"] {
-webkit-box-flex: 0;
-webkit-flex: 0 0 24px;
-moz-box-flex: 0;
-moz-flex: 0 0 24px;
-ms-flex: 0 0 24px;
flex: 0 0 24px;
display: inline-block;
text-align: center;
font-size: 16px;
flex: 0 0 24px;
align-self: center; }
font-size: 16px; }
.ionic .item-input .placeholder-icon {
color: #999; }
.ionic .list.stacked-label,
.ionic .list.stacked-label .item-input {
.ionic .item-stacked-label {
display: block;
background-color: transparent;
box-shadow: none; }
.ionic .list.stacked-label .input-label, .ionic .list.stacked-label [class^="icon-"], .ionic .list.stacked-label [class*=" icon-"],
.ionic .list.stacked-label .item-input .input-label,
.ionic .list.stacked-label .item-input [class^="icon-"],
.ionic .list.stacked-label .item-input [class*=" icon-"] {
.ionic .item-stacked-label .input-label, .ionic .item-stacked-label [class^="icon-"], .ionic .item-stacked-label [class*=" icon-"] {
display: inline-block;
padding: 4px 0;
vertical-align: middle; }
.ionic .list.stacked-label input,
.ionic .list.stacked-label textarea {
.ionic .item-stacked-label input,
.ionic .item-stacked-label textarea {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
@@ -2167,7 +2185,7 @@
border: none;
background-color: white;
box-shadow: inset 0 0 1px #666666; }
.ionic .list.stacked-label input {
.ionic .item-stacked-label input {
height: 46px; }
.ionic select,
.ionic textarea,
@@ -2277,7 +2295,7 @@
border-radius: 50%;
background: white;
content: ' ';
transition: background-color 0.1s ease-in-out; }
transition: background-color .1s ease-in-out; }
.ionic .checkbox input:after {
position: absolute;
top: 34%;
@@ -2290,7 +2308,7 @@
border-right: 0;
content: ' ';
opacity: 0;
transition: opacity 0.05s ease-in-out;
transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.ionic .checkbox input:checked:before {
@@ -2628,7 +2646,7 @@
.ionic .button.button-icon:active, .ionic .button.button-icon.active {
background: none;
box-shadow: none;
text-shadow: 0px 0px 10px white; }
text-shadow: 0px 0px 10px #fff; }
.ionic .button.block, .ionic .button.button-full {
margin-top: 10px;
margin-bottom: 10px; }
@@ -2877,9 +2895,9 @@
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
.ionic .icon-loading:before {
content: "\e144"; }
.ionic .icon-refreshing {
@@ -2891,9 +2909,9 @@
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
.ionic .icon-refreshing:before {
content: "\e144"; }
.ionic .hidden,

70
dist/css/ionic.css vendored
View File

@@ -1261,7 +1261,7 @@ sub {
fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; }
border: 1px solid #c0c0c0; }
/**
* 1. Correct `color` not being inherited in IE 8/9.
@@ -2588,49 +2588,67 @@ textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.item-input {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
position: relative;
overflow: hidden;
padding: 6px 8px 5px; }
.item-input input {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-flex: 1;
-webkit-flex: 1 0 220px;
-moz-box-flex: 1;
-moz-flex: 1 0 220px;
-ms-flex: 1 0 220px;
flex: 1 0 220px;
margin: 0;
background-color: transparent;
flex: 1 0 220px;
-webkit-appearance: none; }
.item-input .input-label {
-webkit-box-flex: 1;
-webkit-flex: 1 0 100px;
-moz-box-flex: 1;
-moz-flex: 1 0 100px;
-ms-flex: 1 0 100px;
flex: 1 0 100px;
padding: 7px 10px 7px 3px;
max-width: 200px;
color: black;
font-weight: bold;
flex: 1 0 100px; }
font-weight: bold; }
.item-input [class^="icon-"], .item-input [class*=" icon-"] {
-webkit-box-flex: 0;
-webkit-flex: 0 0 24px;
-moz-box-flex: 0;
-moz-flex: 0 0 24px;
-ms-flex: 0 0 24px;
flex: 0 0 24px;
display: inline-block;
text-align: center;
font-size: 16px;
flex: 0 0 24px;
align-self: center; }
font-size: 16px; }
.item-input .placeholder-icon {
color: #999; }
.list.stacked-label,
.list.stacked-label .item-input {
.item-stacked-label {
display: block;
background-color: transparent;
box-shadow: none; }
.list.stacked-label .input-label, .list.stacked-label [class^="icon-"], .list.stacked-label [class*=" icon-"],
.list.stacked-label .item-input .input-label,
.list.stacked-label .item-input [class^="icon-"],
.list.stacked-label .item-input [class*=" icon-"] {
.item-stacked-label .input-label, .item-stacked-label [class^="icon-"], .item-stacked-label [class*=" icon-"] {
display: inline-block;
padding: 4px 0;
vertical-align: middle; }
.list.stacked-label input,
.list.stacked-label textarea {
.item-stacked-label input,
.item-stacked-label textarea {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
@@ -2640,7 +2658,7 @@ textarea {
background-color: white;
box-shadow: inset 0 0 1px #666666; }
.list.stacked-label input {
.item-stacked-label input {
height: 46px; }
select,
@@ -2764,7 +2782,7 @@ input[type="checkbox"][readonly] {
border-radius: 50%;
background: white;
content: ' ';
transition: background-color 0.1s ease-in-out; }
transition: background-color .1s ease-in-out; }
/* the checkmark within the box */
.checkbox input:after {
@@ -2779,7 +2797,7 @@ input[type="checkbox"][readonly] {
border-right: 0;
content: ' ';
opacity: 0;
transition: opacity 0.05s ease-in-out;
transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
@@ -3144,7 +3162,7 @@ input[type="range"] {
.button.button-icon:active, .button.button-icon.active {
background: none;
box-shadow: none;
text-shadow: 0px 0px 10px white; }
text-shadow: 0px 0px 10px #fff; }
.button.block, .button.button-full {
margin-top: 10px;
margin-bottom: 10px; }
@@ -3534,9 +3552,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
.icon-loading:before {
content: "\e144"; }
@@ -3549,9 +3567,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
.icon-refreshing:before {
content: "\e144"; }

20
scss/ionic/_form.scss
View File

@@ -46,41 +46,39 @@ textarea {
// -------------------------------
.item-input {
@include display-flex();
@include align-items(center);
position: relative;
display: -webkit-flex;
display: flex;
overflow: hidden;
padding: 6px 8px 5px;
input {
@include border-radius(0);
@include flex(1, 0, 220px);
margin: 0;
background-color: transparent;
flex: 1 0 220px;
-webkit-appearance: none;
}
.input-label {
@include flex(1, 0, 100px);
padding: 7px 10px 7px 3px;
max-width: 200px;
color: $input-label-color;
font-weight: bold;
flex: 1 0 100px;
}
[class^="icon-"], [class*=" icon-"] {
@include flex(0, 0, 24px);
display: inline-block;
text-align: center;
font-size: 16px;
flex: 0 0 24px;
align-self: center;
}
.placeholder-icon {
color: #999;
}
}
.list.stacked-label,
.list.stacked-label .item-input {
.item-stacked-label {
display: block;
background-color: transparent;
box-shadow: none;
@@ -92,8 +90,8 @@ textarea {
}
}
.list.stacked-label input,
.list.stacked-label textarea
.item-stacked-label input,
.item-stacked-label textarea
{
@include border-radius(2px);
overflow: hidden;
@@ -102,7 +100,7 @@ textarea {
background-color: $input-bg;
box-shadow: $item-box-shadow;
}
.list.stacked-label input {
.item-stacked-label input {
height: $line-height-computed + $font-size-base + 12px;
}

9
scss/ionic/_mixins.scss
View File

@@ -438,6 +438,15 @@
flex-wrap: $value;
}
@mixin flex($fg: 1, $fs: null, $fb: null) {
-webkit-box-flex: $fg;
-webkit-flex: $fg $fs $fb;
-moz-box-flex: $fg;
-moz-flex: $fg $fs $fb;
-ms-flex: $fg $fs $fb;
flex: $fg $fs $fb;
}
@mixin flex-flow($values: (row nowrap)) {
// No Webkit Box fallback.
-webkit-flex-flow: $values;

403
test/input-text.html
View File

@@ -15,259 +15,250 @@
<h1 class="title">Text Inputs</h1>
</header>
<header class="bar bar-footer bar-dark">
<h1 class="title">Footer</h1>
</header>
<div class="content has-header">
<div class="content-wrapper">
<div class="content has-header has-footer">
<h3>Default Text Input, Not Inset, No Content Padding</h3>
<div class="list">
<label class="item item-input">
<input type="text" placeholder="First Name">
</label>
<label class="item item-input">
<input type="text" placeholder="Last Name">
</label>
<label class="item item-input">
<input type="email" placeholder="Email">
</label>
</div>
<h3>Default Text Input, Not Inset, No Content Padding</h3>
<h3>Default Text Input, list-inset, No Content Padding</h3>
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="First Name">
</label>
<label class="item item-input">
<input type="text" placeholder="Last Name">
</label>
<label class="item item-input">
<input type="email" placeholder="Email">
</label>
</div>
<h3>Default Text Input, card, No Content Padding</h3>
<div class="list card">
<label class="item item-input">
<input type="text" placeholder="First Name">
</label>
<label class="item item-input">
<input type="text" placeholder="Last Name">
</label>
<label class="item item-input">
<input type="email" placeholder="Email">
</label>
</div>
<div class="padding">
<h3>Default Text Input, With Parent Content Padding</h3>
<div class="list">
<label class="item item-input">
<input type="text" placeholder="First Name">
</label>
<label class="item item-input">
<input type="text" placeholder="Last Name">
<input type="text" placeholder="Username">
</label>
<label class="item item-input">
<input type="email" placeholder="Email">
</label>
</div>
<h3>Default Text Input, list-inset, No Content Padding</h3>
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Filter by name">
</label>
</div>
<h3>Default Text Input, list-inset, With Parent Content Padding</h3>
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="First Name">
</label>
<label class="item item-input">
<input type="text" placeholder="Last Name">
</label>
<label class="item item-input">
<input type="email" placeholder="Email">
</label>
</div>
<h3>Default Text Input, card, No Content Padding</h3>
<div class="list card">
<label class="item item-input">
<input type="text" placeholder="First Name">
</label>
<label class="item item-input">
<input type="text" placeholder="Last Name">
</label>
<label class="item item-input">
<input type="email" placeholder="Email">
<input type="text" placeholder="Name">
</label>
</div>
<div class="padding">
<h3>Default Text Input, With Parent Content Padding</h3>
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Username">
</label>
<label class="item item-input">
<input type="email" placeholder="Email">
</label>
</div>
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Filter by name">
</label>
</div>
<h3>Default Text Input, list-inset, With Parent Content Padding</h3>
<div class="list list-inset">
<label class="item item-input">
<input type="email" placeholder="Email">
</label>
<label class="item item-input">
<input type="text" placeholder="Name">
</label>
</div>
</div>
</div>
<h3>Label left of input, No Parent Content Padding</h3>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" placeholder="@drifty">
</label>
<label class="item item-input">
<span class="input-label">Email</span>
<input type="email" placeholder="your@email.com">
</label>
<label class="item item-input">
<span class="input-label">First Name</span>
<input type="text" placeholder="Sir Derp">
</label>
</div>
<h3>Label left of input, No Parent Content Padding</h3>
<h3>Label left of input, No Parent Content Padding</h3>
<div class="list">
<label class="item item-input">
<i class="icon-person"></i>
<span class="input-label">Username</span>
<input type="text" placeholder="@drifty">
</label>
<label class="item item-input">
<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, list-inset, No Parent Content Padding</h3>
<div class="list list-inset">
<label class="item item-input">
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com">
</label>
</div>
<div class="padding">
<h3>Inline Label On Top Of Text Input, With Parent Content Padding</h3>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" placeholder="@drifty">
</label>
<label class="item item-input">
<span class="input-label">Email</span>
<input type="email" placeholder="your@email.com">
</label>
<label class="item item-input">
<span class="input-label">First Name</span>
<input type="text" placeholder="Sir Derp">
</label>
</div>
<h3>Label left of input, No Parent Content Padding</h3>
<div class="list">
<label class="item item-input">
<i class="icon-person"></i>
<span class="input-label">Username</span>
<input type="text" placeholder="@drifty">
</label>
<label class="item item-input">
<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, list-inset, No Parent Content Padding</h3>
<div class="list list-inset">
<label class="item item-input">
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com">
</label>
</div>
<div class="padding">
<h3>Inline Label On Top Of Text Input, With Parent Content Padding</h3>
<div class="list">
<label class="item item-input">
<span class="input-label">First Name</span>
<input type="text" placeholder="John">
</label>
<label class="item item-input">
<span class="input-label">Last Name</span>
<input type="text" placeholder="Suhr">
</label>
</div>
<h3>Inline Label On Top Of Text Input, list-inset, With Parent Content Padding</h3>
<div class="list list-inset">
<label class="item item-input">
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com">
</label>
</div>
<div class="list list-inset">
<label class="item item-input">
<span class="input-label">Filter By Name</span>
<input type="text" placeholder="Enter keywords">
</label>
</div>
</div>
<h3>Stacked Label On Top Of Text Input, No Parent Content Padding</h3>
<div class="list stacked-label">
<label class="item item-input">
<span class="input-label">First Name</span>
<input type="text" placeholder="Drifty">
<input type="text" placeholder="John">
</label>
<label class="item item-input">
<span class="input-label">Last Name</span>
<input type="text" placeholder="Co">
</label>
<label class="item item-input">
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com">
</label>
</div>
<div class="list stacked-label">
<label class="item item-input">
<span class="input-label">Filter By Name</span>
<input type="text" placeholder="">
<input type="text" placeholder="Suhr">
</label>
</div>
<h3>Stacked Label On Top Of Text Input, list-inset, No Parent Content Padding</h3>
<div class="list stacked-label list-inset">
<label class="item item-input">
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com">
</label>
</div>
<div class="padding">
<h3>Stacked Label On Top Of Text Input, With Parent Content Padding</h3>
<div class="list stacked-label">
<label class="item item-input">
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com">
</label>
</div>
<h3>Stacked Label On Top Of Text Input, list-inset, With Parent Content Padding</h3>
<div class="list stacked-label list-inset">
<label class="item item-input">
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com">
</label>
</div>
</div>
<h3>Default Text Input, No Parent Content Padding</h3>
<div class="list">
<label class="item item-input">
<i class="icon-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
</div>
<h3>Default Text Input, list-inset, No Parent Content Padding</h3>
<h3>Inline Label On Top Of Text Input, list-inset, With Parent Content Padding</h3>
<div class="list list-inset">
<label class="item item-input">
<i class="icon-star placeholder-icon"></i>
<input type="text" placeholder="Favorites">
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com">
</label>
</div>
<div class="list list-inset">
<label class="item item-input">
<span class="input-label">Filter By Name</span>
<input type="text" placeholder="Enter keywords">
</label>
</div>
</div>
<h3>Stacked Label On Top Of Text Input, No Parent Content Padding</h3>
<div class="list stacked-label">
<label class="item item-input">
<i class="icon-email"></i>
<h3>Stacked Label On Top Of Text Input, No Parent Content Padding</h3>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">First Name</span>
<input type="text" placeholder="Drifty">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Last Name</span>
<input type="text" placeholder="Co">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com">
</label>
</div>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Filter By Name</span>
<input type="text" placeholder="">
</label>
</div>
<h3>Stacked Label On Top Of Text Input, list-inset, No Parent Content Padding</h3>
<div class="list list-inset">
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com">
</label>
</div>
<div class="padding">
<h3>Stacked Label On Top Of Text Input, With Parent Content Padding</h3>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com">
</label>
</div>
<div class="padding">
<h3>Stacked Label On Top Of Text Input, With Parent Content Padding</h3>
<div class="list stacked-label">
<label class="item item-input">
<i class="icon-cloud"></i>
<span class="input-label">SaaS</span>
<input type="text" placeholder="Codiqa">
</label>
</div>
<h3>Stacked Label On Top Of Text Input, list-inset, With Parent Content Padding</h3>
<div class="list stacked-label list-inset">
<label class="item item-input">
<i class="icon-headphone"></i>
<span class="input-label">Favorite Music</span>
<input type="text" placeholder="Bee Gees">
</label>
</div>
<h3>Stacked Label On Top Of Text Input, list-inset, With Parent Content Padding</h3>
<div class="list list-inset">
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com">
</label>
</div>
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
</div>
<h3>Default Text Input, No Parent Content Padding</h3>
<div class="list">
<label class="item item-input">
<i class="icon-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
</div>
<h3>Default Text Input, list-inset, No Parent Content Padding</h3>
<div class="list list-inset">
<label class="item item-input">
<i class="icon-star placeholder-icon"></i>
<input type="text" placeholder="Favorites">
</label>
</div>
<h3>Stacked Label On Top Of Text Input, No Parent Content Padding</h3>
<div class="list">
<label class="item item-input item-stacked-label">
<i class="icon-email"></i>
<span class="input-label">Email</span>
<input type="text" placeholder="your@email.com">
</label>
</div>
<div class="padding">
<h3>Stacked Label On Top Of Text Input, With Parent Content Padding</h3>
<div class="list">
<label class="item item-input item-stacked-label">
<i class="icon-cloud"></i>
<span class="input-label">SaaS</span>
<input type="text" placeholder="Codiqa">
</label>
</div>
<h3>Stacked Label On Top Of Text Input, list-inset, With Parent Content Padding</h3>
<div class="list list-inset">
<label class="item item-input item-stacked-label">
<i class="icon-headphone"></i>
<span class="input-label">Favorite Music</span>
<input type="text" placeholder="Bee Gees">
</label>
</div>
</div>
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
</div>
</section>