Edit
/* scss/7-rows/_events.scss */
//======================================================================
// EVENTS ROW
//======================================================================
.EventRow {
// remove side padding
@include wm-row__noSidePadding();
// overwrite .wm-image-card styles
&__card {
// gradient that covers bottom of long titles
&:after {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
content: "";
background: linear-gradient(
0deg,
rgba(var(--theme-base-rgb-color), 1) 50%,
rgba(var(--theme-base-rgb-color), 0) 100%
);
}
}
&__image-section {
transition: flex-shrink 200ms ease-in-out;
transition: flex 0.2s ease-in-out;
// make image area taller to account for static hover state on mobile
aspect-ratio: 900 / 668;
@include breakpoint($image-card-mobile-breakpoint) {
aspect-ratio: 1000 / 668;
}
}
&__image-wrapper {
top: -9px;
@include breakpoint($image-card-mobile-breakpoint) {
top: -3px;
}
}
&__image {
image-rendering: auto;
}
&__text-section {
overflow: visible;
padding: 14px kspaces(sm);
margin: 0;
flex-basis: toRem(153);
max-height: 153px;
z-index: 1;
// gets everything ready to move up on hover
> *:not(.EventRow__eventButton) {
position: relative;
top: 0px;
transition: $transition-default;
}
// background that gets taller (by adding border) on hover
// this workaround is necessary to overlap the image on hover
// when image height is variable due to adjusting for aspect ratio
&:before {
content: "";
position: absolute;
bottom: -30px;
left: 0;
width: 100%;
height: 153px;
z-index: 0;
transition: $transition-default;
background-color: var(--theme-base-color);
border-top: 30px solid var(--theme-base-color);
}
}
// Event Content elements
&__eventTitle,
&__eventTitle a {
margin-top: 0.5rem;
text-align: left;
color: var(--theme-title-color);
font-family: font(alt-heading-serif);
font-size: toRem(20);
font-weight: font(serif-weight, medium);
line-height: toRem(24);
letter-spacing: toRem(0.16);
font-feature-settings: "lnum";
&:hover {
text-decoration: none;
}
}
// we can't use this here because position: relative is used on the parent
// making the whole card a link is done in the javascript
// &__eventTitle > a:after {
// // this makes the whole card act as the link
// content: "";
// position: absolute;
// top: 0;
// bottom: 0;
// left: 0;
// right: 0;
// }
&__eventMetadata {
text-align: left;
line-height: 1.4;
display: flex;
justify-content: space-between;
}
&__eventDate,
&__eventTime,
&__eventButton {
color: var(--theme-subtext-color);
opacity: 0.65;
font-family: font(text-sans);
font-size: toRem(14);
font-weight: font(sans-weight, medium);
}
&__eventDate {
display: inline-block;
margin-right: 11px;
}
&__eventButton {
@include rightarrow(
$color: var(--color-wmgold-55),
$paddingfromtext: 6px,
$movementamount: 6px,
$useFontAwesome: true
);
&:after {
bottom: -1px;
}
position: absolute;
bottom: toRem(3);
left: kspaces(sm);
display: block;
min-height: toRem(33);
transition: all 0.18s cubic-bezier(0.74, 0.01, 1, 1);
transition-delay: 0s;
opacity: 0;
color: rgba(var(--theme-title-rgb-color), 1);
line-height: toRem(33);
}
& > *:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
&__moreButton {
@include wm-row__moreButton;
&:after {
bottom: -2px;
}
}
// hide slideshow on load
&.-loading,
&.-no-slides {
.wm-slideshow__track,
.wm-slideshow__dots {
display: none;
}
}
// no events message
// hide message when loaded and there are slides
&__message,
&__message {
display: none;
}
// show message when loaded or there are no slides
.-loading &__message,
.-no-slides &__message {
display: flex;
width: 90%;
max-width: 300px;
height: auto;
margin: 45px auto 0;
padding: 43px 50px;
box-sizing: border-box;
justify-content: center;
align-items: center;
font-family: font(text-sans);
font-size: $base-text-size;
line-height: $font-base-line_height;
color: var(--theme-title-color);
background-color: var(--theme-base-color);
border: 1px solid rgba(var(--theme-base-accent-rgb-color), 0.4);
}
// Accessibility styles
& [aria-busy="true"],
& [aria-hidden="true"],
&:not(.-loading) .sr-only {
display: none;
}
}
// mixin for hover/touchscreen display
@mixin EventRowHoverState {
text-decoration: none;
// background-color: var(--theme-base-color);
// border color set in theme-colors.scss
// border: 1px solid rgba(var(--theme-base-accent-rgb-color), 1);
&:after {
// hide title gradient cover
z-index: -1;
}
// move all the things up on hover
.EventRow__text-section > *:not(.EventRow__eventButton) {
top: -30px;
z-index: 1;
}
// move white background up on hover to make it look like the text section is getting larger
.EventRow__text-section:before {
bottom: 0px;
}
&__eventDate,
&__eventTime {
opacity: 0.75;
color: var(--theme-subtext-color);
}
.EventRow__eventButton {
bottom: toRem(8);
z-index: 1;
opacity: 1;
transition-delay: 0.15s;
}
}
// for touchscreens
// use hover state (with modifications) as default view
// arrow buttons do not show
@include breakpoint($mobile-to-wide-mobile-breakpoint, "max") {
.EventRow__card {
@include EventRowHoverState();
}
}
// card hover effects
.EventRow__card:hover {
@include EventRowHoverState();
cursor: pointer;
}
