From f9e256f544aeb70d33c2de7c87ce7086d078b59c Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Wed, 17 Jan 2018 17:30:51 -0800 Subject: [PATCH 01/86] chore(card): Remove layouts (WIP) --- demos/card.html | 260 +++++++++++--------------------- demos/card.scss | 39 +++++ packages/mdc-card/mdc-card.scss | 171 +++------------------ 3 files changed, 142 insertions(+), 328 deletions(-) diff --git a/demos/card.html b/demos/card.html index 04c56ef2ff7..8b7d020879d 100644 --- a/demos/card.html +++ b/demos/card.html @@ -21,6 +21,7 @@ + @@ -106,13 +107,13 @@ flex-flow: row wrap; align-content: left; justify-content: left; + align-items: flex-start; } #demo-wrapper .demo-card { margin: 24px; min-width: 320px; } - @@ -144,193 +145,102 @@

Subtitle here

-
-
- -
- - - -
-
+
+
+ +
+ + + +
-
+ +
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. -
-
-
- -
-
-
-
-

Title

-

Subhead

-
-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. -
-
- - -
-
-
- -
-
-
-
-

Title

-

Subhead

-
-
-
- - -
-
-
- -
-
-
-
-

Title goes here

-

Subtitle here

-
-
- - -
-
-
- -
-
-
-

Title goes here

-

Subtitle here

-
-
- 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. -
-
- - -
-
-
- -
-
-
-

Title goes here

-

Subtitle here

-
-
- - -
-
-
- -
-
-
-

Title

-
-
- -
-
-
- -
-
-
-
-

Title here

-

Subtitle here

-
- -
-
- - -
-
-
- -
-
-
-
-

Title here

-

Subtitle here

-
- -
-
- - -
-
+
+ +

Copper on the rise

+

+ Copper price soars amid global market optimism and increased demand. +

+ + +
+ + +

U.S. tech startups rebound

+

+ Favorable business conditions have allowed startups to secure more fundraising deals compared to last + year. +

+ + +
+ + +

Asia's clean energy ambitions

+

+ China plans to invest billions of dollars for the development of over 300 clean energy projects in + Southeast Asia. +

+ + +
+ +
+ + All Business Headlines + arrow_forward + +
-
-
-
-
-

Title here

-

Subtitle here

-
- -
-
- - -
-
+
+
+
+

Title

+

Subhead

+
+
+
+ + +
-
-
-
- -
- - - -
-
-
+
+
+

Title

