refactor(popup): changed elements to classes, fixed styling, removed unused css, added more sass variables

references #689

ionic/components/popup/modes/ios.scss

@@ -9,14 +9,22 @@ $popup-ios-background:                          rgba(0,0,0,0) !default;
 $popup-ios-border-radius:                       13px !default;
 $popup-ios-background-color:                    #f8f8f8 !default;
 
+$popup-ios-head-padding:                        12px 16px 20px !default;
 $popup-ios-head-text-align:                     center !default;
+
+$popup-ios-title-margin-top:                    12px !default;
+$popup-ios-title-font-weight:                   bold !default;
 $popup-ios-title-font-size:                     17px !default;
 $popup-ios-sub-title-font-size:                 14px !default;
 $popup-ios-sub-title-text-color:                #666 !default;
+
+$popup-ios-body-padding:                        0px 16px 24px !default;
 $popup-ios-body-text-color:                     inherit !default;
 $popup-ios-body-text-align:                     center !default;
 $popup-ios-body-font-size:                      13px !default;
 
+$popup-ios-prompt-input-padding:                6px !default;
+$popup-ios-prompt-input-margin-top:             24px !default;
 $popup-ios-prompt-input-background-color:       #fff !default;
 $popup-ios-prompt-input-border:                 1px solid #ccc !default;
 $popup-ios-prompt-input-border-radius:          4px !default;
@@ -29,23 +37,23 @@ $popup-ios-button-activated-background-color:   #e9e9e9 !default;
 
 ion-popup {
   background: $popup-ios-background;
+}
 
-  popup-wrapper {
+.popup-wrapper {
-    border-radius: $popup-ios-border-radius;
+  border-radius: $popup-ios-border-radius;
-    background-color: $popup-ios-background-color;
+  background-color: $popup-ios-background-color;
-    max-width: $popup-ios-max-width;
+  max-width: $popup-ios-max-width;
-    overflow: hidden;
+  overflow: hidden;
-  }
 }
 
 .popup-head {
-  padding: 12px 16px 20px;
+  padding: $popup-ios-head-padding;
   text-align: $popup-ios-head-text-align;
 }
 
 .popup-title {
-  margin-top: 12px;
+  margin-top: $popup-ios-title-margin-top;
-  font-weight: bold;
+  font-weight: $popup-ios-title-font-weight;
   font-size: $popup-ios-title-font-size;
 }
 
