diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss index 32497d9284..a73f89d260 100644 --- a/ionic/components/card/modes/ios.scss +++ b/ionic/components/card/modes/ios.scss @@ -44,6 +44,7 @@ ion-card { padding-right: ($card-ios-padding-right / 2); padding-left: ($card-ios-padding-left / 2); font-size: $item-ios-font-size; + border-radius: inherit; } ion-item-content { @@ -68,6 +69,20 @@ ion-card { padding-top: 0; } + [actions] { + ion-item-content { + padding: 0; + } + + button, + [button] { + margin: $item-ios-padding-icon-top ($item-ios-padding-right / 2) $item-ios-padding-icon-bottom ($item-ios-padding-left / 2); + padding: 2px 6px; + min-height: 26px; + font-size: 1.3rem; + } + } + [item-left], [item-right] { margin: $card-ios-padding-media-top ($card-ios-padding-right / 2) $card-ios-padding-media-bottom ($card-ios-padding-left / 2); diff --git a/ionic/components/card/modes/md.scss b/ionic/components/card/modes/md.scss index cda9ef8ecb..dbd1711759 100644 --- a/ionic/components/card/modes/md.scss +++ b/ionic/components/card/modes/md.scss @@ -70,6 +70,16 @@ ion-card { padding-top: 0; } + [actions] { + button, + [button] { + margin: 0 ($card-md-padding-right / 4) 0 ($card-md-padding-left / 4); + min-height: 26px; + font-size: 1.3rem; + border-color: transparent; + } + } + [item-left], [item-right] { margin: $card-md-padding-media-top ($card-md-padding-right / 2) $card-md-padding-media-bottom ($card-md-padding-left / 2); diff --git a/ionic/components/card/test/advanced/main.html b/ionic/components/card/test/advanced/main.html index 53dd83545f..c8b258ba5e 100644 --- a/ionic/components/card/test/advanced/main.html +++ b/ionic/components/card/test/advanced/main.html @@ -51,6 +51,47 @@

Hello. I am a paragraph.

+ + + + + + + + + +
+ +
+ + + This card was breaking the border radius. + + + + + + + +