diff --git a/ionic/components/card/card.scss b/ionic/components/card/card.scss index 0179319835..614c3d6786 100644 --- a/ionic/components/card/card.scss +++ b/ionic/components/card/card.scss @@ -5,11 +5,10 @@ .card { display: block; +} - img { - width: 100%; - } - +.card img { + width: 100%; } ion-card-header { @@ -18,3 +17,7 @@ ion-card-header { white-space: nowrap; text-overflow: ellipsis; } + +ion-card-content { + display: block; +} diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss index aad4037b69..a64df34af4 100644 --- a/ionic/components/card/modes/ios.scss +++ b/ionic/components/card/modes/ios.scss @@ -7,6 +7,11 @@ $card-ios-margin-right: 16px !default; $card-ios-margin-bottom: 16px !default; $card-ios-margin-left: 16px !default; +$card-ios-padding-top: 13px !default; +$card-ios-padding-right: 16px !default; +$card-ios-padding-bottom: 14px !default; +$card-ios-padding-left: 16px !default; + $card-ios-background-color: $list-background-color !default; $card-ios-box-shadow: 0 1px 2px rgba(0,0,0,.3) !default; $card-ios-border-radius: 2px !default; @@ -57,6 +62,11 @@ $card-ios-header-color: #333 !default; color: $card-ios-header-color; } + ion-card-content { + padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left; + font-size: $card-ios-font-size; + } + .card-title { padding: $card-ios-title-padding; font-size: $card-ios-title-font-size; @@ -66,11 +76,13 @@ $card-ios-header-color: #333 !default; h1 { margin: 0 0 2px; font-size: 2.4rem; + font-weight: normal; } h2 { margin: 2px 0 2px; font-size: 1.6rem; + font-weight: normal; } h3, @@ -79,6 +91,7 @@ $card-ios-header-color: #333 !default; h6 { margin: 2px 0 2px; font-size: 1.4rem; + font-weight: normal; } p { diff --git a/ionic/components/card/modes/material.scss b/ionic/components/card/modes/material.scss index f98329ddc8..547bef2eb7 100644 --- a/ionic/components/card/modes/material.scss +++ b/ionic/components/card/modes/material.scss @@ -7,10 +7,16 @@ $card-md-margin-right: 8px !default; $card-md-margin-bottom: 8px !default; $card-md-margin-left: 8px !default; +$card-md-padding-top: 13px !default; +$card-md-padding-right: 16px !default; +$card-md-padding-bottom: 13px !default; +$card-md-padding-left: 16px !default; + $card-md-background-color: $list-background-color !default; $card-md-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default; $card-md-border-radius: 2px !default; $card-md-font-size: 1.4rem !default; +$card-md-line-height: 1.5 !default; $card-md-text-color: #222 !default; $card-md-title-font-size: 2.4rem !default; @@ -63,6 +69,12 @@ $card-md-header-color: #222 !default; color: $card-md-header-color; } + ion-card-content { + padding: $card-md-padding-top $card-md-padding-right $card-md-padding-bottom $card-md-padding-left; + font-size: $card-md-font-size; + line-height: $card-md-line-height; + } + .card-title { padding: $card-md-title-padding; font-size: $card-md-title-font-size; diff --git a/ionic/components/card/test/advanced/main.html b/ionic/components/card/test/advanced/main.html index 40c542515c..bfa92b2077 100644 --- a/ionic/components/card/test/advanced/main.html +++ b/ionic/components/card/test/advanced/main.html @@ -9,19 +9,15 @@ -
- - -

- Card Title Goes Here -

- -

- Keep close to Nature's heart... and break clear away, - once in awhile, and climb a mountain. I am within a paragraph element. -

-
-
+ +

+ Card Title Goes Here +

+

+ Keep close to Nature's heart... and break clear away, + once in awhile, and climb a mountain. I am within a paragraph element. +

+
-
- - This is a multiline content within a card that should - take up multiple lines and stuff. - -
- -
- - - 255 - - - - Reply - - - - Forward - -
+ + This is a multiline content within a card that should + take up multiple lines and stuff. + -
- - Card, no header - -
+ + Card, no header +
diff --git a/ionic/components/card/test/images/main.html b/ionic/components/card/test/images/main.html index 763573e6d9..727ae4fc6e 100644 --- a/ionic/components/card/test/images/main.html +++ b/ionic/components/card/test/images/main.html @@ -6,24 +6,10 @@
-
- -

Item with no-border-bottom

-
-
-
- -

This is content text and stuff.

-
-
-
- - Like - - - Share - -
+ +

H4 text inside ion-card-content

+

Paragraph text inside ion-card-content.

+
@@ -34,8 +20,8 @@ -

Card With An Inset Picture

-

Isn't it beautiful

+

Card With An Inset Picture, H2 text

+

Isn't it beautiful.

@@ -45,21 +31,6 @@ -
- - - 255 - - - - Reply - - - - Forward - -
-