From ceb2051b851eeee9244825e6ebb21e3878f26587 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 16 Aug 2018 05:02:54 +0200 Subject: [PATCH] feat(bottom-sheet): align with 2018 material design spec (#12625) Aligns the bottom sheet component with the most-recent Material Design spec. --- src/lib/bottom-sheet/_bottom-sheet-theme.scss | 5 +---- src/lib/bottom-sheet/bottom-sheet-container.scss | 9 +++++++++ 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/lib/bottom-sheet/_bottom-sheet-theme.scss b/src/lib/bottom-sheet/_bottom-sheet-theme.scss index c141ca99747..15416e53537 100644 --- 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 index 9165eccde54..6ea596659e6 100644 --- 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}); }