chore(popup): add material design popup to md core sass file & convert values to variables

Added material design styling for the popup and removed some properties
from the core popup sass file

ionic/components/popup/modes/ios.scss

@@ -2,20 +2,43 @@
 // iOS Popups
 // --------------------------------------------------
 
+$popup-ios-max-width:             280px !default;
+$popup-ios-background:            rgba(0,0,0,0) !default;
 $popup-ios-border-radius:         13px !default;
 $popup-ios-background-color:      #f8f8f8 !default;
-$popup-ios-button-text-color:     color(primary) !default;
 
+$popup-ios-head-text-align:       center !default;
+$popup-ios-title-font-size:       15px !default;
+$popup-ios-body-text-color:       inherit !default;
+
+$popup-ios-button-text-color:     color(primary) !default;
+$popup-ios-button-min-height:     45px !default;
+
+
+ion-popup {
+  background: $popup-ios-background;
 
   popup-wrapper {
     border-radius: $popup-ios-border-radius;
     background-color: $popup-ios-background-color;
+    max-width: $popup-ios-max-width;
+  }
 }
 
 .popup-head {
+  text-align: $popup-ios-head-text-align;
   padding-top: 24px;
 }
 
+.popup-title {
+  font-size: $popup-ios-title-font-size;
+}
+
+.popup-body {
+  padding: 10px;
+  color: $popup-ios-body-text-color;
+}
+
 .popup-body:empty {
   padding: 0;
 }
@@ -27,7 +50,7 @@ popup-wrapper {
   button {
     background-color: transparent;
     color: $popup-ios-button-text-color;
-    font-size: 14px;
+    min-height: $popup-ios-button-min-height;
 
     &:last-child {
       font-weight: bold;

ionic/components/popup/modes/md.scss

@@ -2,17 +2,44 @@
 // Material Design Popups
 // --------------------------------------------------
 
-$popup-md-border-radius:       13px !default;
+$popup-md-max-width:           280px !default;
-$popup-md-background-color:    #f8f8f8 !default;
+$popup-md-background:          rgba(0,0,0,0.5) !default;
+$popup-md-border-radius:       2px !default;
+$popup-md-background-color:    #fafafa !default;
+$popup-md-box-shadow:          0px 16px 20px rgba(0, 0, 0, 0.4) !default;
 
+$popup-md-head-text-align:     left !default;
+$popup-md-title-font-size:     20px !default;
+$popup-md-body-text-color:     rgba(0,0,0,.5) !default;
+
+$popup-md-button-text-color:   color(primary) !default;
+$popup-md-button-min-height:   36px !default;
+
+
+ion-popup {
+  background: $popup-md-background;
 
   popup-wrapper {
+    max-width: $popup-md-max-width;
     border-radius: $popup-md-border-radius;
     background-color: $popup-md-background-color;
+
+    box-shadow: $popup-md-box-shadow;
+  }
 }
 
 .popup-head {
-  padding-top: 24px;
+  text-align: $popup-md-head-text-align;
+  padding: 24px 24px 10px 24px;
+}
+
+.popup-title {
+  font-size: $popup-md-title-font-size;
+}
+
+.popup-body {
+  padding: 10px 24px 24px 24px;
+  color: $popup-md-body-text-color;
 }
 
 .popup-body:empty {
@@ -20,16 +47,25 @@ popup-wrapper {
 }
 
 .popup-buttons {
-  padding: 0;
+  padding: 8px 8px 8px 24px;
-  min-height: 0;
+  justify-content: flex-end;
 
-  .button {
+  button {
-    min-height: 42px;
+    -webkit-box-flex: initial;
-    font-size: 14px;
+    -webkit-flex: intiial;
+    -ms-flex: initial;
+    flex: initial;
+
+    background-color: transparent;
+    color: $popup-md-button-text-color;
+    min-height: $popup-md-button-min-height;
+
+    box-shadow: none;
+    -webkit-transition: none;
+    transition: none;
 
     &:last-child {
-      font-weight: bold;
+      margin-right: 0;
     }
   }
-
 }

ionic/components/popup/popup.scss

@@ -2,14 +2,15 @@
 // Popups
 // --------------------------------------------------
 
-$popup-width:                     250px !default;
+$popup-min-width:                 250px !default;
+$popup-max-width:                 100% !default;
+$popup-max-height:                90% !default;
 
-$popup-border-radius:             0px !default;
+$popup-sub-title-font-size:       11px !default;
-$popup-background-color:          rgba(255,255,255,0.9) !default;
 
-$popup-button-border-radius:      2px !default;
 $popup-button-line-height:        20px !default;
-$popup-button-min-height:         45px !default;
+$popup-button-font-size:          14px !default;
+$popup-button-margin-right:       8px !default;
 
 
 ion-popup {
@@ -19,7 +20,6 @@ ion-popup {
   left: 0;
   bottom: 0;
   right: 0;
-  background: rgba(0,0,0,0);
 
   display: flex;
   justify-content: center;
@@ -27,12 +27,9 @@ ion-popup {
 
   popup-wrapper {
     z-index: $z-index-overlay-wrapper;
-    width: $popup-width;
+    min-width: $popup-min-width;
-    max-width: 100%;
+    max-width: $popup-max-width;
-    max-height: 90%;
+    max-height: $popup-max-height;
-
-    border-radius: $popup-border-radius;
-    background-color: $popup-background-color;
 
     display: flex;
     flex-direction: column;
@@ -46,44 +43,38 @@ ion-popup {
 
 .popup-head {
   padding: 15px 10px;
-  text-align: center;
 }
 
-h3.popup-title {
+.popup-title {
   margin: 0;
   padding: 0;
-  font-size: 15px;
 }
 
 .popup-sub-title {
   margin: 5px 0 0 0;
   padding: 0;
   font-weight: normal;
-  font-size: 11px;
+  font-size: $popup-sub-title-font-size;
 }
 
 .popup-body {
-  padding: 10px;
   overflow: auto;
 }
 
 .popup-buttons {
   display: flex;
   flex-direction: row;
-  padding: 10px;
-  min-height: $popup-button-min-height + 20;
 
   button {
     flex: 1;
     display: block;
-    min-height: $popup-button-min-height;
+    margin: 0;
-    border-radius: $popup-button-border-radius;
     line-height: $popup-button-line-height;
-
+    font-size: $popup-button-font-size;
-    margin-right: 5px;
+    margin-right: $popup-button-margin-right;
 
     &:last-child {
-      margin-right: 0px;
+      margin-right: 0;
     }
   }
 }

ionic/ionic.md.scss

@@ -13,6 +13,7 @@
   "components/checkbox/modes/md",
   "components/text-input/modes/md",
   "components/nav-bar/modes/md",
+  "components/popup/modes/md",
   "components/radio/modes/md",
   "components/switch/modes/md",
   "components/tabs/modes/md",