@@ -55,15 +63,15 @@ ion-popup {
 }
 
 .popup-body {
-  padding: 0px 16px 24px;
+  padding: $popup-ios-body-padding;
   color: $popup-ios-body-text-color;
   text-align: $popup-ios-body-text-align;
   font-size: $popup-ios-body-font-size;
 }
 
 .prompt-input {
-  padding: 6px;
+  padding: $popup-ios-prompt-input-padding;
-  margin-top: 24px;
+  margin-top: $popup-ios-prompt-input-margin-top;
 
   background-color: $popup-ios-prompt-input-background-color;
   border: $popup-ios-prompt-input-border;
@@ -72,39 +80,37 @@ ion-popup {
 }
 
 .popup-buttons {
-  button {
+  :last-child {
-    @extend button[clear];
+    font-weight: bold;
+    border-right: 0;
+  }
+}
 
-    margin: 0;
+.popup-button {
-    flex: 1;
+  margin: 0;
-    border-radius: 0;
+  flex: 1;
-    font-size: $popup-ios-button-font-size;
+  border-radius: 0;
-    min-height: $popup-ios-button-min-height;
+  font-size: $popup-ios-button-font-size;
-    border-right: 1px solid $popup-ios-button-border-color;
+  min-height: $popup-ios-button-min-height;
+  border-right: 1px solid $popup-ios-button-border-color;
 
-    &.activated {
+  &.activated {
-      opacity: 1;
+    opacity: 1;
-      background-color: $popup-ios-button-activated-background-color;
+    background-color: $popup-ios-button-activated-background-color;
-    }
+  }
 
-    &:hover:not(.disable-hover) {
+  &:hover:not(.disable-hover) {
-      opacity: 1;
+    opacity: 1;
-    }
+  }
 
-    &:before {
+  &:before {
-      position: absolute;
+    position: absolute;
-      top: 0;
+    top: 0;
-      right: 0;
+    right: 0;
-      left: 0;
+    left: 0;
-      border-top: 1px solid $popup-ios-button-border-color;
+    border-top: 1px solid $popup-ios-button-border-color;
-      content: '';
+    content: '';
-      pointer-events: none;
+    pointer-events: none;
-    }
-
-    &:last-child {
-      font-weight: bold;
-      border-right: 0;
-    }
   }
 }
 
@@ -113,13 +119,11 @@ ion-popup {
     border-width: 0.55px;
   }
 
-  .popup-buttons {
+  .popup-button {
-    button {
+    border-right-width: 0.55px;
-      border-right-width: 0.55px;
 
-      &:before {
+    &:before {
-        border-top-width: 0.55px;
+      border-top-width: 0.55px;
-      }
     }
   }
 }

ionic/components/popup/modes/md.scss

@@ -10,33 +10,35 @@ $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-head-padding:                   24px 24px 10px 24px !default;
+
 $popup-md-title-font-size:                20px !default;
 $popup-md-sub-title-font-size:            15px !default;
-$popup-md-body-text-color:                rgba(0,0,0,.5) !default;
 
-$popup-md-button-min-height:              36px !default;
+$popup-md-body-padding:                   10px 24px 24px 24px !default;
+$popup-md-body-text-color:                rgba(0,0,0,.5) !default;
 
 $popup-md-prompt-input-border-color:      #dedede !default;
 $popup-md-prompt-input-text-color:        #000000 !default;
 $popup-md-prompt-input-highlight-color:   map-get($colors-md, primary) !default;
-$popup-md-prompt-input-placeholder-color: #b9b9b9 !default;
 $popup-md-prompt-input-margin-top:        5px !default;
 $popup-md-prompt-input-margin-bottom:     5px !default;
 
+$popup-md-buttons-padding:                8px 8px 8px 24px !default;
+$popup-md-buttons-justify-content:        flex-end !default;
 
-ion-popup {
-  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-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 {
   text-align: $popup-md-head-text-align;
-  padding: 24px 24px 10px 24px;
+  padding: $popup-md-head-padding;
 }
 
 .popup-title {
@@ -48,7 +50,7 @@ ion-popup {
 }
 
 .popup-body {
-  padding: 10px 24px 24px 24px;
+  padding: $popup-md-body-padding;
   color: $popup-md-body-text-color;
 }
 
@@ -64,16 +66,10 @@ ion-popup {
 }
 
 .popup-buttons {
-  padding: 8px 8px 8px 24px;
+  padding: $popup-md-buttons-padding;
-  justify-content: flex-end;
+  justify-content: $popup-md-buttons-justify-content;
-
+}
-  button {
+
-    @extend button[clear];
+.popup-button.activated {
-
+  opacity: 1;
-    min-height: $popup-md-button-min-height;
-
-    &.activated {
-      opacity: 1;
-    }
-  }
 }

ionic/components/popup/popup.scss

@@ -4,7 +4,6 @@
 // --------------------------------------------------
 
 $popup-min-width:                 250px !default;
-$popup-max-width:                 100% !default;
 $popup-max-height:                90% !default;
 
 $popup-button-line-height:        20px !default;
@@ -24,24 +23,23 @@ ion-popup {
   justify-content: center;
   align-items: center;
 
-  popup-wrapper {
-    z-index: $z-index-overlay-wrapper;
-    min-width: $popup-min-width;
-    max-width: $popup-max-width;
-    max-height: $popup-max-height;
-
-    display: flex;
-    flex-direction: column;
-
-    opacity: 0;
-  }
-
   input,
   textarea {
     width: 100%;
   }
 }
 
+.popup-wrapper {
+  z-index: $z-index-overlay-wrapper;
+  min-width: $popup-min-width;
+  max-height: $popup-max-height;
+
+  display: flex;
+  flex-direction: column;
+
+  opacity: 0;
+}
+
 .popup-title {
   margin: 0;
   padding: 0;
@@ -56,7 +54,6 @@ ion-popup {
 .popup-body {
   overflow: auto;
 
-  // TODO is this needed, it is never empty
   &:empty {
     padding: 0;
   }
@@ -73,12 +70,12 @@ ion-popup {
 .popup-buttons {
   display: flex;
   flex-direction: row;
-
+}
-  button {
+
-    display: block;
+.popup-button {
-    margin: 0;
+  display: block;
-    line-height: $popup-button-line-height;
+  margin: 0;
-    font-size: $popup-button-font-size;
+  line-height: $popup-button-line-height;
-    margin-right: $popup-button-margin-right;
+  font-size: $popup-button-font-size;
-  }
+  margin-right: $popup-button-margin-right;
 }

ionic/components/popup/popup.ts

@@ -270,8 +270,8 @@ const OVERLAY_TYPE = 'popup';
 @Component({
   selector: 'ion-popup',
   template:
-    '<backdrop (click)="cancel($event)" tappable disable-activated></backdrop>' +
+    '<div (click)="cancel($event)" tappable disable-activated class="backdrop"></div>' +
-    '<popup-wrapper>' +
+    '<div class="popup-wrapper">' +
       '<div class="popup-head">' +
         '<h2 class="popup-title" [inner-html]="d.title" *ng-if="d.title"></h2>' +
         '<h3 class="popup-sub-title" [inner-html]="d.subTitle" *ng-if="d.subTitle"></h3>' +
@@ -281,9 +281,9 @@ const OVERLAY_TYPE = 'popup';
         '<input type="{{d.inputType || \'text\'}}" placeholder="{{d.inputPlaceholder}}" *ng-if="d.showPrompt" class="prompt-input">' +
       '</div>' +
       '<div class="popup-buttons" *ng-if="d.buttons.length">' +
-        '<button *ng-for="#btn of d.buttons" (click)="buttonTapped(btn, $event)" [inner-html]="btn.text"></button>' +
+        '<button clear *ng-for="#btn of d.buttons" (click)="buttonTapped(btn, $event)" [inner-html]="btn.text" class="popup-button"></button>' +
       '</div>' +
-    '</popup-wrapper>',
+    '</div>',
   host: {
     'role': 'dialog'
   },
@@ -352,8 +352,8 @@ class PopupPopIn extends Animation {
     super(null, opts);
 
     let ele = enteringView.pageRef().nativeElement;
-    let backdrop = new Animation(ele.querySelector('backdrop'));
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
-    let wrapper = new Animation(ele.querySelector('popup-wrapper'));
+    let wrapper = new Animation(ele.querySelector('.popup-wrapper'));
 
     wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1');
     backdrop.fromTo('opacity', '0.01', '0.3');
@@ -372,8 +372,8 @@ class PopupPopOut extends Animation {
     super(null, opts);
 
     let ele = leavingView.pageRef().nativeElement;
-    let backdrop = new Animation(ele.querySelector('backdrop'));
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
-    let wrapper = new Animation(ele.querySelector('popup-wrapper'));
+    let wrapper = new Animation(ele.querySelector('.popup-wrapper'));
 
     wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9');
     backdrop.fromTo('opacity', '0.3', '0');
@@ -392,8 +392,8 @@ class PopupMdPopIn extends Animation {
     super(null, opts);
 
     let ele = enteringView.pageRef().nativeElement;
-    let backdrop = new Animation(ele.querySelector('backdrop'));
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
-    let wrapper = new Animation(ele.querySelector('popup-wrapper'));
+    let wrapper = new Animation(ele.querySelector('.popup-wrapper'));
 
     wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1');
     backdrop.fromTo('opacity', '0.01', '0.5');
@@ -412,8 +412,8 @@ class PopupMdPopOut extends Animation {
     super(null, opts);
 
     let ele = leavingView.pageRef().nativeElement;
-    let backdrop = new Animation(ele.querySelector('backdrop'));
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
-    let wrapper = new Animation(ele.querySelector('popup-wrapper'));
+    let wrapper = new Animation(ele.querySelector('.popup-wrapper'));
 
     wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9');
     backdrop.fromTo('opacity', '0.5', '0');