mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-09-21 03:19:09 +03:00
Add styling for cards (first draft)
This commit is contained in:
Phuc Nguyen
parent
650385d619
commit
881513c029
56
dist/css/material-wfont.css
vendored
56
dist/css/material-wfont.css
vendored
|
|
@ -4192,6 +4192,62 @@ fieldset[disabled] .navbar .btn-link:focus {
|
||||||
.icon-material-lightgrey {
|
.icon-material-lightgrey {
|
||||||
color: #ececec;
|
color: #ececec;
|
||||||
}
|
}
|
||||||
|
.card {
|
||||||
|
/***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
/**************************************************************************/
|
||||||
|
border-radius: 3px;
|
||||||
|
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: 3px;
|
||||||
|
border-top-right-radius: 3px;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
.snackbar {
|
.snackbar {
|
||||||
background-color: #323232;
|
background-color: #323232;
|
||||||
color: rgba(255, 255, 255, 0.84);
|
color: rgba(255, 255, 255, 0.84);
|
||||||
|
|
|
||||||
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
56
dist/css/material.css
vendored
56
dist/css/material.css
vendored
|
|
@ -4191,6 +4191,62 @@ fieldset[disabled] .navbar .btn-link:focus {
|
||||||
.icon-material-lightgrey {
|
.icon-material-lightgrey {
|
||||||
color: #ececec;
|
color: #ececec;
|
||||||
}
|
}
|
||||||
|
.card {
|
||||||
|
/***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
/**************************************************************************/
|
||||||
|
border-radius: 3px;
|
||||||
|
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: 3px;
|
||||||
|
border-top-right-radius: 3px;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
.snackbar {
|
.snackbar {
|
||||||
background-color: #323232;
|
background-color: #323232;
|
||||||
color: rgba(255, 255, 255, 0.84);
|
color: rgba(255, 255, 255, 0.84);
|
||||||
|
|
|
||||||
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 (){
|
$(function (){
|
||||||
|
|
||||||
if (typeof ripples == "object") {
|
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 img," + // XXX Not sure why this doesn't work
|
||||||
|
".navbar a:not(.withoutripple)," +
|
||||||
|
".nav-tabs a:not(.withoutripple)," +
|
||||||
|
".withripple" );
|
||||||
}
|
}
|
||||||
|
|
||||||
var initInputs = function() {
|
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 img,.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)})});
|
||||||
65
less/_cards.import.less
vendored
Normal file
65
less/_cards.import.less
vendored
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
.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: 3px;
|
||||||
|
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: 3px;
|
||||||
|
border-top-right-radius: 3px;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
4
less/_variables.import.less
vendored
4
less/_variables.import.less
vendored
|
|
@ -100,3 +100,7 @@
|
||||||
@progress-warning: @warning;
|
@progress-warning: @warning;
|
||||||
@progress-danger: @danger;
|
@progress-danger: @danger;
|
||||||
|
|
||||||
|
// Card
|
||||||
|
@card-body-text: @lightbg-text;
|
||||||
|
@card-body-background: #fff;
|
||||||
|
@card-image-headline: #fff;
|
||||||
|
|
|
||||||
|
|
@ -112,6 +112,8 @@ legend {
|
||||||
|
|
||||||
@import "_icons.import.less";
|
@import "_icons.import.less";
|
||||||
|
|
||||||
|
@import "_cards.import.less";
|
||||||
|
|
||||||
|
|
||||||
// External plugins
|
// External plugins
|
||||||
@import "_plugin-snackbarjs.import.less";
|
@import "_plugin-snackbarjs.import.less";
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,11 @@
|
||||||
$(function (){
|
$(function (){
|
||||||
|
|
||||||
if (typeof ripples == "object") {
|
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 img," + // XXX Not sure why this doesn't work
|
||||||
|
".navbar a:not(.withoutripple)," +
|
||||||
|
".nav-tabs a:not(.withoutripple)," +
|
||||||
|
".withripple" );
|
||||||
}
|
}
|
||||||
|
|
||||||
var initInputs = function() {
|
var initInputs = function() {
|
||||||
|
|
|
||||||
|
|
@ -4192,6 +4192,62 @@ fieldset[disabled] .navbar .btn-link:focus {
|
||||||
.icon-material-lightgrey {
|
.icon-material-lightgrey {
|
||||||
color: #ececec;
|
color: #ececec;
|
||||||
}
|
}
|
||||||
|
.card {
|
||||||
|
/***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
/**************************************************************************/
|
||||||
|
border-radius: 3px;
|
||||||
|
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: 3px;
|
||||||
|
border-top-right-radius: 3px;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
.snackbar {
|
.snackbar {
|
||||||
background-color: #323232;
|
background-color: #323232;
|
||||||
color: rgba(255, 255, 255, 0.84);
|
color: rgba(255, 255, 255, 0.84);
|
||||||
|
|
|
||||||
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
|
|
@ -4191,6 +4191,62 @@ fieldset[disabled] .navbar .btn-link:focus {
|
||||||
.icon-material-lightgrey {
|
.icon-material-lightgrey {
|
||||||
color: #ececec;
|
color: #ececec;
|
||||||
}
|
}
|
||||||
|
.card {
|
||||||
|
/***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
/**************************************************************************/
|
||||||
|
border-radius: 3px;
|
||||||
|
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: 3px;
|
||||||
|
border-top-right-radius: 3px;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
.snackbar {
|
.snackbar {
|
||||||
background-color: #323232;
|
background-color: #323232;
|
||||||
color: rgba(255, 255, 255, 0.84);
|
color: rgba(255, 255, 255, 0.84);
|
||||||
|
|
|
||||||
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 (){
|
$(function (){
|
||||||
|
|
||||||
if (typeof ripples == "object") {
|
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 img," + // XXX Not sure why this doesn't work
|
||||||
|
".navbar a:not(.withoutripple)," +
|
||||||
|
".nav-tabs a:not(.withoutripple)," +
|
||||||
|
".withripple" );
|
||||||
}
|
}
|
||||||
|
|
||||||
var initInputs = function() {
|
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 img,.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)})});
|
||||||
Loading…
Reference in New Issue
Block a user