From 374efde03feb60fcbfcf550fd8591c93882a2ad6 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Thu, 3 Mar 2016 12:28:50 -0500
Subject: [PATCH] refactor(sass): add Sass variables for alert, remove unused
 selectors

renames some sass variables to work towards a standard convention

references #5651
---
 ionic/components/alert/alert.ios.scss | 123 ++++++++++++++------------
 ionic/components/alert/alert.md.scss  |  56 ++++++++----
 2 files changed, 103 insertions(+), 76 deletions(-)

diff --git a/ionic/components/alert/alert.ios.scss b/ionic/components/alert/alert.ios.scss
index 09c74cd96b6..d6c405a7104 100644
--- a/ionic/components/alert/alert.ios.scss
+++ b/ionic/components/alert/alert.ios.scss
@@ -5,12 +5,12 @@
 // --------------------------------------------------
 
 $alert-ios-max-width:                           270px !default;
-$alert-ios-background:                          rgba(0,0,0,0) !default;
 $alert-ios-border-radius:                       13px !default;
-$alert-ios-background-color:                    #f8f8f8 !default;
+$alert-ios-background:                          #f8f8f8 !default;
+$alert-ios-box-shadow:                          none !default;
 
-$alert-ios-head-padding:                        12px 16px 7px !default;
 $alert-ios-head-text-align:                     center !default;
+$alert-ios-head-padding:                        12px 16px 7px !default;
 
 $alert-ios-title-margin-top:                    8px !default;
 $alert-ios-title-font-weight:                   600 !default;
@@ -22,6 +22,9 @@ $alert-ios-message-padding:                     0px 16px 21px !default;
 $alert-ios-message-text-color:                  inherit !default;
 $alert-ios-message-text-align:                  center !default;
 $alert-ios-message-font-size:                   13px !default;
+$alert-ios-message-padding-empty:               0 0 12px 0 !default;
+
+$alert-ios-content-max-height:                  240px !default;
 
 $alert-ios-input-padding:                       6px !default;
 $alert-ios-input-margin-top:                    10px !default;
@@ -29,35 +32,46 @@ $alert-ios-input-background-color:              #fff !default;
 $alert-ios-input-border:                        1px solid #ccc !default;
 $alert-ios-input-border-radius:                 4px !default;
 
+$alert-ios-button-group-flex-wrap:              wrap !default;
+
+$alert-ios-button-margin:                       0 !default;
+$alert-ios-button-flex:                         1 1 auto !default;
 $alert-ios-button-min-height:                   44px !default;
+$alert-ios-button-min-width:                    50% !default;
 $alert-ios-button-font-size:                    17px !default;
 $alert-ios-button-text-color:                   map-get($colors-ios, primary) !default;
 $alert-ios-button-background-color:             transparent !default;
+$alert-ios-button-background-color-activated:   #e9e9e9 !default;
+
 $alert-ios-button-border-radius:                0 !default;
+$alert-ios-button-border-width:                 1px !default;
+$alert-ios-button-border-style:                 solid !default;
 $alert-ios-button-border-color:                 #dbdbdf !default;
