1 | @import '../../css/variables';
|
2 | @import '../../css/mixins';
|
3 | @import 'css/variables';
|
4 | @import 'css/colors';
|
5 | @import 'css/sizes';
|
6 |
|
7 |
|
8 |
|
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 |
|
74 |
|
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%;
|
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 | }
|