+
+
+ +
-
- + + diff --git a/demos/card.scss b/demos/card.scss index 93e156f4eb5..bd8eb965e69 100644 --- a/demos/card.scss +++ b/demos/card.scss @@ -19,3 +19,42 @@ @import "../packages/mdc-card/mdc-card"; @import "../packages/mdc-checkbox/mdc-checkbox"; @import "../packages/mdc-form-field/mdc-form-field"; +@import "../packages/mdc-list/mdc-list"; +@import "../packages/mdc-ripple/mixins"; + +.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 { + margin: 0; +} + +.mdc-card__actions--full-bleed .demo-card-action { + display: flex; + align-items: center; + text-align: left; + + [dir="rtl"] & { + text-align: right; + } +} + +.mdc-card__actions--full-bleed .demo-card-action__text { + flex-grow: 1; +} diff --git a/packages/mdc-card/mdc-card.scss b/packages/mdc-card/mdc-card.scss index 05a20a548c1..853e675f9ac 100644 --- a/packages/mdc-card/mdc-card.scss +++ b/packages/mdc-card/mdc-card.scss @@ -20,169 +20,34 @@ @import "@material/rtl/mixins"; // postcss-bem-linter: define card + .mdc-card { @include mdc-elevation(2); display: flex; flex-direction: column; - justify-content: flex-end; - box-sizing: border-box; - padding: 0; border-radius: 2px; - overflow: hidden; - - &__primary { - padding: 16px; - - // Add extra space before large title. - .mdc-card__title--large { - padding-top: 8px; - } - - // Add extra padding if this is the last block. - &:last-child { - padding-bottom: 24px; - } - } - - &__supporting-text { - @include mdc-typography(body1); - @include mdc-theme-prop(color, text-primary-on-light); - - box-sizing: border-box; - padding: 8px 16px; - - @include mdc-theme-dark(".mdc-card") { - @include mdc-theme-prop(color, text-primary-on-dark); - } - - // Remove top padding if immediately preceded by a primary block. - .mdc-card__primary + & { - margin-top: -8px; - padding-top: 0; - } - - // Add extra padding if this is the last block. - &:last-child { - padding-bottom: 24px; - } - } - - &__actions { - display: flex; - box-sizing: border-box; - padding: 8px; - - // Adjust text color for dark theme. - @include mdc-theme-dark(".mdc-card") { - @include mdc-theme-prop(color, text-primary-on-dark); - } - - // Tweak button paddings and margins when they're used as actions - .mdc-card__action { - margin: 0 8px 0 0; - - @include mdc-rtl { - margin: 0 0 0 8px; - } - } - - .mdc-card__action:last-child { - @include mdc-rtl-reflexive-box(margin, right, 0); - } - - // Vertical actions (one per line) - &--vertical { - flex-flow: column; - align-items: flex-start; - - .mdc-card__action { - margin: 0 0 4px; - } - - .mdc-card__action:last-child { - margin-bottom: 0; - } - } - } - - &__media { - display: flex; - flex-direction: column; - justify-content: flex-end; - box-sizing: border-box; - padding: 16px; - } - - &__media-item { - display: inline-block; - width: auto; - height: 80px; - margin: 16px 0 0; - padding: 0; - - @each $mult, $name in (1.5: "1dot5", 2: "2", 3: "3") { - // postcss-bem-linter: ignore - &--#{$name}x { - width: auto; - height: $mult * 80px; - } - } - } - - &__title { - @include mdc-typography(body2); - @include mdc-theme-prop(color, text-primary-on-light); - - // Adjust text color for dark theme. - @include mdc-theme-dark(".mdc-card") { - @include mdc-theme-prop(color, text-primary-on-dark); - } - - margin: -.063rem 0; // -1sp 0 - } - - &__title--large { - @include mdc-typography(headline); - - margin: 0; - } - - &__subtitle { - @include mdc-typography(body1); - @include mdc-theme-prop(color, text-primary-on-light); - - // Adjust text color for dark theme. - @include mdc-theme-dark(".mdc-card") { - @include mdc-theme-prop(color, text-primary-on-dark); - } - - margin: -.063rem 0; // -1sp 0 - } - - &__horizontal-block { - @include mdc-rtl-reflexive-property(padding, 0, 16px); +} - display: flex; - flex-direction: row; - align-items: flex-start; - justify-content: space-between; - box-sizing: border-box; +.mdc-card__actions { + display: flex; + box-sizing: border-box; + padding: 8px; +} - // postcss-bem-linter: ignore - .mdc-card__actions--vertical { - margin: 16px; - } +.mdc-card__actions--full-bleed { + padding: 0; +} - .mdc-card__media-item { - @include mdc-rtl-reflexive-box(margin, left, 16px); - } +// Tweak button padding and margin when they're used as actions. +.mdc-card__action:not(:last-child) { + @include mdc-rtl-reflexive-box(margin, right, 8px); +} - // postcss-bem-linter: ignore - .mdc-card__media-item--3x { - margin-bottom: 16px; - } - } +.mdc-card__actions--full-bleed .mdc-card__action { + box-sizing: content-box; + width: 100%; + padding: 8px 16px; } // postcss-bem-linter: end From d7c537f7e590bc87851dc3b881301473ed323bad Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Thu, 18 Jan 2018 09:54:10 -0800 Subject: [PATCH 02/86] WIP: Add __action-buttons and __action-icons classes --- demos/card.html | 138 +++++++++++++------------------- demos/card.scss | 62 +++++++++++--- packages/mdc-card/mdc-card.scss | 38 +++++++-- 3 files changed, 140 insertions(+), 98 deletions(-) diff --git a/demos/card.html b/demos/card.html index 8b7d020879d..9037b1d474e 100644 --- a/demos/card.html +++ b/demos/card.html @@ -26,31 +26,6 @@ @@ -128,19 +71,37 @@ +
+
-
-
-

