Variable Name

Description

Example Value

--biscuits-image-radius

Border radius of the grid item image (normally a ratio to card radius)
​
Use 100% for circle crop

3px / 100%

pixel/percentage

--biscuits-soldout-display

Show/hide the sold out grid items

flex / none
​display

--biscuits-soldout-order

Position sold out grid items in their regular order: 0
or at the end of the list

order: 2

0/2
​number

--biscuits-divider-width

Thickness of divider lines in UI

1px
​pixel

--biscuits-step-number-display

Show/hide the step number

flex / none

--biscuits-quantity-input-height

Height of the quantity selector input

45px

pixel

--biscuits-max-width

The widest the biscuits form can display

1600px

pixel

--biscuits-slider-button-height

Height of the slider arrow buttons

40px
​pixel

--biscuits-item-image-aspect

Aspect ratio, force the grid item image to a certain height
i.e 1 would make it square

1

decimal

--biscuits-image-fit

Object fit setting for grid item images

cover / contain
​object-fit

--biscuits-box-shadow

To remove box-shadow set to none

rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
​box-shadow

--biscuits-padding-shadow

Padding added to grid items with a box shadow to prevent shadow cutting off

9px
​pixels/percentage

--biscuits-unselected-pointer

Pointer type for greyed out grid items

none

pointer-events

--biscuits-unselected-opacity

Opacity of items when they are greyed out from selection

0.5

decimal

--biscuits-color-error-text

Error text color

color

--biscuits-color-error-background

Error background color

​color

--biscuits-box-shadow-error

To remove box-shadow set to none

rgba(99, 99, 99, 0.05) 0px 1px 8px 0px;

box-shadow

--biscuits-color-warning-background

Warning background color

color

--biscuits-color-warning-text

Warning text color

color