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

iOS checkbox

Browse Source
This commit is contained in:
Adam Bradley
2015-03-25 22:48:27 -05:00
parent 0e0c0df733
commit 461266bb17
6 changed files with 85 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/app/ionic.scss
View File

@@ -43,6 +43,7 @@
// iOS Components
@import
"../checkbox/extensions/ios/checkbox-ios",
"../list/extensions/ios/list-ios",
"../item/extensions/ios/item-ios";

9
src/components/checkbox/extensions/ios/checkbox-ios.scss Normal file
View File

@@ -0,0 +1,9 @@
// iOS Checkbox
// --------------------------------------------------
.list-ios .checkbox {
}

70
src/components/checkbox/test/checkbox-ios-default/index.html Normal file
View File

@@ -0,0 +1,70 @@
<div class="pane">
<div class="pane-container">
<div class="bar">
iOS Checkbox Default CSS Tests
</div>
<div class="content">
<div class="list list-ios">
<div class="list-content">
<div class="item checkbox"
role="checkbox"
aria-checked="true"
aria-invalid="false">
<div class="item-media">
<div class="checkbox-off">Off</div>
<div class="checkbox-on">On</div>
</div>
<div class="item-content">
<div class="item-title">
I am pleased
</div>
</div>
</div>
<div class="item checkbox"
role="checkbox"
aria-checked="false"
aria-invalid="false">
<div class="item-media">
<div class="checkbox-off">Off</div>
<div class="checkbox-on">On</div>
</div>
<div class="item-content">
<div class="item-title">
Hello
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

0
src/components/checkbox/test/checkbox-ios-default/main.js Normal file
View File

5
src/components/item/extensions/ios/item-ios.scss
View File

@@ -3,9 +3,6 @@
// --------------------------------------------------
$item-ios-min-height: 44px !default;
$item-ios-padding-top: 8px !default;
$item-ios-padding-right: 15px !default;
$item-ios-padding-bottom: 7px !default;
$item-ios-padding-left: 15px !default;
$item-ios-accessory-color: #8e8e93 !default;
$item-ios-border-color: $list-ios-border-color !default;
@@ -20,7 +17,7 @@ $item-ios-border-color: $list-ios-border-color !default;
.item-content {
min-height: $item-ios-min-height;
padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom 0;
padding: 0;
&:after {
position: absolute;

11
src/components/item/item.scss
View File

@@ -3,10 +3,6 @@
// --------------------------------------------------
$item-min-height: 44px !default;
$item-padding-top: 15px !default;
$item-padding-right: 15px !default;
$item-padding-bottom: 15px !default;
$item-padding-left: 15px !default;
// <li class="item">
@@ -44,7 +40,7 @@ $item-padding-left: 15px !default;
width: 100%;
min-height: $item-min-height;
padding: $item-padding-top $item-padding-right $item-padding-bottom $item-padding-left;
padding: 0;
}
.item-media {
@@ -53,8 +49,9 @@ $item-padding-left: 15px !default;
@include flex-wrap(nowrap);
@include flex-align-items(center);
padding-top: 7px;
padding-bottom: 8px;
min-height: $item-min-height;
padding: 0;
}
.item-title {