fix(alert): update radio/checkbox items to buttons elements

This commit is contained in:
Adam Bradley
2016-03-05 21:51:15 -06:00
parent 77b77d1582
commit b24dc27e0b
5 changed files with 15 additions and 7 deletions

View File

@ -142,7 +142,6 @@ $alert-ios-checkbox-icon-checkmark-color: $background-ios-color !default;
.alert-tappable {
display: flex;
min-height: $alert-ios-button-min-height;
cursor: pointer;
}

View File

@ -127,7 +127,6 @@ $alert-md-button-text-align: right !default;
overflow: hidden;
display: flex;
min-height: 44px;
cursor: pointer;
}

View File

@ -78,3 +78,14 @@ ion-alert {
line-height: $alert-button-line-height;
font-size: $alert-button-font-size;
}
.alert-tappable {
margin: 0;
padding: 0;
width: 100%;
font-size: inherit;
line-height: initial;
text-align: left;
background: transparent;
-webkit-appearance: none;
}

View File

@ -219,23 +219,23 @@ export class Alert extends ViewController {
'<template ngSwitchWhen="radio">' +
'<div class="alert-radio-group" role="radiogroup" [attr.aria-labelledby]="hdrId" [attr.aria-activedescendant]="activeId">' +
'<div *ngFor="#i of d.inputs" (click)="rbClick(i)" [attr.aria-checked]="i.checked" [attr.id]="i.id" class="alert-tappable alert-radio" tappable role="radio">' +
'<button *ngFor="#i of d.inputs" (click)="rbClick(i)" [attr.aria-checked]="i.checked" [attr.id]="i.id" class="alert-tappable alert-radio" role="radio">' +
'<div class="alert-radio-icon"></div>' +
'<div class="alert-radio-label">' +
'{{i.label}}' +
'</div>' +
'</div>' +
'</button>' +
'</div>' +
'</template>' +
'<template ngSwitchWhen="checkbox">' +
'<div class="alert-checkbox-group">' +
'<div *ngFor="#i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" class="alert-tappable alert-checkbox" tappable role="checkbox">' +
'<button *ngFor="#i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" class="alert-tappable alert-checkbox" role="checkbox">' +
'<div class="alert-checkbox-icon"><div class="alert-checkbox-inner"></div></div>' +
'<div class="alert-checkbox-label">' +
'{{i.label}}' +
'</div>' +
'</div>' +
'</button>' +
'</div>' +
'</template>' +

View File

@ -143,7 +143,6 @@ ion-alert {
overflow: hidden;
display: flex;
min-height: 44px;
cursor: pointer;
}