|
0
|
1 //
|
|
|
2 // Base styles
|
|
|
3 //
|
|
|
4
|
|
|
5 .card {
|
|
|
6 position: relative;
|
|
|
7 display: flex;
|
|
|
8 flex-direction: column;
|
|
|
9 min-width: 0;
|
|
|
10 word-wrap: break-word;
|
|
|
11 background-color: $card-bg;
|
|
|
12 background-clip: border-box;
|
|
|
13 border: $card-border-width solid $card-border-color;
|
|
|
14 @include border-radius($card-border-radius);
|
|
|
15 }
|
|
|
16
|
|
|
17 .card-body {
|
|
|
18 // Enable `flex-grow: 1` for decks and groups so that card blocks take up
|
|
|
19 // as much space as possible, ensuring footers are aligned to the bottom.
|
|
|
20 flex: 1 1 auto;
|
|
|
21 padding: $card-spacer-x;
|
|
|
22 }
|
|
|
23
|
|
|
24 .card-title {
|
|
|
25 margin-bottom: $card-spacer-y;
|
|
|
26 }
|
|
|
27
|
|
|
28 .card-subtitle {
|
|
|
29 margin-top: -($card-spacer-y / 2);
|
|
|
30 margin-bottom: 0;
|
|
|
31 }
|
|
|
32
|
|
|
33 .card-text:last-child {
|
|
|
34 margin-bottom: 0;
|
|
|
35 }
|
|
|
36
|
|
|
37 .card-link {
|
|
|
38 @include hover {
|
|
|
39 text-decoration: none;
|
|
|
40 }
|
|
|
41
|
|
|
42 + .card-link {
|
|
|
43 margin-left: $card-spacer-x;
|
|
|
44 }
|
|
|
45 }
|
|
|
46
|
|
|
47 .card {
|
|
|
48 > .list-group:first-child {
|
|
|
49 .list-group-item:first-child {
|
|
|
50 @include border-top-radius($card-border-radius);
|
|
|
51 }
|
|
|
52 }
|
|
|
53
|
|
|
54 > .list-group:last-child {
|
|
|
55 .list-group-item:last-child {
|
|
|
56 @include border-bottom-radius($card-border-radius);
|
|
|
57 }
|
|
|
58 }
|
|
|
59 }
|
|
|
60
|
|
|
61
|
|
|
62 //
|
|
|
63 // Optional textual caps
|
|
|
64 //
|
|
|
65
|
|
|
66 .card-header {
|
|
|
67 padding: $card-spacer-y $card-spacer-x;
|
|
|
68 margin-bottom: 0; // Removes the default margin-bottom of <hN>
|
|
|
69 background-color: $card-cap-bg;
|
|
|
70 border-bottom: $card-border-width solid $card-border-color;
|
|
|
71
|
|
|
72 &:first-child {
|
|
|
73 @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
|
|
|
74 }
|
|
|
75 }
|
|
|
76
|
|
|
77 .card-footer {
|
|
|
78 padding: $card-spacer-y $card-spacer-x;
|
|
|
79 background-color: $card-cap-bg;
|
|
|
80 border-top: $card-border-width solid $card-border-color;
|
|
|
81
|
|
|
82 &:last-child {
|
|
|
83 @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
|
|
|
84 }
|
|
|
85 }
|
|
|
86
|
|
|
87
|
|
|
88 //
|
|
|
89 // Header navs
|
|
|
90 //
|
|
|
91
|
|
|
92 .card-header-tabs {
|
|
|
93 margin-right: -($card-spacer-x / 2);
|
|
|
94 margin-bottom: -$card-spacer-y;
|
|
|
95 margin-left: -($card-spacer-x / 2);
|
|
|
96 border-bottom: 0;
|
|
|
97 }
|
|
|
98
|
|
|
99 .card-header-pills {
|
|
|
100 margin-right: -($card-spacer-x / 2);
|
|
|
101 margin-left: -($card-spacer-x / 2);
|
|
|
102 }
|
|
|
103
|
|
|
104 // Card image
|
|
|
105 .card-img-overlay {
|
|
|
106 position: absolute;
|
|
|
107 top: 0;
|
|
|
108 right: 0;
|
|
|
109 bottom: 0;
|
|
|
110 left: 0;
|
|
|
111 padding: $card-img-overlay-padding;
|
|
|
112 }
|
|
|
113
|
|
|
114 .card-img {
|
|
|
115 width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
|
|
116 @include border-radius($card-inner-border-radius);
|
|
|
117 }
|
|
|
118
|
|
|
119 // Card image caps
|
|
|
120 .card-img-top {
|
|
|
121 width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
|
|
122 @include border-top-radius($card-inner-border-radius);
|
|
|
123 }
|
|
|
124
|
|
|
125 .card-img-bottom {
|
|
|
126 width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
|
|
127 @include border-bottom-radius($card-inner-border-radius);
|
|
|
128 }
|
|
|
129
|
|
|
130
|
|
|
131 // Card deck
|
|
|
132
|
|
|
133 @include media-breakpoint-up(sm) {
|
|
|
134 .card-deck {
|
|
|
135 display: flex;
|
|
|
136 flex-flow: row wrap;
|
|
|
137 margin-right: -$card-deck-margin;
|
|
|
138 margin-left: -$card-deck-margin;
|
|
|
139
|
|
|
140 .card {
|
|
|
141 display: flex;
|
|
|
142 flex: 1 0 0%;
|
|
|
143 flex-direction: column;
|
|
|
144 margin-right: $card-deck-margin;
|
|
|
145 margin-left: $card-deck-margin;
|
|
|
146 }
|
|
|
147 }
|
|
|
148 }
|
|
|
149
|
|
|
150
|
|
|
151 //
|
|
|
152 // Card groups
|
|
|
153 //
|
|
|
154
|
|
|
155 @include media-breakpoint-up(sm) {
|
|
|
156 .card-group {
|
|
|
157 display: flex;
|
|
|
158 flex-flow: row wrap;
|
|
|
159
|
|
|
160 .card {
|
|
|
161 flex: 1 0 0%;
|
|
|
162
|
|
|
163 + .card {
|
|
|
164 margin-left: 0;
|
|
|
165 border-left: 0;
|
|
|
166 }
|
|
|
167
|
|
|
168 // Handle rounded corners
|
|
|
169 @if $enable-rounded {
|
|
|
170 &:first-child {
|
|
|
171 @include border-right-radius(0);
|
|
|
172
|
|
|
173 .card-img-top {
|
|
|
174 border-top-right-radius: 0;
|
|
|
175 }
|
|
|
176 .card-img-bottom {
|
|
|
177 border-bottom-right-radius: 0;
|
|
|
178 }
|
|
|
179 }
|
|
|
180 &:last-child {
|
|
|
181 @include border-left-radius(0);
|
|
|
182
|
|
|
183 .card-img-top {
|
|
|
184 border-top-left-radius: 0;
|
|
|
185 }
|
|
|
186 .card-img-bottom {
|
|
|
187 border-bottom-left-radius: 0;
|
|
|
188 }
|
|
|
189 }
|
|
|
190
|
|
|
191 &:not(:first-child):not(:last-child) {
|
|
|
192 border-radius: 0;
|
|
|
193
|
|
|
194 .card-img-top,
|
|
|
195 .card-img-bottom {
|
|
|
196 border-radius: 0;
|
|
|
197 }
|
|
|
198 }
|
|
|
199 }
|
|
|
200 }
|
|
|
201 }
|
|
|
202 }
|
|
|
203
|
|
|
204
|
|
|
205 //
|
|
|
206 // Columns
|
|
|
207 //
|
|
|
208
|
|
|
209 .card-columns {
|
|
|
210 .card {
|
|
|
211 margin-bottom: $card-columns-margin;
|
|
|
212 }
|
|
|
213
|
|
|
214 @include media-breakpoint-up(sm) {
|
|
|
215 column-count: $card-columns-count;
|
|
|
216 column-gap: $card-columns-gap;
|
|
|
217
|
|
|
218 .card {
|
|
|
219 display: inline-block; // Don't let them vertically span multiple columns
|
|
|
220 width: 100%; // Don't let their width change
|
|
|
221 }
|
|
|
222 }
|
|
|
223 }
|
