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

forms updated w/ .item conventions

Browse Source
This commit is contained in:
Adam Bradley
2013-10-25 10:16:39 -05:00
parent 4be33bbf39
commit f23588559b
12 changed files with 331 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1354,38 +1354,64 @@ button.item-icon-right .item-content:after {
color: #aaa; color: #aaa;
font-size: 14px; } font-size: 14px; }
.card { /*
A card and list-inset are close to the same thing, except a card as a box shadow.
*/
.card,
.list-inset {
overflow: hidden; overflow: hidden;
margin: 20px 10px; margin: 20px 10px;
background-color: white; background-color: white;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
border-radius: 2px; } border-radius: 2px; }
.card .item { .card {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
.card .item,
.list-inset .item,
.padding > .list .item {
margin-left: 0; margin-left: 0;
margin-right: 0; } margin-right: 0; }
.card .item:first-child { .card .item:first-child,
.list-inset .item:first-child,
.padding > .list .item:first-child {
margin-top: 0; margin-top: 0;
border-top-left-radius: 2px; border-top-left-radius: 2px;
border-top-right-radius: 2px; } border-top-right-radius: 2px; }
.card .item:first-child .item-content { .card .item:first-child .item-content,
.list-inset .item:first-child .item-content,
.padding > .list .item:first-child .item-content {
border-top-left-radius: 2px; border-top-left-radius: 2px;
border-top-right-radius: 2px; } border-top-right-radius: 2px; }
.card .item:last-child { .card .item:last-child,
.list-inset .item:last-child,
.padding > .list .item:last-child {
margin-bottom: 0; margin-bottom: 0;
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; } border-bottom-right-radius: 2px; }
.card .item:last-child .item-content { .card .item:last-child .item-content,
.list-inset .item:last-child .item-content,
.padding > .list .item:last-child .item-content {
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; } border-bottom-right-radius: 2px; }
.card.list .item:last-child { .card.list .item:last-child,
.list-inset .item:last-child {
margin-bottom: -1px; } margin-bottom: -1px; }
.card.list .item-divider { .card.list .item-divider,
.list-inset .item-divider,
.padding > .list .item,
.padding-horizontal > .list .item {
margin-right: 0; margin-right: 0;
margin-left: 0; } margin-left: 0; }
.padding-left > .list .item {
margin-left: 0; }
.padding-right > .list .item {
margin-right: 0; }
form { form {
margin: 0 0 1.42857; } margin: 0 0 1.42857; }
@ -1418,34 +1444,13 @@ select,
textarea { textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.input-group { .item-input {
display: block;
overflow: hidden;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
background-color: white; }
.padded > .input-group,
.input-group.margin {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border-right: 1px solid #cccccc;
border-left: 1px solid #cccccc; }
.input-group .input-row + .input-row {
border-top: 1px solid #cccccc; }
.input-group + .input-group {
margin-top: 10px; }
.input-row {
position: relative; position: relative;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
padding: 6px 8px 5px; } padding: 6px 8px 5px; }
.input-row input { .item-input input {
-webkit-border-radius: 0; -webkit-border-radius: 0;
-moz-border-radius: 0; -moz-border-radius: 0;
border-radius: 0; border-radius: 0;
@ -1453,45 +1458,46 @@ textarea {
background-color: transparent; background-color: transparent;
flex: 1 0 220px; flex: 1 0 220px;
-webkit-appearance: none; } -webkit-appearance: none; }
.input-row .input-label { .item-input .input-label {
padding: 7px 10px 7px 3px; padding: 7px 10px 7px 3px;
max-width: 200px; max-width: 200px;
color: black; color: black;
font-weight: bold; font-weight: bold;
flex: 1 0 100px; } flex: 1 0 100px; }
.input-row [class^="icon-"], .input-row [class*=" icon-"] { .item-input [class^="icon-"], .item-input [class*=" icon-"] {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
flex: 0 0 24px; flex: 0 0 24px;
align-self: center; } align-self: center; }
.input-row .placeholder-icon { .item-input .placeholder-icon {
color: #999; } color: #999; }
.input-group.stacked-label, .list.stacked-label,
.input-group.stacked-label .input-row { .list.stacked-label .item-input {
display: block; display: block;
border: 0; background-color: transparent;
background-color: transparent; } box-shadow: none; }
.input-group.stacked-label .input-label, .input-group.stacked-label [class^="icon-"], .input-group.stacked-label [class*=" icon-"], .list.stacked-label .input-label, .list.stacked-label [class^="icon-"], .list.stacked-label [class*=" icon-"],
.input-group.stacked-label .input-row .input-label, .list.stacked-label .item-input .input-label,
.input-group.stacked-label .input-row [class^="icon-"], .list.stacked-label .item-input [class^="icon-"],
.input-group.stacked-label .input-row [class*=" icon-"] { .list.stacked-label .item-input [class*=" icon-"] {
display: inline-block; display: inline-block;
padding: 4px 0; padding: 4px 0;
vertical-align: middle; } vertical-align: middle; }
.input-group.stacked-label input, .list.stacked-label input,
.input-group.stacked-label textarea { .list.stacked-label textarea {
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
overflow: hidden; overflow: hidden;
padding: 4px 8px 3px; padding: 4px 8px 3px;
border: 1px solid #cccccc; border: none;
background-color: white; } background-color: white;
box-shadow: inset 0 0 1px #666666; }
.input-group.stacked-label input { .list.stacked-label input {
height: 46px; } height: 46px; }
select, select,
@ -1560,7 +1566,7 @@ input[type="file"] {
line-height: 34px; } line-height: 34px; }
select { select {
border: 1px solid #cccccc; border: 1px solid #ccc;
background-color: white; } background-color: white; }
select[multiple], select[multiple],

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

@ -161,6 +161,9 @@
* List editing styles. These trigger when the entire list goes into * List editing styles. These trigger when the entire list goes into
* "edit mode" * "edit mode"
*/ */
/*
A card and list-inset are close to the same thing, except a card as a box shadow.
*/
/* the checkmark within the box */ /* the checkmark within the box */
/* what the background looks like when its checked */ /* what the background looks like when its checked */
/* what the checkmark looks like when its checked */ /* what the checkmark looks like when its checked */
@ -2038,34 +2041,54 @@
float: right; float: right;
color: #aaa; color: #aaa;
font-size: 14px; } font-size: 14px; }
.ionic .card { .ionic .card,
.ionic .list-inset {
overflow: hidden; overflow: hidden;
margin: 20px 10px; margin: 20px 10px;
background-color: white; background-color: white;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
border-radius: 2px; } border-radius: 2px; }
.ionic .card .item { .ionic .card {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
.ionic .card .item,
.ionic .list-inset .item,
.ionic .padding > .list .item {
margin-left: 0; margin-left: 0;
margin-right: 0; } margin-right: 0; }
.ionic .card .item:first-child { .ionic .card .item:first-child,
.ionic .list-inset .item:first-child,
.ionic .padding > .list .item:first-child {
margin-top: 0; margin-top: 0;
border-top-left-radius: 2px; border-top-left-radius: 2px;
border-top-right-radius: 2px; } border-top-right-radius: 2px; }
.ionic .card .item:first-child .item-content { .ionic .card .item:first-child .item-content,
.ionic .list-inset .item:first-child .item-content,
.ionic .padding > .list .item:first-child .item-content {
border-top-left-radius: 2px; border-top-left-radius: 2px;
border-top-right-radius: 2px; } border-top-right-radius: 2px; }
.ionic .card .item:last-child { .ionic .card .item:last-child,
.ionic .list-inset .item:last-child,
.ionic .padding > .list .item:last-child {
margin-bottom: 0; margin-bottom: 0;
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; } border-bottom-right-radius: 2px; }
.ionic .card .item:last-child .item-content { .ionic .card .item:last-child .item-content,
.ionic .list-inset .item:last-child .item-content,
.ionic .padding > .list .item:last-child .item-content {
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; } border-bottom-right-radius: 2px; }
.ionic .card.list .item:last-child { .ionic .card.list .item:last-child,
.ionic .list-inset .item:last-child {
margin-bottom: -1px; } margin-bottom: -1px; }
.ionic .card.list .item-divider { .ionic .card.list .item-divider,
.ionic .list-inset .item-divider,
.ionic .padding > .list .item,
.ionic .padding-horizontal > .list .item {
margin-right: 0; margin-right: 0;
margin-left: 0; } margin-left: 0; }
.ionic .padding-left > .list .item {
margin-left: 0; }
.ionic .padding-right > .list .item {
margin-right: 0; }
.ionic form { .ionic form {
margin: 0 0 1.42857; } margin: 0 0 1.42857; }
.ionic legend { .ionic legend {
@ -2094,30 +2117,13 @@
.ionic select, .ionic select,
.ionic textarea { .ionic textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.ionic .input-group { .ionic .item-input {
display: block;
overflow: hidden;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
background-color: white; }
.ionic .padded > .input-group,
.ionic .input-group.margin {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border-right: 1px solid #cccccc;
border-left: 1px solid #cccccc; }
.ionic .input-group .input-row + .input-row {
border-top: 1px solid #cccccc; }
.ionic .input-group + .input-group {
margin-top: 10px; }
.ionic .input-row {
position: relative; position: relative;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
padding: 6px 8px 5px; } padding: 6px 8px 5px; }
.ionic .input-row input { .ionic .item-input input {
-webkit-border-radius: 0; -webkit-border-radius: 0;
-moz-border-radius: 0; -moz-border-radius: 0;
border-radius: 0; border-radius: 0;
@ -2125,42 +2131,43 @@
background-color: transparent; background-color: transparent;
flex: 1 0 220px; flex: 1 0 220px;
-webkit-appearance: none; } -webkit-appearance: none; }
.ionic .input-row .input-label { .ionic .item-input .input-label {
padding: 7px 10px 7px 3px; padding: 7px 10px 7px 3px;
max-width: 200px; max-width: 200px;
color: black; color: black;
font-weight: bold; font-weight: bold;
flex: 1 0 100px; } flex: 1 0 100px; }
.ionic .input-row [class^="icon-"], .ionic .input-row [class*=" icon-"] { .ionic .item-input [class^="icon-"], .ionic .item-input [class*=" icon-"] {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
flex: 0 0 24px; flex: 0 0 24px;
align-self: center; } align-self: center; }
.ionic .input-row .placeholder-icon { .ionic .item-input .placeholder-icon {
color: #999; } color: #999; }
.ionic .input-group.stacked-label, .ionic .list.stacked-label,
.ionic .input-group.stacked-label .input-row { .ionic .list.stacked-label .item-input {
display: block; display: block;
border: 0; background-color: transparent;
background-color: transparent; } box-shadow: none; }
.ionic .input-group.stacked-label .input-label, .ionic .input-group.stacked-label [class^="icon-"], .ionic .input-group.stacked-label [class*=" icon-"], .ionic .list.stacked-label .input-label, .ionic .list.stacked-label [class^="icon-"], .ionic .list.stacked-label [class*=" icon-"],
.ionic .input-group.stacked-label .input-row .input-label, .ionic .list.stacked-label .item-input .input-label,
.ionic .input-group.stacked-label .input-row [class^="icon-"], .ionic .list.stacked-label .item-input [class^="icon-"],
.ionic .input-group.stacked-label .input-row [class*=" icon-"] { .ionic .list.stacked-label .item-input [class*=" icon-"] {
display: inline-block; display: inline-block;
padding: 4px 0; padding: 4px 0;
vertical-align: middle; } vertical-align: middle; }
.ionic .input-group.stacked-label input, .ionic .list.stacked-label input,
.ionic .input-group.stacked-label textarea { .ionic .list.stacked-label textarea {
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
overflow: hidden; overflow: hidden;
padding: 4px 8px 3px; padding: 4px 8px 3px;
border: 1px solid #cccccc; border: none;
background-color: white; } background-color: white;
.ionic .input-group.stacked-label input { box-shadow: inset 0 0 1px #666666; }
.ionic .list.stacked-label input {
height: 46px; } height: 46px; }
.ionic select, .ionic select,
.ionic textarea, .ionic textarea,
@ -2221,7 +2228,7 @@
.ionic input[type="file"] { .ionic input[type="file"] {
line-height: 34px; } line-height: 34px; }
.ionic select { .ionic select {
border: 1px solid #cccccc; border: 1px solid #ccc;
background-color: white; } background-color: white; }
.ionic select[multiple], .ionic select[multiple],
.ionic select[size] { .ionic select[size] {

104
dist/css/ionic.css vendored
View File

@ -2497,38 +2497,64 @@ button.item-icon-right .item-content:after {
color: #aaa; color: #aaa;
font-size: 14px; } font-size: 14px; }
.card { /*
A card and list-inset are close to the same thing, except a card as a box shadow.
*/
.card,
.list-inset {
overflow: hidden; overflow: hidden;
margin: 20px 10px; margin: 20px 10px;
background-color: white; background-color: white;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
border-radius: 2px; } border-radius: 2px; }
.card .item { .card {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
.card .item,
.list-inset .item,
.padding > .list .item {
margin-left: 0; margin-left: 0;
margin-right: 0; } margin-right: 0; }
.card .item:first-child { .card .item:first-child,
.list-inset .item:first-child,
.padding > .list .item:first-child {
margin-top: 0; margin-top: 0;
border-top-left-radius: 2px; border-top-left-radius: 2px;
border-top-right-radius: 2px; } border-top-right-radius: 2px; }
.card .item:first-child .item-content { .card .item:first-child .item-content,
.list-inset .item:first-child .item-content,
.padding > .list .item:first-child .item-content {
border-top-left-radius: 2px; border-top-left-radius: 2px;
border-top-right-radius: 2px; } border-top-right-radius: 2px; }
.card .item:last-child { .card .item:last-child,
.list-inset .item:last-child,
.padding > .list .item:last-child {
margin-bottom: 0; margin-bottom: 0;
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; } border-bottom-right-radius: 2px; }
.card .item:last-child .item-content { .card .item:last-child .item-content,
.list-inset .item:last-child .item-content,
.padding > .list .item:last-child .item-content {
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; } border-bottom-right-radius: 2px; }
.card.list .item:last-child { .card.list .item:last-child,
.list-inset .item:last-child {
margin-bottom: -1px; } margin-bottom: -1px; }
.card.list .item-divider { .card.list .item-divider,
.list-inset .item-divider,
.padding > .list .item,
.padding-horizontal > .list .item {
margin-right: 0; margin-right: 0;
margin-left: 0; } margin-left: 0; }
.padding-left > .list .item {
margin-left: 0; }
.padding-right > .list .item {
margin-right: 0; }
form { form {
margin: 0 0 1.42857; } margin: 0 0 1.42857; }
@ -2561,34 +2587,13 @@ select,
textarea { textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.input-group { .item-input {
display: block;
overflow: hidden;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
background-color: white; }
.padded > .input-group,
.input-group.margin {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border-right: 1px solid #cccccc;
border-left: 1px solid #cccccc; }
.input-group .input-row + .input-row {
border-top: 1px solid #cccccc; }
.input-group + .input-group {
margin-top: 10px; }
.input-row {
position: relative; position: relative;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
padding: 6px 8px 5px; } padding: 6px 8px 5px; }
.input-row input { .item-input input {
-webkit-border-radius: 0; -webkit-border-radius: 0;
-moz-border-radius: 0; -moz-border-radius: 0;
border-radius: 0; border-radius: 0;
@ -2596,45 +2601,46 @@ textarea {
background-color: transparent; background-color: transparent;
flex: 1 0 220px; flex: 1 0 220px;
-webkit-appearance: none; } -webkit-appearance: none; }
.input-row .input-label { .item-input .input-label {
padding: 7px 10px 7px 3px; padding: 7px 10px 7px 3px;
max-width: 200px; max-width: 200px;
color: black; color: black;
font-weight: bold; font-weight: bold;
flex: 1 0 100px; } flex: 1 0 100px; }
.input-row [class^="icon-"], .input-row [class*=" icon-"] { .item-input [class^="icon-"], .item-input [class*=" icon-"] {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
flex: 0 0 24px; flex: 0 0 24px;
align-self: center; } align-self: center; }
.input-row .placeholder-icon { .item-input .placeholder-icon {
color: #999; } color: #999; }
.input-group.stacked-label, .list.stacked-label,
.input-group.stacked-label .input-row { .list.stacked-label .item-input {
display: block; display: block;
border: 0; background-color: transparent;
background-color: transparent; } box-shadow: none; }
.input-group.stacked-label .input-label, .input-group.stacked-label [class^="icon-"], .input-group.stacked-label [class*=" icon-"], .list.stacked-label .input-label, .list.stacked-label [class^="icon-"], .list.stacked-label [class*=" icon-"],
.input-group.stacked-label .input-row .input-label, .list.stacked-label .item-input .input-label,
.input-group.stacked-label .input-row [class^="icon-"], .list.stacked-label .item-input [class^="icon-"],
.input-group.stacked-label .input-row [class*=" icon-"] { .list.stacked-label .item-input [class*=" icon-"] {
display: inline-block; display: inline-block;
padding: 4px 0; padding: 4px 0;
vertical-align: middle; } vertical-align: middle; }
.input-group.stacked-label input, .list.stacked-label input,
.input-group.stacked-label textarea { .list.stacked-label textarea {
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
overflow: hidden; overflow: hidden;
padding: 4px 8px 3px; padding: 4px 8px 3px;
border: 1px solid #cccccc; border: none;
background-color: white; } background-color: white;
box-shadow: inset 0 0 1px #666666; }
.input-group.stacked-label input { .list.stacked-label input {
height: 46px; } height: 46px; }
select, select,
@ -2703,7 +2709,7 @@ input[type="file"] {
line-height: 34px; } line-height: 34px; }
select { select {
border: 1px solid #cccccc; border: 1px solid #ccc;
background-color: white; } background-color: white; }
select[multiple], select[multiple],

1
scss/ionic-ios7/ionic-ios7.scss
View File

@ -18,7 +18,6 @@
"../ionic/modal", "../ionic/modal",
"../ionic/items", "../ionic/items",
"../ionic/list", "../ionic/list",
"../ionic/card",
// Forms // Forms
"../ionic/form", "../ionic/form",

43
scss/ionic/_card.scss
View File

@ -1,43 +0,0 @@
// Cards
// --------------------------------------------------
.card {
overflow: hidden;
margin: ($content-padding * 2) $content-padding;
background-color: $card-body-bg;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border-radius: $card-border-radius;
}
.card .item {
margin-left: 0;
margin-right: 0;
&:first-child {
margin-top: 0;
border-top-left-radius: $card-border-radius;
border-top-right-radius: $card-border-radius;
.item-content {
border-top-left-radius: $card-border-radius;
border-top-right-radius: $card-border-radius;
}
}
&:last-child {
margin-bottom: 0;
border-bottom-left-radius: $card-border-radius;
border-bottom-right-radius: $card-border-radius;
.item-content {
border-bottom-left-radius: $card-border-radius;
border-bottom-right-radius: $card-border-radius;
}
}
}
.card.list .item:last-child {
margin-bottom: $item-border-width * -1;
}
.card.list .item-divider {
margin-right: 0;
margin-left: 0;
}

45
scss/ionic/_form.scss
View File

@ -42,32 +42,10 @@ textarea {
} }
// Input groups // Input List
// ------------------------------- // -------------------------------
.input-group { .item-input {
display: block;
overflow: hidden;
border-top: $input-border-width solid $input-border-color;
border-bottom: $input-border-width solid $input-border-color;
background-color: $input-bg;
}
.padded > .input-group,
.input-group.margin {
@include border-radius($input-border-radius);
border-right: $input-border-width solid $input-border-color;
border-left: $input-border-width solid $input-border-color;
}
.input-group .input-row + .input-row {
border-top: $input-border-width solid $input-border-color;
}
.input-group + .input-group {
margin-top: $content-padding;
}
.input-row {
position: relative; position: relative;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
@ -101,11 +79,11 @@ textarea {
} }
} }
.input-group.stacked-label, .list.stacked-label,
.input-group.stacked-label .input-row { .list.stacked-label .item-input {
display: block; display: block;
border: 0;
background-color: transparent; background-color: transparent;
box-shadow: none;
.input-label, [class^="icon-"], [class*=" icon-"] { .input-label, [class^="icon-"], [class*=" icon-"] {
display: inline-block; display: inline-block;
@ -114,16 +92,17 @@ textarea {
} }
} }
.input-group.stacked-label input, .list.stacked-label input,
.input-group.stacked-label textarea .list.stacked-label textarea
{ {
@include border-radius($input-border-radius); @include border-radius(2px);
overflow: hidden; overflow: hidden;
padding: 4px 8px 3px; padding: 4px 8px 3px;
border: $input-border-width solid $input-border-color; border: none;
background-color: $input-bg; background-color: $input-bg;
box-shadow: $item-box-shadow;
} }
.input-group.stacked-label input { .list.stacked-label input {
height: $line-height-computed + $font-size-base + 12px; height: $line-height-computed + $font-size-base + 12px;
} }
@ -211,7 +190,7 @@ input[type="file"] {
// Make select elements obey height by applying a border // Make select elements obey height by applying a border
select { select {
border: $input-border-width solid $input-border-color; border: 1px solid #ccc;
background-color: $input-bg; // Chrome on Linux and Mobile Safari need background-color background-color: $input-bg; // Chrome on Linux and Mobile Safari need background-color
} }

6
scss/ionic/_items.scss
View File

@ -12,7 +12,7 @@
border: none; border: none;
background-color: $list-default-background; background-color: $list-default-background;
box-shadow: inset 0 0 $item-border-width #666; box-shadow: $item-box-shadow;
// Align badges within list items // Align badges within list items
.badge { .badge {
@ -76,7 +76,7 @@ a.item {
border: none; border: none;
background-color: #fff; background-color: #fff;
box-shadow: inset 0 0 $item-border-width #666; box-shadow: $item-box-shadow;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: $list-font-size; font-size: $list-font-size;
@ -255,7 +255,7 @@ button.item-icon-right {
padding: $item-divider-padding; padding: $item-divider-padding;
border: none; border: none;
background-color: $item-divider-bg; background-color: $item-divider-bg;
box-shadow: inset 0 0 $item-border-width #666; box-shadow: $item-box-shadow;
color: $item-divider-color; color: $item-divider-color;
font-weight: bold; font-weight: bold;
} }

70
scss/ionic/_list.scss
View File

@ -5,13 +5,10 @@
.list { .list {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
// No need to set list-style: none; since .list-item is block level
margin-bottom: 20px; margin-bottom: 20px;
padding-top: $item-border-width; padding-top: $item-border-width;
padding-bottom: $item-border-width; padding-bottom: $item-border-width;
padding-left: 0; // reset padding because ul and ol padding-left: 0; // reset padding because ul and ol
// make room for the list item borders
} }
/** /**
@ -65,3 +62,70 @@
color: #aaa; color: #aaa;
font-size: 14px; font-size: 14px;
} }
// Cards / Inset Lists
// --------------------------------------------------
/*
A card and list-inset are close to the same thing, except a card as a box shadow.
*/
.card,
.list-inset {
overflow: hidden;
margin: ($content-padding * 2) $content-padding;
background-color: $card-body-bg;
border-radius: $card-border-radius;
}
.card {
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
.card .item,
.list-inset .item,
.padding > .list .item
{
margin-left: 0;
margin-right: 0;
&:first-child {
margin-top: 0;
border-top-left-radius: $card-border-radius;
border-top-right-radius: $card-border-radius;
.item-content {
border-top-left-radius: $card-border-radius;
border-top-right-radius: $card-border-radius;
}
}
&:last-child {
margin-bottom: 0;
border-bottom-left-radius: $card-border-radius;
border-bottom-right-radius: $card-border-radius;
.item-content {
border-bottom-left-radius: $card-border-radius;
border-bottom-right-radius: $card-border-radius;
}
}
}
.card.list .item:last-child,
.list-inset .item:last-child {
margin-bottom: $item-border-width * -1;
}
.card.list .item-divider,
.list-inset .item-divider,
.padding > .list .item,
.padding-horizontal > .list .item {
margin-right: 0;
margin-left: 0;
}
.padding-left > .list .item {
margin-left: 0;
}
.padding-right > .list .item {
margin-right: 0;
}

10
scss/ionic/_variables.scss
View File

@ -124,19 +124,12 @@ $input-bg-disabled: $gray-lighter !default;
$input-color: $gray !default; $input-color: $gray !default;
$input-label-color: $black !default; $input-label-color: $black !default;
$input-border-color: #ccc !default;
$input-border-width: 1px !default;
$input-border-radius: 2px !default;
$input-border-focus: #66afe9 !default;
$input-color-placeholder: $gray-light !default; $input-color-placeholder: $gray-light !default;
$legend-color: $gray-dark !default; $legend-color: $gray-dark !default;
$legend-border-color: #e5e5e5 !default; $legend-border-color: #e5e5e5 !default;
$input-group-addon-bg: $gray-lighter !default;
$input-group-addon-border-color: $input-border-color !default;
// Toggle // Toggle
// ------------------------------- // -------------------------------
@ -390,7 +383,8 @@ $card-border-radius: 2px !default;
// ------------------------------- // -------------------------------
$item-border-width: 1px !default; $item-border-width: 1px !default;
$item-border-color: #ddd; $item-border-color: #666;
$item-box-shadow: inset 0 0 $item-border-width $item-border-color;
$item-padding: 15px !default; $item-padding: 15px !default;
$item-divider-bg: #f5f5f5; $item-divider-bg: #f5f5f5;

1
scss/ionic/ionic-scoped.scss
View File

@ -24,7 +24,6 @@
"modal", "modal",
"items", "items",
"list", "list",
"card",
// Forms // Forms
"form", "form",

1
scss/ionic/ionic.scss
View File

@ -23,7 +23,6 @@
"popup", "popup",
"items", "items",
"list", "list",
"card",
// Forms // Forms
"form", "form",

155
test/input-text.html
View File

@ -23,55 +23,68 @@
<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="input-group"> <div class="list">
<label class="input-row"> <label class="item item-input">
<input type="text" placeholder="First Name"> <input type="text" placeholder="First Name">
</label> </label>
<label class="input-row"> <label class="item item-input">
<input type="text" placeholder="Last Name"> <input type="text" placeholder="Last Name">
</label> </label>
<label class="input-row"> <label class="item item-input">
<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, list-inset, No Content Padding</h3>
<div class="input-group margin"> <div class="list list-inset">
<label class="input-row"> <label class="item item-input">
<input type="text" placeholder="First Name"> <input type="text" placeholder="First Name">
</label> </label>
<label class="input-row"> <label class="item item-input">
<input type="text" placeholder="Last Name"> <input type="text" placeholder="Last Name">
</label> </label>
<label class="input-row"> <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="email" placeholder="Email">
</label> </label>
</div> </div>
<div class="padding"> <div class="padding">
<h3>Default Text Input, Not Inset, With Content Padding</h3> <h3>Default Text Input, With Parent Content Padding</h3>
<div class="input-group"> <div class="list">
<label class="input-row"> <label class="item item-input">
<input type="text" placeholder="Username"> <input type="text" placeholder="Username">
</label> </label>
<label class="input-row"> <label class="item item-input">
<input type="email" placeholder="Email"> <input type="email" placeholder="Email">
</label> </label>
</div> </div>
<div class="input-group"> <div class="list">
<label class="input-row"> <label class="item item-input">
<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, list-inset, With Parent Content Padding</h3>
<div class="input-group margin"> <div class="list list-inset">
<label class="input-row"> <label class="item item-input">
<input type="email" placeholder="Email"> <input type="email" placeholder="Email">
</label> </label>
<label class="input-row"> <label class="item item-input">
<input type="text" placeholder="Name"> <input type="text" placeholder="Name">
</label> </label>
</div> </div>
@ -81,40 +94,40 @@
<h3>Label left of input, Not Inset, No Content Padding</h3> <h3>Label left of input, No Parent Content Padding</h3>
<div class="input-group"> <div class="list">
<label class="input-row"> <label class="item item-input">
<span class="input-label">Username</span> <span class="input-label">Username</span>
<input type="text" placeholder="@drifty"> <input type="text" placeholder="@drifty">
</label> </label>
<label class="input-row"> <label class="item item-input">
<span class="input-label">Email</span> <span class="input-label">Email</span>
<input type="email" placeholder="your@email.com"> <input type="email" placeholder="your@email.com">
</label> </label>
<label class="input-row"> <label class="item item-input">
<span class="input-label">First Name</span> <span class="input-label">First Name</span>
<input type="text" placeholder="Sir Derp"> <input type="text" placeholder="Sir Derp">
</label> </label>
</div> </div>
<h3>Label left of input, Not Inset, No Content Padding</h3> <h3>Label left of input, No Parent Content Padding</h3>
<div class="input-group"> <div class="list">
<label class="input-row"> <label class="item item-input">
<i class="icon-person"></i> <i class="icon-person"></i>
<span class="input-label">Username</span> <span class="input-label">Username</span>
<input type="text" placeholder="@drifty"> <input type="text" placeholder="@drifty">
</label> </label>
<label class="input-row"> <label class="item item-input">
<i class="icon-email"></i> <i class="icon-email"></i>
<span class="input-label">Email</span> <span class="input-label">Email</span>
<input type="email" placeholder="your@email.com"> <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, list-inset, No Parent Content Padding</h3>
<div class="input-group margin"> <div class="list list-inset">
<label class="input-row"> <label class="item item-input">
<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>
@ -122,27 +135,27 @@
<div class="padding"> <div class="padding">
<h3>Inline Label On Top Of Text Input, Not Inset, With Content Padding</h3> <h3>Inline Label On Top Of Text Input, With Parent Content Padding</h3>
<div class="input-group"> <div class="list">
<label class="input-row"> <label class="item item-input">
<span class="input-label">First Name</span> <span class="input-label">First Name</span>
<input type="text" placeholder="John"> <input type="text" placeholder="John">
</label> </label>
<label class="input-row"> <label class="item item-input">
<span class="input-label">Last Name</span> <span class="input-label">Last Name</span>
<input 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, list-inset, With Parent Content Padding</h3>
<div class="input-group margin"> <div class="list list-inset">
<label class="input-row"> <label class="item item-input">
<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 margin"> <div class="list list-inset">
<label class="input-row"> <label class="item item-input">
<span class="input-label">Filter By Name</span> <span class="input-label">Filter By Name</span>
<input type="text" placeholder="Enter keywords"> <input type="text" placeholder="Enter keywords">
</label> </label>
@ -153,31 +166,31 @@
<h3>Stacked Label On Top Of Text Input, Not Inset, No Content Padding</h3> <h3>Stacked Label On Top Of Text Input, No Parent Content Padding</h3>
<div class="input-group stacked-label"> <div class="list stacked-label">
<label class="input-row"> <label class="item item-input">
<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-row"> <label class="item item-input">
<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-row"> <label class="item item-input">
<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="list stacked-label">
<label class="input-row"> <label class="item item-input">
<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>
</div> </div>
<h3>Stacked Label On Top Of Text Input, Is Inset, No Content Padding</h3> <h3>Stacked Label On Top Of Text Input, list-inset, No Parent Content Padding</h3>
<div class="input-group stacked-label margin"> <div class="list stacked-label list-inset">
<label class="input-row"> <label class="item item-input">
<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>
@ -185,17 +198,17 @@
<div class="padding"> <div class="padding">
<h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3> <h3>Stacked Label On Top Of Text Input, With Parent Content Padding</h3>
<div class="input-group stacked-label"> <div class="list stacked-label">
<label class="input-row"> <label class="item item-input">
<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>
<h3>Stacked Label On Top Of Text Input, Is Inset, With Content Padding</h3> <h3>Stacked Label On Top Of Text Input, list-inset, With Parent Content Padding</h3>
<div class="input-group stacked-label margin"> <div class="list stacked-label list-inset">
<label class="input-row"> <label class="item item-input">
<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>
@ -203,26 +216,26 @@
</div> </div>
<h3>Default Text Input, Not Inset, No Content Padding</h3> <h3>Default Text Input, No Parent Content Padding</h3>
<div class="input-group"> <div class="list">
<label class="input-row"> <label class="item item-input">
<i class="icon-search placeholder-icon"></i> <i class="icon-search placeholder-icon"></i>
<input type="search" placeholder="Search"> <input type="search" placeholder="Search">
</label> </label>
</div> </div>
<h3>Default Text Input, Is Inset, No Content Padding</h3> <h3>Default Text Input, list-inset, No Parent Content Padding</h3>
<div class="input-group margin"> <div class="list list-inset">
<label class="input-row"> <label class="item item-input">
<i class="icon-star placeholder-icon"></i> <i class="icon-star placeholder-icon"></i>
<input type="text" placeholder="Favorites"> <input type="text" placeholder="Favorites">
</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, No Parent Content Padding</h3>
<div class="input-group stacked-label"> <div class="list stacked-label">
<label class="input-row"> <label class="item item-input">
<i class="icon-email"></i> <i class="icon-email"></i>
<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">
@ -231,18 +244,18 @@
<div class="padding"> <div class="padding">
<h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3> <h3>Stacked Label On Top Of Text Input, With Parent Content Padding</h3>
<div class="input-group stacked-label"> <div class="list stacked-label">
<label class="input-row"> <label class="item item-input">
<i class="icon-cloud"></i> <i class="icon-cloud"></i>
<span class="input-label">SaaS</span> <span class="input-label">SaaS</span>
<input type="text" placeholder="Codiqa"> <input type="text" placeholder="Codiqa">
</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, list-inset, With Parent Content Padding</h3>
<div class="input-group stacked-label margin"> <div class="list stacked-label list-inset">
<label class="input-row"> <label class="item item-input">
<i class="icon-headphone"></i> <i class="icon-headphone"></i>
<span class="input-label">Favorite Music</span> <span class="input-label">Favorite Music</span>
<input type="text" placeholder="Bee Gees"> <input type="text" placeholder="Bee Gees">