Tricky CSS overwrites

The checkout allows customization using config.styles, which are style variables used throughout. For greater control, tenants can use overwrites.css as the final styling layer to override styles.

However, excessive use of overwrites.css can lead to issues. JavaScript injects dynamic CSS values for transitions and animations, and modifying properties like position, top, margin, padding, width, height, and border can interfere with these values, causing UX problems.

We recommend being cautious with these elements, particularly with:

1. Main containers.
2. Input component.
3. InputWithIconAndButton component.
4. Collapse component.

Main containers

The frontend app has 2 containers (.content-container and .basket-container) that dynamically get position: sticky and top: XX values depending on several factors:

• the viewportHeight
• the content container height
• the basket container height

Here we have multiple scenarios where the content is bigger/smaller than basket and also relative to screen height, where the smaller container gets the sticky position at top: 0

Input component

Our input is the project’s most reused component, and it has a floating-label feature. For this transition to work smoothly, there are several size-rules taken into account:

• position, transform, transition
• height, width, padding, margin, border
• placeholder’s translation length

InputWithIconAndButton component

The InputWithIconAndButton is used in places like gift cards and vouchers fields. And it does not contain just an Input component inside with all the input’s magic, but also a button inside it with the submit logic.
To make everything work, we also have some dynamic padding being applied to the input, relative to the button’s width.

• Do not take the button outside the input
• We do not recommend adding CSS rules that can affect the button’s width like position, width, padding, margin, border.

Collapse component

We are expanding/collapsing the whole basket and itemGroups. To achieve the height-transition smoothly, we dynamically set max-height based on the container's current height.