Skip to content

Availability Notifier Modal

Styles for a availability notifier modal used in availability-notifier-subscribe-modal and availability-notifier-unsubscribe-modal.

Structurally .availability-notifier-modal element contains following elements:

  • .availability-notifier-modal_product-name
  • .availability-notifier-modal__text
  • .availability-notifier-modal__footer

LESS

You can modify any availability notifier modal less variable in your User Less section to change availability notifier modal styles.

Availability Notifier Modal variables

Variables used to style a availability notifier modal.

@availabilityNotifierModalProductNameFontSize: @fontSizeInPxS;
@availabilityNotifierModalProductNameColor: @globalFontColorSecondary;
@availabilityNotifierModalFooterGap: @globalSpacing;
@availabilityNotifierModalTextFontSize: @fontSizeInPxS;

If you want to change availability notifier modal styles, you can just change the variables. To change default color of the product name element of the availability notifier modal just modify @availabilityNotifierModalProductNameColor variable.

@availabilityNotifierModalProductNameColor: red;

Availability Notifier Modal styles

Standard availability notifier modal styles.

.availability-notifier-modal {

    &__product-name {
        .pixel-to-rem(font-size, @availabilityNotifierModalProductNameFontSize);

        color: @availabilityNotifierModalProductNameColor;
    }

    &__text{
        .pixel-to-rem(font-size, @availabilityNotifierModalTextFontSize);
    }

    &__footer{
        display: flex;
        gap: @availabilityNotifierModalFooterGap;

        @media screen and (max-width: @breakPointXs) {
            flex-direction: column;
            width: 100%;
        }
    }
}