增加checkbix
This commit is contained in:
shuzheng
parent
a9a8832394
commit
de54318d94
|
|
@ -9,6 +9,7 @@
|
|||
<link href="plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
|
||||
<link href="plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
|
||||
<link href="plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
|
||||
<link href="plugins/checkbix/css/checkbix.min.css" rel="stylesheet"/>
|
||||
<link href="css/login.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -28,18 +29,18 @@
|
|||
<div class="clearfix">
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" value="">
|
||||
<i class="input-helper"></i>
|
||||
自动登录
|
||||
</label>
|
||||
<input id="rememberMe" type="checkbox" class="checkbix" data-text="自动登录">
|
||||
</div>
|
||||
<a id="login-bt" href="javascript:;" class="waves-effect waves-button waves-float"><i class="zmdi zmdi-arrow-forward"></i></a>
|
||||
</div>
|
||||
<script src="plugins/jquery.1.12.4.min.js"></script>
|
||||
<script src="plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
|
||||
<script src="plugins/waves-0.7.5/waves.min.js"></script>
|
||||
<script src="plugins/checkbix/js/checkbix.min.js"></script>
|
||||
|
||||
<script src="js/login.js"></script>
|
||||
<script type="text/javascript">
|
||||
Checkbix.init();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,233 @@
|
|||
input[type='checkbox'].checkbix {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
input[type='checkbox'].checkbix + label {
|
||||
position: relative;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
-webkit-transition: all 250ms cubic-bezier(.4,.0,.23,1);
|
||||
transition: all 250ms cubic-bezier(.4,.0,.23,1);
|
||||
margin-bottom: .15rem;
|
||||
}
|
||||
|
||||
input[type='checkbox'].checkbix + label > span {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin-right: .5em;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: transparent;
|
||||
border: .1rem solid #333;
|
||||
border-radius: 1px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 250ms cubic-bezier(.4,.0,.23,1);
|
||||
transition: all 250ms cubic-bezier(.4,.0,.23,1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input[type='checkbox'].checkbix:focus + label > span {
|
||||
outline: 0;
|
||||
border-color: rgb(0,20,20);
|
||||
box-shadow: 0 0 0 1px rgba(0,20,20,.5);
|
||||
}
|
||||
|
||||
input[type='checkbox'].checkbix:checked + label > span {
|
||||
background: #5ECD62;
|
||||
border: .1rem solid transparent;
|
||||
-webkit-animation: reveal 200ms cubic-bezier(.4,.0,.5,1);
|
||||
animation: reveal 200ms cubic-bezier(.4,.0,.5,1);
|
||||
}
|
||||
|
||||
input[type='checkbox'].checkbix:checked + label > span:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 22%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-right: 2px solid transparent;
|
||||
border-bottom: 2px solid transparent;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
-webkit-transform-origin: 0% 100%;
|
||||
transform-origin: 0% 100%;
|
||||
-webkit-animation: checkboxcheck 125ms 50ms cubic-bezier(.1,.0,.1,1) forwards;
|
||||
animation: checkboxcheck 125ms 50ms cubic-bezier(.1,.0,.1,1) forwards;
|
||||
}
|
||||
|
||||
@-webkit-keyframes reveal{
|
||||
0%{
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
33%{
|
||||
-webkit-transform: scale(.5);
|
||||
transform: scale(.5);
|
||||
}
|
||||
100%{
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes reveal{
|
||||
0%{
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
33%{
|
||||
-webkit-transform: scale(.5);
|
||||
transform: scale(.5);
|
||||
}
|
||||
100%{
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes checkboxcheck {
|
||||
0%{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: white;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
33%{
|
||||
width: .2em;
|
||||
height: .3em;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
100%{
|
||||
width: .2em;
|
||||
height: .4em;
|
||||
border-color: white;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkboxcheck {
|
||||
0%{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: white;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
33%{
|
||||
width: .2em;
|
||||
height: .3em;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
100%{
|
||||
width: .2em;
|
||||
height: .4em;
|
||||
border-color: white;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Size */
|
||||
input[type='checkbox'].checkbix[data-size='large'] + label > span {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
input[type='checkbox'].checkbix[data-size='large'] + label > span:before {
|
||||
-webkit-animation: checkboxchecklarge 125ms 50ms cubic-bezier(.1,.0,.1,1) forwards;
|
||||
animation: checkboxchecklarge 125ms 50ms cubic-bezier(.1,.0,.1,1) forwards;
|
||||
border-right: 3px solid transparent;
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
|
||||
@-webkit-keyframes checkboxchecklarge {
|
||||
0%{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: white;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
33%{
|
||||
width: .3em;
|
||||
height: .6em;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
100%{
|
||||
width: .3em;
|
||||
height: .6em;
|
||||
border-color: white;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkboxchecklarge {
|
||||
0%{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: white;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
33%{
|
||||
width: .3em;
|
||||
height: .6em;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
100%{
|
||||
width: .3em;
|
||||
height: .6em;
|
||||
border-color: white;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Shape */
|
||||
input[type='checkbox'].checkbix[data-shape='circled'] + label > span {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
/* Colors */
|
||||
input[type='checkbox'].checkbix[data-color='black']:checked + label > span {
|
||||
background: #111;
|
||||
}
|
||||
|
||||
input[type='checkbox'].checkbix[data-color='blue']:checked + label > span {
|
||||
background: #0074D9;
|
||||
}
|
||||
|
||||
input[type='checkbox'].checkbix[data-color='red']:checked + label > span {
|
||||
background: #FF4136;
|
||||
}
|
||||
|
||||
input[type='checkbox'].checkbix[data-color='gray']:checked + label > span {
|
||||
background: #AAAAAA;
|
||||
}
|
||||
|
||||
input[type='checkbox'].checkbix[data-color='orange']:checked + label > span {
|
||||
background: #FF851B;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
input[type=checkbox].checkbix{position:absolute;opacity:0;z-index:-1}input[type=checkbox].checkbix+label{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:inherit;-webkit-transition:all 250ms cubic-bezier(.4,0,.23,1);transition:all 250ms cubic-bezier(.4,0,.23,1);margin-bottom:.15rem}input[type=checkbox].checkbix+label>span{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:.5em;width:16px;height:16px;background:0 0;border:.1rem solid #333;border-radius:1px;cursor:pointer;-webkit-transition:all 250ms cubic-bezier(.4,0,.23,1);transition:all 250ms cubic-bezier(.4,0,.23,1);position:relative}input[type=checkbox].checkbix:focus+label>span{outline:0;border-color:#001414;box-shadow:0 0 0 1px rgba(0,20,20,.5)}input[type=checkbox].checkbix:checked+label>span{background:#5ECD62;border:.1rem solid transparent;-webkit-animation:reveal .2s cubic-bezier(.4,0,.5,1);animation:reveal .2s cubic-bezier(.4,0,.5,1)}input[type=checkbox].checkbix:checked+label>span:before{content:"";position:absolute;top:0;left:22%;margin-left:auto;margin-right:auto;border-right:2px solid transparent;border-bottom:2px solid transparent;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-animation:checkboxcheck 125ms 50ms cubic-bezier(.1,0,.1,1) forwards;animation:checkboxcheck 125ms 50ms cubic-bezier(.1,0,.1,1) forwards}@-webkit-keyframes reveal{0%,100%{-webkit-transform:scale(1);transform:scale(1)}33%{-webkit-transform:scale(.5);transform:scale(.5)}}@keyframes reveal{0%,100%{-webkit-transform:scale(1);transform:scale(1)}33%{-webkit-transform:scale(.5);transform:scale(.5)}}@-webkit-keyframes checkboxcheck{0%{width:0;height:0;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}33%{width:.2em;height:.3em;-webkit-transform:rotate(45deg);transform:rotate(45deg)}100%{width:.2em;height:.4em;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}}@keyframes checkboxcheck{0%{width:0;height:0;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}33%{width:.2em;height:.3em;-webkit-transform:rotate(45deg);transform:rotate(45deg)}100%{width:.2em;height:.4em;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}}input[type=checkbox].checkbix[data-size=large]+label>span{width:24px;height:24px}input[type=checkbox].checkbix[data-size=large]+label>span:before{-webkit-animation:checkboxchecklarge 125ms 50ms cubic-bezier(.1,0,.1,1) forwards;animation:checkboxchecklarge 125ms 50ms cubic-bezier(.1,0,.1,1) forwards;border-right:3px solid transparent;border-bottom:3px solid transparent}@-webkit-keyframes checkboxchecklarge{0%{width:0;height:0;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}33%{width:.3em;height:.6em;-webkit-transform:rotate(45deg);transform:rotate(45deg)}100%{width:.3em;height:.6em;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}}@keyframes checkboxchecklarge{0%{width:0;height:0;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}33%{width:.3em;height:.6em;-webkit-transform:rotate(45deg);transform:rotate(45deg)}100%{width:.3em;height:.6em;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}}input[type=checkbox].checkbix[data-shape=circled]+label>span{border-radius:100%}input[type=checkbox].checkbix[data-color=black]:checked+label>span{background:#111}input[type=checkbox].checkbix[data-color=blue]:checked+label>span{background:#0074D9}input[type=checkbox].checkbix[data-color=red]:checked+label>span{background:#FF4136}input[type=checkbox].checkbix[data-color=gray]:checked+label>span{background:#AAA}input[type=checkbox].checkbix[data-color=orange]:checked+label>span{background:#FF851B}
|
||||
|
|
@ -0,0 +1 @@
|
|||
(function(t,e){"use strict";if(typeof define==="function"&&define.amd){define("Checkbix",e)}else if(typeof exports==="object"){exports=module.exports=e()}else{t.Checkbix=e()}})(this,function(){"use strict";var t={};var e;var a={initClass:"checkbix"};var r=function(t,e,a){if(Object.prototype.toString.call(t)==="[object Object]"){for(var r in t){if(Object.prototype.hasOwnProperty.call(t,r)){e.call(a,t[r],r,t)}}}else{for(var n=0,i=t.length;n<i;n++){e.call(a,t[n],n,t)}}};var n=function(t,e){var a={};r(t,function(e,r){a[r]=t[r]});r(e,function(t,r){a[r]=e[r]});return a};var i=function(){var t=document.querySelectorAll("."+e.initClass);for(var a=0;a<t.length;a++){var r=t[a].getAttribute("data-size")?t[a].getAttribute("data-size"):"";var n=t[a].getAttribute("data-arialabel")?t[a].getAttribute("data-arialabel"):"";t[a].insertAdjacentHTML("afterend",'<label aria-label="'+n+'" role="checkbox" for="'+t[a].id+'" class="'+e.initClass+'"><span class="'+r+'"></span>'+t[a].getAttribute("data-text")+"</label>")}};t.destroy=function(){if(!e)return;document.removeEventListener("click",i,false);e=null};t.init=function(r){t.destroy();e=n(a,r||{});document.addEventListener("DOMContentLoaded",i,false)};return t});
|
||||
|
|
@ -0,0 +1 @@
|
|||
input[type=checkbox].checkbix{position:absolute;opacity:0;z-index:-1}input[type=checkbox].checkbix+label{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:inherit;-webkit-transition:all 250ms cubic-bezier(.4,0,.23,1);transition:all 250ms cubic-bezier(.4,0,.23,1);margin-bottom:.15rem}input[type=checkbox].checkbix+label>span{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:.5em;width:16px;height:16px;background:0 0;border:.1rem solid #333;border-radius:1px;cursor:pointer;-webkit-transition:all 250ms cubic-bezier(.4,0,.23,1);transition:all 250ms cubic-bezier(.4,0,.23,1);position:relative}input[type=checkbox].checkbix:focus+label>span{outline:0;border-color:#001414;box-shadow:0 0 0 1px rgba(0,20,20,.5)}input[type=checkbox].checkbix:checked+label>span{background:#5ECD62;border:.1rem solid transparent;-webkit-animation:reveal .2s cubic-bezier(.4,0,.5,1);animation:reveal .2s cubic-bezier(.4,0,.5,1)}input[type=checkbox].checkbix:checked+label>span:before{content:"";position:absolute;top:0;left:22%;margin-left:auto;margin-right:auto;border-right:2px solid transparent;border-bottom:2px solid transparent;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-animation:checkboxcheck 125ms 50ms cubic-bezier(.1,0,.1,1) forwards;animation:checkboxcheck 125ms 50ms cubic-bezier(.1,0,.1,1) forwards}@-webkit-keyframes reveal{0%,100%{-webkit-transform:scale(1);transform:scale(1)}33%{-webkit-transform:scale(.5);transform:scale(.5)}}@keyframes reveal{0%,100%{-webkit-transform:scale(1);transform:scale(1)}33%{-webkit-transform:scale(.5);transform:scale(.5)}}@-webkit-keyframes checkboxcheck{0%{width:0;height:0;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}33%{width:.2em;height:.3em;-webkit-transform:rotate(45deg);transform:rotate(45deg)}100%{width:.2em;height:.4em;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}}@keyframes checkboxcheck{0%{width:0;height:0;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}33%{width:.2em;height:.3em;-webkit-transform:rotate(45deg);transform:rotate(45deg)}100%{width:.2em;height:.4em;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}}input[type=checkbox].checkbix[data-size=large]+label>span{width:24px;height:24px}input[type=checkbox].checkbix[data-size=large]+label>span:before{-webkit-animation:checkboxchecklarge 125ms 50ms cubic-bezier(.1,0,.1,1) forwards;animation:checkboxchecklarge 125ms 50ms cubic-bezier(.1,0,.1,1) forwards;border-right:3px solid transparent;border-bottom:3px solid transparent}@-webkit-keyframes checkboxchecklarge{0%{width:0;height:0;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}33%{width:.3em;height:.6em;-webkit-transform:rotate(45deg);transform:rotate(45deg)}100%{width:.3em;height:.6em;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}}@keyframes checkboxchecklarge{0%{width:0;height:0;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}33%{width:.3em;height:.6em;-webkit-transform:rotate(45deg);transform:rotate(45deg)}100%{width:.3em;height:.6em;border-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}}input[type=checkbox].checkbix[data-shape=circled]+label>span{border-radius:100%}input[type=checkbox].checkbix[data-color=black]:checked+label>span{background:#111}input[type=checkbox].checkbix[data-color=blue]:checked+label>span{background:#0074D9}input[type=checkbox].checkbix[data-color=red]:checked+label>span{background:#FF4136}input[type=checkbox].checkbix[data-color=gray]:checked+label>span{background:#AAA}input[type=checkbox].checkbix[data-color=orange]:checked+label>span{background:#FF851B}
|
||||
|
|
@ -0,0 +1 @@
|
|||
!function(t,e){"use strict";"function"==typeof define&&define.amd?define("Checkbix",e):"object"==typeof exports?exports=module.exports=e():t.Checkbix=e()}(this,function(){"use strict";var t,e={},n={initClass:"checkbix"},i=function(t,e,n){if("[object Object]"===Object.prototype.toString.call(t))for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.call(n,t[i],i,t);else for(var a=0,r=t.length;a<r;a++)e.call(n,t[a],a,t)},a=function(t,e){var n={};return i(t,function(e,i){n[i]=t[i]}),i(e,function(t,i){n[i]=e[i]}),n},r=function(){for(var e=document.querySelectorAll("."+t.initClass),n=0;n<e.length;n++){var i=e[n].getAttribute("data-size")?e[n].getAttribute("data-size"):"",a=e[n].getAttribute("data-arialabel")?e[n].getAttribute("data-arialabel"):"";e[n].insertAdjacentHTML("afterend",'<label aria-label="'+a+'" role="checkbox" for="'+e[n].id+'" class="'+t.initClass+'"><span class="'+i+'"></span>'+e[n].getAttribute("data-text")+"</label>")}};return e.destroy=function(){t&&(document.removeEventListener("click",r,!1),t=null)},e.init=function(i){e.destroy(),t=a(n,i||{}),document.addEventListener("DOMContentLoaded",r,!1)},e});
|
||||
Loading…
Reference in New Issue