javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Cam Wiegert
2018-10-25 16:55:54 -05:00
committed by GitHub
parent ef6895acbd
commit 44b0eaba85
7 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/card-content/card-content.md.scss
View File

@@ -44,3 +44,7 @@
line-height: 1.5;
}
}
ion-card-header + .card-content-md {
padding-top: 0;
}

5
core/src/components/card-header/card-header.md.scss
View File

@@ -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;
}

1
core/src/components/card-subtitle/card-subtitle.md.scss
View File

@@ -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;
}

2
core/src/components/card-subtitle/card-subtitle.md.vars.scss
View File

@@ -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;

1
core/src/components/card-title/card-title.md.scss
View File

@@ -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;
}

2
core/src/components/card-title/card-title.md.vars.scss
View File

@@ -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;

6
core/src/components/card/card.md.vars.scss
View File

@@ -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;