fix(card): adjust styles to match MD (#16093)

* fix(card-content): remove top padding when after header * fix(card): adjust text weight, sizes, and colors * fix(card): adjust border-radius and box-shadow * fix(card): make title/subtitle margin interchangeable
ionic-team · Oct 25, 2018 · 44b0eab · 44b0eab
1 parent ef6895a
commit 44b0eab
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 5 deletions.
diff --git a/core/src/components/card-content/card-content.md.scss b/core/src/components/card-content/card-content.md.scss
@@ -44,3 +44,7 @@
     line-height: 1.5;
   }
 }
+
+ion-card-header + .card-content-md {
+  padding-top: 0;
+}
diff --git a/core/src/components/card-header/card-header.md.scss b/core/src/components/card-header/card-header.md.scss
@@ -7,3 +7,8 @@
 :host {
   @include padding($card-md-header-padding-top, $card-md-header-padding-end, $card-md-header-padding-bottom, $card-md-header-padding-start);
 }
+
+::slotted(ion-card-title:not(:first-child)),
+::slotted(ion-card-subtitle:not(:first-child)) {
+  margin-top: 8px;
+}
diff --git a/core/src/components/card-subtitle/card-subtitle.md.scss b/core/src/components/card-subtitle/card-subtitle.md.scss
@@ -11,4 +11,5 @@
   @include padding($card-md-subtitle-padding-top, $card-md-subtitle-padding-end, $card-md-subtitle-padding-bottom, $card-md-subtitle-padding-start);
 
   font-size: $card-md-subtitle-font-size;
+  font-weight: 500;
 }
diff --git a/core/src/components/card-subtitle/card-subtitle.md.vars.scss b/core/src/components/card-subtitle/card-subtitle.md.vars.scss
@@ -25,7 +25,7 @@ $card-md-subtitle-margin-top:           0 !default;
 $card-md-subtitle-margin-end:           $card-md-subtitle-margin-top !default;
 
 /// @prop - Margin bottom of the card subtitle
-$card-md-subtitle-margin-bottom:        8px !default;
+$card-md-subtitle-margin-bottom:        0 !default;
 
 /// @prop - Margin start of the card subtitle
 $card-md-subtitle-margin-start:         $card-md-subtitle-margin-end !default;

diff --git a/core/src/components/card-title/card-title.md.scss b/core/src/components/card-title/card-title.md.scss
@@ -11,6 +11,7 @@
   @include padding($card-md-title-padding-top, $card-md-title-padding-end, $card-md-title-padding-bottom, $card-md-title-padding-start);
 
   font-size: $card-md-title-font-size;
+  font-weight: 500;
 
   line-height: 1.2;
 }
diff --git a/core/src/components/card-title/card-title.md.vars.scss b/core/src/components/card-title/card-title.md.vars.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the card title
-$card-md-title-font-size:             24px !default;
+$card-md-title-font-size:             20px !default;
 
 /// @prop - Padding top of the card title
 $card-md-title-padding-top:           0 !default;

diff --git a/core/src/components/card/card.md.vars.scss b/core/src/components/card/card.md.vars.scss
@@ -19,10 +19,10 @@ $card-md-margin-start:                10px !default;
 $card-md-background-color:            $item-md-background !default;
 
 /// @prop - Box shadow of the card
-$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-box-shadow:                  0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;
 
 /// @prop - Border radius of the card
-$card-md-border-radius:               2px !default;
+$card-md-border-radius:               4px !default;
 
 /// @prop - Font size of the card
 $card-md-font-size:                   14px !default;
@@ -31,4 +31,4 @@ $card-md-font-size:                   14px !default;
 $card-md-line-height:                 1.5 !default;
 
 /// @prop - Color of the card text
-$card-md-text-color:                  $text-color-step-150 !default;
+$card-md-text-color:                  $text-color-step-450 !default;