-$alert-ios-button-activated-background-color:   #e9e9e9 !default;
-
-$alert-checkbox-ios-icon-size:                  21px !default;
-$alert-checkbox-ios-icon-border-radius:         50% !default;
-$alert-checkbox-ios-icon-border-width:          1px !default;
-$alert-checkbox-ios-icon-border-style:          solid !default;
-$alert-checkbox-ios-icon-border-color-off:      $list-ios-border-color !default;
-$alert-checkbox-ios-icon-border-color-on:       map-get($colors-ios, primary) !default;
-$alert-checkbox-ios-background-color-off:       $list-ios-background-color !default;
-$alert-checkbox-ios-background-color-on:        map-get($colors-ios, primary) !default;
-$alert-checkbox-ios-icon-checkmark-width:       $alert-checkbox-ios-icon-border-width !default;
-$alert-checkbox-ios-icon-checkmark-style:       $alert-checkbox-ios-icon-border-style !default;
-$alert-checkbox-ios-icon-checkmark-color:       $background-ios-color !default;
-
-
-ion-alert {
-  background: $alert-ios-background;
-}
+
+$alert-ios-button-main-font-weight:             bold !default;
+
+$alert-ios-radio-label-padding:                 13px !default;
+$alert-ios-radio-icon-min-width:                30px !default;
+
+$alert-ios-checkbox-icon-size:                  21px !default;
+$alert-ios-checkbox-icon-border-radius:         50% !default;
+$alert-ios-checkbox-icon-border-width:          1px !default;
+$alert-ios-checkbox-icon-border-style:          solid !default;
+$alert-ios-checkbox-icon-border-color-off:      $list-ios-border-color !default;
+$alert-ios-checkbox-icon-border-color-on:       map-get($colors-ios, primary) !default;
+$alert-ios-checkbox-background-color-off:       $list-ios-background-color !default;
+$alert-ios-checkbox-background-color-on:        map-get($colors-ios, primary) !default;
+$alert-ios-checkbox-icon-checkmark-width:       $alert-ios-checkbox-icon-border-width !default;
+$alert-ios-checkbox-icon-checkmark-style:       $alert-ios-checkbox-icon-border-style !default;
+$alert-ios-checkbox-icon-checkmark-color:       $background-ios-color !default;
+
 
 .alert-wrapper {
-  border-radius: $alert-ios-border-radius;
-  background-color: $alert-ios-background-color;
   max-width: $alert-ios-max-width;
+  border-radius: $alert-ios-border-radius;
+  background-color: $alert-ios-background;
+
+  box-shadow: $alert-ios-box-shadow;
   overflow: hidden;
 }
 
