javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-24 14:58:36 +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

2
scripts/snapshot/snapshot.task.js
View File

@ -32,7 +32,7 @@ module.exports = function(gulp, argv, buildConfig) {
platform_count: 1,
width: 400,
height: 800,
test_id: uuid.v4()
test_id: uuid.v4().split('-')[0]
}
}, argv);

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>

3
src/components/icon/icon.js
View File

@ -5,7 +5,6 @@ import {NgElement, Decorator} from 'angular2/angular2'
})
export class Icon {
constructor(@NgElement() ngEle:NgElement) {
ngEle.domElement.setAttribute('class', 'icon ion-home')
ngEle.domElement.setAttribute('aria-hidden', 'hidden')
}
}

1
src/components/icon/icon.scss
View File

@ -15,5 +15,6 @@
@import "ionicons-icons";
icon {
display: inline-block;
font-size: 1.8em;
}

4
src/components/item/extensions/ios.scss
View File

@ -15,6 +15,10 @@ $item-ios-border-color: $list-ios-border-color !default;
padding-left: $item-ios-padding-left;
}
.item-media + .item-content {
margin-left: $item-ios-padding-left;
}
.item-content {
min-height: $item-ios-min-height;
padding: 0;