Countdown styling

On this page

What each token changes
How precedence works
Parts
States and data attributes
Custom properties
Examples

This page is for theme developers. It lists every class, state and CSS custom property of the countdown, <andor-countdown class="andor-countdown">.

The widget comes from the AndOr Countdown block. It uses AndOr’s widget styles. The block prints an empty skeleton first, and a script fills it in. The finished markup has the classes below, so read it after DOMContentLoaded.

What each token changes

The numbers on the diagram match the table. The diagram is a simplified drawing. The full list of tokens is below.

$32.00

Sale ends in 2d 04h 12m

No.	Token	What it changes
1	`--andor-countdown-color`	the text
2	`--andor-countdown-font-size`	text size
3	`--andor-countdown-heading-font-weight`	the wording’s weight

How precedence works

Put your CSS in your theme’s stylesheet or in the app embed’s Custom CSS box. To see which value wins, read Which value wins.

What this means for the countdown:

The text color is inline. The block writes --andor-countdown-color into the host’s style on every render. A stylesheet rule on it needs !important.
Text size and spacing go into a block-scoped rule, and only when changed from the default.

Parts

Class	What it is
`.andor-countdown`	The whole timer (the host)
`.andor-countdown__heading`	The lead-in, like “Sale ends in”. Hidden in the last two minutes
`.andor-countdown__time`	The ticking time, like “2h 30m”
`.andor-vh`	The visually hidden “Sale countdown” label

The time uses tabular numbers, so its width holds while it ticks.

States and data attributes

Attribute	On	Value and meaning
`data-andor-state`	host	`active` or `hidden`. A styling hook
`hidden`	host	The sale ended, or no countdown for this variant
`data-andor-skeleton`	host	Not filled in yet. Internal, do not style
`data-andor-widget`	host	`countdown` (only on the visible timer)
`data-andor-widget-id`	host	The block id
`data-andor-discount-id`	host	The discount counted down
`data-andor-product-id`	host	The product id, when known
`data-andor-starts`	host	Start time, ISO 8601
`data-andor-ends`	host	End time, ISO 8601
`data-andor-units`	host	The translated units, like `d\|h\|m\|s\|Sale ends soon`
`data-andor-candidate`	host	`countdown`, on every pre-drawn variant timer
`data-andor-countdown-time`	time span	The only node the ticker rewrites
`data-andor-head`	heading span	The heading hidden in the last two minutes

Caution A hidden countdown has both hidden and an inline display: none. Never force it visible. That would show a sale that has ended.

Custom properties

Property	Default	What it does
`--andor-countdown-color`	Block setting, inline	Text color
`--andor-countdown-font-size`	`0.95em`	Size
`--andor-countdown-font-weight`	`600`	Weight of the time
`--andor-countdown-heading-font-weight`	`inherit`	Weight of the lead-in
`--andor-countdown-space-block-start`	`0`	Margin above
`--andor-countdown-space-block-end`	`0`	Margin below

Examples

Dawn. Its colors are RGB numbers, so wrap them in rgb():

andor-countdown {
  --andor-countdown-color: rgb(var(--color-foreground)) !important;
  --andor-countdown-font-size: 1.4rem;
  --andor-countdown-heading-font-weight: 400;
}

CSS

Horizon:

andor-countdown {
  --andor-countdown-color: var(--color-foreground) !important;
  --andor-countdown-heading-font-weight: var(--font-body--weight, 400);
}

CSS

Make only the time bold and keep the lead-in light:

andor-countdown {
  --andor-countdown-font-weight: 700;
  --andor-countdown-heading-font-weight: 400;
}

CSS