@@ -66,8 +80,8 @@ ion-alert {
 // --------------------------------------------------
 
 .alert-head {
-  padding: $alert-ios-head-padding;
   text-align: $alert-ios-head-text-align;
+  padding: $alert-ios-head-padding;
 }
 
 .alert-title {
@@ -94,10 +108,10 @@ ion-alert {
 }
 
 .alert-message {
-  max-height: 240px;
+  max-height: $alert-ios-content-max-height;
 
   &:empty {
-    padding: 0 0 12px 0;
+    padding: $alert-ios-message-padding-empty;
   }
 }
 
@@ -120,8 +134,8 @@ ion-alert {
 
 .alert-radio-group,
 .alert-checkbox-group {
-  max-height: 240px;
-  border-top: 1px solid $alert-ios-button-border-color;
+  max-height: $alert-ios-content-max-height;
+  border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
   overflow: scroll;
 }
 
@@ -138,8 +152,7 @@ ion-alert {
 .alert-radio-label {
   flex: 1;
   order: 0;
-  padding: 13px;
-  text-align: auto;
+  padding: $alert-ios-radio-label-padding;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -148,7 +161,7 @@ ion-alert {
 .alert-radio-icon {
   position: relative;
   order: 1;
-  min-width: 30px;
+  min-width: $alert-ios-radio-icon-min-width;
 }
 
 .alert-radio[aria-checked=true] {
@@ -187,24 +200,24 @@ ion-alert {
 .alert-checkbox-icon {
   margin: 10px 6px 10px 16px;
   position: relative;
-  width: $alert-checkbox-ios-icon-size;
-  height: $alert-checkbox-ios-icon-size;
-  border-radius: $alert-checkbox-ios-icon-border-radius;
-  border-width: $alert-checkbox-ios-icon-border-width;
-  border-style: $alert-checkbox-ios-icon-border-style;
-  border-color: $alert-checkbox-ios-icon-border-color-off;
-  background-color: $alert-checkbox-ios-background-color-off;
+  width: $alert-ios-checkbox-icon-size;
+  height: $alert-ios-checkbox-icon-size;
+  border-radius: $alert-ios-checkbox-icon-border-radius;
+  border-width: $alert-ios-checkbox-icon-border-width;
+  border-style: $alert-ios-checkbox-icon-border-style;
+  border-color: $alert-ios-checkbox-icon-border-color-off;
+  background-color: $alert-ios-checkbox-background-color-off;
 }
 
 .alert-checkbox[aria-checked=true] .alert-checkbox-icon {
-  background-color: $alert-checkbox-ios-background-color-on;
-  border-color: $alert-checkbox-ios-icon-border-color-on;
+  background-color: $alert-ios-checkbox-background-color-on;
+  border-color: $alert-ios-checkbox-icon-border-color-on;
 
   .alert-checkbox-inner {
     position: absolute;
-    border-width: $alert-checkbox-ios-icon-checkmark-width;
-    border-style: $alert-checkbox-ios-icon-checkmark-style;
-    border-color: $alert-checkbox-ios-icon-checkmark-color;
+    border-width: $alert-ios-checkbox-icon-checkmark-width;
+    border-style: $alert-ios-checkbox-icon-checkmark-style;
+    border-color: $alert-ios-checkbox-icon-checkmark-color;
     top: 4px;
     left: 7px;
     width: 4px;
@@ -220,34 +233,30 @@ ion-alert {
 // --------------------------------------------------
 
 .alert-button-group {
-  flex-wrap: wrap;
-  margin-right: -1px;
+  flex-wrap: $alert-ios-button-group-flex-wrap;
+  margin-right: -$alert-ios-button-border-width;
 }
 
 .alert-button {
-  margin: 0;
-  flex: 1 1 auto;
-  min-width: 50%;
+  margin: $alert-ios-button-margin;
+  flex: $alert-ios-button-flex;
+  min-width: $alert-ios-button-min-width;
   font-size: $alert-ios-button-font-size;
   height: $alert-ios-button-min-height;
   border-radius: $alert-ios-button-border-radius;
-  border-top: 1px solid $alert-ios-button-border-color;
-  border-right: 1px solid $alert-ios-button-border-color;
+  border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
+  border-right: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
   color: $alert-ios-button-text-color;
   background-color: $alert-ios-button-background-color;
+  overflow: hidden;
 
   &:last-child {
-    font-weight: bold;
+    font-weight: $alert-ios-button-main-font-weight;
     border-right: 0;
   }
 
   &.activated {
-    opacity: 1;
-    background-color: $alert-ios-button-activated-background-color;
-  }
-
-  &:hover:not(.disable-hover) {
-    opacity: 1;
+    background-color: $alert-ios-button-background-color-activated;
   }
 }
 
diff --git a/ionic/components/alert/alert.md.scss b/ionic/components/alert/alert.md.scss
index 4f00a8c341c..11a5f907bd9 100644
--- a/ionic/components/alert/alert.md.scss
+++ b/ionic/components/alert/alert.md.scss
@@ -18,19 +18,36 @@ $alert-md-sub-title-font-size:                16px !default;
 $alert-md-message-font-size:                  15px !default;
 $alert-md-message-padding:                    0 24px 24px 24px !default;
 $alert-md-message-text-color:                 rgba(0,0,0,.5) !default;
+$alert-md-message-padding-empty:              0 !default;
 
+$alert-md-content-max-height:                 240px !default;
+
+$alert-md-input-border-width:                 1px !default;
+$alert-md-input-border-style:                 solid !default;
 $alert-md-input-border-color:                 #dedede !default;
 $alert-md-input-text-color:                   #000000 !default;
-$alert-md-input-highlight-color:              map-get($colors-md, primary) !default;
+
+$alert-md-input-border-width-focused:         2px !default;
+$alert-md-input-border-style-focused:         $alert-md-input-border-style !default;
+$alert-md-input-border-color-focused:         map-get($colors-md, primary) !default;
+
 $alert-md-input-margin-top:                   5px !default;
+$alert-md-input-margin-right:                 0 !default;
 $alert-md-input-margin-bottom:                5px !default;
+$alert-md-input-margin-left:                  0 !default;
 
+$alert-md-button-group-flex-wrap:             wrap-reverse !default;
+$alert-md-button-group-padding:               8px 8px 8px 24px !default;
+$alert-md-button-group-justify-content:       flex-end !default;
+
+$alert-md-button-padding:                     10px !default;
+$alert-md-button-font-weight:                 500 !default;
 $alert-md-button-text-color:                  map-get($colors-md, primary) !default;
 $alert-md-button-background-color:            transparent !default;
 $alert-md-button-background-color-activated:  rgba(158, 158, 158, 0.2) !default;
 $alert-md-button-border-radius:               2px !default;
-$alert-md-buttons-padding:                    8px 8px 8px 24px !default;
-$alert-md-buttons-justify-content:            flex-end !default;
+$alert-md-button-text-transform:              uppercase !default;
+$alert-md-button-text-align:                  right !default;
 
 
 .alert-wrapper {
@@ -69,10 +86,10 @@ $alert-md-buttons-justify-content:            flex-end !default;
 
 .alert-message {
   font-size: $alert-md-message-font-size;
-  max-height: 240px;
+  max-height: $alert-md-content-max-height;
 
   &:empty {
-    padding: 0;
+    padding: $alert-md-message-padding-empty;
   }
 }
 
@@ -81,12 +98,12 @@ $alert-md-buttons-justify-content:            flex-end !default;
 // --------------------------------------------------
 
 .alert-input {
-  border-bottom: 1px solid $alert-md-input-border-color;
+  border-bottom: $alert-md-input-border-width $alert-md-input-border-style $alert-md-input-border-color;
   color: $alert-md-input-text-color;
-  margin: $alert-md-input-margin-top 0 $alert-md-input-margin-bottom 0;
+  margin: $alert-md-input-margin-top $alert-md-input-margin-right $alert-md-input-margin-bottom $alert-md-input-margin-left;
 
   &:focus {
-    border-bottom: 2px solid $alert-md-input-highlight-color;
+    border-bottom: $alert-md-input-border-width-focused $alert-md-input-border-style-focused $alert-md-input-border-color-focused;
     margin-bottom: $alert-md-input-margin-bottom - 1;
   }
 }
@@ -100,7 +117,7 @@ $alert-md-buttons-justify-content:            flex-end !default;
   position: relative;
   border-top: 1px solid $alert-md-input-border-color;
   border-bottom: 1px solid $alert-md-input-border-color;
-  max-height: 240px;
+  max-height: $alert-md-content-max-height;
   overflow: auto;
 }
 
@@ -215,24 +232,25 @@ $alert-md-buttons-justify-content:            flex-end !default;
 // --------------------------------------------------
 
 .alert-button-group {
-  padding: $alert-md-buttons-padding;
-  justify-content: $alert-md-buttons-justify-content;
-  flex-wrap: wrap-reverse;
+  padding: $alert-md-button-group-padding;
+  justify-content: $alert-md-button-group-justify-content;
+  flex-wrap: $alert-md-button-group-flex-wrap;
 }
 
 .alert-button {
-  position: relative;
-  overflow: hidden;
-  padding: 10px;
-  font-weight: 500;
+  padding: $alert-md-button-padding;
+  font-weight: $alert-md-button-font-weight;
   color: $alert-md-button-text-color;
   background-color: $alert-md-button-background-color;
   border-radius: $alert-md-button-border-radius;
-  text-transform: uppercase;
-  text-align: right;
+  text-transform: $alert-md-button-text-transform;
+  text-align: $alert-md-button-text-align;
+
+  // necessary for ripple to work properly
+  position: relative;
+  overflow: hidden;
 
   &.activated {
     background-color: $alert-md-button-background-color-activated;
-    opacity: 1;
   }
 }