From a51268cd6cba8c0e273600cd3f8ed2f3e3f69dae Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 3 Mar 2016 15:31:38 -0500 Subject: [PATCH] refactor(sass): update windows action sheet sass to use variables remove unused styles references #5651 --- .../action-sheet/action-sheet.wp.scss | 39 ++++++++----------- .../action-sheet/test/basic/index.ts | 10 ++--- 2 files changed, 22 insertions(+), 27 deletions(-) diff --git a/ionic/components/action-sheet/action-sheet.wp.scss b/ionic/components/action-sheet/action-sheet.wp.scss index 25cc80f5d8..a87bed9545 100644 --- a/ionic/components/action-sheet/action-sheet.wp.scss +++ b/ionic/components/action-sheet/action-sheet.wp.scss @@ -5,9 +5,9 @@ // -------------------------------------------------- $action-sheet-wp-text-align: left !default; - -$action-sheet-wp-background-color: #ffffff !default; +$action-sheet-wp-background: #ffffff !default; $action-sheet-wp-box-shadow: 0px -1px 0px rgba(0,0,0,0.2) !default; +$action-sheet-wp-group-margin-bottom: 8px !default; $action-sheet-wp-title-padding: 19px 16px 17px !default; $action-sheet-wp-title-font-size: 2.0rem !default; @@ -19,10 +19,15 @@ $action-sheet-wp-button-text-color: #4D4D4D !default; $action-sheet-wp-button-font-size: 1.5rem !default; $action-sheet-wp-button-padding: 0 16px !default; $action-sheet-wp-button-text-align: $action-sheet-wp-text-align !default; -$action-sheet-wp-button-background-active-color: $list-wp-activated-background-color !default; +$action-sheet-wp-button-background: transparent !default; +$action-sheet-wp-button-background-activated: $list-wp-activated-background-color !default; +$action-sheet-wp-icon-min-width: 24px !default; +$action-sheet-wp-icon-text-align: center !default; +$action-sheet-wp-icon-vertical-align: middle !default; $action-sheet-wp-icon-font-size: 2.4rem !default; -$action-sheet-wp-icon-margin: 0 28px 0 0 !default; +$action-sheet-wp-icon-margin: 0 16px 0 0 !default; + .action-sheet-wrapper { box-shadow: $action-sheet-wp-box-shadow; @@ -36,44 +41,34 @@ $action-sheet-wp-icon-margin: 0 28px 0 0 !default; } .action-sheet-button { - position: relative; - overflow: hidden; padding: $action-sheet-wp-button-padding; min-height: $action-sheet-wp-button-height; font-size: $action-sheet-wp-button-font-size; - font-weight: normal; color: $action-sheet-wp-button-text-color; - background-color: transparent; + background: $action-sheet-wp-button-background; text-align: $action-sheet-wp-button-text-align; &.activated { - background: $action-sheet-wp-button-background-active-color; - border-radius: 0; - box-shadow: none; + background: $action-sheet-wp-button-background-activated; } } .action-sheet-icon { - display: inline-block; margin: $action-sheet-wp-icon-margin; - min-width: 24px; - text-align: center; - vertical-align: middle; + min-width: $action-sheet-wp-icon-min-width; + text-align: $action-sheet-wp-icon-text-align; + vertical-align: $action-sheet-wp-icon-vertical-align; font-size: $action-sheet-wp-icon-font-size; } .action-sheet-group { - overflow: hidden; - margin: 0; - border-radius: 0; - background-color: $action-sheet-wp-background-color; + background: $action-sheet-wp-background; &:last-child .action-sheet-button { - margin-bottom: 8px; + margin-bottom: $action-sheet-wp-group-margin-bottom; } } .action-sheet-cancel { - background-color: $action-sheet-wp-background-color; - border: none; + background: $action-sheet-wp-button-background; } diff --git a/ionic/components/action-sheet/test/basic/index.ts b/ionic/components/action-sheet/test/basic/index.ts index 9c97e4ca1a..abffe0d479 100644 --- a/ionic/components/action-sheet/test/basic/index.ts +++ b/ionic/components/action-sheet/test/basic/index.ts @@ -18,7 +18,7 @@ class E2EPage { { text: 'Delete', role: 'destructive', - icon: this.platform.is('android') ? 'trash' : null, + icon: !this.platform.is('ios') ? 'trash' : null, handler: () => { console.log('Delete clicked'); this.result = 'Deleted'; @@ -26,7 +26,7 @@ class E2EPage { }, { text: 'Share', - icon: this.platform.is('android') ? 'share' : null, + icon: !this.platform.is('ios') ? 'share' : null, handler: () => { console.log('Share clicked'); this.result = 'Shared'; @@ -34,7 +34,7 @@ class E2EPage { }, { text: 'Play', - icon: this.platform.is('android') ? 'arrow-dropright-circle' : null, + icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null, handler: () => { let modal = Modal.create(ModalPage); this.nav.present(modal); @@ -45,7 +45,7 @@ class E2EPage { }, { text: 'Favorite', - icon: this.platform.is('android') ? 'heart' : null, + icon: !this.platform.is('ios') ? 'heart' : null, handler: () => { console.log('Favorite clicked'); this.result = 'Favorited'; @@ -54,7 +54,7 @@ class E2EPage { { text: 'Cancel', role: 'cancel', // will always sort to be on the bottom - icon: this.platform.is('android') ? 'close' : null, + icon: !this.platform.is('ios') ? 'close' : null, handler: () => { console.log('Cancel clicked'); this.result = 'Canceled';