mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-11 04:07:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

.box > .check

Browse Source
This commit is contained in:
FezVrasta 2014-09-07 13:49:49 +02:00
parent c4bd0ed646
commit 9616bdd40b
2 changed files with 5 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
less/checkboxes.less
View File

@ -25,7 +25,7 @@
opacity: 0;
margin: 0;
}
.box {
.check {
border: 2px solid @lightbg-text;
height: 20px;
width: 20px;
@ -39,7 +39,7 @@
// Hide native checkbox
input[type=checkbox] { display: none; }
input[type=checkbox] ~ .box {
input[type=checkbox] ~ .check {
position: absolute;
top: 0px;
left: 0px;
@ -50,7 +50,7 @@
.animation(uncheck 300ms ease-out forwards);
}
input[type=checkbox]:checked ~ .box {
input[type=checkbox]:checked ~ .check {
.animation(check 300ms ease-out forwards);
}
@ -63,14 +63,13 @@
}
// Style for disabled inputs
input[type=checkbox][disabled]:not(:checked) ~ .box {
input[type=checkbox][disabled]:not(:checked) ~ .check {
opacity: 0.5;
}
input[type=checkbox][disabled] ~ .ripple {
background-color: @lightbg-text;
}
.variations(~" input[type=checkbox]:checked ~ .ripple", background-color, @success);
}

15
scripts/material.js
View File

@ -5,7 +5,7 @@ $(function (){
ripples.init(".btn:not(.btn-link), .navbar a, .nav-tabs a, .withripple");
// Add fake-checkbox to material checkboxes
$(".checkbox label input").after("<span class=ripple></span><span class=check></span><span class=box></span>");
$(".checkbox label input").after("<span class=ripple></span><span class=check></span>");
// Add fake-radio to material radios
$(".radio label input").after("<span class=ripple></span><span class=circle></span><span class=check></span>");
@ -24,19 +24,6 @@ $(function (){
}
});
// Material inputs engine (ripple effect)
/*$(document).on("mouseup", ".checkbox label, .radio label", function() {
console.log("click");
var $ripple = $(this).find(".ripple");
$ripple.addClass("animate");
var timer = setTimeout(function() {
console.log("out");
clearTimeout(timer);
$ripple.removeClass("animate");
}, 800);
});*/
$(document).on("change", ".form-control", function() {
if ($(this).val() !== "") {
$(this).removeClass("empty");