mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-29 04:54:12 +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)})});
|
||||
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)})});
|
||||
Loading…
Reference in New Issue
Block a user