AutorÃa | Ultima modificación | Ver Log |
//
// Base styles
//
.editing .block_with_controls {
min-height: 320px;
}
.card {
margin-bottom: 40px;
padding: 0;
position: relative;
display: flex;
flex-direction: column;
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
height: $card-height;
word-wrap: break-word;
>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($card-inner-border-radius);
}
&:last-child {
border-bottom-width: 0;
@include border-bottom-radius($card-inner-border-radius);
}
}
&:last-of-type {
margin-bottom: 0;
}
// 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;
}
}
.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;
// Workaround for the image size bug in IE
// See: https://github.com/twbs/bootstrap/pull/28855
min-height: 1px;
color: $card-color;
&.alert-info {
padding: 10px;
border-radius: $btn-border-radius;
}
.theme-dark & {
color: $dm-card-color;
}
.generaltable tbody tr {
border: 0;
}
}
.card-title {
margin-bottom: .5rem;
font-weight: $font-weight-medium;
font-size: $font-size-xs;
line-height: 135%;
color: $body-color-light;
letter-spacing: .025rem;
.theme-dark & {
color: $dm-body-color-light;
}
a {
color: $body-color-light;
.theme-dark & {
color: $dm-body-color-light;
}
}
}
.card-subtitle {
margin-top: -$card-spacer-y * 0.5;
margin-bottom: 0;
}
.card-text {
font-size: $font-size-sm;
color: $body-color-secondary;
.theme-dark & {
color: $dm-body-color-secondary;
}
}
.card-text:last-child {
margin-bottom: 0;
}
.card-link {
@include hover() {
text-decoration: none;
}
+.card-link {
margin-left: $card-spacer-x;
}
}
//
// Optional textual caps
//
.card-header {
padding: $card-spacer-y $card-spacer-x;
margin-bottom: 0; // Removes the default margin-bottom of <hN>
color: $card-cap-color;
background-color: $card-cap-bg;
#page-admin-tool-dataprivacy-summary & {
padding: 5px 0;
}
.theme-dark & {
color: $dm-card-cap-color;
background-color: $dm-card-cap-bg;
}
.course-selected & {
padding: 20px 0;
font-size: $font-size-md;
}
&:first-child {
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
}
}
.card-footer {
padding: $card-spacer-y $card-spacer-x;
color: $card-cap-color;
background-color: $card-cap-bg;
border-top: $card-border-width solid $card-border-color;
.theme-dark & {
color: $dm-card-cap-color;
background-color: $dm-card-cap-bg;
border-top: $card-border-width solid $dm-card-border-color;
}
&:last-child {
@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
}
#data-listview-content & {
padding: 0;
}
}
.card {
.footer {
br {
display: none;
}
}
}
//
// Header navs
//
.card-header-tabs {
margin-right: -$card-spacer-x * 0.5;
margin-bottom: -$card-spacer-y;
margin-left: -$card-spacer-x * 0.5;
border-bottom: 0;
}
.card-header-pills {
margin-right: -$card-spacer-x * 0.5;
margin-left: -$card-spacer-x * 0.5;
}
// Card image
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: $card-img-overlay-padding;
@include border-radius($card-inner-border-radius);
}
.card-img,
.card-img-top,
.card-img-bottom {
flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
}
.card-img,
.card-img-top {
@include border-top-radius($card-inner-border-radius);
}
.card-img,
.card-img-bottom {
@include border-bottom-radius($card-inner-border-radius);
}
// Card deck
.card-deck {
.card {
margin-bottom: $card-deck-margin;
}
@include media-breakpoint-up(sm) {
display: flex;
flex-flow: row wrap;
margin-right: -$card-deck-margin;
margin-left: -$card-deck-margin;
.card {
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
flex: 1 0 0%;
margin-right: $card-deck-margin;
margin-bottom: 0; // Override the default
margin-left: $card-deck-margin;
}
}
}
//
// Card groups
//
.card-group {
// The child selector allows nested `.card` within `.card-group`
// to display properly.
>.card {
margin-bottom: $card-group-margin;
}
@include media-breakpoint-up(sm) {
display: flex;
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;
+.card {
margin-left: 0;
border-left: 0;
}
// Handle rounded corners
@if $enable-rounded {
&:not(:last-child) {
@include border-right-radius(0);
.card-img-top,
.card-header {
// stylelint-disable-next-line property-disallowed-list
border-top-right-radius: 0;
}
.card-img-bottom,
.card-footer {
// stylelint-disable-next-line property-disallowed-list
border-bottom-right-radius: 0;
}
}
&:not(:first-child) {
@include border-left-radius(0);
.card-img-top,
.card-header {
// stylelint-disable-next-line property-disallowed-list
border-top-left-radius: 0;
}
.card-img-bottom,
.card-footer {
// stylelint-disable-next-line property-disallowed-list
border-bottom-left-radius: 0;
}
}
}
}
}
}
//
// Columns
//
.card-columns {
.card {
margin-bottom: $card-columns-margin;
}
@include media-breakpoint-up(sm) {
column-count: $card-columns-count;
column-gap: $card-columns-gap;
orphans: 1;
widows: 1;
.card {
display: inline-block; // Don't let them vertically span multiple columns
width: 100%; // Don't let their width change
}
}
}
//
// Accordion
//
.accordion {
>.card {
overflow: hidden;
&:not(:last-of-type) {
border-bottom: 0;
@include border-bottom-radius(0);
}
&:not(:first-of-type) {
@include border-top-radius(0);
}
>.card-header {
@include border-radius(0);
margin-bottom: -$card-border-width;
}
}
}
// Remove styles for HTML blocks
.block_html {
padding: 0;
border: none;
border-radius: 0;
.theme-dark & {
border: none;
.card-body {
padding: 0;
}
}
}
.course-card .card-img-top,
.theme-card .card-img-top {
aspect-ratio: 16 / 9;
background-position: center;
background-size: cover;
}
.theme-card {
width: 100%;
.h5 {
font-size: 18px;
margin-bottom: 0;
}
}