javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

checkbox tests

Browse Source
This commit is contained in:
Adam Bradley
2013-10-16 18:47:07 -05:00
parent 073b30c818
commit a1208893f0
5 changed files with 46 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/ionic-scoped.css vendored
View File

@ -2125,7 +2125,7 @@
border-right: none; border-right: none;
content: ''; content: '';
opacity: 0; opacity: 0;
transition: opacity 0.1s ease-in-out; transition: opacity 0.05s ease-in-out;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); } transform: rotate(-45deg); }
.ionic .checkbox input:checked + .handle { .ionic .checkbox input:checked + .handle {

2
dist/css/ionic.css vendored
View File

@ -2588,7 +2588,7 @@ input[type="checkbox"][readonly] {
border-right: none; border-right: none;
content: ''; content: '';
opacity: 0; opacity: 0;
transition: opacity 0.1s ease-in-out; transition: opacity 0.05s ease-in-out;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); } transform: rotate(-45deg); }
.checkbox input:checked + .handle { .checkbox input:checked + .handle {

2
scss/ionic/_checkbox.scss
View File

@ -31,7 +31,7 @@
border-right: none; border-right: none;
content: ''; content: '';
opacity: 0; opacity: 0;
transition: opacity .1s ease-in-out; transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); transform: rotate(-45deg);

1
test/index.html
View File

@ -28,6 +28,7 @@
<p><a class="button button-block button-default" href="input-radio.html"><i class="icon-star-half-empty"></i> Input: Radio Buttons</a></p> <p><a class="button button-block button-default" href="input-radio.html"><i class="icon-star-half-empty"></i> Input: Radio Buttons</a></p>
<p><a class="button button-block button-default" href="input-range.html"><i class="icon-star"></i> Input: Range</a></p> <p><a class="button button-block button-default" href="input-range.html"><i class="icon-star"></i> Input: Range</a></p>
<p><a class="button button-block button-default" href="input-select.html"><i class="icon-star-empty"></i> Input: Select</a></p> <p><a class="button button-block button-default" href="input-select.html"><i class="icon-star-empty"></i> Input: Select</a></p>
<p><a class="button button-block button-default" href="input-checkbox.html"><i class="icon-star"></i> Input: Checkbox</a></p>
<p><a class="button button-block button-default" href="input-toggle.html"><i class="icon-star-half-empty"></i> Input: Toggle</a></p> <p><a class="button button-block button-default" href="input-toggle.html"><i class="icon-star-half-empty"></i> Input: Toggle</a></p>
<p><a class="button button-block button-default" href="lists.html"><i class="icon-star-half-empty"></i> Lists</a></p> <p><a class="button button-block button-default" href="lists.html"><i class="icon-star-half-empty"></i> Lists</a></p>
<p><a class="button button-block button-default" href="modals.html"><i class="icon-star-empty"></i> Modals</a></p> <p><a class="button button-block button-default" href="modals.html"><i class="icon-star-empty"></i> Modals</a></p>

42
test/input-checkbox.html Normal file
View File

@ -0,0 +1,42 @@
<html>
<head>
<meta charset="utf-8">
<title>Input: Checkbox</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="../dist/css/ionic.css" rel="stylesheet">
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Input: Checkbox</h1>
</header>
<div class="content-wrapper">
<main class="content has-header">
<ul class="list">
<li class="list-item">
Airplane Mode
<label class="checkbox" id="airplaneMode">
<input type="checkbox" name="airplaneMode">
<div class="handle"></div>
</label>
</li>
<li class="list-item">
Do Not Disturb
<label class="checkbox" id="doNotDisturb">
<input type="checkbox" name="doNotDisturb" checked="checked">
<div class="handle"></div>
</label>
</li>
</ul>
</main>
</div>
</body>
</html>