4-row-components edit

/* scss/4-row-components/_wm-image-card.scss */ //====================================================================== // WM Image Card Component //====================================================================== // Card component including // * min & max-width // * flex layout // * text and image areas // * javascript adds .-text-overflow when text is too long for unhovered area // * .-has-byline: changes height of card // AVAILABLE OPTIONS // none currently // NOTES: // each section controls its own exterior margins $image-card-mobile-breakpoint: $mobile-to-wide-mobile-breakpoint; $image-card-min-width: 277px; $image-card-max-width: 416px; $image-card-min-height: 280px; $image-card-max-height: 508px; $image-card-max-height-has-byline: 543px; $image-card-right-inside-padding: kspaces(sm); $image-card-left-inside-padding: kspaces(sm); $image-card-bottom-inside-padding: kspaces(md); $image-card-gap: 20px; $image-card-image-height: 277px; .wm-slideshow .wm-cards { flex-wrap: nowrap; justify-content: normal; } .wm-image-card { position: relative; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; border: 1px solid rgba(var(--theme-base-accent-rgb-color), 0.4); background-color: var(--theme-base-color); max-width: $image-card-max-width; transition: all 0.3s ease-in-out; &:hover { border: 1px solid var(--theme-base-accent-color); } @include breakpoint($image-card-mobile-breakpoint) { min-width: $image-card-min-width; max-height: $image-card-max-height; overflow: hidden; &.-has-byline { max-height: $image-card-max-height-has-byline; } } // text section &__text-section { display: flex; flex-direction: column; justify-content: flex-start; z-index: 1; margin: 0 kspaces(sm) 30px; height: min-content; overflow: hidden; @include breakpoint($image-card-mobile-breakpoint) { } } // image section &__image-section { width: 100%; overflow: hidden; position: relative; display: block; margin-bottom: 0; aspect-ratio: 1000 / 668; } &__image-wrapper { // 101% corrects a white border that show up on the edges of the image sometimes width: 101%; overflow: hidden; // shows when image has not loaded yet background: url("https://www.wm.edu/images/default_cypher_background.jpg"); background-size: cover; background-position: center; // aspect ratio hack for Safari, followed by real thing display: block; // padding-top: calc((167 / 250) * 100%); // @supports (aspect-ratio: auto) { // aspect-ratio: 1000 / 668; // padding-top: 0; // } aspect-ratio: 1000 / 668; position: absolute; top: 0; left: 0; // TODO: replace with dynamic image size // min-height: 277px; } &__image { object-fit: cover; object-position: center; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; vertical-align: middle; border: 0; transition: all 0.3s ease; width: 100%; height: 100%; } // ---------- IMAGE CARD HOVER ---------- // INITIAL STATE // image zooms in and darkens // initial image gradient state &__image-wrapper:after { content: ""; position: absolute; left: 0; width: 100%; height: calc(100% + 15px); z-index: 0; opacity: 0; top: -15px; // gradient that covers bottom of image background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 90%, rgba(0, 0, 0, 0) 100%); transition: all 0.4s linear; } // TODO: SWITCH THIS TO USE DEVICE DETECTION @include breakpoint($image-card-mobile-breakpoint) { // HOVER &:hover { // * card border changes border: 1px solid rgba(var(--theme-base-accent-rgb-color), 0.4); // * image zooms in .wm-image-card__image { transform: scale3d(1.07, 1.07, 1.07); transform-origin: center; } // * image gradient shows (image wrapper) .wm-image-card__image-wrapper:after { opacity: 1; } .wm-image-card__text-section { transition: all 0.1s ease-in; } } } } // overwrite .wm-description-text styles .wm-description-text { &__title { .wm-image-card & { margin-top: kspaces(xs); // equals 24px } } .wm-image-card &__title, .wm-image-card &__text, .wm-image-card &__caption, .wm-image-card &__publication, .wm-image-card &__byline-date { text-align: left; } }