Skip to content

feat(card): align with 2018 material design spec #12731

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Sep 19, 2018
Merged

feat(card): align with 2018 material design spec #12731

merged 1 commit into from
Sep 19, 2018

Conversation

crisbeto
Copy link
Member

Aligns the card component with the latest Material Design spec. Also fixes an issue where the border radius wasn't being applied to the image inside the card.

material-cb7ec firebaseapp com_card
localhost_4200_card

@crisbeto crisbeto added P2 The issue is important to a large percentage of users, with a workaround target: major This PR is targeted for the next major release labels Aug 18, 2018
@crisbeto crisbeto requested a review from jelbourn as a code owner August 18, 2018 18:09
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Aug 18, 2018
devversion
devversion reviewed Aug 18, 2018
View reviewed changes
src/lib/card/card.scss Outdated
width: calc(100% + 48px);
margin: 0 -24px 16px -24px;
width: calc(100% + #{$mat-card-padding * 2});
margin: 0 $mat-card-padding * -1 16px $mat-card-padding * -1;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Out of curiosity: why not just -$mat-card-padding? Maybe just a preference though.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's because SASS evaluates the last two margins to 16px - $mat-card-padding.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I see. Thanks

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(-$mat-card-padding)?

jelbourn
jelbourn reviewed Aug 20, 2018
View reviewed changes
src/lib/card/card.scss Outdated
margin-left: -16px;
margin-right: -16px;
margin-left: $mat-card-padding / -2;
margin-right: $mat-card-padding / -2;
Copy link
Member

@jelbourn jelbourn Aug 20, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd prefer this to be -($mat-card-padding / 2) or -$mat-card-padding / 2

src/lib/card/card.scss Outdated
width: calc(100% + 48px);
margin: 0 -24px 16px -24px;
width: calc(100% + #{$mat-card-padding * 2});
margin: 0 $mat-card-padding * -1 16px $mat-card-padding * -1;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(-$mat-card-padding)?

@crisbeto
Copy link
Member Author

Feedback has been addressed.

jelbourn
jelbourn approved these changes Aug 20, 2018
View reviewed changes
Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@jelbourn jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note labels Aug 20, 2018
@jelbourn
Copy link
Member

Caretaker note: definitely going to be a lot of screen diffs on this one

@ngbot
Copy link

ngbot bot commented Aug 23, 2018

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

@josephperrott josephperrott added action: merge The PR is ready for merge by the caretaker and removed action: merge The PR is ready for merge by the caretaker labels Aug 24, 2018
@ngbot
Copy link

ngbot bot commented Sep 18, 2018

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

3 similar comments
@ngbot
Copy link

ngbot bot commented Sep 18, 2018

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

@ngbot
Copy link

ngbot bot commented Sep 18, 2018

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

@ngbot
Copy link

ngbot bot commented Sep 18, 2018

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

@crisbeto
feat(card): align with 2018 material design spec
ddaf2f0 
Aligns the card component with the latest Material Design spec. Also fixes an issue where the border radius wasn't being applied to the image inside the card.
@mmalerba mmalerba merged commit 484dc8b into angular:master Sep 19, 2018
@intellix intellix mentioned this pull request Jan 4, 2019
Closed
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@devversion devversion devversion left review comments

@jelbourn jelbourn jelbourn approved these changes

Assignees

@jelbourn jelbourn

Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note P2 The issue is important to a large percentage of users, with a workaround target: major This PR is targeted for the next major release
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@crisbeto @jelbourn @devversion @googlebot @josephperrott @mmalerba