Skip to content

Loyalty Program

Styles for a loyalty program used in loyalty_program module.

Structurally .loyalty-program element contains two elements:

  • .loyalty-program__points-required
  • .loyalty-program__points-earned
  • .loyalty-program__info
  • .loyalty-program__points
  • .loyalty-program__modal-opener

LESS

You can modify any loyalty program less variable in your User Less section to change loyalty program styles.

Loyalty program variables

Variables used to style a loyalty program.

@loyaltyProgramPaddingVertical: @globalSpacing * 0.75;
@loyaltyProgramPaddingHorizontal: 0;

@loyaltyProgramBorderWidth: 1px;
@loyaltyProgramBorderStyle: solid;
@loyaltyProgramBorderColor: @neutralColors100;

@loyaltyProgramFontSize: @fontSizeInPxS;
@loyaltyProgramLineHeight: @lineHeightInPxS;

@loyaltyProgramPointsFontWeight: @fontWeightSemibold;

If you want to change loyalty program styles, you can just change the variables. To change default font-size of the loyalty program just modify @loyaltyProgramFontSize variable.

@loyaltyProgramFontSize: 20;

Loyalty program styles

Here are standard loyalty program styles.

.loyalty-program {
    .font-size(@loyaltyProgramFontSize);
    .line-height(@loyaltyProgramLineHeight);
    padding: @loyaltyProgramPaddingVertical @loyaltyProgramPaddingHorizontal;
    border-top: @loyaltyProgramBorderWidth @loyaltyProgramBorderStyle @loyaltyProgramBorderColor;
    border-bottom: @loyaltyProgramBorderWidth @loyaltyProgramBorderStyle @loyaltyProgramBorderColor; 

    &__points{
        font-weight: @loyaltyProgramPointsFontWeight;
    }
}

Modules reference