Skip to content

Commit 6ddd300

Browse files
author
Fez Vrasta
committed
Merge pull request mdbootstrap#113 from npvn/card
Add styling for cards (first draft)
2 parents f795d25 + 140347a commit 6ddd300

18 files changed

Lines changed: 324 additions & 11 deletions

‎dist/css/material-wfont.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4201,6 +4201,63 @@ fieldset[disabled] .navbar .btn-link:focus {
42014201
.icon-material-lightgrey {
42024202
color: #ececec;
42034203
}
4204+
.card {
4205+
/***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
4206+
display: inline-block;
4207+
position: relative;
4208+
width: 100%;
4209+
/**************************************************************************/
4210+
border-radius: 2px;
4211+
color: rgba(0, 0, 0, 0.84);
4212+
background: #ffffff;
4213+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
4214+
}
4215+
.card .card-height-indicator {
4216+
margin-top: 100%;
4217+
}
4218+
.card .card-content {
4219+
position: absolute;
4220+
top: 0;
4221+
bottom: 0;
4222+
left: 0;
4223+
right: 0;
4224+
}
4225+
.card .card-image {
4226+
height: 60%;
4227+
position: relative;
4228+
overflow: hidden;
4229+
}
4230+
.card .card-image img {
4231+
width: 100%;
4232+
height: 100%;
4233+
border-top-left-radius: 2px;
4234+
border-top-right-radius: 2px;
4235+
pointer-events: none;
4236+
}
4237+
.card .card-image .card-image-headline {
4238+
position: absolute;
4239+
bottom: 16px;
4240+
left: 18px;
4241+
color: #ffffff;
4242+
font-size: 2em;
4243+
}
4244+
.card .card-body {
4245+
height: 30%;
4246+
padding: 18px;
4247+
}
4248+
.card .card-footer {
4249+
height: 10%;
4250+
padding: 18px;
4251+
}
4252+
.card .card-footer button {
4253+
margin: 0 !important;
4254+
position: relative;
4255+
bottom: 25px;
4256+
width: auto;
4257+
}
4258+
.card .card-footer button:first-child {
4259+
left: -15px;
4260+
}
42044261
.modal-content {
42054262
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
42064263
margin-top: 10em;

‎dist/css/material-wfont.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/material.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4200,6 +4200,63 @@ fieldset[disabled] .navbar .btn-link:focus {
42004200
.icon-material-lightgrey {
42014201
color: #ececec;
42024202
}
4203+
.card {
4204+
/***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
4205+
display: inline-block;
4206+
position: relative;
4207+
width: 100%;
4208+
/**************************************************************************/
4209+
border-radius: 2px;
4210+
color: rgba(0, 0, 0, 0.84);
4211+
background: #ffffff;
4212+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
4213+
}
4214+
.card .card-height-indicator {
4215+
margin-top: 100%;
4216+
}
4217+
.card .card-content {
4218+
position: absolute;
4219+
top: 0;
4220+
bottom: 0;
4221+
left: 0;
4222+
right: 0;
4223+
}
4224+
.card .card-image {
4225+
height: 60%;
4226+
position: relative;
4227+
overflow: hidden;
4228+
}
4229+
.card .card-image img {
4230+
width: 100%;
4231+
height: 100%;
4232+
border-top-left-radius: 2px;
4233+
border-top-right-radius: 2px;
4234+
pointer-events: none;
4235+
}
4236+
.card .card-image .card-image-headline {
4237+
position: absolute;
4238+
bottom: 16px;
4239+
left: 18px;
4240+
color: #ffffff;
4241+
font-size: 2em;
4242+
}
4243+
.card .card-body {
4244+
height: 30%;
4245+
padding: 18px;
4246+
}
4247+
.card .card-footer {
4248+
height: 10%;
4249+
padding: 18px;
4250+
}
4251+
.card .card-footer button {
4252+
margin: 0 !important;
4253+
position: relative;
4254+
bottom: 25px;
4255+
width: auto;
4256+
}
4257+
.card .card-footer button:first-child {
4258+
left: -15px;
4259+
}
42034260
.modal-content {
42044261
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
42054262
margin-top: 10em;

‎dist/css/material.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/material.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@
33
$(function (){
44

55
if (typeof ripples == "object") {
6-
ripples.init(".btn:not(.btn-link), .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple");
6+
ripples.init( ".btn:not(.btn-link)," +
7+
".card-image," +
8+
".navbar a:not(.withoutripple)," +
9+
".nav-tabs a:not(.withoutripple)," +
10+
".withripple" );
711
}
812

913
var initInputs = function() {

‎dist/js/material.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/ripples.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎less/_cards.import.less‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
.card {
2+
3+
/***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
4+
5+
display: inline-block;
6+
position: relative;
7+
width: 100%;
8+
.card-height-indicator {
9+
margin-top: 100%;
10+
}
11+
.card-content {
12+
position: absolute;
13+
top: 0;
14+
bottom: 0;
15+
left: 0;
16+
right: 0;
17+
}
18+
19+
/**************************************************************************/
20+
21+
22+
border-radius: 2px;
23+
color: @card-body-text;
24+
background: @card-body-background;
25+
26+
.shadow-z-2();
27+
28+
.card-image {
29+
height: 60%;
30+
position: relative;
31+
overflow: hidden;
32+
img {
33+
width: 100%;
34+
height: 100%;
35+
border-top-left-radius: 2px;
36+
border-top-right-radius: 2px;
37+
pointer-events: none;
38+
}
39+
.card-image-headline {
40+
position: absolute;
41+
bottom: 16px;
42+
left: 18px;
43+
color: @card-image-headline;
44+
font-size: 2em;
45+
}
46+
}
47+
48+
.card-body {
49+
height: 30%;
50+
padding: 18px;
51+
}
52+
53+
.card-footer {
54+
height: 10%;
55+
padding: 18px;
56+
button {
57+
margin: 0 !important;
58+
position: relative;
59+
bottom: 25px;
60+
width: auto;
61+
&:first-child {
62+
left: -15px;
63+
}
64+
}
65+
}
66+
}

‎less/_variables.import.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,5 +100,10 @@
100100
@progress-warning: @warning;
101101
@progress-danger: @danger;
102102

103+
// Card
104+
@card-body-text: @lightbg-text;
105+
@card-body-background: #fff;
106+
@card-image-headline: #fff;
107+
103108
@text-disabled: #a8a8a8;
104109
@background-disabled: #eaeaea;

‎less/material.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,8 @@ legend {
9797

9898
@import "_icons.import.less";
9999

100+
@import "_cards.import.less";
101+
100102
@import "_dialogs.import.less";
101103

102104
// External plugins

0 commit comments

Comments
 (0)