fix(panel): attached panels to body

- Used global styles
- attached panels to body

Closes #8420

Author: EladBezalel

src/components/panel/demoBasicUsage/script.js

@@ -26,7 +26,7 @@ BasicDemoCtrl.prototype.showDialog = function() {
       .center();
 
   var config = {
-    attachTo: '.demo-md-panel',
+    attachTo: angular.element(document.body),
     controller: PanelDialogCtrl,
     controllerAs: 'ctrl',
     disableParentScroll: this.disableParentScroll,
@@ -51,7 +51,7 @@ BasicDemoCtrl.prototype.showMenu = function(ev) {
       .addPanelPosition(this._mdPanel.xPosition.ALIGN_START, this._mdPanel.yPosition.BELOW);
 
   var config = {
-    attachTo: '.demo-md-panel',
+    attachTo: angular.element(document.body),
     controller: PanelMenuCtrl,
     controllerAs: 'ctrl',
     template:

src/components/panel/demoBasicUsage/style.css renamed to src/components/panel/demoBasicUsage/style.global.css

@@ -69,7 +69,7 @@ AnimationCtrl.prototype.showDialog = function() {
 
   var config = {
     animation: animation,
-    attachTo: angular.element(document.querySelector('.demo-md-panel-animation')),
+    attachTo: angular.element(document.body),
     controller: DialogCtrl,
     controllerAs: 'ctrl',
     templateUrl: 'panel.tmpl.html',

src/components/panel/demoPanelAnimations/script.js

@@ -111,11 +111,11 @@ $swift-linear-duration: 0.08s !default;
 $swift-linear-timing-function: linear !default;
 $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;
 
-$material-enter-duration: 0.5s;
+$material-enter-duration: 0.3s;
 $material-enter-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
 $material-enter: all $material-enter-duration $material-enter-timing-function;
 
-$material-leave-duration: 0.5s;
+$material-leave-duration: 0.3s;
 $material-leave-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
 $material-leave: all $material-leave-duration $material-leave-timing-function;