javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 13:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(action-sheet): proper colors for icons

Browse Source
This commit is contained in:
Brandy Carney
2017-08-09 17:17:58 -04:00
committed by mhartington
parent bcb6bbb1d8
commit 4065ce2649
3 changed files with 84 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/core/src/components/action-sheet/action-sheet.ios.scss
View File

@ -58,6 +58,9 @@ $action-sheet-ios-button-padding: 18px !default;
/// @prop - Text color of the action sheet button /// @prop - Text color of the action sheet button
$action-sheet-ios-button-text-color: #007aff !default; $action-sheet-ios-button-text-color: #007aff !default;
/// @prop - Fill color of the action sheet button icon
$action-sheet-ios-button-icon-fill-color: $action-sheet-ios-button-text-color !default;
/// @prop - Font size of the action sheet button /// @prop - Font size of the action sheet button
$action-sheet-ios-button-font-size: 2rem !default; $action-sheet-ios-button-font-size: 2rem !default;
@ -79,6 +82,9 @@ $action-sheet-ios-button-background-activated: #ebebeb !default;
/// @prop - Destructive text color of the action sheet button /// @prop - Destructive text color of the action sheet button
$action-sheet-ios-button-destructive-text-color: #f53d3d !default; $action-sheet-ios-button-destructive-text-color: #f53d3d !default;
/// @prop - Destructive fill color of the action sheet button icon
$action-sheet-ios-button-destructive-icon-fill-color: $action-sheet-ios-button-destructive-text-color !default;
/// @prop - Background color of the action sheet cancel button /// @prop - Background color of the action sheet cancel button
$action-sheet-ios-button-cancel-background: #fff !default; $action-sheet-ios-button-cancel-background: #fff !default;
@ -132,6 +138,10 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default;
background: $action-sheet-ios-button-background; background: $action-sheet-ios-button-background;
} }
.action-sheet-ios .action-sheet-button {
fill: $action-sheet-ios-button-icon-fill-color;
}
.action-sheet-ios .action-sheet-button:last-child { .action-sheet-ios .action-sheet-button:last-child {
border-bottom-color: transparent; border-bottom-color: transparent;
} }
@ -153,6 +163,10 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default;
color: $action-sheet-ios-button-destructive-text-color; color: $action-sheet-ios-button-destructive-text-color;
} }
.action-sheet-ios .action-sheet-destructive .action-sheet-icon {
fill: $action-sheet-ios-button-destructive-icon-fill-color;
}
.action-sheet-ios .action-sheet-cancel { .action-sheet-ios .action-sheet-cancel {
font-weight: $action-sheet-ios-button-cancel-font-weight; font-weight: $action-sheet-ios-button-cancel-font-weight;
background: $action-sheet-ios-button-cancel-background; background: $action-sheet-ios-button-cancel-background;

1
packages/core/src/components/action-sheet/action-sheet.tsx
View File

@ -146,6 +146,7 @@ export class ActionSheet {
if (this.cssClass) { if (this.cssClass) {
userCssClass += ' ' + this.cssClass; userCssClass += ' ' + this.cssClass;
} }
return [ return [
<ion-backdrop <ion-backdrop
onClick={this.backdropClick.bind(this)} onClick={this.backdropClick.bind(this)}

69
packages/core/src/components/action-sheet/test/basic.html Normal file
View File

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Action Sheet Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Action Sheet</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-button block onclick="presentActionSheet1()">Present Action Sheet 1</ion-button>
</ion-content>
</ion-app>
<script>
function presentActionSheet1() {
console.log('presenting');
Ionic.controller('action-sheet', {
title: "Albums",
buttons: [{
text: 'Delete',
role: 'destructive',
icon: 'trash',
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Share',
icon: 'share',
handler: () => {
console.log('Share clicked');
}
}, {
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
handler: () => {
console.log('Play clicked');
}
}, {
text: 'Favorite',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}]
})
.then(actionSheet => {
actionSheet.present()
});
}
</script>
</body>
</html>