diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index 1f1faa08c4..442572e9af 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -946,46 +946,24 @@ address {
height: 100%; }
.list {
- margin-bottom: 20px;
- padding-left: 0;
position: relative;
overflow: hidden;
- color: #333333;
- background-color: white;
- border-color: #dddddd; }
- .list:hover {
- color: #333333;
- text-decoration: none; }
- .list.active, .list:active {
- background-color: #ebebeb;
- box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
- border-color: #c4c4c4; }
- .list.list-success {
- color: white;
- background-color: #66cc33;
- border-color: #66cc33; }
- .list.list-success:hover {
- color: white;
- text-decoration: none; }
- .list.list-success.active, .list.list-success:active {
- background-color: #56ab2b;
- box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
- border-color: #52a329; }
+ margin-bottom: 20px;
+ padding-top: 1px;
+ padding-bottom: 1px;
+ padding-left: 0; }
/**
* An individual list item.
*/
.list-item {
position: relative;
- display: block;
- margin-bottom: -1px;
- margin-left: -1px;
- margin-right: -1px;
- border-top: 1px solid #dddddd;
z-index: 2;
- background-color: white; }
- .list-item:last-child {
- margin-bottom: 0; }
+ display: block;
+ margin: -1px;
+ border: none;
+ background-color: white;
+ box-shadow: inset 0 0 1px #666666; }
.list-item .badge {
float: right; }
.list-item .badge + .badge {
@@ -1110,8 +1088,8 @@ a.list-item {
* "edit mode"
*/
.list-editing .list-item-content {
- margin-left: 30px;
- margin-right: 30px; }
+ margin-right: 30px;
+ margin-left: 30px; }
.list-editing .list-item-edit {
left: 0px;
opacity: 1; }
@@ -1123,11 +1101,11 @@ a.list-item {
*/
.list-item-content {
position: relative;
- background-color: #fff;
- border: 1px solid #dddddd;
z-index: 2;
- margin-top: -1px;
padding: 15px 45px 15px 15px;
+ border: none;
+ background-color: #fff;
+ box-shadow: inset 0 0 1px #666666;
font-size: 16px;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
@@ -1214,9 +1192,9 @@ button.list-icon-right .list-item-content:after {
*/
.list-item-edit {
position: absolute;
- z-index: 0;
- left: -48px;
top: 0;
+ left: -48px;
+ z-index: 0;
width: 48px;
height: 100%;
line-height: 100%;
@@ -1228,30 +1206,30 @@ button.list-icon-right .list-item-content:after {
color: #ef4e3a;
font-size: 24px; }
.list-item-edit.ng-enter {
- -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+ left: -48px;
+ opacity: 0;
+ -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
+ .list-item-edit.ng-enter-active {
+ left: 0;
+ opacity: 1; }
+ .list-item-edit.ng-leave {
+ left: 0px;
+ opacity: 1;
+ -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
+ .list-item-edit.ng-leave-active {
left: -48px;
opacity: 0; }
- .list-item-edit.ng-enter-active {
- opacity: 1;
- left: 0; }
- .list-item-edit.ng-leave {
- -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
- left: 0px;
- opacity: 1; }
- .list-item-edit.ng-leave-active {
- opacity: 0;
- left: -48px; }
.list-item-drag {
position: absolute;
- z-index: 0;
- right: 0;
top: 0;
+ right: 0;
+ z-index: 0;
height: 100%; }
.list-item-drag .button {
height: 100%;
- border-radius: 0;
- border: none; }
+ border: none;
+ border-radius: 0; }
/**
* The hidden right-side buttons that can be exposed under a list item
@@ -1259,21 +1237,21 @@ button.list-icon-right .list-item-content:after {
*/
.list-item-buttons {
position: absolute;
- z-index: 1;
- right: 0;
top: 0;
+ right: 0;
+ z-index: 1;
height: 100%; }
.list-item-buttons .button {
height: 100%;
- border-radius: 0;
- border: none; }
+ border: none;
+ border-radius: 0; }
/**
* A list header.
*/
.list-header {
- padding: 5px 15px;
margin-top: 20px;
+ padding: 5px 15px;
background-color: transparent;
color: #222222;
font-weight: bold; }
@@ -1282,28 +1260,29 @@ button.list-icon-right .list-item-content:after {
* A list divider.
*/
.list-divider {
+ margin: -1px;
padding: 5px 15px;
+ border: none;
background-color: whitesmoke;
+ box-shadow: inset 0 0 1px #666666;
color: #222222;
font-weight: bold; }
-.list-divider,
-.list-header {
- margin-left: -1px;
- margin-right: -1px; }
+.card.list .list-divider {
+ margin-left: 0;
+ margin-right: 0; }
-.padding .list-divider,
-.padding .list-heading {
- border-left: 1px solid #dddddd;
- border-right: 1px solid #dddddd; }
+.card.list .list-item {
+ padding-right: 1px;
+ padding-left: 1px; }
/**
* List refreser elements
*/
.list-refresher {
- background-color: red;
+ overflow: hidden;
height: 0;
- overflow: hidden; }
+ background-color: red; }
form {
margin: 0 0 1.42857; }
@@ -1479,7 +1458,6 @@ input[type="file"] {
line-height: 34px; }
select {
- width: 220px;
border: 1px solid #cccccc;
background-color: white; }
@@ -1973,14 +1951,16 @@ a.button {
color: #3a87ad; }
.card {
- width: 100%;
- background-color: white;
+ margin: 10px;
+ border: none;
border-radius: 2px;
- border: 1px solid #dddddd; }
+ background-color: white;
+ box-shadow: inset 0 0 1px #666666; }
.card-header {
padding: 10px;
- background-color: white; }
+ border-bottom: 1px solid #dddddd;
+ background-color: #eeeeee; }
.card-header.card-header-secondary {
background-color: whitesmoke; }
.card-header.card-header-primary {
@@ -2000,7 +1980,9 @@ a.button {
padding: 10px; }
.card-footer {
- padding: 10px; }
+ padding: 10px;
+ border-top: 1px solid #dddddd;
+ background-color: #eeeeee; }
.slide-in-up {
opacity: 0;
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index 18601f9244..73ed860a9d 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -1675,42 +1675,20 @@
.ionic .modal.active {
height: 100%; }
.ionic .list {
- margin-bottom: 20px;
- padding-left: 0;
position: relative;
overflow: hidden;
- color: #333333;
- background-color: white;
- border-color: #dddddd; }
- .ionic .list:hover {
- color: #333333;
- text-decoration: none; }
- .ionic .list.active, .ionic .list:active {
- background-color: #ebebeb;
- box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
- border-color: #c4c4c4; }
- .ionic .list.list-success {
- color: white;
- background-color: #66cc33;
- border-color: #66cc33; }
- .ionic .list.list-success:hover {
- color: white;
- text-decoration: none; }
- .ionic .list.list-success.active, .ionic .list.list-success:active {
- background-color: #56ab2b;
- box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
- border-color: #52a329; }
+ margin-bottom: 20px;
+ padding-top: 1px;
+ padding-bottom: 1px;
+ padding-left: 0; }
.ionic .list-item {
position: relative;
- display: block;
- margin-bottom: -1px;
- margin-left: -1px;
- margin-right: -1px;
- border-top: 1px solid #dddddd;
z-index: 2;
- background-color: white; }
- .ionic .list-item:last-child {
- margin-bottom: 0; }
+ display: block;
+ margin: -1px;
+ border: none;
+ background-color: white;
+ box-shadow: inset 0 0 1px #666666; }
.ionic .list-item .badge {
float: right; }
.ionic .list-item .badge + .badge {
@@ -1829,18 +1807,18 @@
.ionic a.list-item:hover, .ionic a.list-item:focus {
text-decoration: none; }
.ionic .list-editing .list-item-content {
- margin-left: 30px;
- margin-right: 30px; }
+ margin-right: 30px;
+ margin-left: 30px; }
.ionic .list-editing .list-item-edit {
left: 0px;
opacity: 1; }
.ionic .list-item-content {
position: relative;
- background-color: #fff;
- border: 1px solid #dddddd;
z-index: 2;
- margin-top: -1px;
padding: 15px 45px 15px 15px;
+ border: none;
+ background-color: #fff;
+ box-shadow: inset 0 0 1px #666666;
font-size: 16px;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
.ionic .list-item-content i {
@@ -1910,9 +1888,9 @@
opacity: 0.7; }
.ionic .list-item-edit {
position: absolute;
- z-index: 0;
- left: -48px;
top: 0;
+ left: -48px;
+ z-index: 0;
width: 48px;
height: 100%;
line-height: 100%;
@@ -1924,62 +1902,63 @@
color: #ef4e3a;
font-size: 24px; }
.ionic .list-item-edit.ng-enter {
- -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+ left: -48px;
+ opacity: 0;
+ -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
+ .ionic .list-item-edit.ng-enter-active {
+ left: 0;
+ opacity: 1; }
+ .ionic .list-item-edit.ng-leave {
+ left: 0px;
+ opacity: 1;
+ -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
+ .ionic .list-item-edit.ng-leave-active {
left: -48px;
opacity: 0; }
- .ionic .list-item-edit.ng-enter-active {
- opacity: 1;
- left: 0; }
- .ionic .list-item-edit.ng-leave {
- -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
- left: 0px;
- opacity: 1; }
- .ionic .list-item-edit.ng-leave-active {
- opacity: 0;
- left: -48px; }
.ionic .list-item-drag {
position: absolute;
- z-index: 0;
- right: 0;
top: 0;
+ right: 0;
+ z-index: 0;
height: 100%; }
.ionic .list-item-drag .button {
height: 100%;
- border-radius: 0;
- border: none; }
+ border: none;
+ border-radius: 0; }
.ionic .list-item-buttons {
position: absolute;
- z-index: 1;
- right: 0;
top: 0;
+ right: 0;
+ z-index: 1;
height: 100%; }
.ionic .list-item-buttons .button {
height: 100%;
- border-radius: 0;
- border: none; }
+ border: none;
+ border-radius: 0; }
.ionic .list-header {
- padding: 5px 15px;
margin-top: 20px;
+ padding: 5px 15px;
background-color: transparent;
color: #222222;
font-weight: bold; }
.ionic .list-divider {
+ margin: -1px;
padding: 5px 15px;
+ border: none;
background-color: whitesmoke;
+ box-shadow: inset 0 0 1px #666666;
color: #222222;
font-weight: bold; }
- .ionic .list-divider,
- .ionic .list-header {
- margin-left: -1px;
- margin-right: -1px; }
- .ionic .padding .list-divider,
- .ionic .padding .list-heading {
- border-left: 1px solid #dddddd;
- border-right: 1px solid #dddddd; }
+ .ionic .card.list .list-divider {
+ margin-left: 0;
+ margin-right: 0; }
+ .ionic .card.list .list-item {
+ padding-right: 1px;
+ padding-left: 1px; }
.ionic .list-refresher {
- background-color: red;
+ overflow: hidden;
height: 0;
- overflow: hidden; }
+ background-color: red; }
.ionic form {
margin: 0 0 1.42857; }
.ionic legend {
@@ -2135,7 +2114,6 @@
.ionic input[type="file"] {
line-height: 34px; }
.ionic select {
- width: 220px;
border: 1px solid #cccccc;
background-color: white; }
.ionic select[multiple],
@@ -2650,13 +2628,15 @@
.ionic .alert-info h4 {
color: #3a87ad; }
.ionic .card {
- width: 100%;
- background-color: white;
+ margin: 10px;
+ border: none;
border-radius: 2px;
- border: 1px solid #dddddd; }
+ background-color: white;
+ box-shadow: inset 0 0 1px #666666; }
.ionic .card-header {
padding: 10px;
- background-color: white; }
+ border-bottom: 1px solid #dddddd;
+ background-color: #eeeeee; }
.ionic .card-header.card-header-secondary {
background-color: whitesmoke; }
.ionic .card-header.card-header-primary {
@@ -2674,7 +2654,9 @@
.ionic .card-body {
padding: 10px; }
.ionic .card-footer {
- padding: 10px; }
+ padding: 10px;
+ border-top: 1px solid #dddddd;
+ background-color: #eeeeee; }
.ionic .slide-in-up {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 691caf81f2..07adc11c7a 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2089,46 +2089,24 @@ address {
color: #fff; }
.list {
- margin-bottom: 20px;
- padding-left: 0;
position: relative;
overflow: hidden;
- color: #333333;
- background-color: white;
- border-color: #dddddd; }
- .list:hover {
- color: #333333;
- text-decoration: none; }
- .list.active, .list:active {
- background-color: #ebebeb;
- box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
- border-color: #c4c4c4; }
- .list.list-success {
- color: white;
- background-color: #66cc33;
- border-color: #66cc33; }
- .list.list-success:hover {
- color: white;
- text-decoration: none; }
- .list.list-success.active, .list.list-success:active {
- background-color: #56ab2b;
- box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
- border-color: #52a329; }
+ margin-bottom: 20px;
+ padding-top: 1px;
+ padding-bottom: 1px;
+ padding-left: 0; }
/**
* An individual list item.
*/
.list-item {
position: relative;
- display: block;
- margin-bottom: -1px;
- margin-left: -1px;
- margin-right: -1px;
- border-top: 1px solid #dddddd;
z-index: 2;
- background-color: white; }
- .list-item:last-child {
- margin-bottom: 0; }
+ display: block;
+ margin: -1px;
+ border: none;
+ background-color: white;
+ box-shadow: inset 0 0 1px #666666; }
.list-item .badge {
float: right; }
.list-item .badge + .badge {
@@ -2253,8 +2231,8 @@ a.list-item {
* "edit mode"
*/
.list-editing .list-item-content {
- margin-left: 30px;
- margin-right: 30px; }
+ margin-right: 30px;
+ margin-left: 30px; }
.list-editing .list-item-edit {
left: 0px;
opacity: 1; }
@@ -2266,11 +2244,11 @@ a.list-item {
*/
.list-item-content {
position: relative;
- background-color: #fff;
- border: 1px solid #dddddd;
z-index: 2;
- margin-top: -1px;
padding: 15px 45px 15px 15px;
+ border: none;
+ background-color: #fff;
+ box-shadow: inset 0 0 1px #666666;
font-size: 16px;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
@@ -2357,9 +2335,9 @@ button.list-icon-right .list-item-content:after {
*/
.list-item-edit {
position: absolute;
- z-index: 0;
- left: -48px;
top: 0;
+ left: -48px;
+ z-index: 0;
width: 48px;
height: 100%;
line-height: 100%;
@@ -2371,30 +2349,30 @@ button.list-icon-right .list-item-content:after {
color: #ef4e3a;
font-size: 24px; }
.list-item-edit.ng-enter {
- -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+ left: -48px;
+ opacity: 0;
+ -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
+ .list-item-edit.ng-enter-active {
+ left: 0;
+ opacity: 1; }
+ .list-item-edit.ng-leave {
+ left: 0px;
+ opacity: 1;
+ -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
+ .list-item-edit.ng-leave-active {
left: -48px;
opacity: 0; }
- .list-item-edit.ng-enter-active {
- opacity: 1;
- left: 0; }
- .list-item-edit.ng-leave {
- -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
- left: 0px;
- opacity: 1; }
- .list-item-edit.ng-leave-active {
- opacity: 0;
- left: -48px; }
.list-item-drag {
position: absolute;
- z-index: 0;
- right: 0;
top: 0;
+ right: 0;
+ z-index: 0;
height: 100%; }
.list-item-drag .button {
height: 100%;
- border-radius: 0;
- border: none; }
+ border: none;
+ border-radius: 0; }
/**
* The hidden right-side buttons that can be exposed under a list item
@@ -2402,21 +2380,21 @@ button.list-icon-right .list-item-content:after {
*/
.list-item-buttons {
position: absolute;
- z-index: 1;
- right: 0;
top: 0;
+ right: 0;
+ z-index: 1;
height: 100%; }
.list-item-buttons .button {
height: 100%;
- border-radius: 0;
- border: none; }
+ border: none;
+ border-radius: 0; }
/**
* A list header.
*/
.list-header {
- padding: 5px 15px;
margin-top: 20px;
+ padding: 5px 15px;
background-color: transparent;
color: #222222;
font-weight: bold; }
@@ -2425,28 +2403,29 @@ button.list-icon-right .list-item-content:after {
* A list divider.
*/
.list-divider {
+ margin: -1px;
padding: 5px 15px;
+ border: none;
background-color: whitesmoke;
+ box-shadow: inset 0 0 1px #666666;
color: #222222;
font-weight: bold; }
-.list-divider,
-.list-header {
- margin-left: -1px;
- margin-right: -1px; }
+.card.list .list-divider {
+ margin-left: 0;
+ margin-right: 0; }
-.padding .list-divider,
-.padding .list-heading {
- border-left: 1px solid #dddddd;
- border-right: 1px solid #dddddd; }
+.card.list .list-item {
+ padding-right: 1px;
+ padding-left: 1px; }
/**
* List refreser elements
*/
.list-refresher {
- background-color: red;
+ overflow: hidden;
height: 0;
- overflow: hidden; }
+ background-color: red; }
form {
margin: 0 0 1.42857; }
@@ -2622,7 +2601,6 @@ input[type="file"] {
line-height: 34px; }
select {
- width: 220px;
border: 1px solid #cccccc;
background-color: white; }
@@ -3194,14 +3172,16 @@ a.button {
color: #3a87ad; }
.card {
- width: 100%;
- background-color: white;
+ margin: 10px;
+ border: none;
border-radius: 2px;
- border: 1px solid #dddddd; }
+ background-color: white;
+ box-shadow: inset 0 0 1px #666666; }
.card-header {
padding: 10px;
- background-color: white; }
+ border-bottom: 1px solid #dddddd;
+ background-color: #eeeeee; }
.card-header.card-header-secondary {
background-color: whitesmoke; }
.card-header.card-header-primary {
@@ -3221,7 +3201,9 @@ a.button {
padding: 10px; }
.card-footer {
- padding: 10px; }
+ padding: 10px;
+ border-top: 1px solid #dddddd;
+ background-color: #eeeeee; }
.slide-box {
background-color: #000;
diff --git a/scss/ionic/_card.scss b/scss/ionic/_card.scss
index d1eebb6231..c6e94dd137 100644
--- a/scss/ionic/_card.scss
+++ b/scss/ionic/_card.scss
@@ -1,13 +1,16 @@
.card {
- width: 100%;
- background-color: white;
- border-radius: 2px;
- border: 1px solid #ddd;
+ margin: $content-padding;
+ border: none;
+ border-radius: $card-border-radius;
+
+ background-color: $card-body-bg;
+ box-shadow: inset 0 0 $card-border-width #666;
}
.card-header {
- padding: 10px;
- background-color: $brand-default;
+ padding: $card-padding;
+ border-bottom: $card-border-width solid $card-border-color;
+ background-color: $card-header-bg;
&.card-header-secondary { background-color: $brand-secondary; }
&.card-header-primary { background-color: $brand-primary; }
@@ -19,9 +22,11 @@
}
.card-body {
- padding: 10px;
+ padding: $card-padding;
}
.card-footer {
- padding: 10px;
+ padding: $card-padding;
+ border-top: $card-border-width solid $card-border-color;
+ background-color: $card-footer-bg;
}
diff --git a/scss/ionic/_form.scss b/scss/ionic/_form.scss
index 74f3b6dad0..14e8fbc796 100644
--- a/scss/ionic/_form.scss
+++ b/scss/ionic/_form.scss
@@ -211,7 +211,6 @@ input[type="file"] {
// Make select elements obey height by applying a border
select {
- width: 220px; // default input width + 10px of padding that doesn't get applied
border: $input-border-width solid $input-border-color;
background-color: $input-bg; // Chrome on Linux and Mobile Safari need background-color
}
diff --git a/scss/ionic/_list.scss b/scss/ionic/_list.scss
index dfcf0113ea..6c8f683396 100644
--- a/scss/ionic/_list.scss
+++ b/scss/ionic/_list.scss
@@ -1,16 +1,14 @@
.list {
- // No need to set list-style: none; since .list-item is block level
- margin-bottom: 20px;
- padding-left: 0; // reset padding because ul and ol
position: relative;
overflow: hidden;
+ // No need to set list-style: none; since .list-item is block level
+ margin-bottom: 20px;
+ padding-top: $list-item-border-width;
+ padding-bottom: $list-item-border-width;
+ padding-left: 0; // reset padding because ul and ol
- @include list-style($list-default-background, $list-default-border, $gray-dark);
-
- &.list-success {
- @include list-style($list-success-background, $list-success-border, $white);
- }
+ // make room for the list item borders
}
/**
@@ -18,23 +16,15 @@
*/
.list-item {
position: relative;
+
+ z-index: 2; // Make sure the borders and stuff don't get hidden by children
display: block;
- // Place the border on the list items and negative margin up for better styling
- margin-bottom: $list-item-border-width * -1;
- margin-left: $list-item-border-width * -1;
- margin-right: $list-item-border-width * -1;
- border-top: $list-item-border-width solid $list-item-border-color;
+ margin: $list-item-border-width * -1;
-
- // Make sure the borders and stuff don't get hidden
- // by children
- z-index: 2;
+ border: none;
background-color: $list-default-background;
-
- &:last-child {
- margin-bottom: 0;
- }
+ box-shadow: inset 0 0 $list-item-border-width #666;
// Align badges within list items
.badge {
@@ -77,7 +67,6 @@ a.list-item {
&:hover,
&:focus {
text-decoration: none;
- //background-color: $list-group-hover-bg;
}
}
@@ -87,8 +76,8 @@ a.list-item {
*/
.list-editing {
.list-item-content {
- margin-left: 30px;
margin-right: 30px;
+ margin-left: 30px;
}
.list-item-edit {
left: 0px;
@@ -105,12 +94,14 @@ a.list-item {
*/
.list-item-content {
position: relative;
- background-color: #fff;
- border: $list-item-border-width solid $list-item-border-color;
z-index: 2;
- margin-top: $list-item-border-width * -1;
+ //margin: $list-item-border-width * -1;
padding: $list-item-padding ($list-item-padding * 3) $list-item-padding $list-item-padding;
+
+ border: none;
+ background-color: #fff;
+ box-shadow: inset 0 0 $list-item-border-width #666;
font-size: $list-font-size;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
@@ -219,9 +210,9 @@ button.list-icon-right {
*/
.list-item-edit {
position: absolute;
- z-index: 0;
- left: -48px;
top: 0;
+ left: -48px;
+ z-index: 0;
width: 48px;
height: 100%;
line-height: 100%;
@@ -240,36 +231,36 @@ button.list-icon-right {
&.ng-enter {
- -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
left: -48px;
opacity: 0;
+ -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
&.ng-enter-active {
- opacity: 1;
left: 0;
+ opacity: 1;
}
&.ng-leave {
- -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
left: 0px;
opacity: 1;
+ -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
&.ng-leave-active {
- opacity: 0;
left: -48px;
+ opacity: 0;
}
}
.list-item-drag {
position: absolute;
- z-index: 0;
- right: 0;
top: 0;
+ right: 0;
+ z-index: 0;
height: 100%;
.button {
height: 100%;
- border-radius: 0;
border: none;
+ border-radius: 0;
}
}
/**
@@ -278,15 +269,15 @@ button.list-icon-right {
*/
.list-item-buttons {
position: absolute;
- z-index: 1;
- right: 0;
top: 0;
+ right: 0;
+ z-index: 1;
height: 100%;
.button {
height: 100%;
- border-radius: 0;
border: none;
+ border-radius: 0;
}
}
@@ -295,8 +286,8 @@ button.list-icon-right {
* A list header.
*/
.list-header {
- padding: $list-header-padding;
margin-top: $list-header-margin-top;
+ padding: $list-header-padding;
background-color: $list-header-bg;
color: $list-header-color;
font-weight: bold;
@@ -307,33 +298,40 @@ button.list-icon-right {
* A list divider.
*/
.list-divider {
+ margin: $list-item-border-width * -1;
padding: $list-divider-padding;
+ border: none;
background-color: $list-divider-bg;
+ box-shadow: inset 0 0 $list-item-border-width #666;
color: $list-divider-color;
font-weight: bold;
}
+.card.list .list-divider {
+ margin-left: 0;
+ margin-right: 0;
+}
// inset so they layout the same as list items
.list-divider,
.list-header {
- margin-left: $list-item-border-width * -1;
- margin-right: $list-item-border-width * -1;
+ //margin-left: $list-item-border-width * -1;
+ //margin-right: $list-item-border-width * -1;
}
-// make sure these have left/right borders when inset
-.padding .list-divider,
-.padding .list-heading {
- border-left: $list-item-border-width solid $list-item-border-color;
- border-right: $list-item-border-width solid $list-item-border-color;
+
+// when its a card make sure it doesn't duplicate top and bottom borders
+.card.list .list-item {
+ padding-right: 1px;
+ padding-left: 1px;
}
/**
* List refreser elements
*/
.list-refresher {
- background-color: red;
- height: 0;
overflow: hidden;
+ height: 0;
+ background-color: red;
}
.list-refreshing {
}
diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss
index 7672edc650..ea6ddd32cd 100644
--- a/scss/ionic/_variables.scss
+++ b/scss/ionic/_variables.scss
@@ -399,6 +399,18 @@ $menu-width: 270px;
$menu-animation-speed: 200ms;
+// Cards
+// -------------------------------
+
+$card-header-bg: #eee;
+$card-body-bg: #fff;
+$card-footer-bg: #eee;
+$card-padding: 10px !default;
+$card-border-width: 1px !default;
+$card-border-color: #ddd;
+$card-border-radius: 2px !default;
+
+
// Modals
// -------------------------------
diff --git a/test/cards.html b/test/cards.html
index 6f54a0fe36..fcc40382ad 100644
--- a/test/cards.html
+++ b/test/cards.html
@@ -5,8 +5,7 @@
-
-
+
@@ -17,14 +16,37 @@
-
-
-