Skip to content

Instantly share code, notes, and snippets.

@chonz0
Last active July 27, 2018 08:07
Show Gist options
  • Save chonz0/84f394b2fd76867f3ffd55a139c00f03 to your computer and use it in GitHub Desktop.
Save chonz0/84f394b2fd76867f3ffd55a139c00f03 to your computer and use it in GitHub Desktop.
Ionic: nicer styles for action sheet in Android
/*
* Credits to https://forum.ionicframework.com/t/actionsheets-android-ugly-styling-need-help/18462/12
*/
.platform-android .action-sheet-backdrop.active {
background-color: rgba(0, 0, 0, 0.1);
}
.platform-android .action-sheet {
align-content: center;
margin: auto;
max-width: 96vw;
border-radius: 5px;
margin-bottom: 10px;
}
.platform-android .action-sheet .action-sheet-title, .platform-android .action-sheet .button {
text-align: left;
font-size: 16px;
color: inherit;
}
.platform-android .action-sheet .action-sheet-title {
font-size: 14px;
padding: 16px;
color: #666;
}
.platform-android .action-sheet .button {
border-color: #e2e2e2;
padding-left: 16px;
color: #104e89;
}
.platform-android .action-sheet .button.destructive {
color: red;
}
.platform-android .action-sheet .button.active, .platform-android .action-sheet .button.activated {
background: #e8e8e8;
}
.platform-android .action-sheet-group {
border-radius: 0;
background-color: #fafafa;
}
.platform-android .action-sheet-cancel {
display: none;
}
.platform-android .action-sheet-has-icons .button {
padding-left: 56px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment