![]() Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/old/app/design/frontend/Cnc/default/web/scss/modules/catalog/ |
// ============================================== // PRODUCTS LISTING // ============================================== // Configuration $listing-list-item-padding: 10px; $listing-list-item-gutter: 20px; // Space with toolbar .products-grid, .products-list { margin-bottom: 30px; @include breakpoint(md) { margin-bottom: 45px; } } .page-products { // Main title .page-title { @extend .title-1; } } // // Category Header // _____________________________________________ .catalog-category-view { &:not(.page-with-filter) { .page-title-wrapper { @extend .visually-hidden; } .page-main { max-width: 1180px; @include breakpoint(only-md) { margin-top: 0; } } } .page-title-wrapper, .category-view { text-align: center; } .category-view { display: flex; flex-direction: column; margin: 0 auto 20px; max-width: 1180px; @include breakpoint(md) { margin: 0 auto 30px; } .category-banner { order: -1; max-width: 1150px; margin: 0 auto 30px; @include breakpoint(only-md) { margin: 0 -20px 20px; } } .category-logo { width: 150px; margin: 0 auto; @include breakpoint(md) { width: 170px; } } .see-more-wrapper { margin-top: 2rem; margin-bottom: 3rem; @include breakpoint(md) { margin-bottom: 4rem; } } .category-description__content { & > * { line-height: 1.5; @include breakpoint(only-md) { font-size: 1.4rem; } } } } } // // List view // _____________________________________________ .products-list { li.product-item { & + li { margin-top: $listing-list-item-gutter; } } .product-item-info { flex-wrap: wrap; @include breakpoint(md) { flex-wrap: nowrap; .actions-primary .action { width: auto; &:before { @include breakpoint(md) { font-size: 1.6rem; } } } } } .product-item-photo { margin-bottom: 0; padding: $listing-list-item-padding; max-width: 100px; // Egal picture max width + padding @include breakpoint(md) { max-width: 140px; } img { max-width: 800px; // IE Fix @include breakpoint(md) { max-width: 120px; } } @include breakpoint(md) { margin-right: 30px; } } .details__name { display: flex; flex-direction: column; justify-content: center; flex-grow: 1; flex-basis: 0; padding: 15px 0; .product-item-name { font-weight: $fw-roboto-medium; } } .details__status-price { width: 100%; margin-top: 10px; @include breakpoint(md) { max-width: 230px; margin-top: 0; } @include breakpoint(lg) { max-width: 320px; width: auto; } } .status-titles-grid { margin-bottom: 20px; padding: 0 5px; @include breakpoint(md) { max-width: 160px; align-self: flex-end; margin-top: 20px; margin-bottom: 25px; padding-left: 0; padding-right: 15px; } @include breakpoint(lg) { max-width: none; width: 100%; } .status-title { width: 50%; padding: 0 10px; @include breakpoint(only-md) { max-width: 130px; font-size: 1.08rem; } @include breakpoint(md) { width: 100%; margin-left: auto; } @include breakpoint(lg) { width: 50%; } } } // Price & action .price-actions { @include breakpoint(md) { justify-content: flex-end; } // Positioned above the border margin-right: -1px; margin-bottom: -1px; & > .price-box { align-items: flex-start; justify-content: flex-end; padding: 0 10px; margin-bottom: 5px; text-align: right; @include breakpoint(md) { height: auto; padding: 0 10px 0 0; } } .price-from, .price-to { margin: 0; } } .discount-percent { top: -1px; left: -1px; } } .category-description-bottom { font-size: 1.2rem; line-height: 1.9; text-align: center; margin-bottom: 25px; @extend .inner-container; } // Ajaxscroll button .block-ajaxscroll { text-align: center; .ajaxscroll-button { @extend .btn--border; } @include breakpoint(only-md) { margin-bottom: 30px; } }