maille
Version:
Component library for MithrilJS
52 lines (41 loc) • 1.39 kB
CSS
.maille.maille-card {
display: flex;
flex-direction: column;
margin: var(--maille-card-margin, .5em);
overflow: hidden;
}
.maille.maille-card .maille-card-content {
position: relative;
height: 100%;
}
.maille.maille-card.rounded {
border-radius: var(--maille-card-border-radius, .5em);
}
.maille.maille-card.shadowed-on-hover:hover {
box-shadow: var(--maille-card-shadowed-on-hover-box-shadow, 2px 3px 10px #AAA);
}
.maille.maille-card.shadowed {
box-shadow: var(--maille-card-shadowed-box-shadow, 2px 3px 10px #AAA);
}
.maille.maille-card.bordered {
border: var(--maille-card-bordered-border, 1px solid #AAA);
}
.maille.maille-card.size-sm { width: var(--maille-card-sm-width, 10em); }
.maille.maille-card.size-md { width: var(--maille-card-md-width, 15em); }
.maille.maille-card.size-lg { width: var(--maille-card-lg-width, 20em); }
.maille.maille-card.size-xlg { width: var(--maille-card-xlg-width, 30em); }
/**************/
/* With Image */
/**************/
.maille.maille-card.rounded .maille-card-image-container {
border-top-left-radius: var(--maille-card-border-radius, .5em);
border-top-right-radius: var(--maille-card-border-radius, .5em);
}
.maille.maille-card .maille-card-image-container {
display: flex;
justify-content: center;
align-items: center;
}
.maille.maille-card .maille-card-image-container img.full-width {
width: 100%;
}