mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-11 04:07:55 +03:00
Merge pull request #113 from npvn/card
Add styling for cards (first draft)
This commit is contained in:
Fez Vrasta
commit
091562d7ee
57
dist/css/material-wfont.css
vendored
57
dist/css/material-wfont.css
vendored
|
|
@ -4201,6 +4201,63 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
.icon-material-lightgrey {
|
||||
color: #ececec;
|
||||
}
|
||||
.card {
|
||||
/***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
/**************************************************************************/
|
||||
border-radius: 2px;
|
||||
color: rgba(0, 0, 0, 0.84);
|
||||
background: #ffffff;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
.card .card-height-indicator {
|
||||
margin-top: 100%;
|
||||
}
|
||||
.card .card-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.card .card-image {
|
||||
height: 60%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card .card-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.card .card-image .card-image-headline {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 18px;
|
||||
color: #ffffff;
|
||||
font-size: 2em;
|
||||
}
|
||||
.card .card-body {
|
||||
height: 30%;
|
||||
padding: 18px;
|
||||
}
|
||||
.card .card-footer {
|
||||
height: 10%;
|
||||
padding: 18px;
|
||||
}
|
||||
.card .card-footer button {
|
||||
margin: 0 !important;
|
||||
position: relative;
|
||||
bottom: 25px;
|
||||
width: auto;
|
||||
}
|
||||
.card .card-footer button:first-child {
|
||||
left: -15px;
|
||||
}
|
||||
.modal-content {
|
||||
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
|
||||
margin-top: 10em;
|
||||
|
|
|
|||
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
57
dist/css/material.css
vendored
57
dist/css/material.css
vendored
|
|
@ -4200,6 +4200,63 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
.icon-material-lightgrey {
|
||||
color: #ececec;
|
||||
}
|
||||
.card {
|
||||
/***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
/**************************************************************************/
|
||||
border-radius: 2px;
|
||||
color: rgba(0, 0, 0, 0.84);
|
||||
background: #ffffff;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
.card .card-height-indicator {
|
||||
margin-top: 100%;
|
||||
}
|
||||
.card .card-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.card .card-image {
|
||||
height: 60%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card .card-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.card .card-image .card-image-headline {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 18px;
|
||||
color: #ffffff;
|
||||
font-size: 2em;
|
||||
}
|
||||
.card .card-body {
|
||||
height: 30%;
|
||||
padding: 18px;
|
||||
}
|
||||
.card .card-footer {
|
||||
height: 10%;
|
||||
padding: 18px;
|
||||
}
|
||||
.card .card-footer button {
|
||||
margin: 0 !important;
|
||||
position: relative;
|
||||
bottom: 25px;
|
||||
width: auto;
|
||||
}
|
||||
.card .card-footer button:first-child {
|
||||
left: -15px;
|
||||
}
|
||||
.modal-content {
|
||||
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
|
||||
margin-top: 10em;
|
||||
|
|
|
|||
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
6
dist/js/material.js
vendored
6
dist/js/material.js
vendored
|
|
@ -3,7 +3,11 @@
|
|||
$(function (){
|
||||
|
||||
if (typeof ripples == "object") {
|
||||
ripples.init(".btn:not(.btn-link), .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple");
|
||||
ripples.init( ".btn:not(.btn-link)," +
|
||||
".card-image," +
|
||||
".navbar a:not(.withoutripple)," +
|
||||
".nav-tabs a:not(.withoutripple)," +
|
||||
".withripple" );
|
||||
}
|
||||
|
||||
var initInputs = function() {
|
||||
|
|
|
|||
2
dist/js/material.min.js
vendored
2
dist/js/material.min.js
vendored
|
|
@ -1 +1 @@
|
|||
$(function(){"object"==typeof ripples&&ripples.init(".btn:not(.btn-link), .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple");var a=function(){$(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>"),$(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>"),$("input.form-control, textarea.form-control, select.form-control").not(".bs-material").each(function(){if(!$(this).is(".bs-material")){if($(this).wrap("<div class=form-control-wrapper></div>"),$(this).after("<span class=material-input></span>"),$(this).hasClass("floating-label")){var a=$(this).attr("placeholder");$(this).attr("placeholder",null).removeClass("floating-label"),$(this).after("<div class=floating-label>"+a+"</div>")}if(($(this).is(":empty")||null===$(this).val()||"undefined"==$(this).val()||""===$(this).val())&&$(this).addClass("empty"),$(this).parent().next().is("[type=file]")){$(this).parent().addClass("fileinput");var b=$(this).parent().next().detach();$(this).after(b)}}})};a(),document.arrive&&document.arrive("input, textarea, select",function(){a()}),$(document).on("change",".checkbox input",function(){$(this).blur()}),$(document).on("keyup change",".form-control",function(){var a=$(this);setTimeout(function(){""===a.val()?a.addClass("empty"):a.removeClass("empty")},1)}),$(document).on("focus",".form-control-wrapper.fileinput",function(){$(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){$(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var a="";$.each($(this)[0].files,function(b,c){console.log(c),a+=c.name+", "}),a=a.substring(0,a.length-2),a?$(this).prev().removeClass("empty"):$(this).prev().addClass("empty"),$(this).prev().val(a)})});
|
||||
$(function(){"object"==typeof ripples&&ripples.init(".btn:not(.btn-link),.card-image,.navbar a:not(.withoutripple),.nav-tabs a:not(.withoutripple),.withripple");var a=function(){$(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>"),$(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>"),$("input.form-control, textarea.form-control, select.form-control").not(".bs-material").each(function(){if(!$(this).is(".bs-material")){if($(this).wrap("<div class=form-control-wrapper></div>"),$(this).after("<span class=material-input></span>"),$(this).hasClass("floating-label")){var a=$(this).attr("placeholder");$(this).attr("placeholder",null).removeClass("floating-label"),$(this).after("<div class=floating-label>"+a+"</div>")}if(($(this).is(":empty")||null===$(this).val()||"undefined"==$(this).val()||""===$(this).val())&&$(this).addClass("empty"),$(this).parent().next().is("[type=file]")){$(this).parent().addClass("fileinput");var b=$(this).parent().next().detach();$(this).after(b)}}})};a(),document.arrive&&document.arrive("input, textarea, select",function(){a()}),$(document).on("change",".checkbox input",function(){$(this).blur()}),$(document).on("keyup change",".form-control",function(){var a=$(this);setTimeout(function(){""===a.val()?a.addClass("empty"):a.removeClass("empty")},1)}),$(document).on("focus",".form-control-wrapper.fileinput",function(){$(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){$(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var a="";$.each($(this)[0].files,function(b,c){console.log(c),a+=c.name+", "}),a=a.substring(0,a.length-2),a?$(this).prev().removeClass("empty"):$(this).prev().addClass("empty"),$(this).prev().val(a)})});
|
||||
2
dist/js/ripples.min.js
vendored
2
dist/js/ripples.min.js
vendored
|
|
@ -1 +1 @@
|
|||
window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){"string"==typeof a&&(a=[a]),a.forEach(function(a){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})})},f=function(a,b,c){var e,f=b,g=f.parentNode,h=document.createElement("div"),j=g.getBoundingClientRect(),k={x:a.clientX-j.left,y:(window.ontouchstart?a.clientY-window.scrollY:a.clientY)-j.top},l="scale("+Math.round(f.offsetWidth/5)+")",m=new CustomEvent("rippleEnd",{detail:h}),n=.1;a.touches&&(k={x:a.touches[0].clientX-j.left,y:a.touches[0].clientY-j.top}),console.log(k),i=h,h.className="ripple",h.setAttribute("style","left:"+k.x+"px; top:"+k.y+"px;");var o=window.getComputedStyle(g).color;o=o.replace("rgb","rgba").replace(")",", "+n+")"),f.appendChild(h),e=window.getComputedStyle(h).opacity,h.dataset.animating=1,h.className="ripple ripple-on";var p=[h.getAttribute("style"),"background-color: "+o,"-ms-transform: "+l,"-moz-transform"+l,"-webkit-transform"+l,"transform: "+l];h.setAttribute("style",p.join(";")),setTimeout(function(){h.dataset.animating=0,document.dispatchEvent(m),c&&c()},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;e(["mousedown","touchstart"],"*",function(){h=!0}),e(["mouseup","touchend"],"*",function(){h=!1});var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c),null===window.ontouchstart&&f(a,c,function(){c.getElementsByClassName("ripple")[0].remove()})}};e(["mouseover","touchstart"],a,j),e(["mousedown","touchstart"],".ripple-wrapper",function(a,b){(0===a.which||1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e(["mouseup","touchend"],".ripple-wrapper",function(){var a=i;a&&1!=a.dataset.animating&&g(a)})}};
|
||||
window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){"string"==typeof a&&(a=[a]),a.forEach(function(a){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})})},f=function(a,b,c){var e,f=b,g=f.parentNode,h=document.createElement("div"),j=g.getBoundingClientRect(),k={x:a.clientX-j.left,y:(window.ontouchstart?a.clientY-window.scrollY:a.clientY)-j.top},l="scale("+Math.round(f.offsetWidth/5)+")",m=new CustomEvent("rippleEnd",{detail:h}),n=.1;a.touches&&(k={x:a.touches[0].clientX-j.left,y:a.touches[0].clientY-j.top}),console.log(k),i=h,h.className="ripple",h.setAttribute("style","left:"+k.x+"px; top:"+k.y+"px;");var o=window.getComputedStyle(g).color;o=o.replace("rgb","rgba").replace(")",", "+n+")"),f.appendChild(h),e=window.getComputedStyle(h).opacity,h.dataset.animating=1,h.className="ripple ripple-on";var p=[h.getAttribute("style"),"background-color: "+o,"-ms-transform: "+l,"-moz-transform"+l,"-webkit-transform"+l,"transform: "+l];h.setAttribute("style",p.join(";")),setTimeout(function(){h.dataset.animating=0,document.dispatchEvent(m),c&&c()},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;e(["mousedown","touchstart"],"*",function(){h=!0}),e(["mouseup","touchend"],"*",function(){h=!1});var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c),null===window.ontouchstart&&f(a,c,function(){c.getElementsByClassName("ripple")[0].remove()})}};e(["mouseover","touchstart"],a,j),e(["mousedown","touchstart"],".ripple-wrapper",function(a,b){(0===a.which||1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e(["mouseup","touchend"],".ripple-wrapper",function(){var a=i;a&&1!=a.dataset.animating&&g(a)})}};
|
||||
66
less/_cards.import.less
vendored
Normal file
66
less/_cards.import.less
vendored
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
.card {
|
||||
|
||||
/***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.card-height-indicator {
|
||||
margin-top: 100%;
|
||||
}
|
||||
.card-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/**************************************************************************/
|
||||
|
||||
|
||||
border-radius: 2px;
|
||||
color: @card-body-text;
|
||||
background: @card-body-background;
|
||||
|
||||
.shadow-z-2();
|
||||
|
||||
.card-image {
|
||||
height: 60%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.card-image-headline {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 18px;
|
||||
color: @card-image-headline;
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
height: 30%;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
height: 10%;
|
||||
padding: 18px;
|
||||
button {
|
||||
margin: 0 !important;
|
||||
position: relative;
|
||||
bottom: 25px;
|
||||
width: auto;
|
||||
&:first-child {
|
||||
left: -15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
5
less/_variables.import.less
vendored
5
less/_variables.import.less
vendored
|
|
@ -100,5 +100,10 @@
|
|||
@progress-warning: @warning;
|
||||
@progress-danger: @danger;
|
||||
|
||||
// Card
|
||||
@card-body-text: @lightbg-text;
|
||||
@card-body-background: #fff;
|
||||
@card-image-headline: #fff;
|
||||
|
||||
@text-disabled: #a8a8a8;
|
||||
@background-disabled: #eaeaea;
|
||||
|
|
|
|||
|
|
@ -97,6 +97,8 @@ legend {
|
|||
|
||||
@import "_icons.import.less";
|
||||
|
||||
@import "_cards.import.less";
|
||||
|
||||
@import "_dialogs.import.less";
|
||||
|
||||
// External plugins
|
||||
|
|
|
|||
|
|
@ -3,7 +3,11 @@
|
|||
$(function (){
|
||||
|
||||
if (typeof ripples == "object") {
|
||||
ripples.init(".btn:not(.btn-link), .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple");
|
||||
ripples.init( ".btn:not(.btn-link)," +
|
||||
".card-image," +
|
||||
".navbar a:not(.withoutripple)," +
|
||||
".nav-tabs a:not(.withoutripple)," +
|
||||
".withripple" );
|
||||
}
|
||||
|
||||
var initInputs = function() {
|
||||
|
|
|
|||
|
|
@ -4201,6 +4201,63 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
.icon-material-lightgrey {
|
||||
color: #ececec;
|
||||
}
|
||||
.card {
|
||||
/***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
/**************************************************************************/
|
||||
border-radius: 2px;
|
||||
color: rgba(0, 0, 0, 0.84);
|
||||
background: #ffffff;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
.card .card-height-indicator {
|
||||
margin-top: 100%;
|
||||
}
|
||||
.card .card-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.card .card-image {
|
||||
height: 60%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card .card-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.card .card-image .card-image-headline {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 18px;
|
||||
color: #ffffff;
|
||||
font-size: 2em;
|
||||
}
|
||||
.card .card-body {
|
||||
height: 30%;
|
||||
padding: 18px;
|
||||
}
|
||||
.card .card-footer {
|
||||
height: 10%;
|
||||
padding: 18px;
|
||||
}
|
||||
.card .card-footer button {
|
||||
margin: 0 !important;
|
||||
position: relative;
|
||||
bottom: 25px;
|
||||
width: auto;
|
||||
}
|
||||
.card .card-footer button:first-child {
|
||||
left: -15px;
|
||||
}
|
||||
.modal-content {
|
||||
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
|
||||
margin-top: 10em;
|
||||
|
|
|
|||
2
template/material/css/material-wfont.min.css
vendored
2
template/material/css/material-wfont.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -4200,6 +4200,63 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
.icon-material-lightgrey {
|
||||
color: #ececec;
|
||||
}
|
||||
.card {
|
||||
/***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
/**************************************************************************/
|
||||
border-radius: 2px;
|
||||
color: rgba(0, 0, 0, 0.84);
|
||||
background: #ffffff;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
.card .card-height-indicator {
|
||||
margin-top: 100%;
|
||||
}
|
||||
.card .card-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.card .card-image {
|
||||
height: 60%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card .card-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.card .card-image .card-image-headline {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 18px;
|
||||
color: #ffffff;
|
||||
font-size: 2em;
|
||||
}
|
||||
.card .card-body {
|
||||
height: 30%;
|
||||
padding: 18px;
|
||||
}
|
||||
.card .card-footer {
|
||||
height: 10%;
|
||||
padding: 18px;
|
||||
}
|
||||
.card .card-footer button {
|
||||
margin: 0 !important;
|
||||
position: relative;
|
||||
bottom: 25px;
|
||||
width: auto;
|
||||
}
|
||||
.card .card-footer button:first-child {
|
||||
left: -15px;
|
||||
}
|
||||
.modal-content {
|
||||
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
|
||||
margin-top: 10em;
|
||||
|
|
|
|||
2
template/material/css/material.min.css
vendored
2
template/material/css/material.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -3,7 +3,11 @@
|
|||
$(function (){
|
||||
|
||||
if (typeof ripples == "object") {
|
||||
ripples.init(".btn:not(.btn-link), .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple");
|
||||
ripples.init( ".btn:not(.btn-link)," +
|
||||
".card-image," +
|
||||
".navbar a:not(.withoutripple)," +
|
||||
".nav-tabs a:not(.withoutripple)," +
|
||||
".withripple" );
|
||||
}
|
||||
|
||||
var initInputs = function() {
|
||||
|
|
|
|||
2
template/material/js/material.min.js
vendored
2
template/material/js/material.min.js
vendored
|
|
@ -1 +1 @@
|
|||
$(function(){"object"==typeof ripples&&ripples.init(".btn:not(.btn-link), .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple");var a=function(){$(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>"),$(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>"),$("input.form-control, textarea.form-control, select.form-control").not(".bs-material").each(function(){if(!$(this).is(".bs-material")){if($(this).wrap("<div class=form-control-wrapper></div>"),$(this).after("<span class=material-input></span>"),$(this).hasClass("floating-label")){var a=$(this).attr("placeholder");$(this).attr("placeholder",null).removeClass("floating-label"),$(this).after("<div class=floating-label>"+a+"</div>")}if(($(this).is(":empty")||null===$(this).val()||"undefined"==$(this).val()||""===$(this).val())&&$(this).addClass("empty"),$(this).parent().next().is("[type=file]")){$(this).parent().addClass("fileinput");var b=$(this).parent().next().detach();$(this).after(b)}}})};a(),document.arrive&&document.arrive("input, textarea, select",function(){a()}),$(document).on("change",".checkbox input",function(){$(this).blur()}),$(document).on("keyup change",".form-control",function(){var a=$(this);setTimeout(function(){""===a.val()?a.addClass("empty"):a.removeClass("empty")},1)}),$(document).on("focus",".form-control-wrapper.fileinput",function(){$(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){$(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var a="";$.each($(this)[0].files,function(b,c){console.log(c),a+=c.name+", "}),a=a.substring(0,a.length-2),a?$(this).prev().removeClass("empty"):$(this).prev().addClass("empty"),$(this).prev().val(a)})});
|
||||
$(function(){"object"==typeof ripples&&ripples.init(".btn:not(.btn-link),.card-image,.navbar a:not(.withoutripple),.nav-tabs a:not(.withoutripple),.withripple");var a=function(){$(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>"),$(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>"),$("input.form-control, textarea.form-control, select.form-control").not(".bs-material").each(function(){if(!$(this).is(".bs-material")){if($(this).wrap("<div class=form-control-wrapper></div>"),$(this).after("<span class=material-input></span>"),$(this).hasClass("floating-label")){var a=$(this).attr("placeholder");$(this).attr("placeholder",null).removeClass("floating-label"),$(this).after("<div class=floating-label>"+a+"</div>")}if(($(this).is(":empty")||null===$(this).val()||"undefined"==$(this).val()||""===$(this).val())&&$(this).addClass("empty"),$(this).parent().next().is("[type=file]")){$(this).parent().addClass("fileinput");var b=$(this).parent().next().detach();$(this).after(b)}}})};a(),document.arrive&&document.arrive("input, textarea, select",function(){a()}),$(document).on("change",".checkbox input",function(){$(this).blur()}),$(document).on("keyup change",".form-control",function(){var a=$(this);setTimeout(function(){""===a.val()?a.addClass("empty"):a.removeClass("empty")},1)}),$(document).on("focus",".form-control-wrapper.fileinput",function(){$(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){$(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var a="";$.each($(this)[0].files,function(b,c){console.log(c),a+=c.name+", "}),a=a.substring(0,a.length-2),a?$(this).prev().removeClass("empty"):$(this).prev().addClass("empty"),$(this).prev().val(a)})});
|
||||
2
template/material/js/ripples.min.js
vendored
2
template/material/js/ripples.min.js
vendored
|
|
@ -1 +1 @@
|
|||
window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){"string"==typeof a&&(a=[a]),a.forEach(function(a){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})})},f=function(a,b,c){var e,f=b,g=f.parentNode,h=document.createElement("div"),j=g.getBoundingClientRect(),k={x:a.clientX-j.left,y:(window.ontouchstart?a.clientY-window.scrollY:a.clientY)-j.top},l="scale("+Math.round(f.offsetWidth/5)+")",m=new CustomEvent("rippleEnd",{detail:h}),n=.1;a.touches&&(k={x:a.touches[0].clientX-j.left,y:a.touches[0].clientY-j.top}),console.log(k),i=h,h.className="ripple",h.setAttribute("style","left:"+k.x+"px; top:"+k.y+"px;");var o=window.getComputedStyle(g).color;o=o.replace("rgb","rgba").replace(")",", "+n+")"),f.appendChild(h),e=window.getComputedStyle(h).opacity,h.dataset.animating=1,h.className="ripple ripple-on";var p=[h.getAttribute("style"),"background-color: "+o,"-ms-transform: "+l,"-moz-transform"+l,"-webkit-transform"+l,"transform: "+l];h.setAttribute("style",p.join(";")),setTimeout(function(){h.dataset.animating=0,document.dispatchEvent(m),c&&c()},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;e(["mousedown","touchstart"],"*",function(){h=!0}),e(["mouseup","touchend"],"*",function(){h=!1});var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c),null===window.ontouchstart&&f(a,c,function(){c.getElementsByClassName("ripple")[0].remove()})}};e(["mouseover","touchstart"],a,j),e(["mousedown","touchstart"],".ripple-wrapper",function(a,b){(0===a.which||1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e(["mouseup","touchend"],".ripple-wrapper",function(){var a=i;a&&1!=a.dataset.animating&&g(a)})}};
|
||||
window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){"string"==typeof a&&(a=[a]),a.forEach(function(a){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})})},f=function(a,b,c){var e,f=b,g=f.parentNode,h=document.createElement("div"),j=g.getBoundingClientRect(),k={x:a.clientX-j.left,y:(window.ontouchstart?a.clientY-window.scrollY:a.clientY)-j.top},l="scale("+Math.round(f.offsetWidth/5)+")",m=new CustomEvent("rippleEnd",{detail:h}),n=.1;a.touches&&(k={x:a.touches[0].clientX-j.left,y:a.touches[0].clientY-j.top}),console.log(k),i=h,h.className="ripple",h.setAttribute("style","left:"+k.x+"px; top:"+k.y+"px;");var o=window.getComputedStyle(g).color;o=o.replace("rgb","rgba").replace(")",", "+n+")"),f.appendChild(h),e=window.getComputedStyle(h).opacity,h.dataset.animating=1,h.className="ripple ripple-on";var p=[h.getAttribute("style"),"background-color: "+o,"-ms-transform: "+l,"-moz-transform"+l,"-webkit-transform"+l,"transform: "+l];h.setAttribute("style",p.join(";")),setTimeout(function(){h.dataset.animating=0,document.dispatchEvent(m),c&&c()},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;e(["mousedown","touchstart"],"*",function(){h=!0}),e(["mouseup","touchend"],"*",function(){h=!1});var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c),null===window.ontouchstart&&f(a,c,function(){c.getElementsByClassName("ripple")[0].remove()})}};e(["mouseover","touchstart"],a,j),e(["mousedown","touchstart"],".ripple-wrapper",function(a,b){(0===a.which||1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e(["mouseup","touchend"],".ripple-wrapper",function(){var a=i;a&&1!=a.dataset.animating&&g(a)})}};
|
||||
Loading…
Reference in New Issue
Block a user