@angular2-material/core - npm Package Compare versions

Comparing version 2.0.0-alpha.8-experimental1 to 2.0.0-alpha.8-experimental2

theming/prebuilt/purple-green.css

+.md-elevation-z0 {
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z1 {
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z2 {
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z3 {
+  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z4 {
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z5 {
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z6 {
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z7 {
+  box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z8 {
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z9 {
+  box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z10 {
+  box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z11 {
+  box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z12 {
+  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z13 {
+  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z14 {
+  box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z15 {
+  box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z16 {
+  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z17 {
+  box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z18 {
+  box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z19 {
+  box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z20 {
+  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z21 {
+  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z22 {
+  box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z23 {
+  box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12); }
+
+.md-elevation-z24 {
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); }
+
+[md-ripple] {
+  overflow: hidden; }
+
+[md-ripple].md-ripple-unbounded {
+  overflow: visible; }
+
+.md-ripple-background {
+  background-color: rgba(0, 0, 0, 0.0588);
+  opacity: 0;
+  transition: opacity 300ms linear;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0; }
+
+.md-ripple-unbounded .md-ripple-background {
+  display: none; }
+
+.md-ripple-background.md-ripple-active {
+  opacity: 1; }
+
+.md-ripple-focused .md-ripple-background {
+  opacity: 1; }
+
+.md-ripple-foreground {
+  background-color: rgba(0, 0, 0, 0.0588);
+  border-radius: 50%;
+  pointer-events: none;
+  opacity: 0.25;
+  position: absolute;
+  transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1); }
+
+.md-ripple-foreground.md-ripple-fade-in {
+  opacity: 1; }
+
+.md-ripple-foreground.md-ripple-fade-out {
+  opacity: 0; }
+
+.md-visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  text-transform: none;
+  width: 1px; }
+
+.md-overlay-container {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 1; }
+
+.md-overlay-pane {
+  position: absolute;
+  pointer-events: auto;
+  box-sizing: border-box;
+  z-index: 1000; }
+
+.md-overlay-backdrop {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  pointer-events: auto;
+  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+  background: #212121;
+  opacity: 0; }
+
+.md-overlay-backdrop.md-overlay-backdrop-showing {
+  opacity: 0.48; }
+
+.md-ripple-focused .md-ripple-background {
+  background-color: rgba(105, 240, 174, 0.1); }
+
+[md-button].md-button-focus.md-primary::after, [md-icon-button].md-button-focus.md-primary::after, [md-raised-button].md-button-focus.md-primary::after, [md-fab].md-button-focus.md-primary::after, [md-mini-fab].md-button-focus.md-primary::after {
+  background-color: rgba(123, 31, 162, 0.12); }
+
+[md-button].md-button-focus.md-accent::after, [md-icon-button].md-button-focus.md-accent::after, [md-raised-button].md-button-focus.md-accent::after, [md-fab].md-button-focus.md-accent::after, [md-mini-fab].md-button-focus.md-accent::after {
+  background-color: rgba(105, 240, 174, 0.12); }
+
+[md-button].md-button-focus.md-warn::after, [md-icon-button].md-button-focus.md-warn::after, [md-raised-button].md-button-focus.md-warn::after, [md-fab].md-button-focus.md-warn::after, [md-mini-fab].md-button-focus.md-warn::after {
+  background-color: rgba(244, 67, 54, 0.12); }
+
+[md-button].md-primary, [md-icon-button].md-primary {
+  color: #7b1fa2; }
+
+[md-button].md-accent, [md-icon-button].md-accent {
+  color: #69f0ae; }
+
+[md-button].md-warn, [md-icon-button].md-warn {
+  color: #f44336; }
+
+[md-button].md-primary[disabled], [md-button].md-accent[disabled], [md-button].md-warn[disabled], [md-button][disabled][disabled], [md-icon-button].md-primary[disabled], [md-icon-button].md-accent[disabled], [md-icon-button].md-warn[disabled], [md-icon-button][disabled][disabled] {
+  color: rgba(255, 255, 255, 0.3); }
+
+[md-button]:hover.md-primary::after, [md-icon-button]:hover.md-primary::after {
+  background-color: rgba(123, 31, 162, 0.12); }
+
+[md-button]:hover.md-accent::after, [md-icon-button]:hover.md-accent::after {
+  background-color: rgba(105, 240, 174, 0.12); }
+
+[md-button]:hover.md-warn::after, [md-icon-button]:hover.md-warn::after {
+  background-color: rgba(244, 67, 54, 0.12); }
+
+[md-raised-button], [md-fab], [md-mini-fab] {
+  background-color: #303030; }
+  [md-raised-button].md-primary, [md-fab].md-primary, [md-mini-fab].md-primary {
+    color: rgba(255, 255, 255, 0.87); }
+  [md-raised-button].md-accent, [md-fab].md-accent, [md-mini-fab].md-accent {
+    color: rgba(0, 0, 0, 0.87); }
+  [md-raised-button].md-warn, [md-fab].md-warn, [md-mini-fab].md-warn {
+    color: white; }
+  [md-raised-button].md-primary[disabled], [md-raised-button].md-accent[disabled], [md-raised-button].md-warn[disabled], [md-raised-button][disabled][disabled], [md-fab].md-primary[disabled], [md-fab].md-accent[disabled], [md-fab].md-warn[disabled], [md-fab][disabled][disabled], [md-mini-fab].md-primary[disabled], [md-mini-fab].md-accent[disabled], [md-mini-fab].md-warn[disabled], [md-mini-fab][disabled][disabled] {
+    color: rgba(255, 255, 255, 0.3); }
+  [md-raised-button].md-primary, [md-fab].md-primary, [md-mini-fab].md-primary {
+    background-color: #7b1fa2; }
+  [md-raised-button].md-accent, [md-fab].md-accent, [md-mini-fab].md-accent {
+    background-color: #69f0ae; }
+  [md-raised-button].md-warn, [md-fab].md-warn, [md-mini-fab].md-warn {
+    background-color: #f44336; }
+  [md-raised-button].md-primary[disabled], [md-raised-button].md-accent[disabled], [md-raised-button].md-warn[disabled], [md-raised-button][disabled][disabled], [md-fab].md-primary[disabled], [md-fab].md-accent[disabled], [md-fab].md-warn[disabled], [md-fab][disabled][disabled], [md-mini-fab].md-primary[disabled], [md-mini-fab].md-accent[disabled], [md-mini-fab].md-warn[disabled], [md-mini-fab][disabled][disabled] {
+    background-color: rgba(255, 255, 255, 0.12); }
+
+[md-fab], [md-mini-fab] {
+  background-color: #69f0ae;
+  color: rgba(0, 0, 0, 0.87); }
+
+.md-button-toggle-checked .md-button-toggle-label-content {
+  background-color: #e0e0e0; }
+
+.md-button-toggle-disabled .md-button-toggle-label-content {
+  background-color: rgba(255, 255, 255, 0.3); }
+
+md-card {
+  background: #424242;
+  color: white; }
+
+md-card-subtitle {
+  color: rgba(255, 255, 255, 0.7); }
+
+.md-checkbox-frame {
+  border-color: rgba(255, 255, 255, 0.7); }
+
+.md-checkbox-checkmark {
+  fill: #303030; }
+
+.md-checkbox-checkmark-path {
+  stroke: #303030 !important; }
+
+.md-checkbox-mixedmark {
+  background-color: #303030; }
+
+.md-checkbox-indeterminate .md-checkbox-background, .md-checkbox-checked .md-checkbox-background {
+  background-color: #4caf50; }
+
+.md-checkbox-disabled.md-checkbox-checked .md-checkbox-background, .md-checkbox-disabled.md-checkbox-indeterminate .md-checkbox-background {
+  background-color: #686868; }
+
+.md-checkbox-disabled:not(.md-checkbox-checked) .md-checkbox-frame {
+  border-color: #686868; }
+
+.md-checkbox-focused .md-ink-ripple {
+  background-color: rgba(105, 240, 174, 0.26); }
+
+md-dialog-container {
+  background: #424242; }
+
+.md-input-placeholder {
+  color: rgba(255, 255, 255, 0.3); }
+  .md-input-placeholder.md-focused {
+    color: #7b1fa2; }
+    .md-input-placeholder.md-focused.md-accent {
+      color: #69f0ae; }
+    .md-input-placeholder.md-focused.md-warn {
+      color: #f44336; }
+
+md-input input:-webkit-autofill + .md-input-placeholder .md-placeholder-required,
+.md-input-placeholder.md-float:not(.md-empty) .md-placeholder-required, .md-float.md-focused .md-placeholder-required {
+  color: #69f0ae; }
+
+.md-input-underline {
+  border-color: rgba(255, 255, 255, 0.3); }
+  .md-input-underline .md-input-ripple {
+    background-color: #7b1fa2; }
+    .md-input-underline .md-input-ripple.md-accent {
+      background-color: #69f0ae; }
+    .md-input-underline .md-input-ripple.md-warn {
+      background-color: #f44336; }
+
+md-list md-list-item, md-list a[md-list-item], md-nav-list md-list-item, md-nav-list a[md-list-item] {
+  color: white; }
+
+md-list [md-subheader], md-nav-list [md-subheader] {
+  color: rgba(255, 255, 255, 0.7); }
+
+md-divider {
+  border-top-color: rgba(255, 255, 255, 0.12); }
+
+md-nav-list .md-list-item:hover, md-nav-list .md-list-item.md-list-item-focus {
+  background: rgba(255, 255, 255, 0.04); }
+
+.md-menu {
+  background: #424242; }
+
+[md-menu-item] {
+  color: white; }
+  [md-menu-item][disabled] {
+    color: rgba(255, 255, 255, 0.3); }
+  [md-menu-item]:hover:not([disabled]), [md-menu-item]:focus:not([disabled]) {
+    background: rgba(255, 255, 255, 0.04); }
+
+.md-progress-bar-background {
+  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27#e1bee7%27%2F%3E%3C%2Fsvg%3E"); }
+
+.md-progress-bar-buffer {
+  background-color: #e1bee7; }
+
+md-progress-bar[color='accent'] .md-progress-bar-background {
+  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27#c8e6c9%27%2F%3E%3C%2Fsvg%3E"); }
+
+md-progress-bar[color='accent'] .md-progress-bar-buffer {
+  background-color: #c8e6c9; }
+
+md-progress-bar[color='accent'] .md-progress-bar-fill::after {
+  background-color: #43a047; }
+
+md-progress-bar[color='warn'] .md-progress-bar-background {
+  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27#ffcdd2%27%2F%3E%3C%2Fsvg%3E"); }
+
+md-progress-bar[color='warn'] .md-progress-bar-buffer {
+  background-color: #ffcdd2; }
+
+md-progress-bar[color='warn'] .md-progress-bar-fill::after {
+  background-color: #e53935; }
+
+.md-progress-bar-fill::after {
+  background-color: #8e24aa; }
+
+md-progress-circle path {
+  stroke: #8e24aa; }
+
+md-progress-circle[color='accent'] path {
+  stroke: #43a047; }
+
+md-progress-circle[color='warn'] path {
+  stroke: #e53935; }
+
+.md-radio-outer-circle {
+  border-color: rgba(255, 255, 255, 0.7); }
+  .md-radio-checked .md-radio-outer-circle {
+    border-color: #69f0ae; }
+  .md-radio-disabled .md-radio-outer-circle {
+    border-color: rgba(255, 255, 255, 0.3); }
+
+.md-radio-inner-circle {
+  background-color: #69f0ae; }
+  .md-radio-disabled .md-radio-inner-circle {
+    background-color: rgba(255, 255, 255, 0.3); }
+
+.md-radio-focused .md-ink-ripple {
+  background-color: rgba(105, 240, 174, 0.26); }
+
+md-sidenav {
+  background-color: #424242; }
+  md-sidenav.md-sidenav-push {
+    background-color: #424242; }
+
+.md-sidenav-backdrop.md-sidenav-shown {
+  background-color: rgba(189, 189, 189, 0.6); }
+
+md-slide-toggle.md-checked .md-slide-toggle-thumb {
+  background-color: #69f0ae; }
+
+md-slide-toggle.md-checked .md-slide-toggle-bar {
+  background-color: rgba(105, 240, 174, 0.5); }
+
+md-slide-toggle.md-slide-toggle-focused:not(.md-checked) .md-ink-ripple {
+  background-color: rgba(255, 255, 255, 0.12); }
+
+md-slide-toggle.md-slide-toggle-focused .md-ink-ripple {
+  background-color: rgba(105, 240, 174, 0.26); }
+
+md-slide-toggle.md-primary.md-checked .md-slide-toggle-thumb {
+  background-color: #7b1fa2; }
+
+md-slide-toggle.md-primary.md-checked .md-slide-toggle-bar {
+  background-color: rgba(123, 31, 162, 0.5); }
+
+md-slide-toggle.md-primary.md-slide-toggle-focused:not(.md-checked) .md-ink-ripple {
+  background-color: rgba(255, 255, 255, 0.12); }
+
+md-slide-toggle.md-primary.md-slide-toggle-focused .md-ink-ripple {
+  background-color: rgba(123, 31, 162, 0.26); }
+
+md-slide-toggle.md-warn.md-checked .md-slide-toggle-thumb {
+  background-color: #f44336; }
+
+md-slide-toggle.md-warn.md-checked .md-slide-toggle-bar {
+  background-color: rgba(244, 67, 54, 0.5); }
+
+md-slide-toggle.md-warn.md-slide-toggle-focused:not(.md-checked) .md-ink-ripple {
+  background-color: rgba(255, 255, 255, 0.12); }
+
+md-slide-toggle.md-warn.md-slide-toggle-focused .md-ink-ripple {
+  background-color: rgba(244, 67, 54, 0.26); }
+
+.md-disabled .md-slide-toggle-thumb {
+  background-color: #bdbdbd; }
+
+.md-disabled .md-slide-toggle-bar {
+  background-color: rgba(255, 255, 255, 0.12); }
+
+.md-slide-toggle-thumb {
+  background-color: #303030; }
+
+.md-slide-toggle-bar {
+  background-color: #9e9e9e; }
+
+.md-slider-track {
+  background-color: rgba(0, 0, 0, 0.26); }
+
+.md-slider-track-fill {
+  background-color: #69f0ae; }
+
+.md-slider-thumb::after {
+  background-color: #69f0ae;
+  border-color: #69f0ae; }
+
+.md-slider-thumb-label {
+  background-color: #69f0ae; }
+
+.md-slider-thumb-label-text {
+  color: rgba(0, 0, 0, 0.87); }
+
+.md-tab-header {
+  border-bottom: 1px solid black; }
+
+.md-tab-label:focus {
+  background-color: rgba(225, 190, 231, 0.3); }
+
+md-ink-bar {
+  background-color: #9c27b0; }
+
+md-toolbar {
+  background: #212121;
+  color: white; }
+  md-toolbar.md-primary {
+    background: #7b1fa2;
+    color: rgba(255, 255, 255, 0.87); }
+  md-toolbar.md-accent {
+    background: #69f0ae;
+    color: rgba(0, 0, 0, 0.87); }
+  md-toolbar.md-warn {
+    background: #f44336;
+    color: white; }
+
+.md-tooltip {
+  background: rgba(97, 97, 97, 0.9); }
+
+/*# sourceMappingURL=purple-green.css.map */

theming/prebuilt/purple-green.scss

+@import '../theming';
+@import '../palette';
+@import '../../core';
+@import '../../../all/all-theme';
+
+
+$primary: md-palette($md-purple, 700, 500, 800);
+$accent:  md-palette($md-green, A200, A100, A400);
+$warn:    md-palette($md-red);
+
+$theme: md-dark-theme($primary, $accent, $warn);
+
+// Include non-theme styles for core.
+@include md-core();
+
+// Include all theme-styles for the components based on the current theme.
+@include angular-material-theme($theme);

_core.scss

@@ -21,2 +21,3 @@ // Core styles that can be used to apply material design treatments to any element.
   @include md-a11y();
+  @include md-overlay();
 }
@@ -23,0 +24,0 @@

package.json

 {
   "name": "@angular2-material/core",
-  "version": "2.0.0-alpha.8-experimental1",
+  "version": "2.0.0-alpha.8-experimental2",
   "description": "Angular 2 Material core",
@@ -5,0 +5,0 @@ "main": "./core.umd.js",

theming/prebuilt/deeppurple-amber.css

@@ -126,2 +126,32 @@ .md-elevation-z0 {
 
+.md-overlay-container {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 1; }
+
+.md-overlay-pane {
+  position: absolute;
+  pointer-events: auto;
+  box-sizing: border-box;
+  z-index: 1000; }
+
+.md-overlay-backdrop {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  pointer-events: auto;
+  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+  background: #212121;
+  opacity: 0; }
+
+.md-overlay-backdrop.md-overlay-backdrop-showing {
+  opacity: 0.48; }
+
 .md-ripple-focused .md-ripple-background {
@@ -128,0 +158,0 @@ background-color: rgba(255, 215, 64, 0.1); }

theming/prebuilt/indigo-pink.css

@@ -126,2 +126,32 @@ .md-elevation-z0 {
 
+.md-overlay-container {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 1; }
+
+.md-overlay-pane {
+  position: absolute;
+  pointer-events: auto;
+  box-sizing: border-box;
+  z-index: 1000; }
+
+.md-overlay-backdrop {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  pointer-events: auto;
+  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+  background: #212121;
+  opacity: 0; }
+
+.md-overlay-backdrop.md-overlay-backdrop-showing {
+  opacity: 0.48; }
+
 .md-ripple-focused .md-ripple-background {
@@ -128,0 +158,0 @@ background-color: rgba(255, 64, 129, 0.1); }

No alert changes

Improved metrics

Total package byte prevSize

650495

16.11%

Number of package files

137

2.24%

Lines of code

5539

7.47%

No dependency changes