Happening Now (Dark)
<div class="happening-now happening-now--dark">
<div class="happening-now__inner">
<div class="happening-now-head">
<div class="happening-now-head-item">
<a href="#" class="happening-now-control happening-now-control--news js-open" data-target="news">
<h3 class="happening-now-title">news</h3>
<div class="happening-now-open js-control" id="newsControl">
<i class="fa fa-plus"></i>
</div>
</a>
<div class="happening-now-item-initial">
<a href="#" class="happening-now-item">
<div class="happening-now-item__media">
<img src="/images/photos/0.jpg" alt="" class="happening-now-item__img img-responsive" />
</div>
<div class="happening-now-item__body">
<h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
</div>
</a>
</div>
</div>
<div class="hidden-lg">
<div class="happening-now-zone happening-now-zone--news js-section js-section--news" data-section="news">
<div class="happening-now-zone-items">
<a href="#" class="happening-now-item">
<div class="happening-now-item__media">
<img src="/images/photos/2.jpg" alt="" class="happening-now-item__img img-responsive" />
</div>
<div class="happening-now-item__body">
<h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
</div>
</a>
<a href="#" class="happening-now-item">
<div class="happening-now-item__media">
<img src="/images/photos/3.jpg" alt="" class="happening-now-item__img img-responsive" />
</div>
<div class="happening-now-item__body">
<h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
</div>
</a>
<a href="#" class="happening-now-item">
<div class="happening-now-item__media">
<img src="/images/photos/4.jpg" alt="" class="happening-now-item__img img-responsive" />
</div>
<div class="happening-now-item__body">
<h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
</div>
</a>
</div>
<div class="happening-zone-actions">
<a href="" class="btn btn-link"
>See More
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<div class="happening-now-head-item">
<a href="#" class="happening-now-control happening-now-control--events js-open" data-target="events">
<h3 class="happening-now-title">events</h3>
<div class="happening-now-open js-control" id="eventsControl">
<i class="fa fa-plus"></i>
</div>
</a>
<div class="happening-now-item-initial">
<a href="#" class="happening-now-item">
<div class="happening-now-item__event">
<span class="happening-now-item__date"> JUL 13 </span>
</div>
<div class="happening-now-item__body">
<h4 class="happening-now-item__title">
Event title: Lorem ipsum dolor sit<br />
Monday, MMM DD. 00:00 AM - 00:00 AM<br />
Location: Virtual
</h4>
</div>
</a>
</div>
</div>
<div class="hidden-lg">
<div class="happening-now-zone happening-now-zone--events js-section js-section--events" data-section="events">
<div class="happening-now-zone-items">
<a href="#" class="happening-now-item">
<div class="happening-now-item__event">
<span class="happening-now-item__date"> JUL 14 </span>
<span class="happening-now-item__date"> JUL 19 </span>
</div>
<div class="happening-now-item__body">
<h4 class="happening-now-item__title">
Event title: Lorem ipsum dolor sit<br />
Monday, MMM DD. 00:00 AM - 00:00 AM<br />
Location: Virtual
</h4>
</div>
</a>
<a href="#" class="happening-now-item">
<div class="happening-now-item__event">
<span class="happening-now-item__date"> JUL 22 </span>
</div>
<div class="happening-now-item__body">
<h4 class="happening-now-item__title">
Event title: Lorem ipsum dolor sit<br />
Monday, MMM DD. 00:00 AM - 00:00 AM<br />
Location: Virtual
</h4>
</div>
</a>
<a href="#" class="happening-now-item">
<div class="happening-now-item__event">
<span class="happening-now-item__date"> JUL 23 </span>
<span class="happening-now-item__date"> JUL 17 </span>
</div>
<div class="happening-now-item__body">
<h4 class="happening-now-item__title">
Event title: Lorem ipsum dolor sit<br />
Monday, MMM DD. 00:00 AM - 00:00 AM<br />
Location: Virtual
</h4>
</div>
</a>
</div>
<div class="happening-zone-actions">
<a href="" class="btn btn-link"
>See More
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<div class="happening-now-head-item">
<a href="#" class="happening-now-control happening-now-control--announcements js-open" data-target="announcements">
<h3 class="happening-now-title">announcements</h3>
<div class="happening-now-open js-control" id="announcementsControl">
<i class="fa fa-plus"></i>
</div>
</a>
<div class="happening-now-item-initial">
<a href="#" class="happening-now-item">
<div class="happening-now-item__body">
<h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
</div>
</a>
</div>
</div>
<div class="hidden-lg">
<div class="happening-now-zone happening-now-zone--announcements js-section js-section--announcements" data-section="announcements">
<div class="happening-now-zone-items">
<a href="#" class="happening-now-item">
<div class="happening-now-item__body">
<h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
</div>
</a>
<a href="#" class="happening-now-item">
<div class="happening-now-item__body">
<h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
</div>
</a>
<a href="#" class="happening-now-item">
<div class="happening-now-item__body">
<h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
</div>
</a>
</div>
<div class="happening-zone-actions">
<a href="" class="btn btn-link"
>See More
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
<div class="visible-lg-block">
<div class="happening-now-zone happening-now-zone--desktop happening-now-zone--news js-section js-section--news" data-section="news">
<a href="" class="happening-now-close js-close">
<i class="fa fa-minus"></i>
</a>
<div class="happening-now-zone-items">
<a href="#" class="happening-now-item">
<div class="happening-now-item__media">
<img src="/images/photos/2.jpg" alt="" class="happening-now-item__img img-responsive" />
</div>
<div class="happening-now-item__body">
<h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
</div>
</a>
<a href="#" class="happening-now-item">
<div class="happening-now-item__media">
<img src="/images/photos/3.jpg" alt="" class="happening-now-item__img img-responsive" />
</div>
<div class="happening-now-item__body">
<h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
</div>
</a>
<a href="#" class="happening-now-item">
<div class="happening-now-item__media">
<img src="/images/photos/4.jpg" alt="" class="happening-now-item__img img-responsive" />
</div>
<div class="happening-now-item__body">
<h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
</div>
</a>
</div>
<div class="happening-zone-actions">
<a href="" class="btn btn-link"
>See More
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<div class="visible-lg-block">
<div class="happening-now-zone happening-now-zone--desktop happening-now-zone--events js-section js-section--events" data-section="events">
<a href="" class="happening-now-close js-close">
<i class="fa fa-minus"></i>
</a>
<div class="happening-now-zone-items">
<a href="#" class="happening-now-item">
<div class="happening-now-item__event">
<span class="happening-now-item__date"> JUL 14 </span>
<span class="happening-now-item__date"> JUL 19 </span>
</div>
<div class="happening-now-item__body">
<h4 class="happening-now-item__title">
Event title: Lorem ipsum dolor sit<br />
Monday, MMM DD. 00:00 AM - 00:00 AM<br />
Location: Virtual
</h4>
</div>
</a>
<a href="#" class="happening-now-item">
<div class="happening-now-item__event">
<span class="happening-now-item__date"> JUL 22 </span>
</div>
<div class="happening-now-item__body">
<h4 class="happening-now-item__title">
Event title: Lorem ipsum dolor sit<br />
Monday, MMM DD. 00:00 AM - 00:00 AM<br />
Location: Virtual
</h4>
</div>
</a>
<a href="#" class="happening-now-item">
<div class="happening-now-item__event">
<span class="happening-now-item__date"> JUL 23 </span>
<span class="happening-now-item__date"> JUL 27 </span>
</div>
<div class="happening-now-item__body">
<h4 class="happening-now-item__title">
Event title: Lorem ipsum dolor sit<br />
Monday, MMM DD. 00:00 AM - 00:00 AM<br />
Location: Virtual
</h4>
</div>
</a>
</div>
<div class="happening-zone-actions">
<a href="" class="btn btn-link"
>See More
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<div class="visible-lg-block">
<div class="happening-now-zone happening-now-zone--desktop happening-now-zone--announcements js-section js-section--announcements" data-section="announcements">
<a href="" class="happening-now-close js-close">
<i class="fa fa-minus"></i>
</a>
<div class="happening-now-zone-items">
<a href="#" class="happening-now-item">
<div class="happening-now-item__body">
<h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
</div>
</a>
<a href="#" class="happening-now-item">
<div class="happening-now-item__body">
<h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
</div>
</a>
<a href="#" class="happening-now-item">
<div class="happening-now-item__body">
<h4 class="happening-now-item__title">Lorem ipsum dolor sit amet, heal likenes consectetur adipiscing lit, sed doer eiusmod honor.</h4>
</div>
</a>
</div>
<div class="happening-zone-actions">
<a href="" class="btn btn-link"
>See More
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
.happening-now {
padding-top: 2.4em;
padding-bottom: 2.4em;
&.happening-now--dark {
background-color: $color-base-blue;
}
.happening-now__inner {
max-width: 1170px;
margin: 0 auto;
}
.happening-now-head {
@media (min-width: $breakpoint-desktop) {
display: flex;
}
}
.happening-now-head-item {
flex: 1;
@media (min-width: $breakpoint-desktop) {
margin: 0 0.8rem;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
}
.happening-now-control {
position: relative;
display: block;
border-top: 4px solid $color-grey-dark;
text-decoration: none;
color: $color-base-blue;
&:hover {
color: $color-blue-medium;
}
&.happening-now-control--news {
border-color: $color-blue-medium;
}
&.happening-now-control--announcements {
border-color: $color-grey-medium;
}
&.happening-now-control--events {
border-color: $color-blue-light;
}
}
&.happening-now--dark .happening-now-control {
color: $color-base-white;
&:hover {
color: $color-blue-medium;
}
}
.happening-now-item-initial {
display: flex;
flex-wrap: wrap;
@media (min-width: $breakpoint-desktop) {
flex-wrap: nowrap;
> * {
flex: 1;
}
}
}
.happening-now-item {
display: flex;
margin-bottom: 1.2rem;
color: $color-base-blue;
text-decoration: none;
&:hover {
text-decoration: none;
color: $color-blue-medium;
}
}
&.happening-now--dark .happening-now-item {
color: $color-base-white;
&:hover {
color: $color-blue-medium;
}
}
.happening-now-title {
@include typeHeadline(true);
text-transform: uppercase;
margin: 0.4rem 1.2rem;
}
.happening-now-item__media {
flex: 0 0 7.2rem;
margin-left: 1.2rem;
}
.happening-now-item__event {
display: flex;
flex-direction: column;
align-items: center;
margin-left: 1.2rem;
}
.happening-now-item__date {
@include typeHeadline(true);
color: $color-blue-light;
text-transform: uppercase;
white-space: nowrap;
&:nth-child(2)::before {
display: block;
content: "";
width: 1.6rem;
height: 0;
margin: 0 auto;
border-top: 1px solid $color-blue-light;
}
}
.happening-now-item__body {
padding-left: 1.2rem;
padding-right: 1.2rem;
}
.happening-now-item__title {
@include typeCaption;
margin: 0;
}
.happening-now-zone {
position: relative;
display: none;
@media (min-width: $breakpoint-desktop) {
padding-top: 1.2rem;
border-top: 2px solid transparent;
&.happening-now-zone--news {
border-color: $color-blue-medium;
}
&.happening-now-zone--announcements {
border-color: $color-grey-medium;
}
&.happening-now-zone--events {
border-color: $color-blue-light;
}
}
}
.happening-now-zone-items {
@media (min-width: $breakpoint-desktop) {
padding-right: 2.4rem;
display: flex;
}
.happening-now-item {
flex: 0 0 33.3333%;
}
}
.happening-zone-actions {
padding-top: 1.2rem;
padding-bottom: 1.2rem;
text-align: right;
}
.happening-now-open,
.happening-now-close {
position: absolute;
top: 0.4rem;
right: 0;
font-size: 1.6rem;
}
&.happening-now--dark .happening-now-close {
color: $color-base-white;
&:hover {
color: $color-blue-medium;
}
}
@media (max-width: $breakpoint-desktop) {
.happening-now-control.is-active .happening-now-open {
display: none !important;
}
}
}
$(function () {
const $openBtn = $(".js-open");
const $closeBtn = $(".js-close");
const $sections = $(".js-section");
$openBtn.on("click", function (e) {
e.preventDefault();
const $thisOpenBtn = $(this);
const $target = $(".js-section--" + e.currentTarget.dataset.target);
if ($target.length && !$thisOpenBtn.hasClass("is-active")) {
// Close other sections only on desktop
if (window.matchMedia("(min-width: 1200px)").matches) {
$sections.find(".js-close").click();
}
$thisOpenBtn.addClass("is-active").find(".js-control").hide();
$target.slideDown();
}
});
$closeBtn.on("click", function (e) {
e.preventDefault();
const section = $(this).closest(".js-section").data("section");
$("[data-target=" + section + "]").removeClass("is-active");
$("#" + section + "Control").show();
$(this).closest(".js-section").slideUp();
});
});