mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 13:32:54 +08:00
fix(action-sheet): proper colors for icons
This commit is contained in:

committed by
mhartington

parent
bcb6bbb1d8
commit
4065ce2649
@ -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;
|
||||||
|
@ -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
69
packages/core/src/components/action-sheet/test/basic.html
Normal 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>
|
Reference in New Issue
Block a user