Title goes here

-

Subtitle here

-
-
- - -
+
+
+

Our Changing Planet

+

by Kurt Wagner

+
+
+ Visit ten places on our planet that are undergoing the biggest changes today. +
+
+
+ + +
+
+ + favorite_border + +
+
@@ -159,8 +120,12 @@

Subtitle here

-
+
+
Headlines
+ +
+

Copper on the rise

@@ -190,15 +155,13 @@

Asia's clean energ
-
- - All Business Headlines - arrow_forward - -
+ + All Business Headlines + arrow_forward +

-
+

Title

@@ -206,17 +169,17 @@

Subhead

- - + +
-
+

Title

- +
@@ -225,12 +188,17 @@

Title

diff --git a/demos/card.scss b/demos/card.scss index a3790f19179..2c9c922765e 100644 --- a/demos/card.scss +++ b/demos/card.scss @@ -23,6 +23,11 @@ @import "../packages/mdc-list/mdc-list"; @import "../packages/mdc-ripple/mixins"; +a { + color: inherit; + text-decoration: none; +} + .hero { height: auto; padding: 24px; @@ -67,12 +72,18 @@ // Music // +.demo-card--music-album { + border-radius: 16px 0; +} + .demo-card__music-row { display: flex; + border-top-left-radius: inherit; } .demo-card__media--music { width: 110px; + border-top-left-radius: inherit; } .demo-card__music-info { diff --git a/packages/mdc-card/README.md b/packages/mdc-card/README.md index c4534ca070d..e4d67dc7433 100644 --- a/packages/mdc-card/README.md +++ b/packages/mdc-card/README.md @@ -164,6 +164,7 @@ To have a single action button take up the entire width of the action bar, use t CSS Class | Description --- | --- `mdc-card` | A card +`mdc-card__primary-action` | The main tappable area of the card, which typically wraps everything in the card except `mdc-card__action-bar` `mdc-card__media` | Media area that displays a custom `background-image` with `background-size: cover` `mdc-card__media--square` | Automatically scales the media area's height to equal its width `mdc-card__media--16-9` | Automatically scales the media area's height according to its width, maintaining a 16:9 aspect ratio @@ -177,9 +178,7 @@ CSS Class | Description ### Sass Mixins - Mixin | Description --- | --- `mdc-card-fill-color($color)` | Sets the fill color of a `mdc-card` `mdc-card-media-aspect-ratio($width-unitless, $height-unitless)` | Automatically sets the height of the `mdc-card__media` subelement to maintain a given aspect ratio based on its width - diff --git a/packages/mdc-card/mdc-card.scss b/packages/mdc-card/mdc-card.scss index 40c73240902..262977246b9 100644 --- a/packages/mdc-card/mdc-card.scss +++ b/packages/mdc-card/mdc-card.scss @@ -70,6 +70,34 @@ left: 0; } +// +// Primary action +// + +.mdc-card__primary-action { + @include mdc-ripple-surface; + @include mdc-ripple-radius; + @include mdc-states; + + display: flex; + flex-direction: column; + overflow: hidden; + + &:focus { + outline: 0 none; + } +} + +.mdc-card__primary-action:first-child { + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} + +.mdc-card__primary-action:last-child { + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; +} + // // Action bar // From 4bbfd02e97112fc0df4092730b5a54e80bae06c0 Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Mon, 22 Jan 2018 19:31:10 -0800 Subject: [PATCH 24/86] Revert "WIP: Remove mdc-card-corner-radius mixin" This reverts commit 0cb61b01eb9fb2e90778535e4fdd056c2535f58b. --- packages/mdc-card/README.md | 1 + packages/mdc-card/_mixins.scss | 4 ++++ packages/mdc-card/mdc-card.scss | 2 +- 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/mdc-card/README.md b/packages/mdc-card/README.md index c4534ca070d..96cf730cf60 100644 --- a/packages/mdc-card/README.md +++ b/packages/mdc-card/README.md @@ -182,4 +182,5 @@ Mixin | Description --- | --- `mdc-card-fill-color($color)` | Sets the fill color of a `mdc-card` `mdc-card-media-aspect-ratio($width-unitless, $height-unitless)` | Automatically sets the height of the `mdc-card__media` subelement to maintain a given aspect ratio based on its width +`mdc-card-corner-radius($radius)` | Sets the corner radius of a card diff --git a/packages/mdc-card/_mixins.scss b/packages/mdc-card/_mixins.scss index 6d4101e2a71..f4d0485b9b6 100644 --- a/packages/mdc-card/_mixins.scss +++ b/packages/mdc-card/_mixins.scss @@ -31,6 +31,10 @@ } } +@mixin mdc-card-corner-radius($radius) { + border-radius: $radius; +} + // // Private // diff --git a/packages/mdc-card/mdc-card.scss b/packages/mdc-card/mdc-card.scss index 40c73240902..b0b105cf089 100644 --- a/packages/mdc-card/mdc-card.scss +++ b/packages/mdc-card/mdc-card.scss @@ -26,10 +26,10 @@ .mdc-card { @include mdc-elevation(2, text-primary-on-background); @include mdc-card-fill-color(background); + @include mdc-card-corner-radius(2px); display: flex; flex-direction: column; - border-radius: 2px; } // From dc4c5c3ce79a7f574c0176c6baf75489e3459fd6 Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Mon, 22 Jan 2018 19:48:50 -0800 Subject: [PATCH 25/86] WIP: Rename `__action-bar` to `__actions` for backward compatibility --- demos/card.html | 8 ++++---- demos/theme/index.html | 2 +- packages/mdc-card/README.md | 14 ++++++-------- packages/mdc-card/mdc-card.scss | 10 +++++----- 4 files changed, 16 insertions(+), 18 deletions(-) diff --git a/demos/card.html b/demos/card.html index 84b2be9ec71..73921873c44 100644 --- a/demos/card.html +++ b/demos/card.html @@ -52,7 +52,7 @@

by Kurt Wagner

Visit ten places on our planet that are undergoing the biggest changes today.
-
+
@@ -129,7 +129,7 @@

Asia's clean energ
-
+
All Business Headlines arrow_forward @@ -145,7 +145,7 @@

Asia's clean energ

-
+
Asia's clean energ
-
+
Rate this album
by Kurt Wagner Visit ten places on our planet that are undergoing the biggest changes today.
-
+
diff --git a/packages/mdc-card/README.md b/packages/mdc-card/README.md index 96cf730cf60..41253a450b4 100644 --- a/packages/mdc-card/README.md +++ b/packages/mdc-card/README.md @@ -54,7 +54,7 @@ Fully-featured:
Title
-
+
Action 1
Action 2
@@ -109,7 +109,7 @@ and the optional modifier classes shown below. ##### Actions ```html -
+
@@ -119,7 +119,7 @@ This area is used for showing different actions the user can take. It's typicall above, or with icon buttons, as below: ```html -
+
@@ -151,7 +151,7 @@ should use the `mdc-card__action--icon` class. To have a single action button take up the entire width of the action bar, use the `--full-bleed` modifier: ```html -
+
All Business Headlines arrow_forward @@ -168,8 +168,8 @@ CSS Class | Description `mdc-card__media--square` | Automatically scales the media area's height to equal its width `mdc-card__media--16-9` | Automatically scales the media area's height according to its width, maintaining a 16:9 aspect ratio `mdc-card__media-content` | An absolutely-positioned box the same size as the media area, for displaying a title or icon on top of the `background-image` -`mdc-card__action-bar` | Row of primary and supplemental actions -`mdc-card__action-bar--full-bleed` | Eliminates the action bar's padding padding, and causes its child `mdc-card__action` to consume 100% of the action bar's width +`mdc-card__actions` | Row containing action buttons and/or icons +`mdc-card__actions--full-bleed` | Removes the action area's padding and causes its only child (an `mdc-card__action` element) to consume 100% of the action area's width `mdc-card__action-buttons` | A group of action buttons, displayed on the left side of the card (in LTR), adjacent to `mdc-card__action-icons` `mdc-card__action-icons` | A group of supplemental action icons, displayed on the right side of the card (in LTR), adjacent to `__action-buttons` `mdc-card__action` | An individual action button or icon @@ -177,10 +177,8 @@ CSS Class | Description ### Sass Mixins - Mixin | Description --- | --- `mdc-card-fill-color($color)` | Sets the fill color of a `mdc-card` `mdc-card-media-aspect-ratio($width-unitless, $height-unitless)` | Automatically sets the height of the `mdc-card__media` subelement to maintain a given aspect ratio based on its width `mdc-card-corner-radius($radius)` | Sets the corner radius of a card - diff --git a/packages/mdc-card/mdc-card.scss b/packages/mdc-card/mdc-card.scss index b0b105cf089..d85fec58211 100644 --- a/packages/mdc-card/mdc-card.scss +++ b/packages/mdc-card/mdc-card.scss @@ -71,10 +71,10 @@ } // -// Action bar +// Action row // -.mdc-card__action-bar { +.mdc-card__actions { display: flex; align-items: center; box-sizing: border-box; @@ -82,7 +82,7 @@ padding: 8px; } -.mdc-card__action-bar--full-bleed { +.mdc-card__actions--full-bleed { padding: 0; } @@ -103,7 +103,7 @@ } // -// Actions +// Action items // .mdc-card__action { @@ -128,7 +128,7 @@ padding: 0 8px; } -.mdc-card__action-bar--full-bleed .mdc-card__action { +.mdc-card__actions--full-bleed .mdc-card__action { display: flex; justify-content: space-between; width: 100%; From 6f4acb8a534bf5c4c6ff514107666cb9d669d127 Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Mon, 22 Jan 2018 19:50:46 -0800 Subject: [PATCH 26/86] WIP: Reorder mixins --- packages/mdc-card/README.md | 2 +- packages/mdc-card/_mixins.scss | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/mdc-card/README.md b/packages/mdc-card/README.md index 41253a450b4..ba098470766 100644 --- a/packages/mdc-card/README.md +++ b/packages/mdc-card/README.md @@ -180,5 +180,5 @@ CSS Class | Description Mixin | Description --- | --- `mdc-card-fill-color($color)` | Sets the fill color of a `mdc-card` -`mdc-card-media-aspect-ratio($width-unitless, $height-unitless)` | Automatically sets the height of the `mdc-card__media` subelement to maintain a given aspect ratio based on its width `mdc-card-corner-radius($radius)` | Sets the corner radius of a card +`mdc-card-media-aspect-ratio($width-unitless, $height-unitless)` | Automatically sets the height of the `mdc-card__media` subelement to maintain a given aspect ratio based on its width diff --git a/packages/mdc-card/_mixins.scss b/packages/mdc-card/_mixins.scss index f4d0485b9b6..e053e255a83 100644 --- a/packages/mdc-card/_mixins.scss +++ b/packages/mdc-card/_mixins.scss @@ -24,6 +24,10 @@ @include mdc-theme-prop(background-color, $color); } +@mixin mdc-card-corner-radius($radius) { + border-radius: $radius; +} + @mixin mdc-card-media-aspect-ratio($width-unitless, $height-unitless) { &::before { // This clever trick brought to you by: http://www.mademyday.de/css-height-equals-width-with-pure-css.html @@ -31,10 +35,6 @@ } } -@mixin mdc-card-corner-radius($radius) { - border-radius: $radius; -} - // // Private // From 1f32dcd2956e216c38a95a9a4df2bf9328294081 Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Tue, 23 Jan 2018 15:21:30 -0800 Subject: [PATCH 27/86] WIP: Don't override elevation color --- packages/mdc-card/mdc-card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mdc-card/mdc-card.scss b/packages/mdc-card/mdc-card.scss index d85fec58211..281046caf10 100644 --- a/packages/mdc-card/mdc-card.scss +++ b/packages/mdc-card/mdc-card.scss @@ -24,7 +24,7 @@ // postcss-bem-linter: define card .mdc-card { - @include mdc-elevation(2, text-primary-on-background); + @include mdc-elevation(2); @include mdc-card-fill-color(background); @include mdc-card-corner-radius(2px); From 8ce2bac9d825862bf4210a36ff26908eece26897 Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Tue, 23 Jan 2018 17:11:14 -0800 Subject: [PATCH 28/86] WIP: Minor cleanup --- packages/mdc-card/README.md | 8 ++++---- packages/mdc-card/mdc-card.scss | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/mdc-card/README.md b/packages/mdc-card/README.md index ba098470766..5ecf3570a70 100644 --- a/packages/mdc-card/README.md +++ b/packages/mdc-card/README.md @@ -56,8 +56,8 @@ Fully-featured:
-
Action 1
-
Action 2
+ +
share @@ -87,7 +87,7 @@ Cards are composed of different content blocks, which are typically laid out ver Because every app is different, there are no "standard" layouts for card content; each app should define their own. -However, MDC Card _does_ provide styles for two common card elements: _rich media_ (images or video) and _action bars_. +However, MDC Card _does_ provide styles for two common card elements: _rich media_ (images or video) and _actions_. ##### Rich media @@ -148,7 +148,7 @@ above, or with icon buttons, as below: Be sure to include the `mdc-card__action` class on every action for correct positioning. In addition, icon actions should use the `mdc-card__action--icon` class. -To have a single action button take up the entire width of the action bar, use the `--full-bleed` modifier: +To have a single action button take up the entire width of the action row, use the `--full-bleed` modifier: ```html
diff --git a/packages/mdc-card/mdc-card.scss b/packages/mdc-card/mdc-card.scss index 281046caf10..6a45a9a6283 100644 --- a/packages/mdc-card/mdc-card.scss +++ b/packages/mdc-card/mdc-card.scss @@ -156,7 +156,7 @@ padding: 0 4px; } -// Icon toggles are taller than buttons, so we need to adjust their margins to prevent the action bar from expanding. +// Icon toggles are taller than buttons, so we need to adjust their margins to prevent the action row from expanding. // stylelint-disable-next-line plugin/selector-bem-pattern .mdc-card__action--icon.mdc-icon-toggle { margin: -6px 0; From 6c5970f78788af3083174732922c3e74430ac399 Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Wed, 24 Jan 2018 13:10:17 -0800 Subject: [PATCH 29/86] WIP: Fix ripple overflow bug in IE 11 and Edge on demo page --- demos/card.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/demos/card.scss b/demos/card.scss index a3790f19179..c3f30d132e1 100644 --- a/demos/card.scss +++ b/demos/card.scss @@ -146,10 +146,11 @@ @include mdc-ripple-radius; @include mdc-states; + position: relative; // IE and Edge ignore `overflow: hidden` if the element is positioned statically + overflow: hidden; padding: 16px; text-decoration: none; color: inherit; - overflow: hidden; &:focus { outline: none; From dafbd045e93cc9555ddc00cbb85ebc07d2c845df Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Wed, 24 Jan 2018 14:01:33 -0800 Subject: [PATCH 30/86] WIP: Don't wrap icons in mdc-button --- demos/card.html | 44 ++++++----- demos/card.scss | 133 ++++++++++++++++++-------------- packages/mdc-card/mdc-card.scss | 19 ++--- 3 files changed, 107 insertions(+), 89 deletions(-) diff --git a/demos/card.html b/demos/card.html index 73921873c44..f8db687c854 100644 --- a/demos/card.html +++ b/demos/card.html @@ -68,12 +68,16 @@

