source: Application/ocrent/wwwroot/lib/bootstrap/scss/_card.scss

Last change on this file was f5f7c24, checked in by 192011 <mk.snicker@…>, 15 months ago

Initial commit

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