Skip to content

Instantly share code, notes, and snippets.

@SilencerWeb

SilencerWeb/_products-list.scss

Created July 8, 2019 03:06
Download ZIP

Revisions

  1. SilencerWeb created this gist Jul 8, 2019.
    107 changes: 107 additions & 0 deletions _products-list.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,107 @@
    .products-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: -80px;

    @include sm-down {
    margin-bottom: -40px;
    }

    @include xs-down {
    width: calc(100% - 40px);
    margin-right: auto;
    margin-left: auto;
    }

    &_grid_double {

    .products-list__grid-sizer {
    width: calc(50% - 40px);

    @include md-down {
    width: 100%;
    }

    @include sm-down {
    width: calc(50% - 20px);
    }

    @include xs-down {
    width: 100%;
    }
    }

    .products-list__product-card {
    width: calc(50% - 40px);

    @include md-down {
    width: 100%;
    }

    @include sm-down {
    width: calc(50% - 20px);
    }

    @include xs-down {
    width: 100%;
    }
    }
    }

    &__grid-sizer {
    width: calc(20% - 64px);

    @include xxl-down {
    width: calc(25% - 60px);
    }

    @include lg-down {
    width: calc(33.333% - 53px);
    }

    @include md-down {
    width: calc(50% - 40px);
    }

    @include sm-down {
    width: calc(50% - 20px);
    }

    @include xs-down {
    width: 100%;
    }
    }

    &__product-card {
    width: calc(20% - 64px);
    margin-bottom: 80px;

    @include xxl-down {
    width: calc(25% - 60px);
    }

    @include lg-down {
    width: calc(33.333% - 53px);
    }

    @include md-down {
    width: calc(50% - 40px);
    }

    @include sm-down {
    width: calc(50% - 20px);
    margin-bottom: 40px;
    }

    @include xs-down {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    }

    .product-card__button {
    color: currentColor;
    }
    }
    }