| 25149 |
amit.gupta |
1 |
/* === card component ======
|
|
|
2 |
* Variation of the panel component
|
|
|
3 |
* version 2018.10.30
|
|
|
4 |
* https://codepen.io/jstneg/pen/EVKYZj
|
|
|
5 |
*/
|
|
|
6 |
.card{ background-color: #fff; border: 1px solid transparent; border-radius: 6px; }
|
|
|
7 |
.card > .card-link{ color: #333; }
|
|
|
8 |
.card > .card-link:hover{ text-decoration: none; }
|
|
|
9 |
.card > .card-link .card-img img{ border-radius: 6px 6px 0 0; }
|
|
|
10 |
.card .card-img{ position: relative; padding: 0; display: table; }
|
|
|
11 |
.card .card-img .card-caption{
|
|
|
12 |
position: absolute;
|
|
|
13 |
right: 0;
|
|
|
14 |
bottom: 16px;
|
|
|
15 |
left: 0;
|
|
|
16 |
}
|
|
|
17 |
.card .card-body{ display: table; width: 100%; padding: 12px; }
|
|
|
18 |
.card .card-header{ border-radius: 6px 6px 0 0; padding: 8px; }
|
|
|
19 |
.card .card-footer{ border-radius: 0 0 6px 6px; padding: 8px; }
|
|
|
20 |
.card .card-left{ position: relative; float: left; padding: 0 0 8px 0; }
|
|
|
21 |
.card .card-right{ position: relative; float: left; padding: 8px 0 0 0; }
|
|
|
22 |
.card .card-body h1:first-child,
|
|
|
23 |
.card .card-body h2:first-child,
|
|
|
24 |
.card .card-body h3:first-child,
|
|
|
25 |
.card .card-body h4:first-child,
|
|
|
26 |
.card .card-body .h1,
|
|
|
27 |
.card .card-body .h2,
|
|
|
28 |
.card .card-body .h3,
|
|
|
29 |
.card .card-body .h4{ margin-top: 0; }
|
|
|
30 |
.card .card-body .heading{ display: block; }
|
|
|
31 |
.card .card-body .heading:last-child{ margin-bottom: 0; }
|
|
|
32 |
|
|
|
33 |
.card .card-body .lead{ text-align: center; }
|
|
|
34 |
|
|
|
35 |
@media( min-width: 768px ){
|
|
|
36 |
.card .card-left{ float: left; padding: 0 8px 0 0; }
|
|
|
37 |
.card .card-right{ float: left; padding: 0 0 0 8px; }
|
|
|
38 |
|
|
|
39 |
.card .card-4-8 .card-left{ width: 33.33333333%; }
|
|
|
40 |
.card .card-4-8 .card-right{ width: 66.66666667%; }
|
|
|
41 |
|
|
|
42 |
.card .card-5-7 .card-left{ width: 41.66666667%; }
|
|
|
43 |
.card .card-5-7 .card-right{ width: 58.33333333%; }
|
|
|
44 |
|
|
|
45 |
.card .card-6-6 .card-left{ width: 50%; }
|
|
|
46 |
.card .card-6-6 .card-right{ width: 50%; }
|
|
|
47 |
|
|
|
48 |
.card .card-7-5 .card-left{ width: 58.33333333%; }
|
|
|
49 |
.card .card-7-5 .card-right{ width: 41.66666667%; }
|
|
|
50 |
|
|
|
51 |
.card .card-8-4 .card-left{ width: 66.66666667%; }
|
|
|
52 |
.card .card-8-4 .card-right{ width: 33.33333333%; }
|
|
|
53 |
}
|
|
|
54 |
|
|
|
55 |
/* -- default theme ------ */
|
|
|
56 |
.card-default{
|
|
|
57 |
border-color: #ddd;
|
|
|
58 |
background-color: #fff;
|
|
|
59 |
margin-bottom: 24px;
|
|
|
60 |
}
|
|
|
61 |
.card-default > .card-header,
|
|
|
62 |
.card-default > .card-footer{ color: #333; background-color: #ddd; }
|
|
|
63 |
.card-default > .card-header{ border-bottom: 1px solid #ddd; padding: 8px; }
|
|
|
64 |
.card-default > .card-footer{ border-top: 1px solid #ddd; padding: 8px; }
|
|
|
65 |
.card-default > .card-body{ }
|
|
|
66 |
.card-default > .card-img:first-child img{ border-radius: 6px 6px 0 0; }
|
|
|
67 |
.card-default > .card-left{ padding-right: 4px; }
|
|
|
68 |
.card-default > .card-right{ padding-left: 4px; }
|
|
|
69 |
.card-default p:last-child{ margin-bottom: 0; }
|
|
|
70 |
.card-default .card-caption { color: #fff; text-align: center; text-transform: uppercase; }
|
|
|
71 |
|
|
|
72 |
|
|
|
73 |
/* -- price theme ------ */
|
|
|
74 |
.card-price{ border-color: #999; background-color: #ededed; margin-bottom: 24px; }
|
|
|
75 |
.card-price > .card-heading,
|
|
|
76 |
.card-price > .card-footer{ color: #333; background-color: #fdfdfd; }
|
|
|
77 |
.card-price > .card-heading{ border-bottom: 1px solid #ddd; padding: 8px; }
|
|
|
78 |
.card-price > .card-footer{ border-top: 1px solid #ddd; padding: 8px; }
|
|
|
79 |
.card-price > .card-img:first-child img{ border-radius: 6px 6px 0 0; }
|
|
|
80 |
.card-price > .card-left{ padding-right: 4px; }
|
|
|
81 |
.card-price > .card-right{ padding-left: 4px; }
|
|
|
82 |
.card-price .card-caption { color: #fff; text-align: center; text-transform: uppercase; }
|
|
|
83 |
.card-price p:last-child{ margin-bottom: 0; }
|
|
|
84 |
|
|
|
85 |
.card-price .price{
|
|
|
86 |
text-align: center;
|
|
|
87 |
color: #337ab7;
|
|
|
88 |
font-size: 3em;
|
|
|
89 |
text-transform: uppercase;
|
|
|
90 |
line-height: 0.7em;
|
|
|
91 |
margin: 24px 0 16px;
|
|
|
92 |
}
|
|
|
93 |
.card-price .price small{ font-size: 0.4em; color: #66a5da; }
|
|
|
94 |
.card-price .details{ list-style: none; margin-bottom: 24px; padding: 0 18px; }
|
|
|
95 |
.card-price .details li{ text-align: center; margin-bottom: 8px; }
|
|
|
96 |
.card-price .buy-now{ text-transform: uppercase; }
|
|
|
97 |
.card-price table .price{ font-size: 1.2em; font-weight: 700; text-align: left; }
|
|
|
98 |
.card-price table .note{ color: #666; font-size: 0.8em; }
|