mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-25 11:04:09 +03:00
implemented toggle buttons #248
This commit is contained in:
FezVrasta
parent
66610aada1
commit
185117e598
69
dist/css/material-wfont.css
vendored
69
dist/css/material-wfont.css
vendored
|
|
@ -3531,6 +3531,75 @@ body .jumbotron-material-lightgrey,
|
|||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.togglebutton {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.togglebutton,
|
||||
.togglebutton * {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.togglebutton label {
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
.togglebutton label input[type=checkbox]:first-child {
|
||||
opacity: 0;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.togglebutton label input[type=checkbox]:first-child:checked + .toggle {
|
||||
background-color: rgba(0, 149, 135, 0.5);
|
||||
}
|
||||
.togglebutton label input[type=checkbox]:first-child:checked + .toggle:after {
|
||||
background-color: #009587;
|
||||
}
|
||||
.togglebutton label .toggle,
|
||||
.togglebutton label input[type=checkbox][disabled]:first-child + .toggle {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 15px;
|
||||
background-color: rgba(80, 80, 80, 0.7);
|
||||
border-radius: 15px;
|
||||
margin-right: 10px;
|
||||
-webkit-transition: background 0.3s ease;
|
||||
transition: background 0.3s ease;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.togglebutton label .toggle:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #F1F1F1;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
|
||||
left: -5px;
|
||||
top: -2px;
|
||||
-webkit-transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
|
||||
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
.togglebutton label input[type=checkbox][disabled]:first-child + .toggle:after,
|
||||
.togglebutton label input[type=checkbox][disabled]:checked:first-child + .toggle:after {
|
||||
background-color: #BDBDBD;
|
||||
}
|
||||
.togglebutton label input[type=checkbox]:first-child:checked:active ~ .toggle:after,
|
||||
.togglebutton label input[type=checkbox]:first-child:checked ~ .toggle:active:after {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
|
||||
}
|
||||
.togglebutton label input[type=checkbox]:first-child:active ~ .toggle:after,
|
||||
.togglebutton label input[type=checkbox]:first-child ~ .toggle:active:after,
|
||||
.togglebutton label input[type=checkbox][disabled]:first-child ~ .toggle:active:after {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.togglebutton label input[type=checkbox]:first-child:checked + .toggle:after {
|
||||
left: 15px;
|
||||
}
|
||||
.form-horizontal .radio {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
|
|||
2
dist/css/material-wfont.css.map
vendored
2
dist/css/material-wfont.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material-wfont.min.css
vendored
2
dist/css/material-wfont.min.css
vendored
File diff suppressed because one or more lines are too long
69
dist/css/material.css
vendored
69
dist/css/material.css
vendored
|
|
@ -3524,6 +3524,75 @@ body .jumbotron-material-lightgrey,
|
|||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.togglebutton {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.togglebutton,
|
||||
.togglebutton * {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.togglebutton label {
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
.togglebutton label input[type=checkbox]:first-child {
|
||||
opacity: 0;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.togglebutton label input[type=checkbox]:first-child:checked + .toggle {
|
||||
background-color: rgba(0, 149, 135, 0.5);
|
||||
}
|
||||
.togglebutton label input[type=checkbox]:first-child:checked + .toggle:after {
|
||||
background-color: #009587;
|
||||
}
|
||||
.togglebutton label .toggle,
|
||||
.togglebutton label input[type=checkbox][disabled]:first-child + .toggle {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 15px;
|
||||
background-color: rgba(80, 80, 80, 0.7);
|
||||
border-radius: 15px;
|
||||
margin-right: 10px;
|
||||
-webkit-transition: background 0.3s ease;
|
||||
transition: background 0.3s ease;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.togglebutton label .toggle:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #F1F1F1;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
|
||||
left: -5px;
|
||||
top: -2px;
|
||||
-webkit-transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
|
||||
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
.togglebutton label input[type=checkbox][disabled]:first-child + .toggle:after,
|
||||
.togglebutton label input[type=checkbox][disabled]:checked:first-child + .toggle:after {
|
||||
background-color: #BDBDBD;
|
||||
}
|
||||
.togglebutton label input[type=checkbox]:first-child:checked:active ~ .toggle:after,
|
||||
.togglebutton label input[type=checkbox]:first-child:checked ~ .toggle:active:after {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
|
||||
}
|
||||
.togglebutton label input[type=checkbox]:first-child:active ~ .toggle:after,
|
||||
.togglebutton label input[type=checkbox]:first-child ~ .toggle:active:after,
|
||||
.togglebutton label input[type=checkbox][disabled]:first-child ~ .toggle:active:after {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.togglebutton label input[type=checkbox]:first-child:checked + .toggle:after {
|
||||
left: 15px;
|
||||
}
|
||||
.form-horizontal .radio {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
|
|||
2
dist/css/material.css.map
vendored
2
dist/css/material.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material.min.css
vendored
2
dist/css/material.min.css
vendored
File diff suppressed because one or more lines are too long
9
dist/js/material.js
vendored
9
dist/js/material.js
vendored
|
|
@ -31,6 +31,7 @@
|
|||
].join(","),
|
||||
"inputElements": "input.form-control, textarea.form-control, select.form-control",
|
||||
"checkboxElements": ".checkbox > label > input[type=checkbox]",
|
||||
"togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
|
||||
"radioElements": ".radio > label > input[type=radio]"
|
||||
},
|
||||
"checkbox": function(selector) {
|
||||
|
|
@ -40,6 +41,13 @@
|
|||
.data("mdproc", true)
|
||||
.after("<span class=ripple></span><span class=check></span>");
|
||||
},
|
||||
"togglebutton": function(selector) {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
$((selector) ? selector : this.options.togglebuttonElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class=toggle></span>");
|
||||
},
|
||||
"radio": function(selector) {
|
||||
// Add fake-radio to material radios
|
||||
$((selector) ? selector : this.options.radioElements)
|
||||
|
|
@ -124,6 +132,7 @@
|
|||
this.ripples();
|
||||
this.input();
|
||||
this.checkbox();
|
||||
this.togglebutton();
|
||||
this.radio();
|
||||
|
||||
if (document.arrive) {
|
||||
|
|
|
|||
2
dist/js/material.min.js
vendored
2
dist/js/material.min.js
vendored
|
|
@ -1,2 +1,2 @@
|
|||
!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=ripple></span><span class=check></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(c){a(c?c:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this);if(b.wrap("<div class=form-control-wrapper></div>"),b.after("<span class=material-input></span>"),b.hasClass("floating-label")){var c=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label"),b.after("<div class=floating-label>"+c+"</div>")}if(b.attr("data-hint")&&b.after("<div class=hint>"+b.attr("data-hint")+"</div>"),(null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),b.parent().next().is("[type=file]")){b.parent().addClass("fileinput");var d=b.parent().next().detach();b.after(d)}}),a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""===b.val()?b.addClass("empty"):b.removeClass("empty")}).on("focus",".form-control-wrapper.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var b="";a.each(a(this)[0].files,function(a,c){console.log(c),b+=c.name+", "}),b=b.substring(0,b.length-2),b?a(this).prev().removeClass("empty"):a(this).prev().addClass("empty"),a(this).prev().val(b)})},ripples:function(b){a.ripples({target:b?b:this.options.withRipples})},init:function(){this.ripples(),this.input(),this.checkbox(),this.radio(),document.arrive&&document.arrive("input, textarea, select",function(){a.material.init()}),function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){a(this).val()&&a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4);var c;a(document).on("focus","input",function(){var b=a(this).parents("form").find("input");c=setInterval(function(){b.each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100)}).on("blur","input",function(){clearInterval(c)})}()}}}(jQuery);
|
||||
!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",togglebuttonElements:".togglebutton > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=ripple></span><span class=check></span>")},togglebutton:function(b){a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("<span class=toggle></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(c){a(c?c:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this);if(b.wrap("<div class=form-control-wrapper></div>"),b.after("<span class=material-input></span>"),b.hasClass("floating-label")){var c=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label"),b.after("<div class=floating-label>"+c+"</div>")}if(b.attr("data-hint")&&b.after("<div class=hint>"+b.attr("data-hint")+"</div>"),(null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),b.parent().next().is("[type=file]")){b.parent().addClass("fileinput");var d=b.parent().next().detach();b.after(d)}}),a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""===b.val()?b.addClass("empty"):b.removeClass("empty")}).on("focus",".form-control-wrapper.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var b="";a.each(a(this)[0].files,function(a,c){console.log(c),b+=c.name+", "}),b=b.substring(0,b.length-2),b?a(this).prev().removeClass("empty"):a(this).prev().addClass("empty"),a(this).prev().val(b)})},ripples:function(b){a.ripples({target:b?b:this.options.withRipples})},init:function(){this.ripples(),this.input(),this.checkbox(),this.togglebutton(),this.radio(),document.arrive&&document.arrive("input, textarea, select",function(){a.material.init()}),function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){a(this).val()&&a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4);var c;a(document).on("focus","input",function(){var b=a(this).parents("form").find("input");c=setInterval(function(){b.each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100)}).on("blur","input",function(){clearInterval(c)})}()}}}(jQuery);
|
||||
//# sourceMappingURL=material.min.js.map
|
||||
|
|
|
|||
|
|
@ -1450,6 +1450,12 @@
|
|||
<input type="checkbox"> Checkbox
|
||||
</label>
|
||||
</div>
|
||||
<br>
|
||||
<div class="togglebutton">
|
||||
<label>
|
||||
<input type="checkbox" checked> Toggle button
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
|
|
|||
71
less/_togglebutton.less
Normal file
71
less/_togglebutton.less
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
.togglebutton {
|
||||
vertical-align: middle;
|
||||
&, * {
|
||||
user-select: none;
|
||||
}
|
||||
label {
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
// Hide original checkbox
|
||||
input[type=checkbox]:first-child {
|
||||
opacity: 0;
|
||||
display: block;
|
||||
width: 0;
|
||||
height:0;
|
||||
}
|
||||
// Switch bg on
|
||||
input[type=checkbox]:first-child:checked + .toggle {
|
||||
background-color: rgba(0, 149, 135, 0.5);
|
||||
// Handle on
|
||||
&:after {
|
||||
background-color: #009587;
|
||||
}
|
||||
}
|
||||
// Switch bg off and disabled
|
||||
.toggle,
|
||||
input[type=checkbox][disabled]:first-child + .toggle {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 15px;
|
||||
background-color: rgba(80, 80, 80, 0.7);
|
||||
border-radius: 15px;
|
||||
margin-right: 10px;
|
||||
transition: background 0.3s ease;
|
||||
vertical-align: middle;
|
||||
}
|
||||
// Handle off
|
||||
.toggle:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #F1F1F1;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4);
|
||||
left: -5px;
|
||||
top: -2px;
|
||||
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
// Handle disabled
|
||||
input[type=checkbox][disabled]:first-child + .toggle:after,
|
||||
input[type=checkbox][disabled]:checked:first-child + .toggle:after{
|
||||
background-color: #BDBDBD;
|
||||
}
|
||||
// Ripple on
|
||||
input[type=checkbox]:first-child:checked:active ~ .toggle:after,
|
||||
input[type=checkbox]:first-child:checked ~ .toggle:active:after {
|
||||
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
|
||||
}
|
||||
// Ripple off and disabled
|
||||
input[type=checkbox]:first-child:active ~ .toggle:after,
|
||||
input[type=checkbox]:first-child ~ .toggle:active:after,
|
||||
input[type=checkbox][disabled]:first-child ~ .toggle:active:after {
|
||||
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
input[type=checkbox]:first-child:checked + .toggle:after {
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -33,6 +33,9 @@ h5, h6{
|
|||
// Checkboxes
|
||||
@import "_checkboxes.less";
|
||||
|
||||
// Toggle buttons
|
||||
@import "_togglebutton.less";
|
||||
|
||||
// Radios
|
||||
@import "_radios.less";
|
||||
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@
|
|||
].join(","),
|
||||
"inputElements": "input.form-control, textarea.form-control, select.form-control",
|
||||
"checkboxElements": ".checkbox > label > input[type=checkbox]",
|
||||
"togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
|
||||
"radioElements": ".radio > label > input[type=radio]"
|
||||
},
|
||||
"checkbox": function(selector) {
|
||||
|
|
@ -40,6 +41,13 @@
|
|||
.data("mdproc", true)
|
||||
.after("<span class=ripple></span><span class=check></span>");
|
||||
},
|
||||
"togglebutton": function(selector) {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
$((selector) ? selector : this.options.togglebuttonElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class=toggle></span>");
|
||||
},
|
||||
"radio": function(selector) {
|
||||
// Add fake-radio to material radios
|
||||
$((selector) ? selector : this.options.radioElements)
|
||||
|
|
@ -124,6 +132,7 @@
|
|||
this.ripples();
|
||||
this.input();
|
||||
this.checkbox();
|
||||
this.togglebutton();
|
||||
this.radio();
|
||||
|
||||
if (document.arrive) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user