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

fix(alert): add checkbox icon for iOS using Sass variables from regular checkbox

Browse Source 
Closes #5253
This commit is contained in:
Brandy Carney
2016-01-30 14:55:07 -05:00
parent ecb5e4f031
commit 68819f097e
2 changed files with 45 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
ionic/components/alert/alert.ios.scss
View File

@@ -1,5 +1,6 @@
@import "../../globals.ios";
@import "./alert";
@import "../checkbox/checkbox.ios";
// iOS Alerts
// --------------------------------------------------
@@ -37,6 +38,18 @@ $alert-ios-button-border-radius: 0 !default;
$alert-ios-button-border-color: #c8c7cc !default;
$alert-ios-button-activated-background-color: #e9e9e9 !default;
$alert-checkbox-ios-icon-size: $checkbox-ios-icon-size !default;
$alert-checkbox-ios-icon-border-radius: $checkbox-ios-icon-border-radius !default;
$alert-checkbox-ios-icon-border-width: $checkbox-ios-icon-border-width !default;
$alert-checkbox-ios-icon-border-style: $checkbox-ios-icon-border-style !default;
$alert-checkbox-ios-icon-border-color-off: $checkbox-ios-icon-border-color-off !default;
$alert-checkbox-ios-icon-border-color-on: $checkbox-ios-icon-border-color-on !default;
$alert-checkbox-ios-background-color-off: $checkbox-ios-background-color-off !default;
$alert-checkbox-ios-background-color-on: $checkbox-ios-background-color-on !default;
$alert-checkbox-ios-icon-checkmark-width: $checkbox-ios-icon-checkmark-width !default;
$alert-checkbox-ios-icon-checkmark-style: $checkbox-ios-icon-checkmark-style !default;
$alert-checkbox-ios-icon-checkmark-color: $checkbox-ios-icon-checkmark-color !default;
ion-alert {
background: $alert-ios-background;
@@ -164,6 +177,37 @@ ion-alert {
white-space: nowrap;
}
.alert-checkbox-icon {
margin: 10px 6px 10px 16px;
position: relative;
width: $alert-checkbox-ios-icon-size;
height: $alert-checkbox-ios-icon-size;
border-radius: $alert-checkbox-ios-icon-border-radius;
border-width: $alert-checkbox-ios-icon-border-width;
border-style: $alert-checkbox-ios-icon-border-style;
border-color: $alert-checkbox-ios-icon-border-color-off;
background-color: $alert-checkbox-ios-background-color-off;
}
.alert-checkbox[aria-checked=true] .alert-checkbox-icon {
background-color: $alert-checkbox-ios-background-color-on;
border-color: $alert-checkbox-ios-icon-border-color-on;
.alert-checkbox-inner {
position: absolute;
border-width: $alert-checkbox-ios-icon-checkmark-width;
border-style: $alert-checkbox-ios-icon-checkmark-style;
border-color: $alert-checkbox-ios-icon-checkmark-color;
top: 4px;
left: 7px;
width: 4px;
height: 9px;
border-left: none;
border-top: none;
transform: rotate(45deg);
}
}
// iOS Alert Button
// --------------------------------------------------

2
ionic/components/alert/alert.ts
View File

@@ -260,7 +260,7 @@ export class Alert extends ViewController {
'<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">' +
'<div class="alert-checkbox-icon"></div>' +
'<div class="alert-checkbox-icon"><div class="alert-checkbox-inner"></div></div>' +
'<div class="alert-checkbox-label">' +
'{{i.label}}' +
'</div>' +