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

iOS checkbox

Browse Source
This commit is contained in:
Adam Bradley
2015-03-27 14:31:38 -05:00
parent f53b7e13b6
commit 7afd5d39ab
6 changed files with 67 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/checkbox/extensions/ios.scss
View File

@ -2,8 +2,14 @@
// iOS Checkbox
// --------------------------------------------------
.list-ios .checkbox {
$checkbox-ios-color: #007aff;
.list-ios {
.media-checkbox {
min-width: 20px;
color: $checkbox-ios-color;
}
}

62
src/components/checkbox/test/checkbox-ios/main.html
View File

@ -3,14 +3,14 @@
<div class="pane-container">
<div class="bar">
iOS Checkbox Tests
</div>
<div class="content">
<div class="content" style="background: #efeff4">
<div class="list list-ios">
<div class="list-header">
iOS Checkboxes
</div>
<div class="list-content">
@ -20,15 +20,59 @@
aria-checked="true"
aria-invalid="false">
<div class="item-media">
<div class="checkbox-off">Off</div>
<div class="checkbox-on">On</div>
<div class="item-media media-checkbox">
<icon class="ion-ios-circle-outline checkbox-off"></icon>
<icon class="ion-ios-checkmark checkbox-on"></icon>
</div>
<div class="item-content">
<div class="item-title">
I am pleased
Apples
</div>
</div>
</div>
<div class="item checkbox ios-checkbox"
role="checkbox"
aria-checked="false"
aria-invalid="false">
<div class="item-media media-checkbox">
<icon class="ion-ios-circle-outline checkbox-off"></icon>
<icon class="ion-ios-checkmark checkbox-on"></icon>
</div>
<div class="item-content">
<div class="item-title">
Bananas
</div>
</div>
</div>
<div class="item checkbox ios-checkbox"
role="checkbox"
aria-checked="true"
aria-invalid="false">
<div class="item-media media-checkbox">
<icon class="ion-ios-circle-outline checkbox-off"></icon>
<icon class="ion-ios-checkmark checkbox-on"></icon>
</div>
<div class="item-content">
<div class="item-title">
Oranges
</div>
</div>