by Kurt Wagner

data-toggle-off='{"content": "favorite_border", "label": "Add to favorites"}'> favorite_border - - + share + more_vert
@@ -100,7 +104,7 @@

by Kurt Wagner

- +

Copper on the rise

Copper price soars amid global market optimism and increased demand. @@ -109,7 +113,7 @@

Copper on the rise
- +

U.S. tech startups rebound

Favorable business conditions have allowed startups to secure more fundraising deals compared to last @@ -119,7 +123,7 @@

U.S. tech startups
- +

Asia's clean energy ambitions

China plans to invest billions of dollars for the development of over 300 clean energy projects in @@ -167,11 +171,11 @@

Asia's clean energ data-toggle-off='{"content": "bookmark_border", "label": "Add bookmark"}'> bookmark_border - + share

@@ -187,33 +191,33 @@

Asia's clean energ

-
Rate this album
+
Rate this album
- star_border - star_border - star_border - star_border - diff --git a/demos/card.scss b/demos/card.scss index c3f30d132e1..4eb6b64f3f6 100644 --- a/demos/card.scss +++ b/demos/card.scss @@ -36,15 +36,6 @@ padding: 0 24px; } -.demo-card { - width: 350px; - margin: 48px; -} - -.demo-card--photo-album { - width: 200px; -} - .demo-card-toggles { margin: 24px; padding: 24px; @@ -52,37 +43,63 @@ } // -// Small +// Card container // -.demo-card__action-icons--centered { - justify-content: center; +.demo-card { + width: 350px; + margin: 48px; } -.demo-card__action-buttons--text { - padding: 8px; +.demo-card--photo-album { + width: 200px; } // -// Music +// Images // -.demo-card__music-row { - display: flex; +.demo-card__media { + background-image: url("/images/1-1.jpg"); } -.demo-card__media--music { - width: 110px; +.demo-card__media--16-9 { + background-image: url("/images/16-9.jpg"); } -.demo-card__music-info { +.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; } // -// Text +// Focusable child elements +// + +.demo-card__ripple-surface { + @include mdc-ripple-surface; + @include mdc-ripple-radius; + @include mdc-states; + + &:not([data-mdc-ripple-is-unbounded]) { + position: relative; // IE and Edge ignore `overflow: hidden` if the element is positioned statically + overflow: hidden; + } + + &:focus { + outline: none; + } +} + +// +// Book card // .demo-card__primary { @@ -106,33 +123,7 @@ } // -// 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 +// Headlines card // .demo-card-article-group-heading { @@ -142,19 +133,9 @@ } .demo-card-article { - @include mdc-ripple-surface; - @include mdc-ripple-radius; - @include mdc-states; - - position: relative; // IE and Edge ignore `overflow: hidden` if the element is positioned statically - overflow: hidden; padding: 16px; text-decoration: none; color: inherit; - - &:focus { - outline: none; - } } .demo-card-article__title { @@ -166,3 +147,39 @@ margin: 0; } + +// +// Photo card +// + +.demo-card__action-icons--centered { + justify-content: center; +} + +// +// Music card +// + +.demo-card__music-row { + display: flex; +} + +.demo-card__media--music { + width: 110px; +} + +.demo-card__music-info { + display: flex; + flex-direction: column; + padding: 8px 16px; +} + +.demo-card__action-buttons--text-only { + margin-left: 8px; +} + +.demo-card__action-icon--star { + margin-left: 4px; + margin-right: 4px; + cursor: pointer; +} diff --git a/packages/mdc-card/mdc-card.scss b/packages/mdc-card/mdc-card.scss index 6a45a9a6283..f9afc3c7004 100644 --- a/packages/mdc-card/mdc-card.scss +++ b/packages/mdc-card/mdc-card.scss @@ -94,6 +94,8 @@ } .mdc-card__action-icons { + @include mdc-theme-prop(color, text-icon-on-background); + flex-grow: 1; justify-content: flex-end; } @@ -111,12 +113,12 @@ align-items: center; box-sizing: border-box; min-width: auto; - margin: 0; + margin: 0 10px; cursor: pointer; -} -.mdc-card__action:not(:last-child) { - @include mdc-rtl-reflexive-box(margin, right, 8px); + &:focus { + outline: none; + } } // @@ -134,6 +136,7 @@ width: 100%; height: auto; max-height: none; + margin: 0; padding: 8px 16px; text-align: left; @@ -147,13 +150,7 @@ // .mdc-card__action--icon:not(:disabled) { - @include mdc-theme-prop(color, text-icon-on-background); - @include mdc-states; -} - -// stylelint-disable-next-line plugin/selector-bem-pattern -.mdc-card__action--icon.mdc-button { - padding: 0 4px; + color: inherit; } // Icon toggles are taller than buttons, so we need to adjust their margins to prevent the action row from expanding. From 8f0db4db2245f13733ca3a75043315a403ed325d Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Wed, 24 Jan 2018 14:08:50 -0800 Subject: [PATCH 31/86] WIP: Use # and preventDefault instead of "javascript:" links --- demos/card.html | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/demos/card.html b/demos/card.html index f8db687c854..076fd46cd15 100644 --- a/demos/card.html +++ b/demos/card.html @@ -104,7 +104,7 @@

