UNPKG

4.61 kBSCSSView Raw
1@import '../../css/variables';
2@import '../../css/mixins';
3@import 'css/variables';
4@import 'css/colors';
5@import 'css/sizes';
6
7/**
8 * Card
9 */
10.card {
11 position: relative;
12 display: flex;
13 flex-direction: column;
14 min-width: 0;
15 word-wrap: break-word;
16 background-clip: border-box;
17 border-radius: var(----border-radius);
18 font-size: var(----font-size);
19 box-shadow: var(----box-shadow);
20
21 > hr {
22 margin-right: 0;
23 margin-left: 0;
24 }
25
26 > .card-header {
27 color: var(----header--color);
28 background: var(----header--background);
29 border-color: var(----header--border-color);
30 border-width: var(----header--border-width);
31 border-style: var(----header--border-style);
32 padding: var(----header--padding);
33 border-bottom-width: 0;
34 margin-bottom: 0;
35
36 > h1,
37 > h2,
38 > h3,
39 > h4,
40 > h5,
41 > h6,
42 > p,
43 > .h1,
44 > .h2,
45 > .h3,
46 > .h4,
47 > .h5,
48 > .h6,
49 > .p {
50 margin-bottom: 0;
51 margin-top: 0;
52 }
53
54 + img,
55 + .card-body {
56 border-top-left-radius: 0;
57 border-top-right-radius: 0;
58 }
59
60 + .list-group {
61 .list-group-item:first-child {
62 border-top: 0;
63 }
64 }
65
66 &:first-child {
67 border-top-left-radius: var(----border-top-left-radius);
68 border-top-right-radius: var(----border-top-right-radius);
69 }
70 }
71
72 > .card-body {
73 // Enable `flex-grow: 1` for decks and groups so that card blocks take up
74 // as much space as possible, ensuring footers are aligned to the bottom.
75 flex: 1 1 auto;
76 background: var(----body--background);
77 border-width: var(----body--border-width);
78 border-style: var(----body--border-style);
79 border-color: var(----body--border-color);
80 color: var(----body--color);
81 padding: var(----body--padding);
82 transition-property: border-color;
83 transition-duration: var(--transition-duration);
84 transition-timing-function: var(--transition-easing);
85 border-radius: var(----border-radius);
86
87 &:not(:first-child) {
88 border-top-left-radius: 0;
89 border-top-right-radius: 0;
90 }
91
92 &:not(:last-child) {
93 border-bottom-left-radius: 0;
94 border-bottom-right-radius: 0;
95 }
96
97 > .card-title {
98 margin-top: 0;
99 margin-bottom: var(--margin-bottom);
100 }
101
102 > .card-subtitle {
103 margin-top: var(--margin-top);
104 margin-bottom: 0;
105 }
106
107 > .card-link {
108 text-decoration: none;
109
110 + .card-link {
111 margin-left: var(--margin-left);
112 }
113 }
114
115 > *:first-child {
116 margin-top: 0;
117 }
118
119 > *:last-child {
120 margin-bottom: 0;
121 }
122 }
123
124 > .card-footer {
125 background: var(----footer--background);
126 border-color: var(----footer--border-color);
127 border-width: var(----footer--border-width);
128 border-style: var(----footer--border-style);
129 color: var(----footer--color);
130 padding: var(----footer--padding);
131 border-top-width: 0;
132
133 &:last-child {
134 border-bottom-left-radius: var(----border-bottom-left-radius);
135 border-bottom-right-radius: var(----border-bottom-right-radius);
136 }
137 }
138
139 > img {
140 width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
141 border-top-left-radius: var(----border-top-left-radius);
142 border-top-right-radius: var(----border-top-right-radius);
143 }
144
145 &:last-child {
146 border-bottom-left-radius: var(----border-bottom-left-radius);
147 border-bottom-right-radius: var(----border-bottom-right-radius);
148 }
149
150 &,
151 > .card-header,
152 > .card-footer {
153 transition-property: background-color;
154 transition-duration: var(--transition-duration);
155 transition-timing-function: var(--transition-easing);
156 }
157
158 > .list-group:first-child,
159 .list-group-item:first-child {
160 border-top-left-radius: var(----border-top-left-radius);
161 border-top-right-radius: var(----border-top-right-radius);
162 }
163
164 > .list-group:last-child,
165 .list-group-item:last-child {
166 border-bottom-left-radius: var(----border-bottom-left-radius);
167 border-bottom-right-radius: var(----border-bottom-right-radius);
168 }
169}