From 3b8a5a503dfebfc69164461e987b004edebc3f73 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 21 Jul 2015 10:47:07 -0500
Subject: [PATCH] action menu

---
 ionic/components/action-menu/action-menu.scss | 15 +-----
 .../action-menu/extensions/ios.scss           | 54 +++++++++++--------
 ionic/components/app/mixins/util.scss         | 37 +++++++++----
 ionic/components/item/extensions/ios.scss     |  4 +-
 ionic/components/nav-bar/extensions/ios.scss  |  6 ---
 ionic/components/toolbar/extensions/ios.scss  | 14 -----
 6 files changed, 62 insertions(+), 68 deletions(-)

diff --git a/ionic/components/action-menu/action-menu.scss b/ionic/components/action-menu/action-menu.scss
index 3de22e9fc4..d3db013992 100644
--- a/ionic/components/action-menu/action-menu.scss
+++ b/ionic/components/action-menu/action-menu.scss
@@ -10,9 +10,6 @@ $action-menu-button-text-color:         #007aff !default;
 $action-menu-backdrop-color:            #000 !default;
 $action-menu-backdrop-active-opacity:   0.4 !default;
 
-$action-menu-margin:                    8px !default;
-$action-menu-border-radius:             4px !default;
-
 $action-menu-options-bg-color:          #f1f2f3 !default;
 $action-menu-options-bg-active-color:   #e4e5e7 !default;
 $action-menu-options-text-color:        #007aff !default;
@@ -52,8 +49,6 @@ $action-menu-options-border-color:      #d1d3d6 !default;
 }
 
 .action-menu-container {
-  margin-left: $action-menu-margin;
-  margin-right: $action-menu-margin;
   width: auto;
   overflow: hidden;
 
@@ -72,12 +67,6 @@ $action-menu-options-border-color:      #d1d3d6 !default;
     &:hover {
       color: $action-menu-options-text-color;
     }
-    &.destructive {
-      color: #ff3b30;
-      &:hover {
-        color: #ff3b30;
-      }
-    }
   }
 
   button.activated,
