Less mixins

Contents

1. Invert button state
2. Page container
3. Product listing

Invert button state

This mixin allows one to change how a button looks and to swap the default and hovered states.

You can see how it looks like in the ArgentoPure2 theme. Take a look at the Add To Cart button on the product page.

Usage example:

.block-minicart {
    .actions {
        .action {
            &.primary {
                .argento-button-primary-invert-state();
            }
        }
    }
}

Page container

This mixin applies centering, max-width and spacing styles to a block.

Usage example:

.jumbotron {
    .argento-page-container(~"> .container");
}

Product listing

Example:

.page-products .products-grid .product-item,
.block.widget .products-grid .product-item {
    .argento-listing-squama();
}

See more examples about squama-listing in a separate article.