diff --git a/ionic/components/app/test/sink/pages/card.js b/ionic/components/app/test/sink/pages/card.js index d9a1923245..9e5bf881fe 100644 --- a/ionic/components/app/test/sink/pages/card.js +++ b/ionic/components/app/test/sink/pages/card.js @@ -20,8 +20,8 @@ import {List, Item, ActionMenu, Modal, ModalRef, like it would be on an index card or a piece of paper.

- Cards are great for displaying contextual informaion in a small amount of space, - like a Tweet, today's weather report, and a photo. + Cards are great for displaying contextual information in a small space, + like a Tweet, today's weather report, or a photo.

diff --git a/ionic/components/card/card.scss b/ionic/components/card/card.scss index 9a1671f8fc..b385e744f7 100644 --- a/ionic/components/card/card.scss +++ b/ionic/components/card/card.scss @@ -1,6 +1,9 @@ // Card // -------------------------------------------------- +$card-border-color: #ccc !default; +$card-border-radius: 2px !default; +$card-box-shadow: 0 1px 3px rgba(0, 0, 0, .3) !default; .card { position: relative; @@ -10,3 +13,24 @@ .card .item-label { white-space: normal; } + +.card .item { + &:first-child { + 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 { + border-bottom-right-radius: $card-border-radius; + border-bottom-left-radius: $card-border-radius; + + .item-content { + border-bottom-right-radius: $card-border-radius; + border-bottom-left-radius: $card-border-radius; + } + } +} diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index 21f4b2944a..c380cdeefc 100644 --- a/ionic/components/item/item.scss +++ b/ionic/components/item/item.scss @@ -102,6 +102,10 @@ ion-primary-swipe-buttons { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + + img { + max-width: 100%; + } } .item-media + .item-label { @@ -109,7 +113,7 @@ ion-primary-swipe-buttons { } .item-media:last-child { - padding-right: $item-padding; + //padding-right: $item-padding; } .item-note {