From d6f311e93e0020daec2e38b4006c1ed2df49b936 Mon Sep 17 00:00:00 2001 From: "Kenneth G. Franqueiro" Date: Tue, 8 May 2018 15:57:35 -0700 Subject: [PATCH 1/7] fix(fab): Restore horizontal alignment in IE11 --- demos/fab.html | 54 +++++++++++++++++------------------ packages/mdc-fab/README.md | 8 +++--- packages/mdc-fab/_mixins.scss | 5 +++- 3 files changed, 35 insertions(+), 32 deletions(-) diff --git a/demos/fab.html b/demos/fab.html index 5b8f74a77ee..d671df4c795 100644 --- a/demos/fab.html +++ b/demos/fab.html @@ -103,8 +103,8 @@
- @@ -122,8 +122,8 @@ FABs with Ripple
- @@ -132,8 +132,8 @@
- @@ -143,7 +143,7 @@
-
-
- @@ -177,8 +177,8 @@
- @@ -193,8 +193,8 @@ FABs with Larger Icons
- @@ -203,8 +203,8 @@
- @@ -214,7 +214,7 @@
-
-
-
- @@ -270,8 +270,8 @@

View two (without FAB)

- diff --git a/packages/mdc-fab/README.md b/packages/mdc-fab/README.md index 4788f74c302..0fec1a7140f 100644 --- a/packages/mdc-fab/README.md +++ b/packages/mdc-fab/README.md @@ -50,8 +50,8 @@ We recommend you load [Material Icons](https://material.io/icons/) from Google F ### HTML Structure ```html - @@ -141,8 +141,8 @@ Developers must position MDC FAB as needed within their application's design. } } - diff --git a/packages/mdc-fab/_mixins.scss b/packages/mdc-fab/_mixins.scss index d9ff6bea7ce..7cd8f9e5132 100644 --- a/packages/mdc-fab/_mixins.scss +++ b/packages/mdc-fab/_mixins.scss @@ -60,6 +60,7 @@ $mdc-fab-icon-enter-duration_: 180ms; display: inline-flex; position: relative; + align-items: center; justify-content: center; box-sizing: border-box; width: 56px; @@ -122,7 +123,9 @@ $mdc-fab-icon-enter-duration_: 180ms; } @mixin mdc-fab__icon_ { - margin: auto; + display: inline-flex; + align-items: center; + justify-content: center; transition: mdc-animation-enter(transform, $mdc-fab-icon-enter-duration_, $mdc-fab-icon-enter-delay_); fill: currentColor; will-change: transform; From a9295a5dcec3b999f57e9b54441b892ab8c78404 Mon Sep 17 00:00:00 2001 From: "Kenneth G. Franqueiro" Date: Tue, 15 May 2018 10:31:31 -0400 Subject: [PATCH 2/7] WIP update FAB markup in theme demo page --- demos/theme/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/demos/theme/index.html b/demos/theme/index.html index de379788c18..8abbd4b3d39 100644 --- a/demos/theme/index.html +++ b/demos/theme/index.html @@ -477,8 +477,8 @@

Default
Secondary theme color
- @@ -488,8 +488,8 @@

Mini
mdc-fab--mini
- From 105b0e5c4ed56eebabea8834eb2cf5e8c60f391d Mon Sep 17 00:00:00 2001 From: "Kenneth G. Franqueiro" Date: Tue, 15 May 2018 11:26:30 -0400 Subject: [PATCH 3/7] WIP fix style specificity WRT material-icons --- packages/mdc-fab/_mixins.scss | 9 ++++++--- packages/mdc-fab/mdc-fab.scss | 6 ++++++ 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/mdc-fab/_mixins.scss b/packages/mdc-fab/_mixins.scss index 7cd8f9e5132..20f3f26ddf1 100644 --- a/packages/mdc-fab/_mixins.scss +++ b/packages/mdc-fab/_mixins.scss @@ -123,14 +123,17 @@ $mdc-fab-icon-enter-duration_: 180ms; } @mixin mdc-fab__icon_ { - display: inline-flex; - align-items: center; - justify-content: center; transition: mdc-animation-enter(transform, $mdc-fab-icon-enter-duration_, $mdc-fab-icon-enter-delay_); fill: currentColor; will-change: transform; } +@mixin mdc-fab__icon-overrides_ { + display: inline-flex; + align-items: center; + justify-content: center; +} + @mixin mdc-fab--exited_ { transform: scale(0); transition: diff --git a/packages/mdc-fab/mdc-fab.scss b/packages/mdc-fab/mdc-fab.scss index eaad6136ec2..9af9baf38c4 100644 --- a/packages/mdc-fab/mdc-fab.scss +++ b/packages/mdc-fab/mdc-fab.scss @@ -25,6 +25,12 @@ @include mdc-fab-icon-size(24px); @include mdc-fab-ink-color(on-secondary); @include mdc-states(on-secondary); + + // Increase specificity for FAB icon styles that need to override styles defined for .material-icons + // (which is loaded separately so the order of CSS definitions is not guaranteed) + .mdc-fab__icon { + @include mdc-fab__icon-overrides_; + } } .mdc-fab--mini { From e3922a2121843ce9fe6e3ce949a78ae77bb353aa Mon Sep 17 00:00:00 2001 From: "Kenneth G. Franqueiro" Date: Thu, 17 May 2018 17:35:19 -0400 Subject: [PATCH 4/7] WIP Fix material-icons usage in FAB screenshot test pages --- test/screenshot/mdc-fab/classes/baseline.html | 6 +++--- test/screenshot/mdc-fab/classes/mini.html | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/test/screenshot/mdc-fab/classes/baseline.html b/test/screenshot/mdc-fab/classes/baseline.html index 7bf64a208fa..39c3e44517d 100644 --- a/test/screenshot/mdc-fab/classes/baseline.html +++ b/test/screenshot/mdc-fab/classes/baseline.html @@ -27,14 +27,14 @@
- - -

- @@ -137,7 +137,7 @@ Here's the markup: ``` -You'll see that we have a number of pretty empty looking cards, with black text on a white background. The only hint of +You'll see that we have a number of pretty empty looking cards, with black text on a white background. The only hint of color comes from the FAB, which adopts the secondary color by default. ### Step 2: Use the MDC Web colors in your own markup @@ -378,7 +378,7 @@ Since our cards only contain text and no components, let's keep it simple for no ``` Let's see how it looks with another component inside it. Add the following code to each card just after the `p` -tag: +tag: ```html