diff --git a/packages/mdc-ripple/foundation.js b/packages/mdc-ripple/foundation.js index bdf57dc851e..e63ba2ab595 100644 --- a/packages/mdc-ripple/foundation.js +++ b/packages/mdc-ripple/foundation.js @@ -471,7 +471,7 @@ export default class MDCRippleFoundation extends MDCFoundation { this.frame_ = this.adapter_.computeBoundingRect(); const maxDim = Math.max(this.frame_.height, this.frame_.width); - const surfaceDiameter = Math.min(this.frame_.width, this.frame_.height); + const surfaceDiameter = Math.sqrt(Math.pow(this.frame_.width, 2) + Math.pow(this.frame_.height, 2)); // 60% of the largest dimension of the surface this.initialSize_ = maxDim * MDCRippleFoundation.numbers.INITIAL_ORIGIN_SCALE; diff --git a/packages/mdc-toolbar/mdc-toolbar.scss b/packages/mdc-toolbar/mdc-toolbar.scss index ec1ac246296..97006801edc 100644 --- a/packages/mdc-toolbar/mdc-toolbar.scss +++ b/packages/mdc-toolbar/mdc-toolbar.scss @@ -93,10 +93,8 @@ cursor: pointer; } - @media (min-width: $mdc-toolbar-mobile-breakpoint) { - &__icon:last-of-type { - margin-right: 8px; - } + &__icon:last-of-type { + padding-right: 16px; } &__icon--menu { @@ -117,6 +115,10 @@ padding: 16px; } + .mdc-toolbar__icon:last-child { + padding: 16px 8px; + } + .mdc-toolbar__title { margin-left: 16px !important; } diff --git a/test/unit/mdc-ripple/foundation.test.js b/test/unit/mdc-ripple/foundation.test.js index c93bc89cea2..d72b685e2b4 100644 --- a/test/unit/mdc-ripple/foundation.test.js +++ b/test/unit/mdc-ripple/foundation.test.js @@ -253,7 +253,7 @@ testFoundation(`#layout sets ${strings.VAR_FG_SCALE} based on the difference bet const maxSize = Math.max(width, height); const initialSize = maxSize * numbers.INITIAL_ORIGIN_SCALE; - const surfaceDiameter = Math.min(width, height); + const surfaceDiameter = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)); const maxRadius = surfaceDiameter + numbers.PADDING; const fgScale = maxRadius / initialSize;