talos

1
//
2
// Base styles
3
//
4

5
.card {
6
  position: relative;
7
  display: flex;
8
  flex-direction: column;
9
  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
10
  height: $card-height;
11
  word-wrap: break-word;
12
  background-color: $card-bg;
13
  background-clip: border-box;
14
  border: $card-border-width solid $card-border-color;
15
  @include border-radius($card-border-radius);
16

17
  > hr {
18
    margin-right: 0;
19
    margin-left: 0;
20
  }
21

22
  > .list-group {
23
    border-top: inherit;
24
    border-bottom: inherit;
25

26
    &:first-child {
27
      border-top-width: 0;
28
      @include border-top-radius($card-inner-border-radius);
29
    }
30

31
    &:last-child  {
32
      border-bottom-width: 0;
33
      @include border-bottom-radius($card-inner-border-radius);
34
    }
35
  }
36

37
  // Due to specificity of the above selector (`.card > .list-group`), we must
38
  // use a child selector here to prevent double borders.
39
  > .card-header + .list-group,
40
  > .list-group + .card-footer {
41
    border-top: 0;
42
  }
43
}
44

45
.card-body {
46
  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
47
  // as much space as possible, ensuring footers are aligned to the bottom.
48
  flex: 1 1 auto;
49
  // Workaround for the image size bug in IE
50
  // See: https://github.com/twbs/bootstrap/pull/28855
51
  min-height: 1px;
52
  padding: $card-spacer-x;
53
  color: $card-color;
54
}
55

56
.card-title {
57
  margin-bottom: $card-spacer-y;
58
}
59

60
.card-subtitle {
61
  margin-top: -$card-spacer-y * .5;
62
  margin-bottom: 0;
63
}
64

65
.card-text:last-child {
66
  margin-bottom: 0;
67
}
68

69
.card-link {
70
  @include hover() {
71
    text-decoration: none;
72
  }
73

74
  + .card-link {
75
    margin-left: $card-spacer-x;
76
  }
77
}
78

79
//
80
// Optional textual caps
81
//
82

83
.card-header {
84
  padding: $card-spacer-y $card-spacer-x;
85
  margin-bottom: 0; // Removes the default margin-bottom of <hN>
86
  color: $card-cap-color;
87
  background-color: $card-cap-bg;
88
  border-bottom: $card-border-width solid $card-border-color;
89

90
  &:first-child {
91
    @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
92
  }
93
}
94

95
.card-footer {
96
  padding: $card-spacer-y $card-spacer-x;
97
  color: $card-cap-color;
98
  background-color: $card-cap-bg;
99
  border-top: $card-border-width solid $card-border-color;
100

101
  &:last-child {
102
    @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
103
  }
104
}
105

106

107
//
108
// Header navs
109
//
110

111
.card-header-tabs {
112
  margin-right: -$card-spacer-x * .5;
113
  margin-bottom: -$card-spacer-y;
114
  margin-left: -$card-spacer-x * .5;
115
  border-bottom: 0;
116
}
117

118
.card-header-pills {
119
  margin-right: -$card-spacer-x * .5;
120
  margin-left: -$card-spacer-x * .5;
121
}
122

123
// Card image
124
.card-img-overlay {
125
  position: absolute;
126
  top: 0;
127
  right: 0;
128
  bottom: 0;
129
  left: 0;
130
  padding: $card-img-overlay-padding;
131
  @include border-radius($card-inner-border-radius);
132
}
133

134
.card-img,
135
.card-img-top,
136
.card-img-bottom {
137
  flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
138
  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
139
}
140

141
.card-img,
142
.card-img-top {
143
  @include border-top-radius($card-inner-border-radius);
144
}
145

146
.card-img,
147
.card-img-bottom {
148
  @include border-bottom-radius($card-inner-border-radius);
149
}
150

151

152
// Card deck
153

154
.card-deck {
155
  .card {
156
    margin-bottom: $card-deck-margin;
157
  }
158

159
  @include media-breakpoint-up(sm) {
160
    display: flex;
161
    flex-flow: row wrap;
162
    margin-right: -$card-deck-margin;
163
    margin-left: -$card-deck-margin;
164

165
    .card {
166
      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
167
      flex: 1 0 0%;
168
      margin-right: $card-deck-margin;
169
      margin-bottom: 0; // Override the default
170
      margin-left: $card-deck-margin;
171
    }
172
  }
173
}
174

175

176
//
177
// Card groups
178
//
179

180
.card-group {
181
  // The child selector allows nested `.card` within `.card-group`
182
  // to display properly.
183
  > .card {
184
    margin-bottom: $card-group-margin;
185
  }
186

187
  @include media-breakpoint-up(sm) {
188
    display: flex;
189
    flex-flow: row wrap;
190
    // The child selector allows nested `.card` within `.card-group`
191
    // to display properly.
192
    > .card {
193
      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
194
      flex: 1 0 0%;
195
      margin-bottom: 0;
196

197
      + .card {
198
        margin-left: 0;
199
        border-left: 0;
200
      }
201

202
      // Handle rounded corners
203
      @if $enable-rounded {
204
        &:not(:last-child) {
205
          @include border-right-radius(0);
206

207
          .card-img-top,
208
          .card-header {
209
            // stylelint-disable-next-line property-disallowed-list
210
            border-top-right-radius: 0;
211
          }
212
          .card-img-bottom,
213
          .card-footer {
214
            // stylelint-disable-next-line property-disallowed-list
215
            border-bottom-right-radius: 0;
216
          }
217
        }
218

219
        &:not(:first-child) {
220
          @include border-left-radius(0);
221

222
          .card-img-top,
223
          .card-header {
224
            // stylelint-disable-next-line property-disallowed-list
225
            border-top-left-radius: 0;
226
          }
227
          .card-img-bottom,
228
          .card-footer {
229
            // stylelint-disable-next-line property-disallowed-list
230
            border-bottom-left-radius: 0;
231
          }
232
        }
233
      }
234
    }
235
  }
236
}
237

238

239
//
240
// Columns
241
//
242

243
.card-columns {
244
  .card {
245
    margin-bottom: $card-columns-margin;
246
  }
247

248
  @include media-breakpoint-up(sm) {
249
    column-count: $card-columns-count;
250
    column-gap: $card-columns-gap;
251
    orphans: 1;
252
    widows: 1;
253

254
    .card {
255
      display: inline-block; // Don't let them vertically span multiple columns
256
      width: 100%; // Don't let their width change
257
    }
258
  }
259
}
260

261

262
//
263
// Accordion
264
//
265

266
.accordion {
267
  overflow-anchor: none;
268

269
  > .card {
270
    overflow: hidden;
271

272
    &:not(:last-of-type) {
273
      border-bottom: 0;
274
      @include border-bottom-radius(0);
275
    }
276

277
    &:not(:first-of-type) {
278
      @include border-top-radius(0);
279
    }
280

281
    > .card-header {
282
      @include border-radius(0);
283
      margin-bottom: -$card-border-width;
284
    }
285
  }
286
}
287