feat(bottom-sheet): align with 2018 material design spec (#12625)

Aligns the bottom sheet component with the most-recent Material Design spec.
angular · Aug 16, 2018 · ceb2051 · ceb2051
1 parent 009f211
commit ceb2051
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/lib/bottom-sheet/_bottom-sheet-theme.scss b/src/lib/bottom-sheet/_bottom-sheet-theme.scss
@@ -13,9 +13,6 @@
 
 @mixin mat-bottom-sheet-typography($config) {
   .mat-bottom-sheet-container {
-    // Note: we don't use the line-height, because it's way too big.
-    font-family: mat-font-family($config);
-    font-size: mat-font-size($config, subheading-2);
-    font-weight: mat-font-weight($config, subheading-2);
+    @include mat-typography-level-to-styles($config, body-1);
   }
 }
diff --git a/src/lib/bottom-sheet/bottom-sheet-container.scss b/src/lib/bottom-sheet/bottom-sheet-container.scss
@@ -25,17 +25,26 @@ $mat-bottom-sheet-container-horizontal-padding: 16px !default;
   }
 }
 
+// Applies a border radius to the bottom sheet. Should only be applied when it's not full-screen.
+%_mat-bottom-sheet-container-border-radius {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
 .mat-bottom-sheet-container-medium {
+  @extend %_mat-bottom-sheet-container-border-radius;
   min-width: $_mat-bottom-sheet-width-increment * 6;
   max-width: calc(100vw - #{$_mat-bottom-sheet-width-increment * 2});
 }
 
 .mat-bottom-sheet-container-large {
+  @extend %_mat-bottom-sheet-container-border-radius;
   min-width: $_mat-bottom-sheet-width-increment * 8;
   max-width: calc(100vw - #{$_mat-bottom-sheet-width-increment * 4});
 }
 
 .mat-bottom-sheet-container-xlarge {
+  @extend %_mat-bottom-sheet-container-border-radius;
   min-width: $_mat-bottom-sheet-width-increment * 9;
   max-width: calc(100vw - #{$_mat-bottom-sheet-width-increment * 6});
 }