CSS Classes & State Attributes

CSS Classes

These classes are applied by the enhancers. Use them in CSS to style state changes.

Class	Applied to	When
`next-in-cart`	Toggle button or container	The package is in the cart
`next-active`	Toggle button	Toggle is on
`next-disabled`	Button	Button is disabled (e.g. during a cart write)

Class	Applied to	When
`next-selected`	Selector card	Card is currently selected
`next-in-cart`	Selector card	All card items are in the cart at the required quantities

Class	Applied to	When
`next-cart-empty`	`[data-next-cart-summary]`	Cart has no items
`next-cart-has-items`	`[data-next-cart-summary]`	Cart has one or more items
`next-has-discounts`	`[data-next-cart-summary]`	Discounts > 0
`next-no-discounts`	`[data-next-cart-summary]`	Discounts = 0
`next-has-shipping`	`[data-next-cart-summary]`	Shipping cost > 0
`next-free-shipping`	`[data-next-cart-summary]`	Shipping cost = 0
`next-has-shipping-discount`	`[data-next-cart-summary]`	A shipping discount is applied
`next-no-shipping-discount`	`[data-next-cart-summary]`	No shipping discount
`next-calculating`	`[data-next-cart-summary]`	Cart totals are being recalculated
`next-not-calculating`	`[data-next-cart-summary]`	Cart totals are up to date

Class	Applied to	When
`next-summary-empty`	`[data-summary-offer-discounts]`, `[data-summary-voucher-discounts]`, `[data-summary-lines]`, `[data-line-discounts]`	List has no items
`next-summary-has-items`	Same containers	List has one or more items

Hide a discount row when no discounts are applied:

.next-no-discounts .discount-row { display: none }

Hide a shipping row when shipping is free:

.next-free-shipping .shipping-row { display: none }

Hide a per-line discount list when empty:

[data-line-discounts].next-summary-empty { display: none }

Style the selected card:

.next-selected {
  border: 2px solid blue;
  background: #f0f0ff;
}

Style an active toggle button:

button.next-active {
  background: green;
  color: white;
}