javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

checkbox

Browse Source
This commit is contained in:
Adam Bradley
2015-03-25 22:33:29 -05:00
parent 6f035ed1a8
commit 0e0c0df733
4 changed files with 96 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,6 +24,7 @@
@import
"../aside/aside",
"../button/button",
"../checkbox/checkbox",
"../content/content",
"../item/item",
"../list/list",

24
src/components/checkbox/checkbox.scss
View File

@ -0,0 +1,24 @@
// Checkbox
// --------------------------------------------------
.checkbox-on {
display: none;
}
.checkbox-off {
display: block;
}
.checkbox[aria-checked=true] {
.checkbox-on {
display: block;
}
.checkbox-off {
display: none;
}
}

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

@ -1,16 +1,68 @@
<div class="item checkbox"
role="checkbox"
aria-label="Airplane Mode"
aria-checked="true"
aria-invalid="false">
<div class="pane">
<div class="item-container">
<div class="pane-container">
<div class="item-media"></div>
<div class="bar">
Checkbox Default CSS Tests
</div>
<div class="content">
<div class="list">
<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 class="item-content">
Airplane Mode
</div>
</div>

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

@ -47,6 +47,16 @@ $item-padding-left: 15px !default;
padding: $item-padding-top $item-padding-right $item-padding-bottom $item-padding-left;
}
.item-media {
@include flex-display();
@include flex-shrink(0);
@include flex-wrap(nowrap);
@include flex-align-items(center);
padding-top: 7px;
padding-bottom: 8px;
}
.item-title {
position: relative;