source: imaps-frontend/node_modules/bootstrap/scss/_card.scss@ d565449

main
Last change on this file since d565449 was d565449, checked in by stefan toskovski <stefantoska84@…>, 4 weeks ago

Update repo after prototype presentation

  • Property mode set to 100644
File size: 6.8 KB
Line 
1//
2// Base styles
3//
4
5.card {
6 // scss-docs-start card-css-vars
7 --#{$prefix}card-spacer-y: #{$card-spacer-y};
8 --#{$prefix}card-spacer-x: #{$card-spacer-x};
9 --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
10 --#{$prefix}card-title-color: #{$card-title-color};
11 --#{$prefix}card-subtitle-color: #{$card-subtitle-color};
12 --#{$prefix}card-border-width: #{$card-border-width};
13 --#{$prefix}card-border-color: #{$card-border-color};
14 --#{$prefix}card-border-radius: #{$card-border-radius};
15 --#{$prefix}card-box-shadow: #{$card-box-shadow};
16 --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
17 --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
18 --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
19 --#{$prefix}card-cap-bg: #{$card-cap-bg};
20 --#{$prefix}card-cap-color: #{$card-cap-color};
21 --#{$prefix}card-height: #{$card-height};
22 --#{$prefix}card-color: #{$card-color};
23 --#{$prefix}card-bg: #{$card-bg};
24 --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
25 --#{$prefix}card-group-margin: #{$card-group-margin};
26 // scss-docs-end card-css-vars
27
28 position: relative;
29 display: flex;
30 flex-direction: column;
31 min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
32 height: var(--#{$prefix}card-height);
33 color: var(--#{$prefix}body-color);
34 word-wrap: break-word;
35 background-color: var(--#{$prefix}card-bg);
36 background-clip: border-box;
37 border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
38 @include border-radius(var(--#{$prefix}card-border-radius));
39 @include box-shadow(var(--#{$prefix}card-box-shadow));
40
41 > hr {
42 margin-right: 0;
43 margin-left: 0;
44 }
45
46 > .list-group {
47 border-top: inherit;
48 border-bottom: inherit;
49
50 &:first-child {
51 border-top-width: 0;
52 @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
53 }
54
55 &:last-child {
56 border-bottom-width: 0;
57 @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
58 }
59 }
60
61 // Due to specificity of the above selector (`.card > .list-group`), we must
62 // use a child selector here to prevent double borders.
63 > .card-header + .list-group,
64 > .list-group + .card-footer {
65 border-top: 0;
66 }
67}
68
69.card-body {
70 // Enable `flex-grow: 1` for decks and groups so that card blocks take up
71 // as much space as possible, ensuring footers are aligned to the bottom.
72 flex: 1 1 auto;
73 padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
74 color: var(--#{$prefix}card-color);
75}
76
77.card-title {
78 margin-bottom: var(--#{$prefix}card-title-spacer-y);
79 color: var(--#{$prefix}card-title-color);
80}
81
82.card-subtitle {
83 margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
84 margin-bottom: 0;
85 color: var(--#{$prefix}card-subtitle-color);
86}
87
88.card-text:last-child {
89 margin-bottom: 0;
90}
91
92.card-link {
93 &:hover {
94 text-decoration: if($link-hover-decoration == underline, none, null);
95 }
96
97 + .card-link {
98 margin-left: var(--#{$prefix}card-spacer-x);
99 }
100}
101
102//
103// Optional textual caps
104//
105
106.card-header {
107 padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
108 margin-bottom: 0; // Removes the default margin-bottom of <hN>
109 color: var(--#{$prefix}card-cap-color);
110 background-color: var(--#{$prefix}card-cap-bg);
111 border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
112
113 &:first-child {
114 @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
115 }
116}
117
118.card-footer {
119 padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
120 color: var(--#{$prefix}card-cap-color);
121 background-color: var(--#{$prefix}card-cap-bg);
122 border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
123
124 &:last-child {
125 @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
126 }
127}
128
129
130//
131// Header navs
132//
133
134.card-header-tabs {
135 margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
136 margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
137 margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
138 border-bottom: 0;
139
140 .nav-link.active {
141 background-color: var(--#{$prefix}card-bg);
142 border-bottom-color: var(--#{$prefix}card-bg);
143 }
144}
145
146.card-header-pills {
147 margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
148 margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
149}
150
151// Card image
152.card-img-overlay {
153 position: absolute;
154 top: 0;
155 right: 0;
156 bottom: 0;
157 left: 0;
158 padding: var(--#{$prefix}card-img-overlay-padding);
159 @include border-radius(var(--#{$prefix}card-inner-border-radius));
160}
161
162.card-img,
163.card-img-top,
164.card-img-bottom {
165 width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
166}
167
168.card-img,
169.card-img-top {
170 @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
171}
172
173.card-img,
174.card-img-bottom {
175 @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
176}
177
178
179//
180// Card groups
181//
182
183.card-group {
184 // The child selector allows nested `.card` within `.card-group`
185 // to display properly.
186 > .card {
187 margin-bottom: var(--#{$prefix}card-group-margin);
188 }
189
190 @include media-breakpoint-up(sm) {
191 display: flex;
192 flex-flow: row wrap;
193 // The child selector allows nested `.card` within `.card-group`
194 // to display properly.
195 > .card {
196 // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
197 flex: 1 0 0%;
198 margin-bottom: 0;
199
200 + .card {
201 margin-left: 0;
202 border-left: 0;
203 }
204
205 // Handle rounded corners
206 @if $enable-rounded {
207 &:not(:last-child) {
208 @include border-end-radius(0);
209
210 .card-img-top,
211 .card-header {
212 // stylelint-disable-next-line property-disallowed-list
213 border-top-right-radius: 0;
214 }
215 .card-img-bottom,
216 .card-footer {
217 // stylelint-disable-next-line property-disallowed-list
218 border-bottom-right-radius: 0;
219 }
220 }
221
222 &:not(:first-child) {
223 @include border-start-radius(0);
224
225 .card-img-top,
226 .card-header {
227 // stylelint-disable-next-line property-disallowed-list
228 border-top-left-radius: 0;
229 }
230 .card-img-bottom,
231 .card-footer {
232 // stylelint-disable-next-line property-disallowed-list
233 border-bottom-left-radius: 0;
234 }
235 }
236 }
237 }
238 }
239}
Note: See TracBrowser for help on using the repository browser.