Skip to content
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

chore(card): Update corner radius from 2px to 4px #2034

Closed
wants to merge 24 commits into from
Closed

chore(card): Update corner radius from 2px to 4px #2034

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
f9e256f
chore(card): Remove layouts (WIP)
acdvorak Jan 18, 2018
d7c537f
WIP: Add __action-buttons and __action-icons classes
acdvorak Jan 18, 2018
1cbe378
WIP: Refactoring
acdvorak Jan 18, 2018
d3bace3
WIP: Add __media classes, rename other classes
acdvorak Jan 18, 2018
51fa44d
WIP: Rename classes
acdvorak Jan 18, 2018
d363411
WIP: Refactoring and add "Share" action icon
acdvorak Jan 18, 2018
4c08741
feat(base): shouldBubble now defaults to `true`
acdvorak Jan 19, 2018
aac2ca2
WIP: Spec alignment
acdvorak Jan 19, 2018
3604c49
WIP: Add example of a "small" card
acdvorak Jan 19, 2018
da234a4
WIP: Add music album example
acdvorak Jan 19, 2018
059a325
WIP: Rename class, reorder styles
acdvorak Jan 19, 2018
b6a5993
WIP: Add margin between buttons and icons
acdvorak Jan 19, 2018
e27c1c1
WIP: Start updating README
acdvorak Jan 19, 2018
e41ddbf
Merge branch 'master' into chore/card/remove-layouts
acdvorak Jan 20, 2018
bb574cc
WIP: Update cards on theme demo page
acdvorak Jan 20, 2018
0bcb922
WIP: Fix example card background colors
acdvorak Jan 20, 2018
aeaa446
WIP: Add mixins; refactor
acdvorak Jan 20, 2018
482dbe8
WIP: Update README
acdvorak Jan 20, 2018
06c0920
WIP: Set elevation color automatically
acdvorak Jan 20, 2018
1750a9f
WIP: Removed unused CSS class
acdvorak Jan 20, 2018
c9b6278
Revert "feat(base): shouldBubble now defaults to `true`"
acdvorak Jan 20, 2018
86f2083
Merge remote-tracking branch 'origin/master' into chore/card/remove-l…
acdvorak Jan 22, 2018
6fb8e12
WIP: __media inherits border-radius from card; add radius mixin
acdvorak Jan 22, 2018
f5242da
chore(card): Update corner radius from 2px to 4px
acdvorak Jan 22, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
465 changes: 196 additions & 269 deletions demos/card.html
View file
Open in desktop

Large diffs are not rendered by default.

146 changes: 146 additions & 0 deletions demos/card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,149 @@
@import "../packages/mdc-card/mdc-card";
@import "../packages/mdc-checkbox/mdc-checkbox";
@import "../packages/mdc-form-field/mdc-form-field";
@import "../packages/mdc-icon-toggle/mdc-icon-toggle";
@import "../packages/mdc-list/mdc-list";
@import "../packages/mdc-ripple/mixins";

.hero {
height: auto;
padding: 24px;
}

.demo-card-collection {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
padding: 0 24px;
}

.demo-card {
width: 350px;
margin: 48px;
}

.demo-card--photo-album {
width: 200px;
}

.demo-card-toggles {
margin: 24px;
padding: 24px;
text-align: center;
}

//
// Small
//

.demo-card__action-icons--centered {
justify-content: center;
}

.demo-card__action-buttons--text {
padding: 8px;
}

//
// Music
//

.demo-card__music-row {
display: flex;
}

.demo-card__media--music {
width: 110px;
}

.demo-card__music-info {
display: flex;
flex-direction: column;
padding: 8px 16px;
}

//
// Text
//

.demo-card__primary {
padding: 1rem;
}

.demo-card__title {
margin: 0;
}

.demo-card__subtitle {
@include mdc-theme-prop(color, text-secondary-on-background);

margin: 0;
}

.demo-card__secondary {
@include mdc-theme-prop(color, text-secondary-on-background);

padding: 0 1rem 8px 1rem;
}

//
// Images
//

.demo-card__media {
background-image: url("/images/1-1.jpg");
}

.demo-card__media--16-9 {
background-image: url("/images/16-9.jpg");
}

.demo-card__media-content--with-title {
display: flex;
flex-direction: column;
justify-content: flex-end;
}

.demo-card__media-title {
padding: 8px 16px;
background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
color: white;
}

// TODO(acdvorak): Delete images/4-3.jpg - 4:3 ratio is not in spec

//
// News headlines
//

.demo-card-article-group-heading {
@include mdc-theme-prop(color, text-secondary-on-light);

padding: 8px 16px;
}

