From d010c94a13ac824c793e94cc4129da2bc63c6c3b Mon Sep 17 00:00:00 2001 From: crisbeto Date: Tue, 15 Aug 2017 22:37:11 +0200 Subject: [PATCH] refactor: use mat-fill mixin for cover elements Switches the elements that cover their parents to use the `mat-fill` mixin. --- src/lib/button/button.scss | 7 ++----- src/lib/checkbox/checkbox.scss | 14 +++----------- src/lib/core/option/_option.scss | 7 ++----- src/lib/core/style/_layout-common.scss | 2 +- src/lib/datepicker/calendar.scss | 8 +++----- src/lib/grid-list/grid-list.scss | 8 ++------ src/lib/list/list.scss | 7 ++----- src/lib/menu/menu.scss | 7 ++----- 8 files changed, 17 insertions(+), 43 deletions(-) diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss index 8c084abf4f70..89bf063c6bf7 100644 --- a/src/lib/button/button.scss +++ b/src/lib/button/button.scss @@ -2,6 +2,7 @@ // TODO(jelbourn): Figure out if anchor hover underline actually happens in any browser. @import 'button-base'; @import '../core/a11y/a11y'; +@import '../core/style/layout-common'; .mat-button, .mat-icon-button { @extend %mat-button-base; @@ -59,11 +60,7 @@ // The ripple container should match the bounds of the entire button. .mat-button-ripple, .mat-button-focus-overlay { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; + @include mat-fill; // Disable pointer events for the ripple container and focus overlay because the container // will overlay the user content and we don't want to disable mouse events on the user content. diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss index 049ed8c67ebc..57752e0ea812 100644 --- a/src/lib/checkbox/checkbox.scss +++ b/src/lib/checkbox/checkbox.scss @@ -2,6 +2,7 @@ @import '../core/style/elevation'; @import '../core/style/checkbox-common'; @import '../core/ripple/ripple'; +@import '../core/style/layout-common'; // Manual calculation done on SVG $_mat-checkbox-mark-path-length: 22.910259; @@ -161,15 +162,6 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default; } } -// Applied to elements that cover the checkbox's entire inner container. -%mat-checkbox-cover-element { - bottom: 0; - left: 0; - position: absolute; - right: 0; - top: 0; -} - // Applied to elements that are considered "marks" within the checkbox, e.g. the checkmark and // the mixedmark. %mat-checkbox-mark { @@ -180,7 +172,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default; // Applied to elements that appear to make up the outer box of the checkmark, such as the frame // that contains the border and the actual background element that contains the marks. %mat-checkbox-outer-box { - @extend %mat-checkbox-cover-element; + @include mat-fill; border-radius: 2px; box-sizing: border-box; pointer-events: none; @@ -255,7 +247,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default; } .mat-checkbox-checkmark { - @extend %mat-checkbox-cover-element; + @include mat-fill; @extend %mat-checkbox-mark; width: 100%; diff --git a/src/lib/core/option/_option.scss b/src/lib/core/option/_option.scss index f99adae708d6..4bd536b08e3f 100644 --- a/src/lib/core/option/_option.scss +++ b/src/lib/core/option/_option.scss @@ -1,6 +1,7 @@ @import '../style/menu-common'; @import '../style/vendor-prefixes'; @import '../a11y/a11y'; +@import '../style/layout-common'; /** * This mixin contains shared option styles between the select and @@ -29,11 +30,7 @@ } .mat-option-ripple { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; + @include mat-fill; // Disable pointer events for the ripple container because the container will overlay the // user content and we don't want to disable mouse events on the user content. diff --git a/src/lib/core/style/_layout-common.scss b/src/lib/core/style/_layout-common.scss index fc1168215a26..77cda6fb5317 100644 --- a/src/lib/core/style/_layout-common.scss +++ b/src/lib/core/style/_layout-common.scss @@ -1,8 +1,8 @@ // This mixin ensures an element spans to fill the nearest ancestor with defined positioning. @mixin mat-fill { - position: absolute; top: 0; left: 0; right: 0; bottom: 0; + position: absolute; } diff --git a/src/lib/datepicker/calendar.scss b/src/lib/datepicker/calendar.scss index 4595f751e561..820e3808ea32 100644 --- a/src/lib/datepicker/calendar.scss +++ b/src/lib/datepicker/calendar.scss @@ -1,3 +1,5 @@ +@import '../core/style/layout-common'; + $mat-calendar-padding: 8px !default; $mat-calendar-header-divider-width: 1px !default; $mat-calendar-controls-vertical-padding: 5%; @@ -68,12 +70,8 @@ $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg); position: relative; &::after { + @include mat-fill; content: ''; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; margin: $mat-calendar-prev-next-icon-margin; border: 0 solid currentColor; border-top-width: $mat-calendar-prev-next-icon-border-width; diff --git a/src/lib/grid-list/grid-list.scss b/src/lib/grid-list/grid-list.scss index 2c8299a997c1..5b8da631acb5 100644 --- a/src/lib/grid-list/grid-list.scss +++ b/src/lib/grid-list/grid-list.scss @@ -1,4 +1,5 @@ @import '../core/style/list-common'; +@import '../core/style/layout-common'; // height of tile header or footer if it has one line @@ -14,8 +15,8 @@ $mat-grid-list-text-padding: 16px; } .mat-grid-tile { + @include mat-fill; display: block; - position: absolute; overflow: hidden; .mat-figure { @@ -26,11 +27,6 @@ $mat-grid-list-text-padding: 16px; justify-content: center; height: 100%; - top: 0; - right: 0; - bottom: 0; - left: 0; - padding: 0; margin: 0; } diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss index 850275c6dff5..13e1baae8d1e 100644 --- a/src/lib/list/list.scss +++ b/src/lib/list/list.scss @@ -1,5 +1,6 @@ @import '../core/style/variables'; @import '../core/style/list-common'; +@import '../core/style/layout-common'; $mat-list-side-padding: 16px; @@ -52,11 +53,7 @@ $mat-dense-list-icon-size: 20px; } .mat-list-item-ripple { - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; + @include mat-fill; // Disable pointer events for the ripple container because the container will overlay the // user content and we don't want to disable mouse events on the user content. diff --git a/src/lib/menu/menu.scss b/src/lib/menu/menu.scss index 3ef88f1378c4..04cfcc38a1fa 100644 --- a/src/lib/menu/menu.scss +++ b/src/lib/menu/menu.scss @@ -4,6 +4,7 @@ @import '../core/style/layout-common'; @import '../core/style/menu-common'; @import '../core/a11y/a11y'; +@import '../core/style/layout-common'; $mat-menu-vertical-padding: 8px !default; $mat-menu-border-radius: 2px !default; @@ -80,9 +81,5 @@ button.mat-menu-item { } .mat-menu-ripple { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; + @include mat-fill; }