refactor: use mat-fill mixin for cover elements

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.

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%;

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.

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;
 }

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;

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;
   }

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.

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;
 }