0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-10 22:24:19 +01:00
Bootstrap/scss/_card.scss

239 lines
6.8 KiB
SCSS
Raw Normal View History

2014-08-06 02:12:24 +02:00
//
// Base styles
//
.card {
// scss-docs-start card-css-vars
--#{$prefix}card-spacer-y: #{$card-spacer-y};
--#{$prefix}card-spacer-x: #{$card-spacer-x};
--#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
--#{$prefix}card-title-color: #{$card-title-color};
--#{$prefix}card-subtitle-color: #{$card-subtitle-color};
--#{$prefix}card-border-width: #{$card-border-width};
--#{$prefix}card-border-color: #{$card-border-color};
--#{$prefix}card-border-radius: #{$card-border-radius};
--#{$prefix}card-box-shadow: #{$card-box-shadow};
--#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
--#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
--#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
--#{$prefix}card-cap-bg: #{$card-cap-bg};
--#{$prefix}card-cap-color: #{$card-cap-color};
--#{$prefix}card-height: #{$card-height};
--#{$prefix}card-color: #{$card-color};
--#{$prefix}card-bg: #{$card-bg};
--#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
--#{$prefix}card-group-margin: #{$card-group-margin};
// scss-docs-end card-css-vars
2014-08-06 02:12:24 +02:00
position: relative;
display: flex;
flex-direction: column;
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
height: var(--#{$prefix}card-height);
word-wrap: break-word;
background-color: var(--#{$prefix}card-bg);
2017-07-01 00:28:50 +02:00
background-clip: border-box;
border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
@include border-radius(var(--#{$prefix}card-border-radius));
@include box-shadow(var(--#{$prefix}card-box-shadow));
> hr {
margin-right: 0;
margin-left: 0;
}
> .list-group {
border-top: inherit;
border-bottom: inherit;
&:first-child {
border-top-width: 0;
@include border-top-radius(var(--#{$prefix}card-inner-border-radius));
}
&:last-child {
border-bottom-width: 0;
@include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
}
}
// Due to specificity of the above selector (`.card > .list-group`), we must
// use a child selector here to prevent double borders.
> .card-header + .list-group,
> .list-group + .card-footer {
border-top: 0;
}
2015-05-28 23:07:34 +02:00
}
.card-body {
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
// as much space as possible, ensuring footers are aligned to the bottom.
flex: 1 1 auto;
padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
color: var(--#{$prefix}card-color);
2014-08-06 02:12:24 +02:00
}
2015-05-28 23:07:34 +02:00
2014-08-06 02:12:24 +02:00
.card-title {
margin-bottom: var(--#{$prefix}card-title-spacer-y);
color: var(--#{$prefix}card-title-color);
2014-08-06 02:12:24 +02:00
}
2015-05-28 23:07:34 +02:00
.card-subtitle {
margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
2014-08-06 02:12:24 +02:00
margin-bottom: 0;
color: var(--#{$prefix}card-subtitle-color);
2014-08-06 02:12:24 +02:00
}
2015-05-28 23:07:34 +02:00
.card-text:last-child {
margin-bottom: 0;
2014-08-06 02:12:24 +02:00
}
2015-05-28 23:07:34 +02:00
.card-link {
&:hover {
text-decoration: if($link-hover-decoration == underline, none, null);
}
2014-08-06 02:12:24 +02:00
2015-05-28 23:07:34 +02:00
+ .card-link {
margin-left: var(--#{$prefix}card-spacer-x);
2015-05-28 23:07:34 +02:00
}
}
2014-08-06 02:12:24 +02:00
2015-05-28 04:00:11 +02:00
//
2015-05-28 23:07:34 +02:00
// Optional textual caps
2015-05-28 04:00:11 +02:00
//
2015-05-28 23:07:34 +02:00
.card-header {
padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
margin-bottom: 0; // Removes the default margin-bottom of <hN>
color: var(--#{$prefix}card-cap-color);
background-color: var(--#{$prefix}card-cap-bg);
border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
2015-05-28 04:00:11 +02:00
2015-05-28 23:07:34 +02:00
&:first-child {
@include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
2015-05-28 23:07:34 +02:00
}
2015-05-28 04:00:11 +02:00
}
2015-05-28 23:07:34 +02:00
.card-footer {
padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
color: var(--#{$prefix}card-cap-color);
background-color: var(--#{$prefix}card-cap-bg);
border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
2015-05-28 23:07:34 +02:00
&:last-child {
@include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
2015-05-28 23:07:34 +02:00
}
2015-05-28 04:00:11 +02:00
}
2016-01-18 03:55:24 +01:00
//
// Header navs
//
.card-header-tabs {
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
2016-01-18 03:55:24 +01:00
border-bottom: 0;
.nav-link.active {
background-color: var(--#{$prefix}card-bg);
border-bottom-color: var(--#{$prefix}card-bg);
}
2016-01-18 03:55:24 +01:00
}
.card-header-pills {
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
2016-01-18 03:55:24 +01:00
}
2014-08-06 02:12:24 +02:00
// Card image
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: var(--#{$prefix}card-img-overlay-padding);
@include border-radius(var(--#{$prefix}card-inner-border-radius));
2014-08-06 02:12:24 +02:00
}
2019-09-12 16:30:47 +02:00
.card-img,
.card-img-top,
.card-img-bottom {
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
}
2014-08-06 02:12:24 +02:00
2019-09-12 16:30:47 +02:00
.card-img,
2014-08-06 02:12:24 +02:00
.card-img-top {
@include border-top-radius(var(--#{$prefix}card-inner-border-radius));
2014-08-06 02:12:24 +02:00
}
2019-09-12 16:30:47 +02:00
.card-img,
2014-08-06 02:12:24 +02:00
.card-img-bottom {
@include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
2014-08-06 02:12:24 +02:00
}
//
// Card groups
//
.card-group {
// The child selector allows nested `.card` within `.card-group`
// to display properly.
> .card {
margin-bottom: var(--#{$prefix}card-group-margin);
}
@include media-breakpoint-up(sm) {
2019-04-25 21:10:55 +02:00
display: flex;
2016-12-22 05:26:17 +01:00
flex-flow: row wrap;
// The child selector allows nested `.card` within `.card-group`
// to display properly.
> .card {
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
flex: 1 0 0%;
margin-bottom: 0;
2015-05-28 23:07:34 +02:00
+ .card {
margin-left: 0;
border-left: 0;
2015-05-28 23:07:34 +02:00
}
// Handle rounded corners
@if $enable-rounded {
2018-12-23 08:19:07 +01:00
&:not(:last-child) {
@include border-end-radius(0);
2015-11-13 07:02:35 +01:00
2017-10-22 21:18:03 +02:00
.card-img-top,
.card-header {
2020-09-28 13:57:48 +02:00
// stylelint-disable-next-line property-disallowed-list
border-top-right-radius: 0;
}
2017-10-22 21:18:03 +02:00
.card-img-bottom,
.card-footer {
2020-09-28 13:57:48 +02:00
// stylelint-disable-next-line property-disallowed-list
border-bottom-right-radius: 0;
}
2015-05-28 23:07:34 +02:00
}
2018-12-23 08:19:07 +01:00
&:not(:first-child) {
@include border-start-radius(0);
2017-10-22 21:18:03 +02:00
.card-img-top,
.card-header {
2020-09-28 13:57:48 +02:00
// stylelint-disable-next-line property-disallowed-list
border-top-left-radius: 0;
}
2017-10-22 21:18:03 +02:00
.card-img-bottom,
.card-footer {
2020-09-28 13:57:48 +02:00
// stylelint-disable-next-line property-disallowed-list
border-bottom-left-radius: 0;
}
2015-05-28 23:07:34 +02:00
}
}
}
2014-08-06 02:12:24 +02:00
}
}