@@ -95,15 +84,13 @@ $action-menu-options-border-color:      #d1d3d6 !default;
 }
 
 .action-menu-title {
-  padding: $action-menu-margin * 2;
+  padding: 10px;
   color: #8f8f8f;
   text-align: center;
   font-size: 13px;
 }
 
 .action-menu-group {
-  margin-bottom: $action-menu-margin;
-  border-radius: $action-menu-border-radius;
   background-color: #fff;
   overflow: hidden;
 
diff --git a/ionic/components/action-menu/extensions/ios.scss b/ionic/components/action-menu/extensions/ios.scss
index e928cdd224..d02011df81 100644
--- a/ionic/components/action-menu/extensions/ios.scss
+++ b/ionic/components/action-menu/extensions/ios.scss
@@ -2,21 +2,23 @@
 // iOS Action Menu
 // --------------------------------------------------
 
-$action-menu-ios-group-margin:             8px !default;
+$action-menu-ios-group-margin:             10px !default;
 $action-menu-ios-background-color:         rgba(243,243,243,.95) !default;
+$action-menu-ios-background-active-color:  #ebebeb !default;
 
+$action-menu-ios-height:                   5.6rem !default;
+$action-menu-ios-padding:                  1.8rem !default;
 $action-menu-ios-border-color:             #d2d2d6 !default;
-$action-menu-ios-border-radius:            10px !default;
+$action-menu-ios-border-radius:            1.3rem !default;
 
-$action-menu-ios-title-color:              #8a8a8a !default;
-$action-menu-ios-title-font-size:          1.3rem !default;
+$action-menu-ios-title-color:              #5f5f5f !default;
+$action-menu-ios-title-font-size:          1.2rem !default;
 
-$action-menu-ios-button-color:             #007aff !default;
+$action-menu-ios-button-text-color:        #007aff !default;
 $action-menu-ios-button-font-size:         2rem !default;
 
 $action-menu-ios-icon-font-size:           1.4em !default;
 
-$action-menu-ios-option-height:            50px !default;
 
 .action-menu[mode="ios"] {
   text-align: center;
@@ -25,41 +27,51 @@ $action-menu-ios-option-height:            50px !default;
     padding: 0 $action-menu-ios-group-margin;
   }
 
+  button {
+    min-height: $action-menu-ios-height;
+    padding: $action-menu-ios-padding;
+
+    margin: 0;
+    border: 0;
+
+    background: transparent;
+
+    &:active,
+    &.activated {
+      background: $action-menu-ios-background-active-color;
+    }
+  }
+
   .action-menu-group {
-    margin-top: $action-menu-ios-group-margin;
-    margin-bottom: $action-menu-ios-group-margin;
+    margin-bottom: $action-menu-ios-group-margin - 2;
     border-radius: $action-menu-ios-border-radius;
   }
 
+  .action-menu-group:last-child {
+    margin-bottom: $action-menu-ios-group-margin;
+  }
+
   .action-menu-title,
   .action-menu-option {
-    position: relative;
-    /*
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    */
-
-    margin: 0;
-    border: 0;
-    min-height: $action-menu-ios-option-height;
+    min-height: $action-menu-ios-height;
 
     background: $action-menu-ios-background-color;
     font-weight: 400;
 
-    @include hairline(bottom, $action-menu-ios-border-color, $z-index-list-border);
+    @include hairline(bottom, $action-menu-ios-border-color);
   }
 
   .action-menu-title {
+    padding: 2rem;
     font-size: $action-menu-ios-title-font-size;
-    font-weight: bold;
+    font-weight: 500;
     color: $action-menu-ios-title-color;
     border-radius: 0;
   }
 
   .action-menu-option {
     font-size: $action-menu-ios-button-font-size;
-    color: $action-menu-ios-button-color;
+    color: $action-menu-ios-button-text-color;
     border-radius: 0;
   }
 
diff --git a/ionic/components/app/mixins/util.scss b/ionic/components/app/mixins/util.scss
index cdd3ecae80..492e99a2a5 100644
--- a/ionic/components/app/mixins/util.scss
+++ b/ionic/components/app/mixins/util.scss
@@ -46,49 +46,64 @@
 // --------------------------------------------------
 
 @mixin hairline($placement, $line-color, $z-index: 999) {
-  // use $line-color: none to override existing hairline settings
+  // border-width: 1px will actually create 2 device pixels on retina
+  // this nifty trick sets an actual 1px border on hi-res displays
+
+  position: relative;
 
   @if $placement == top {
-
     &:before {
       @if $line-color == none {
-        background-color: inherit;
+        border-top: none;
 
       } @else {
         position: absolute;
         top: 0;
-        right: auto;
         bottom: auto;
         left: 0;
         z-index: $z-index;
         display: block;
         width: 100%;
         height: 1px;
-        transform-origin: 50% 0%;
-        background-color: $line-color;
         content: '';
+
+        border-top: 1px solid $line-color;
+
+        @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
+          border: none;
+          background-image: linear-gradient(0deg, $line-color, $line-color 50%, transparent 50%);
+          background-position: bottom;
+          background-size: 100% 1px;
+          background-repeat: no-repeat;
+        }
       }
     }
 
   } @else if $placement == bottom {
-
     &:after {
       @if $line-color == none {
-        background-color: inherit;
+        border-bottom: none;
 
       } @else {
         position: absolute;
         top: auto;
-        right: auto;
         bottom: 0;
         left: 0;
         z-index: $z-index;
         display: block;
         width: 100%;
         height: 1px;
-        transform-origin: 50% 0%;
-        background-color: $line-color;
         content: '';
+
+        border-bottom: 1px solid $line-color;
+
+        @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
+          border: none;
+          background-image: linear-gradient(0deg, $line-color, $line-color 50%, transparent 50%);
+          background-position: bottom;
+          background-size: 100% 1px;
+          background-repeat: no-repeat;
+        }
       }
     }
 
diff --git a/ionic/components/item/extensions/ios.scss b/ionic/components/item/extensions/ios.scss
index 2ada4bb04c..121290138e 100644
--- a/ionic/components/item/extensions/ios.scss
+++ b/ionic/components/item/extensions/ios.scss
@@ -24,7 +24,7 @@ $item-ios-border-color:          $list-ios-border-color !default;
     .item-content {
       min-height: $item-ios-min-height;
       padding: 0;
-      @include hairline(bottom, $item-ios-border-color, $z-index-list-border);
+      @include hairline(bottom, $item-ios-border-color);
     }
 
     .item:last-of-type .item-content:after {
@@ -52,7 +52,7 @@ $item-ios-border-color:          $list-ios-border-color !default;
 
   .item-group-title {
     // TODO: This doesn't look great when it's a header for the first item
-    @include hairline(bottom, $item-ios-border-color, $z-index-list-border);
+    @include hairline(bottom, $item-ios-border-color);
   }
 
 }
diff --git a/ionic/components/nav-bar/extensions/ios.scss b/ionic/components/nav-bar/extensions/ios.scss
index 0cb3910eb6..7d95fbab0c 100644
--- a/ionic/components/nav-bar/extensions/ios.scss
+++ b/ionic/components/nav-bar/extensions/ios.scss
@@ -11,12 +11,6 @@ $navbar-ios-border-color:                  #c4c4c4 !default;
 
   // navbar on top, border on bottom (default)
   @include hairline(bottom, $navbar-ios-border-color);
-
-  // navbar on bottom, border on top
-  &.navbar-bottom:after {
-    top: 0;
-    bottom: auto;
-  }
 }
 
 .navbar[mode="ios"] {
diff --git a/ionic/components/toolbar/extensions/ios.scss b/ionic/components/toolbar/extensions/ios.scss
index b72e654059..c37f4e3deb 100644
--- a/ionic/components/toolbar/extensions/ios.scss
+++ b/ionic/components/toolbar/extensions/ios.scss
@@ -15,20 +15,6 @@ $toolbar-ios-button-font-size:              1.7rem !default;
 $toolbar-ios-title-font-size:               1.7rem !default;
 
 
-.nav[mode="ios"] .toolbar-container {
-  min-height: $toolbar-ios-height;
-
-  // toolbar on top, border on bottom (default)
-  @include hairline(bottom, $toolbar-ios-border-color);
-
-
-  // toolbar on bottom, border on top
-  &.toolbar-bottom:after {
-    top: 0;
-    bottom: auto;
-  }
-}
-
 .toolbar[mode="ios"] {
 
   .toolbar-title {