mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-13 13:17:03 +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; opacity: 0;
margin: 0; margin: 0;
} }
.box { .check {
border: 2px solid @lightbg-text; border: 2px solid @lightbg-text;
height: 20px; height: 20px;
width: 20px; width: 20px;
@ -39,7 +39,7 @@
// Hide native checkbox // Hide native checkbox
input[type=checkbox] { display: none; } input[type=checkbox] { display: none; }
input[type=checkbox] ~ .box { input[type=checkbox] ~ .check {
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
@ -50,7 +50,7 @@
.animation(uncheck 300ms ease-out forwards); .animation(uncheck 300ms ease-out forwards);
} }
input[type=checkbox]:checked ~ .box { input[type=checkbox]:checked ~ .check {
.animation(check 300ms ease-out forwards); .animation(check 300ms ease-out forwards);
} }
@ -63,14 +63,13 @@
} }
// Style for disabled inputs // Style for disabled inputs
input[type=checkbox][disabled]:not(:checked) ~ .box { input[type=checkbox][disabled]:not(:checked) ~ .check {
opacity: 0.5; opacity: 0.5;
} }
input[type=checkbox][disabled] ~ .ripple { input[type=checkbox][disabled] ~ .ripple {
background-color: @lightbg-text; background-color: @lightbg-text;
} }
.variations(~" input[type=checkbox]:checked ~ .ripple", background-color, @success); .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"); ripples.init(".btn:not(.btn-link), .navbar a, .nav-tabs a, .withripple");
// Add fake-checkbox to material checkboxes // 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 // Add fake-radio to material radios
$(".radio label input").after("<span class=ripple></span><span class=circle></span><span class=check></span>"); $(".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() { $(document).on("change", ".form-control", function() {
if ($(this).val() !== "") { if ($(this).val() !== "") {
$(this).removeClass("empty"); $(this).removeClass("empty");