From b43d4a0edbe98d62af5c4623aadf777206840ceb Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sun, 5 Apr 2015 21:09:58 -0500
Subject: [PATCH] action-menu

---
 src/components/action-menu/action-menu.js     | 35 ++++++++++---------
 src/components/action-menu/action-menu.scss   | 13 +++++--
 .../action-menu/extensions/ios.scss           |  6 +++-
 3 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/components/action-menu/action-menu.js b/src/components/action-menu/action-menu.js
index 6f08f95c4c..1ce6ac70cf 100644
--- a/src/components/action-menu/action-menu.js
+++ b/src/components/action-menu/action-menu.js
@@ -9,25 +9,26 @@ export let ActionMenuConfig = new ComponentConfig('action-menu')
 })
 @Template({
   inline: `
-    <div class="pane-backdrop"></div>
-    <div class="action-menu-container">
+    <div class="overlay-backdrop"></div>
+    <div class="overlay-container">
+      <div class="action-menu-container">
 
-      <div class="action-menu-group">
-        <div class="action-menu-label">Action Menu Label</div>
-        <button class="button action-menu-button">Button 1</button>
-        <button class="button action-menu-button">Button 2</button>
+        <div class="action-menu-group">
+          <div class="action-menu-label">Action Menu Label</div>
+          <button class="button action-menu-button">Button 1</button>
+          <button class="button action-menu-button">Button 2</button>
+        </div>
+
+        <div class="action-menu-group">
+          <div class="action-menu-label">Action Menu Label</div>
+          <button class="button action-menu-button">Button 1</button>
+          <button class="button action-menu-button">Button 2</button>
+        </div>
+
+        <div class="action-menu-group">
+          <button class="button action-menu-button">Button 1</button>
+        </div>
       </div>
-
-      <div class="action-menu-group">
-        <div class="action-menu-label">Action Menu Label</div>
-        <button class="button action-menu-button">Button 1</button>
-        <button class="button action-menu-button">Button 2</button>
-      </div>
-
-      <div class="action-menu-group">
-        <button class="button action-menu-button">Button 1</button>
-      </div>
-
     </div>`
 })
 export class ActionMenu {
diff --git a/src/components/action-menu/action-menu.scss b/src/components/action-menu/action-menu.scss
index 96691386d7..d856699df0 100644
--- a/src/components/action-menu/action-menu.scss
+++ b/src/components/action-menu/action-menu.scss
@@ -2,8 +2,10 @@
 // Action Menu
 // --------------------------------------------------
 
-$action-menu-background-color:           rgba(243,243,243,.95) !default;
-$action-menu-button-text-color:          #007aff !default;
+$action-menu-width:                     100% !default;
+$action-menu-max-width:                 520px !default;
+$action-menu-background-color:          rgba(243,243,243,.95) !default;
+$action-menu-button-text-color:         #007aff !default;
 
 
 .action-menu-container {
@@ -14,6 +16,13 @@ $action-menu-button-text-color:          #007aff !default;
   width: 100%;
 }
 
+.action-menu-group {
+  width: $action-menu-width;
+  max-width: $action-menu-max-width;
+  margin-right: auto;
+  margin-left: auto;
+}
+
 .action-menu-group .action-menu-label {
   display: block;
   width: 100%;
diff --git a/src/components/action-menu/extensions/ios.scss b/src/components/action-menu/extensions/ios.scss
index a300f5a262..50dc38db15 100644
--- a/src/components/action-menu/extensions/ios.scss
+++ b/src/components/action-menu/extensions/ios.scss
@@ -19,7 +19,8 @@ $action-menu-ios-button-font-size:         2rem !default;
   text-align: center;
 
   .action-menu-group {
-    margin: $action-menu-ios-group-margin;
+    margin-top: $action-menu-ios-group-margin;
+    margin-bottom: $action-menu-ios-group-margin;
   }
 
   .action-menu-label,
@@ -29,6 +30,7 @@ $action-menu-ios-button-font-size:         2rem !default;
     @include flex-justify-content(center);
     @include flex-align-items(center);
 
+    margin: 0;
     border: 0;
     min-height: 44px;
 
@@ -57,11 +59,13 @@ $action-menu-ios-button-font-size:         2rem !default;
   .action-menu-label {
     font-size: $action-menu-ios-label-font-size;
     color: $action-menu-ios-label-color;
+    border-radius: 0;
   }
 
   .action-menu-button {
     font-size: $action-menu-ios-button-font-size;
     color: $action-menu-ios-button-color;
+    border-radius: 0;
   }
 
   .action-menu-label:first-child,