<div id="" class="Countdown js-countdown" style="" data-date="October 17, 2017 08:30:00" data-displayDays="true" data-displayHours="true" data-displayMinutes="true" data-displaySeconds="true">
<noscript>Please enable JavaScript in order to see this countdown.</noscript>
</div>
<div
id="{{id}}"
class="Countdown {{modifier}} js-countdown"
style="{{style}}"
{{#if date}} data-date="{{date}}"{{/if}}
{{#if intro}} data-introText="{{intro}}"{{/if}}
{{#if displaydays}} data-displayDays="{{displaydays}}"{{/if}}
{{#if displayhours}} data-displayHours="{{displayhours}}"{{/if}}
{{#if displayminutes}} data-displayMinutes="{{displayminutes}}"{{/if}}
{{#if displayseconds}} data-displaySeconds="{{displayseconds}}"{{/if}}
>
<noscript>Please enable JavaScript in order to see this countdown.</noscript>
</div>
{
"id": null,
"modifier": null,
"style": null,
"date": "October 17, 2017 08:30:00",
"intro": null,
"displaydays": true,
"displayhours": true,
"displayminutes": true,
"displayseconds": true
}
import React from 'react';
import ReactDOM from 'react-dom';
import {each, ready} from '@sproutsocial/sprout-brand/modules/util';
import Countdown from './src/Countdown';
ready(() => {
each(document.querySelectorAll('.js-countdown'), countdown => {
if (countdown.hasAttribute('data-date')) {
ReactDOM.render(
<Countdown
initialDate={countdown.getAttribute('data-date')}
introText={countdown.getAttribute('data-introText')}
displayDays={!!countdown.getAttribute('data-displayDays')}
displayHours={!!countdown.getAttribute('data-displayHours')}
displayMinutes={!!countdown.getAttribute('data-displayMinutes')}
displaySeconds={!!countdown.getAttribute('data-displaySeconds')}
/>,
countdown
);
}
});
});
.Countdown {
text-align: center;
&--separated {
.Countdown-item:not(:first-child) {
border-left: 1px solid get-color(neutral, 400);
}
}
&--large {
.Countdown-itemDuration {
@include font-size-head;
}
.Countdown-itemUnit {
@include font-size-base;
}
}
&-items {
display: flex;
justify-content: space-around;
align-items: center;
}
&-item {
display: block;
width: 100%;
padding: 0 .5rem;
}
&-itemDuration {
@include font-size-large;
color: theme-color("primary", "dark");
}
&-itemUnit {
@include spaced-out;
}
}
There are no notes for this item.