fix(top-app-bar): Change margin-top to padding-top to prevent margin collapsing (#2643)

williamernest · web-flow · commit 8bba12da4f95 · 2018-04-27T08:39:12.000-07:00
diff --git a/packages/mdc-top-app-bar/mdc-top-app-bar.scss b/packages/mdc-top-app-bar/mdc-top-app-bar.scss
@@ -191,23 +191,23 @@
 // stylelint-enable plugin/selector-bem-pattern
 
 .mdc-top-app-bar--fixed-adjust {
-  margin-top: $mdc-top-app-bar-row-height;
+  padding-top: $mdc-top-app-bar-row-height;
 }
 
 .mdc-top-app-bar--dense-fixed-adjust {
-  margin-top: $mdc-top-app-bar-dense-row-height;
+  padding-top: $mdc-top-app-bar-dense-row-height;
 }
 
 .mdc-top-app-bar--short-fixed-adjust {
-  margin-top: $mdc-top-app-bar-mobile-row-height;
+  padding-top: $mdc-top-app-bar-mobile-row-height;
 }
 
 .mdc-top-app-bar--prominent-fixed-adjust {
-  margin-top: $mdc-top-app-bar-prominent-row-height;
+  padding-top: $mdc-top-app-bar-prominent-row-height;
 }
 
 .mdc-top-app-bar--dense-prominent-fixed-adjust {
-  margin-top: $mdc-top-app-bar-dense-row-height * 2;
+  padding-top: $mdc-top-app-bar-dense-row-height * 2;
 }
 
 // Mobile Styles

Original file line number	Diff line number	Diff line change
`@@ -191,23 +191,23 @@`
`191`	`191`	`// stylelint-enable plugin/selector-bem-pattern`
`192`	`192`
`193`	`193`	`.mdc-top-app-bar--fixed-adjust {`
`194`		`- margin-top: $mdc-top-app-bar-row-height;`
	`194`	`+ padding-top: $mdc-top-app-bar-row-height;`
`195`	`195`	`}`
`196`	`196`
`197`	`197`	`.mdc-top-app-bar--dense-fixed-adjust {`
`198`		`- margin-top: $mdc-top-app-bar-dense-row-height;`
	`198`	`+ padding-top: $mdc-top-app-bar-dense-row-height;`
`199`	`199`	`}`
`200`	`200`
`201`	`201`	`.mdc-top-app-bar--short-fixed-adjust {`
`202`		`- margin-top: $mdc-top-app-bar-mobile-row-height;`
	`202`	`+ padding-top: $mdc-top-app-bar-mobile-row-height;`
`203`	`203`	`}`
`204`	`204`
`205`	`205`	`.mdc-top-app-bar--prominent-fixed-adjust {`
`206`		`- margin-top: $mdc-top-app-bar-prominent-row-height;`
	`206`	`+ padding-top: $mdc-top-app-bar-prominent-row-height;`
`207`	`207`	`}`
`208`	`208`
`209`	`209`	`.mdc-top-app-bar--dense-prominent-fixed-adjust {`
`210`		`- margin-top: $mdc-top-app-bar-dense-row-height * 2;`
	`210`	`+ padding-top: $mdc-top-app-bar-dense-row-height * 2;`
`211`	`211`	`}`
`212`	`212`
`213`	`213`	`// Mobile Styles`