Login Register

Kayzen

Countdown

assets/modules/objects/countdown

Files

  • _countdown.scss
  • countdown.js
  • README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/objects/countdown

Module Overview

  • Name: countdown
  • Modifiers: null
  • Components: null

Examples

<div class="countdown">
    <div class="countdown_days" data-timeUnit="Days">00</div>
    <div class="countdown_hours" data-timeUnit="Hours">00</div>
    <div class="countdown_minutes" data-timeUnit="Minutes">00</div>
    <div class="countdown_seconds" data-timeUnit="Seconds">00</div>
</div>


$(".countdown").countdown({
    date   : '1 February 2016 09:00:00',
    format : 'on'
});

View Demo

Custom Selectors

<div class="countdown">
    <div class="days" data-timeUnit="Days">00</div>
    <div class="hours" data-timeUnit="Hours">00</div>
    <div class="minutes" data-timeUnit="Minutes">00</div>
    <div class="seconds" data-timeUnit="Seconds">00</div>
</div>


$(".countdown").countdown({
    date            : '1 February 2016 09:00:00',
    format          : 'on',
    daysSelector    : '.days',
    hoursSelector   : '.hours',
    minutesSelector : '.minutes',
    secondsSelector : '.seconds'
});

Customizing

The countdown can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name Default Value Description
number-size font-size('size-8') Set whether the billboard should be full-screen without any modifiers.
number-color color('greyscale', 'white') Set whether the billboard should be full-screen without any modifiers.
number-weight lighter Set whether the billboard should be full-screen without any modifiers.
unit-size 0.7rem Set whether the billboard should be full-screen without any modifiers.
unit-color inherit Set whether the billboard should be full-screen without any modifiers.
unit-weight inherit Set whether the billboard should be full-screen without any modifiers.
unit-transform uppercase Set whether the billboard should be full-screen without any modifiers.

To change one of the above values, pass your new value(s) to the countdown() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include countdown((
    'icon-color' : rgba(white, 0.6),
    'title-bg'   : color('brand', 'primary')
));