fix(action-sheet): Improve Action Sheet styles across all the platfor…

…ms (#8736) fixes #8663
ionic-team · Nov 3, 2016 · 8d2c8b6 · 8d2c8b6
1 parent 299522f
commit 8d2c8b6
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 27 deletions.
diff --git a/src/components/action-sheet/action-sheet.md.scss b/src/components/action-sheet/action-sheet.md.scss
@@ -19,7 +19,7 @@ $action-sheet-md-title-color:                           #757575 !default;
 $action-sheet-md-title-font-size:                       1.6rem !default;
 
 /// @prop - Padding of the action sheet title
-$action-sheet-md-title-padding:                         19px 16px 17px !default;
+$action-sheet-md-title-padding:                         11px 16px 17px !default;
 
 /// @prop - Min height of the action sheet button
 $action-sheet-md-button-min-height:                     4.8rem !default;
@@ -42,8 +42,8 @@ $action-sheet-md-button-background-activated:           #f1f1f1 !default;
 /// @prop - Font size of the icon in the action sheet button
 $action-sheet-md-icon-font-size:                        2.4rem !default;
 
-/// @prop - Min width of the icon in the action sheet button
-$action-sheet-md-icon-min-width:                        24px !default;
+/// @prop - Width of the icon in the action sheet button
+$action-sheet-md-icon-width:                            2.3rem !default;
 
 /// @prop - Text align of the icon in the action sheet button
 $action-sheet-md-icon-text-align:                       center !default;
@@ -52,8 +52,13 @@ $action-sheet-md-icon-text-align:                       center !default;
 $action-sheet-md-icon-vertical-align:                   middle !default;
 
 /// @prop - Margin of the icon in the action sheet button
-$action-sheet-md-icon-margin:                           0 28px 0 0 !default;
+$action-sheet-md-icon-margin:                           0 32px 0 0 !default;
 
+.action-sheet-md .action-sheet-container {
+  padding: .8rem 0;
+
+  background: $action-sheet-md-background;
+}
 
 .action-sheet-md .action-sheet-title {
   padding: $action-sheet-md-title-padding;
@@ -83,8 +88,9 @@ $action-sheet-md-icon-margin:                           0 28px 0 0 !default;
 
 .action-sheet-md .action-sheet-icon {
   margin: $action-sheet-md-icon-margin;
+  padding: 0;
 
-  min-width: $action-sheet-md-icon-min-width;
+  width: $action-sheet-md-icon-width;
 
   font-size: $action-sheet-md-icon-font-size;
   text-align: $action-sheet-md-icon-text-align;
@@ -93,12 +99,6 @@ $action-sheet-md-icon-margin:                           0 28px 0 0 !default;
 
 .action-sheet-md .action-sheet-group {
   overflow: hidden;
-
-  background: $action-sheet-md-background;
-}
-
-.action-sheet-md .action-sheet-group:last-child .action-sheet-button {
-  margin-bottom: $action-sheet-md-group-margin-bottom;
 }
 
 .action-sheet-md .action-sheet-group .button-inner {

diff --git a/src/components/action-sheet/action-sheet.wp.scss b/src/components/action-sheet/action-sheet.wp.scss
@@ -15,11 +15,8 @@ $action-sheet-wp-box-shadow-color:                rgba(0, 0, 0, .2) !default;
 /// @prop - Box shadow of the action sheet
 $action-sheet-wp-box-shadow:                      0 -1px 0 $action-sheet-wp-box-shadow-color !default;
 
-/// @prop - Bottom margin of the action sheet button group
-$action-sheet-wp-group-margin-bottom:             8px !default;
-
 /// @prop - Padding of the action sheet title
-$action-sheet-wp-title-padding:                   19px 16px 17px !default;
+$action-sheet-wp-title-padding:                   11px 16px 17px !default;
 
 /// @prop - Font size of the action sheet title
 $action-sheet-wp-title-font-size:                 2rem !default;
@@ -51,20 +48,20 @@ $action-sheet-wp-button-background:               transparent !default;
 /// @prop - Background color of the action sheet activated button
 $action-sheet-wp-button-background-activated:     $list-wp-activated-background-color !default;
 
-/// @prop - Min width of the icon in the action sheet button
-$action-sheet-wp-icon-min-width:                  24px !default;
+/// @prop - Font size of the icon in the action sheet button
+$action-sheet-wp-icon-font-size:                  2.4rem !default;
+
+/// @prop - Width of the icon in the action sheet button
+$action-sheet-wp-icon-width:                      2.3rem !default;
 
 /// @prop - Text align of the icon in the action sheet button
 $action-sheet-wp-icon-text-align:                 center !default;
 
 /// @prop - Vertical align of the icon in the action sheet button
 $action-sheet-wp-icon-vertical-align:             middle !default;
 
-/// @prop - Font size of the icon in the action sheet button
-$action-sheet-wp-icon-font-size:                  2.4rem !default;
-
 /// @prop - Margin of the icon in the action sheet button
-$action-sheet-wp-icon-margin:                     0 16px 0 0 !default;
+$action-sheet-wp-icon-margin:                     0 20px 0 0 !default;
 
 
 .action-sheet-wp .action-sheet-wrapper {
@@ -96,20 +93,19 @@ $action-sheet-wp-icon-margin:                     0 16px 0 0 !default;
 
 .action-sheet-wp .action-sheet-icon {
   margin: $action-sheet-wp-icon-margin;
+  padding: 0;
 
-  min-width: $action-sheet-wp-icon-min-width;
+  width: $action-sheet-wp-icon-width;
 
   font-size: $action-sheet-wp-icon-font-size;
   text-align: $action-sheet-wp-icon-text-align;
   vertical-align: $action-sheet-wp-icon-vertical-align;
 }
 
-.action-sheet-wp .action-sheet-group {
-  background: $action-sheet-wp-background;
-}
+.action-sheet-wp .action-sheet-container {
+  padding: .8rem 0;
 
-.action-sheet-wp .action-sheet-group:last-child .action-sheet-button {
-  margin-bottom: $action-sheet-wp-group-margin-bottom;
+  background: $action-sheet-wp-background;
 }
 
 .action-sheet-wp .action-sheet-group .button-inner {