Volume tiers styling

This page is for theme developers. It lists the classes, states and CSS custom properties of <andor-tiers class="andor-tiers">: the volume table, and the volume picker in each layout.

The widget comes from the AndOr Volume tiers block and the pasted <andor-tiers> tag. It uses AndOr’s widget styles.

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. For every layout the block offers, see Layouts.

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.

Discount color is written inline on the host as --andor-tiers-accent, but only when the merchant changed it from #c0392b. Left on the default, the inline value is var(--andor-color-accent), so a :root rule or the brand color reaches it.

Caution Change a custom property, not a part’s own padding, height or font-size. The picker prints a skeleton at its final size, and its List, Mini buttons and Boxes height is computed from the custom properties. Changing the part directly makes the page jump.

The host

States and data attributes

The host is a size container named andor-tiers, so you can write @container andor-tiers (...) rules.

The table

Parts

States and data attributes

Custom properties

The picker: Cards layout

Parts

States and data attributes

Custom properties

The picker: List, Mini buttons and Boxes

These layouts draw real <input type="radio"> options in a fieldset.

Parts

States and data attributes

Modifiers on .andor-tiers__option: --selected (the checked option), --popular (the option with the tag) and --base (the “1 item” row). Each option also has data-andor-quantity, the quantity it sets.

Custom properties

Boxes use 0.75em block padding, 0.5em side padding and a 0.5em gap by default.

Examples

Dawn, for the List layout. Dawn’s colors are RGB numbers, so wrap them in rgb() or rgba():

andor-tiers[data-layout="list"] {
  --andor-tiers-option-border-color: rgba(var(--color-foreground), 0.15);
  --andor-tiers-selected-color: rgb(var(--color-foreground));
  --andor-tiers-option-radius: 4px;
  --andor-tiers-pill-background: #e3f1df;
  --andor-tiers-pill-color: #1f5f3a;
  --andor-tiers-tag-background: rgb(var(--color-foreground));
  --andor-tiers-tag-color: rgb(var(--color-background));
}

Horizon, for the Cards layout and the table:

andor-tiers {
  --andor-tiers-border-color: var(--color-border);
  --andor-tiers-current-edge-color: var(--color-foreground);
  --andor-tiers-card-border-color: var(--color-border);
  --andor-tiers-card-radius: var(--style-border-radius-inputs, 8px);
  --andor-tiers-card-selected-color: var(--color-foreground);
}

Bigger mini buttons, on any theme:

andor-tiers[data-layout="mini"] {
  --andor-tiers-option-padding-block: 0.9em;
  --andor-tiers-title-size: 1.1em;
  --andor-tiers-mini-min-width: 9em;
  --andor-tiers-selected-background: rgba(0, 0, 0, 0.04);
}