javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 04:53:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(sass): update windows action sheet sass to use variables

Browse Source 
remove unused styles

references #5651
This commit is contained in:
Brandy Carney
2016-03-03 15:31:38 -05:00
parent 62c7199fd1
commit a51268cd6c
2 changed files with 22 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
ionic/components/action-sheet/action-sheet.wp.scss
View File

@ -5,9 +5,9 @@
// -------------------------------------------------- // --------------------------------------------------
$action-sheet-wp-text-align: left !default; $action-sheet-wp-text-align: left !default;
$action-sheet-wp-background: #ffffff !default;
$action-sheet-wp-background-color: #ffffff !default;
$action-sheet-wp-box-shadow: 0px -1px 0px rgba(0,0,0,0.2) !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-padding: 19px 16px 17px !default;
$action-sheet-wp-title-font-size: 2.0rem !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-font-size: 1.5rem !default;
$action-sheet-wp-button-padding: 0 16px !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-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-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 { .action-sheet-wrapper {
box-shadow: $action-sheet-wp-box-shadow; box-shadow: $action-sheet-wp-box-shadow;
@ -36,44 +41,34 @@ $action-sheet-wp-icon-margin: 0 28px 0 0 !default;
} }
.action-sheet-button { .action-sheet-button {
position: relative;
overflow: hidden;
padding: $action-sheet-wp-button-padding; padding: $action-sheet-wp-button-padding;
min-height: $action-sheet-wp-button-height; min-height: $action-sheet-wp-button-height;
font-size: $action-sheet-wp-button-font-size; font-size: $action-sheet-wp-button-font-size;
font-weight: normal;
color: $action-sheet-wp-button-text-color; color: $action-sheet-wp-button-text-color;
background-color: transparent; background: $action-sheet-wp-button-background;
text-align: $action-sheet-wp-button-text-align; text-align: $action-sheet-wp-button-text-align;
&.activated { &.activated {
background: $action-sheet-wp-button-background-active-color; background: $action-sheet-wp-button-background-activated;
border-radius: 0;
box-shadow: none;
} }
} }
.action-sheet-icon { .action-sheet-icon {
display: inline-block;
margin: $action-sheet-wp-icon-margin; margin: $action-sheet-wp-icon-margin;
min-width: 24px; min-width: $action-sheet-wp-icon-min-width;
text-align: center; text-align: $action-sheet-wp-icon-text-align;
vertical-align: middle; vertical-align: $action-sheet-wp-icon-vertical-align;
font-size: $action-sheet-wp-icon-font-size; font-size: $action-sheet-wp-icon-font-size;
} }
.action-sheet-group { .action-sheet-group {
overflow: hidden; background: $action-sheet-wp-background;
margin: 0;
border-radius: 0;
background-color: $action-sheet-wp-background-color;
&:last-child .action-sheet-button { &:last-child .action-sheet-button {
margin-bottom: 8px; margin-bottom: $action-sheet-wp-group-margin-bottom;
} }
} }
.action-sheet-cancel { .action-sheet-cancel {
background-color: $action-sheet-wp-background-color; background: $action-sheet-wp-button-background;
border: none;
} }

10
ionic/components/action-sheet/test/basic/index.ts
View File

@ -18,7 +18,7 @@ class E2EPage {
{ {
text: 'Delete', text: 'Delete',
role: 'destructive', role: 'destructive',
icon: this.platform.is('android') ? 'trash' : null, icon: !this.platform.is('ios') ? 'trash' : null,
handler: () => { handler: () => {
console.log('Delete clicked'); console.log('Delete clicked');
this.result = 'Deleted'; this.result = 'Deleted';
@ -26,7 +26,7 @@ class E2EPage {
}, },
{ {
text: 'Share', text: 'Share',
icon: this.platform.is('android') ? 'share' : null, icon: !this.platform.is('ios') ? 'share' : null,
handler: () => { handler: () => {
console.log('Share clicked'); console.log('Share clicked');
this.result = 'Shared'; this.result = 'Shared';
@ -34,7 +34,7 @@ class E2EPage {
}, },
{ {
text: 'Play', text: 'Play',
icon: this.platform.is('android') ? 'arrow-dropright-circle' : null, icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null,
handler: () => { handler: () => {
let modal = Modal.create(ModalPage); let modal = Modal.create(ModalPage);
this.nav.present(modal); this.nav.present(modal);
@ -45,7 +45,7 @@ class E2EPage {
}, },
{ {
text: 'Favorite', text: 'Favorite',
icon: this.platform.is('android') ? 'heart' : null, icon: !this.platform.is('ios') ? 'heart' : null,
handler: () => { handler: () => {
console.log('Favorite clicked'); console.log('Favorite clicked');
this.result = 'Favorited'; this.result = 'Favorited';
@ -54,7 +54,7 @@ class E2EPage {
{ {
text: 'Cancel', text: 'Cancel',
role: 'cancel', // will always sort to be on the bottom 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: () => { handler: () => {
console.log('Cancel clicked'); console.log('Cancel clicked');
this.result = 'Canceled'; this.result = 'Canceled';