by Kurt Wagner

- +

Copper on the rise

Copper price soars amid global market optimism and increased demand. @@ -113,7 +113,7 @@

Copper on the rise
- +

U.S. tech startups rebound

Favorable business conditions have allowed startups to secure more fundraising deals compared to last @@ -123,7 +123,7 @@

U.S. tech startups
- +

Asia's clean energy ambitions

China plans to invest billions of dollars for the development of over 300 clean energy projects in @@ -134,7 +134,7 @@

Asia's clean energ
- + All Business Headlines arrow_forward @@ -262,6 +262,25 @@

Asia's clean energ [].forEach.call(document.querySelectorAll('.mdc-ripple-surface'), function(surface) { mdc.ripple.MDCRipple.attachTo(surface); }); + + function closest(elem, selector) { + if (elem.closest) { + return elem.closest(selector); + } + while (elem) { + if (matches(elem, selector)) { + return elem; + } + elem = elem.parentElement; + } + return null; + } + + document.addEventListener('click', function(evt) { + if (closest(evt.target, 'a[href="#"]')) { + evt.preventDefault(); + } + }) }); From 9fdced124ec65be30b81de4cebde48d1a24e134f Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Wed, 24 Jan 2018 14:12:26 -0800 Subject: [PATCH 32/86] WIP: Don't use event delegation for a single element --- demos/card.html | 32 ++++++++++++++------------------ 1 file changed, 14 insertions(+), 18 deletions(-) diff --git a/demos/card.html b/demos/card.html index 076fd46cd15..6e53d710a0b 100644 --- a/demos/card.html +++ b/demos/card.html @@ -232,14 +232,23 @@

Asia's clean energ + From fc36930d2bc44eabd456a1539fbef9b1fa6876c7 Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Wed, 24 Jan 2018 22:25:45 -0800 Subject: [PATCH 54/86] WIP: Remove preventDefault for dummy links Will create a separate PR --- demos/card.html | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/demos/card.html b/demos/card.html index 73a8bc597ad..d6887ca12fe 100644 --- a/demos/card.html +++ b/demos/card.html @@ -230,19 +230,6 @@

Asia's clean energ From f177ce062ef231a6efbcf1fa4f354d11ae4111aa Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Wed, 24 Jan 2018 22:29:53 -0800 Subject: [PATCH 55/86] WIP: Import common.js --- demos/card.html | 1 + 1 file changed, 1 insertion(+) diff --git a/demos/card.html b/demos/card.html index d6887ca12fe..ae37d523045 100644 --- a/demos/card.html +++ b/demos/card.html @@ -228,6 +228,7 @@

Asia's clean energ

+