4-row-components edit

/* scss/4-row-components/_wm-card-component.scss */ //====================================================================== // WM Card Component //====================================================================== // Card component including // * min & max-width // * flex layout // * text and graphic areas // AVAILABLE OPTIONS // * .-isLink: applies hover styles // * .-landscape: landscape orientation // * .-card-order-switched: second child element moves to first // NOTES: // each section controls its own exterior margins $wm-card-min-width: 277px; $wm-card-max-width: 307px; $image-card-min-width: 277px; $image-card-max-width: 416px; $image-card-min-height: 280px; $image-card-max-height: 508px; // $wm-card-top-bottom-spacing-mobile: kspaces(md); // $wm-card-top-bottom-spacing-desktop: kspaces(xl); .wm-card { position: relative; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; min-width: $wm-card-min-width; max-width: $wm-card-max-width; flex: 1 1 253px; flex: 1 1 $wm-card-min-width; border: 1px solid var(--theme-base-color, --color-neutral-base); background-color: var(--theme-base-color); transition: all 0.3s ease; &.--text-card, &.--image-card { border: 1px solid rgba(var(--theme-base-accent-rgb-color), 0.4); flex: 1 0 $image-card-min-width; width: 100%; max-width: $image-card-max-width; min-height: $image-card-min-height; max-height: $image-card-max-width; position: relative; display: flex; flex-direction: column; justify-content: flex-start; background-color: var(--theme-base-color); transition: all 0.3s ease-in-out; } &.--text-card { min-height: auto; } &.--text-card::after { content: ""; position: absolute; bottom: 0; left: 0; z-index: 100; width: 100%; height: 0px; background-color: var(--theme-base-accent-color); transition: all 0.3s ease; .h-theme-green & { background-color: var(--color-wmgold-55); } } &.--text-card:hover a { text-decoration: none; } &.--text-card:hover::after { height: 8px; } // more text and image style overrides can be found in // wm-description-text-component.scss &:hover { border: 1px solid var(--theme-base-accent-color); } // text section &__text-section { display: flex; flex-direction: column; justify-content: flex-start; //width: 100%; // z-index is set so a link in this section // will cover the whole card reliably z-index: 1; margin: kspaces(sm); margin-bottom: 30px; } // graphic section &__graphic-section { display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 30px; overflow: hidden; position: relative; } &__image-wrapper { position: relative; width: 100%; overflow: hidden; // shows when image has not loaded yet // TODO: replace with a certified image 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; } } &__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; } //====================================================================== // OPTIONS //====================================================================== //----------------------------------------------------- // SWITCH ORDER OF CARDS OPTION //----------------------------------------------------- // .-card-order-switched: second child element moves to first &.-card-order-switched > *:nth-child(2) { order: -1; } //----------------------------------------------------- // LANDSCAPE CARD OPTION //----------------------------------------------------- .--landscape & { // card flex-direction: row; flex: 1 1 528px; max-width: 590px; // text section &__text-section { flex: 0 1 74%; text-align: left; margin: kspaces(md) kspaces(md) kspaces(md) 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } // graphic section &__graphic-section { flex: 1 1 90px; max-width: 150px; margin: 0; display: flex; justify-content: center; align-items: center; } } //----------------------------------------------------- // LINK (w hover) OPTION //----------------------------------------------------- // IS LINK HOVER STYLES ------------------------------------- // .--isLink: applies hover styles &--isLink { transition: $transition-default; } // DEFAULT CARD HOVER EFFECT ------------------------------------- &--isLink:hover, &--isLink:focus-within { text-decoration: none; cursor: pointer; border-color: rgba(var(--theme-base-accent-rgb-color), 0.3); transform: translateY(-#{kspaces(xs)}); -webkit-box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.06); } }