.demo-card-article {
@include mdc-ripple-surface;
@include mdc-ripple-radius;
@include mdc-states;

padding: 16px;
text-decoration: none;
color: inherit;
overflow: hidden;

&:focus {
outline: none;
}
}

.demo-card-article__title {
margin: 0 0 4px 0;
}

.demo-card-article__snippet {
@include mdc-theme-prop(color, text-secondary-on-light);

margin: 0;
}
26 changes: 3 additions & 23 deletions demos/theme/_theme-shared.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
@import "../../packages/mdc-theme/variables";
@import "../../packages/mdc-toolbar/variables";
@import "../common";
@import "../card";
@import "./menu";

// stylelint-disable selector-class-pattern, selector-max-type, scss/dollar-variable-pattern
Expand Down Expand Up @@ -264,33 +265,12 @@ figure {

.demo-card-wrapper {
display: inline-block;
width: 350px;
margin: 0 24px 24px 0;
vertical-align: top;
}

.demo-card--with-avatar .mdc-card__primary {
position: relative;
}

.demo-card--with-avatar .demo-card__avatar {
position: absolute;
width: 2.5rem; // 40sp
height: 2.5rem; // 40sp
border-radius: 50%;
background: #bdbdbd;
}

.demo-card--with-avatar .mdc-card__title,
.demo-card--with-avatar .mdc-card__subtitle {
margin-left: 56px;
}

.demo-card--small .mdc-card__media {
height: 10.938rem; // 175sp, for 1:1 ratio with 175sp demo card width
background-image: url(/images/1-1.jpg);
background-repeat: no-repeat;
background-size: cover;
.demo-card {
margin: 0;
}

//
Expand Down
76 changes: 37 additions & 39 deletions demos/theme/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,46 +359,44 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
</h3>

<div class="demo-card-wrapper">
<div class="mdc-card">
<section class="mdc-card__primary">
<h1 class="mdc-card__title mdc-card__title--large">Title goes here</h1>
<h3 class="mdc-card__subtitle">Subtitle here</h3>
</section>
<section class="mdc-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</section>
<section class="mdc-card__actions">
<button class="mdc-button mdc-button--compact mdc-card__action">Action 1</button>
<button class="mdc-button mdc-button--compact mdc-card__action">Action 2</button>
</section>
</div>
</div>

<div class="demo-card-wrapper">
<div class="mdc-card demo-card--with-avatar">
<section class="mdc-card__primary">
<div class="demo-card__avatar"></div>
<h1 class="mdc-card__title">Title</h1>
<h3 class="mdc-card__subtitle">Subhead</h3>
</section>
<section class="mdc-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
</section>
<section class="mdc-card__actions">
<button class="mdc-button mdc-button--compact mdc-card__action">Action 1</button>
<button class="mdc-button mdc-button--compact mdc-card__action">Action 2</button>
</section>
</div>
</div>

<div class="demo-card-wrapper">
<div class="mdc-card demo-card--small">
<section class="mdc-card__media">
<h1 class="mdc-card__title mdc-card__title--large">Title</h1>
<div class="mdc-card demo-card">
<section class="mdc-card__media mdc-card__media--16-9 demo-card__media demo-card__media--16-9"></section>
<section>
<div class="demo-card__primary">
<h2 class="demo-card__title mdc-typography--title">Our Changing Planet</h2>
<h3 class="demo-card__subtitle mdc-typography--subheading1">by Kurt Wagner</h3>
</div>
<div class="demo-card__secondary mdc-typography--body1">
Visit ten places on our planet that are undergoing the biggest changes today.
</div>
</section>
<section class="mdc-card__actions">
<button class="mdc-button mdc-button--compact mdc-card__action">Action 1</button>
<section class="mdc-card__action-bar">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action">Read</button>
<button class="mdc-button mdc-card__action">Bookmark</button>
</div>
<div class="mdc-card__action-icons">
<i class="mdc-icon-toggle material-icons mdc-card__action mdc-card__action--icon"
tabindex="0"
role="button"
aria-pressed="false"
aria-label="Add to favorites"
title="Add to favorites"
data-toggle-on='{"content": "favorite", "label": "Remove from favorites"}'
data-toggle-off='{"content": "favorite_border", "label": "Add to favorites"}'>
favorite_border
</i>
<button class="mdc-button mdc-card__action mdc-card__action--icon" title="Share">
<i class="material-icons" role="presentation">
share
</i>
</button>
<button class="mdc-button mdc-card__action mdc-card__action--icon" title="More options">
<i class="material-icons" role="presentation">
more_vert
</i>
</button>
</div>
</section>
</div>
</div>
Expand Down
Loading