Store Disabled¶

Styles for a disabled store announcement used in store_disabled module.

Structurally .store-disabled contains following elements:

.store-disabled__announcement

Example¶

Here is an example of store disabled element usage from the store_disabled module.

HTML

    <div class="store-disabled">
        <p class="store-disabled__announcement">
            Example anouncement
        </p>
    </div>

Store Disabled tags¶

The .store-disabled classes were designed to be used with block elements like <div>. However, you can use them with any other element and customize it to your own needs.

LESS¶

You can modify any store disabled less variable in your User Less section to change store disabled styles.

Store Disabled variables¶

Variables used to style a store disabled element.

@storeDisabledTextAlign: center;
@storeDisabledAnnouncementColor: @globalFontColorSecondary;
@storeDisabledAnnouncementFontSize: @fontSizeInPxS;
@storeDisabledAnnouncementLineHeight: @lineHeightInPxS;

If you want to change store disabled styles, you can just change the variables. To change a default color of the store disabled announcement just modify @storeDisabledAnnouncementColor variable.

@storeDisabledAnnouncementColor: red;

Store Disabled styles¶

Here are standard store disabled styles.

.store-disabled {
    text-align: @storeDisabledTextAlign;

    &__announcement {
        display: block;
        color: @storeDisabledAnnouncementColor;
        .font-size(@storeDisabledAnnouncementFontSize);
        .line-height(@storeDisabledAnnouncementLineHeight)
    }
}

Modules reference¶

store_disabled