diff --git a/assets/css/essential-addons-elementor.css b/assets/css/essential-addons-elementor.css old mode 100644 new mode 100755 index 83270e970..6e7f06421 --- a/assets/css/essential-addons-elementor.css +++ b/assets/css/essential-addons-elementor.css @@ -1340,6 +1340,48 @@ span.eael-testimonial-quote { /*--------------------------*/ /* 09. Product Styles /*--------------------------*/ +.eael-product-grid .woocommerce ul.products, +.eael-post-grid .woocommerce ul.products { + display: grid; + grid-gap: 25px; + margin: 0 !important; + padding: 0 !important; +} +.eael-product-grid .woocommerce ul.products:before, .eael-product-grid .woocommerce ul.products:after, +.eael-post-grid .woocommerce ul.products:before, +.eael-post-grid .woocommerce ul.products:after { + display: none; +} +.eael-product-grid .woocommerce ul.products .product, +.eael-post-grid .woocommerce ul.products .product { + width: 100%; + margin: 0; + padding: 0; +} +.eael-product-grid .woocommerce ul.products.eael-product-columns-1, +.eael-post-grid .woocommerce ul.products.eael-product-columns-1 { + grid-template-columns: 100%; +} +.eael-product-grid .woocommerce ul.products.eael-product-columns-2, +.eael-post-grid .woocommerce ul.products.eael-product-columns-2 { + grid-template-columns: repeat(2, 1fr); +} +.eael-product-grid .woocommerce ul.products.eael-product-columns-3, +.eael-post-grid .woocommerce ul.products.eael-product-columns-3 { + grid-template-columns: repeat(3, 1fr); +} +.eael-product-grid .woocommerce ul.products.eael-product-columns-4, +.eael-post-grid .woocommerce ul.products.eael-product-columns-4 { + grid-template-columns: repeat(4, 1fr); +} +.eael-product-grid .woocommerce ul.products.eael-product-columns-5, +.eael-post-grid .woocommerce ul.products.eael-product-columns-5 { + grid-template-columns: repeat(5, 1fr); +} +.eael-product-grid .woocommerce ul.products.eael-product-columns-6, +.eael-post-grid .woocommerce ul.products.eael-product-columns-6 { + grid-template-columns: repeat(6, 1fr); +} .eael-product-grid.eael-product-simple .woocommerce ul.products li.product, .eael-product-grid.eael-product-reveal .woocommerce ul.products li.product, .eael-post-grid.eael-product-simple .woocommerce ul.products li.product, .eael-post-grid.eael-product-reveal .woocommerce ul.products li.product { @@ -1444,17 +1486,16 @@ span.eael-testimonial-quote { .eael-product-grid.eael-product-simple .woocommerce ul.products li.product .button.add_to_cart_button, .eael-product-grid.eael-product-reveal .woocommerce ul.products li.product .button.add_to_cart_button, .eael-post-grid.eael-product-simple .woocommerce ul.products li.product .button.add_to_cart_button, .eael-post-grid.eael-product-reveal .woocommerce ul.products li.product .button.add_to_cart_button { - display: inline-block; - height: 40px; + display: block; font-size: 14px; font-weight: 400; - line-height: 40px; + line-height: 38px; text-align: center; text-transform: uppercase; color: #fff; background-color: #333; - padding: 0 30px; - margin: 15px 0; + padding: 0; + margin: 15px; -webkit-border-radius: 0; border-radius: 0; } @@ -1598,7 +1639,7 @@ span.eael-testimonial-quote { } .eael-product-grid.eael-product-overlay .woocommerce ul.products li.product .overlay .add_to_cart_button:after, .eael-post-grid.eael-product-overlay .woocommerce ul.products li.product .overlay .add_to_cart_button:after { - content: '\f217'; + content: "\f217"; font: normal normal normal 14px/1 FontAwesome; font-size: 14px; line-height: 38px; @@ -1614,7 +1655,7 @@ span.eael-testimonial-quote { } .eael-product-grid.eael-product-overlay .woocommerce ul.products li.product .overlay .add_to_cart_button.loading:after, .eael-post-grid.eael-product-overlay .woocommerce ul.products li.product .overlay .add_to_cart_button.loading:after { - content: '\f110'; + content: "\f110"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 14px; @@ -1634,7 +1675,7 @@ span.eael-testimonial-quote { } .eael-product-grid.eael-product-overlay .woocommerce ul.products li.product .overlay .added_to_cart:after, .eael-post-grid.eael-product-overlay .woocommerce ul.products li.product .overlay .added_to_cart:after { - content: '\f06e'; + content: "\f06e"; font: normal normal normal 14px/1 FontAwesome; font-size: 14px; line-height: 38px; @@ -7444,6 +7485,6 @@ a.eael-gallery-load-more, a.eael-gallery-load-more:hover { transform: none; } } -.elementor-section .elementor-container { +.elementor-section.eael-particles-section .elementor-container { z-index: 99; } diff --git a/assets/sass/_particles.scss b/assets/sass/_particles.scss old mode 100644 new mode 100755 index b032486a7..c3de9dcc1 --- a/assets/sass/_particles.scss +++ b/assets/sass/_particles.scss @@ -1,3 +1,3 @@ -.elementor-section .elementor-container { +.elementor-section.eael-particles-section .elementor-container { z-index: 99; -} \ No newline at end of file +} diff --git a/assets/sass/_woo-products.scss b/assets/sass/_woo-products.scss index 938c13307..46ded41a5 100755 --- a/assets/sass/_woo-products.scss +++ b/assets/sass/_woo-products.scss @@ -1,370 +1,409 @@ /*--------------------------*/ /* 09. Product Styles /*--------------------------*/ + .eael-product-grid, .eael-post-grid { - // simple & reveal style - &.eael-product-simple, - &.eael-product-reveal { - .woocommerce { - ul.products { - li.product { - position: relative; - float: left; - overflow: hidden; - text-align: center; - padding: 0; - border-radius: 0; - background-color: #fff; - box-shadow: none; - - a { - text-decoration: none; - - &:hover { - outline: none; - box-shadow: none; - } - } - - img { - width: 100%; - height: auto; - backface-visibility: hidden; - } - - // product title - .woocommerce-loop-product__title { - font-size: 16px; - font-weight: 700; - line-height: 1; - color: #333; - margin: 25px 0 12px; - padding: 0; - } - - // onsale - .onsale { - display: block; - line-height: 170px; - font-size: 13px; - text-align: center; - letter-spacing: 0; - text-shadow: 0 1px 1px rgba(0,0,0,.6); - text-transform: uppercase; - color: #fff; - background-color: #ff2a13; - border-radius: 0; - border: none; - box-shadow: none; - position: absolute; - height: 100px; - width: 200px; - z-index: 1; - left: -100px; - top: -50px; - right: auto; - margin: 0; - padding: 0; - transform: rotate(-45deg); - } - - .price { - font-size: 14px; - margin-bottom: 0; - - del { - opacity: 0.5; - display: inline-block; - } - - ins { - font-weight: 400; - background-color: transparent; - color: #ff2a13; - } - } - - - // star rating - .star-rating { - display: block; - float: none; - font-size: 14px; - margin: 10px auto; - } - - // add to cart button - .button.add_to_cart_button { - display: inline-block; - height: 40px; - font-size: 14px; - font-weight: 400; - line-height: 40px; - text-align: center; - text-transform: uppercase; - color: #fff; - background-color: #333; - padding: 0 30px; - margin: 15px 0; - border-radius: 0; - - &:focus { - outline: none; - } - } - - a.added_to_cart { - display: block; - margin: 0 0 15px 0; - padding: 0; - font-size: 14px; - line-height: 1; - text-transform: capitalize; - color: #333; - background-color: transparent; - } - } - } - } - } - // simple style - &.eael-product-simple { - .woocommerce { - ul.products { - li.product { - border: 1px solid #eee; - } + .woocommerce { + ul.products { + display: grid; + grid-gap: 25px; + margin: 0 !important; + padding: 0 !important; + + &:before, + &:after { + display: none; } - } - } - // reveal style - &.eael-product-reveal { - .woocommerce { - ul.products { - li.product { - border: 1px solid transparent; - - .button.add_to_cart_button, - a.added_to_cart { - visibility: hidden; - transition: none; - } - - &:hover { - border: 1px solid #eee; - - .button.add_to_cart_button, - a.added_to_cart { - visibility: visible; - } - } - } + .product { + width: 100%; + margin: 0; + padding: 0; } - } - } - // overlay style - &.eael-product-overlay { - .woocommerce { - ul.products { - li.product { - position: relative; - float: left; - overflow: hidden; - text-align: center; - padding: 0 0 15px 0; - border-radius: 0; - background-color: #fff; - box-shadow: none; - - a { - text-decoration: none; - - &:hover { - outline: none; - box-shadow: none; - } - } - - img { - width: 100%; - height: auto; - margin: 0; - backface-visibility: hidden; - } - - .overlay { - position: relative; - overflow: hidden; - line-height: 0; - - .button-wrap { - position: absolute; - top: 50%; - left: 0; - right: 0; - text-align: center; - transform: translateY(-50%); - } - - .product-link, - .add_to_cart_button, - .added_to_cart { - display: inline-block; - font-size: 14px; - line-height: 38px; - text-align: center; - color: #fff; - background-color: #333; - width: 38px; - height: 38px; - border-style: none; - border-radius: 50%; - vertical-align: middle; - padding: 0; - margin: 0 5px; - transform: translateY(20px); - opacity: 0; - transition: transform 200ms, opacity 300ms; - - &:focus { - outline: none; - } - } - - .add_to_cart_button { - font-size: 0; - &:before { - display: none; - } - - &:after { - content: '\f217'; - font: normal normal normal 14px/1 FontAwesome; - font-size: 14px; - line-height: 38px; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - vertical-align: middle; - margin: 0; - padding: 0; - } - - &.loading { - &:before { - display: none; - } - &:after { - content: '\f110'; - display: inline-block; - font: normal normal normal 14px/1 FontAwesome; - font-size: 14px; - line-height: 38px; - color: #fff; - height: auto; - width: auto; - position: relative; - top: 0; - left: 0; - margin: 0; - padding: 0; - } - } - } - - .added_to_cart { - font-size: 0; - - &:after { - content: '\f06e'; - font: normal normal normal 14px/1 FontAwesome; - font-size: 14px; - line-height: 38px; - color: #fff; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - vertical-align: middle; - margin: 0; - padding: 0; - } - } - } - - // product title - .woocommerce-loop-product__title { - font-size: 16px; - font-weight: 700; - line-height: 1; - color: #333; - margin: 25px 0 12px; - padding: 0; - } - - // onsale - .onsale { - display: block; - line-height: 170px; - font-size: 13px; - text-align: center; - letter-spacing: 0; - text-shadow: 0 1px 1px rgba(0,0,0,.6); - text-transform: uppercase; - color: #fff; - background-color: #ff2a13; - border-radius: 0; - border: none; - box-shadow: none; - position: absolute; - height: 100px; - width: 200px; - z-index: 1; - left: -100px; - top: -50px; - right: auto; - margin: 0; - padding: 0; - transform: rotate(-45deg); - } - - .price { - font-size: 14px; - margin-bottom: 0; - - del { - opacity: 0.5; - display: inline-block; - } - - ins { - font-weight: 400; - background-color: transparent; - color: #ff2a13; - } - } - - - // star rating - .star-rating { - display: block; - float: none; - font-size: 14px; - margin: 10px auto; - } - - &:hover { - .overlay { - a, - .add_to_cart_button { - opacity: 1; - transform: translateY(0); - } - } - } - } + &.eael-product-columns-1 { + grid-template-columns: 100%; + } + &.eael-product-columns-2 { + grid-template-columns: repeat(2, 1fr); + } + &.eael-product-columns-3 { + grid-template-columns: repeat(3, 1fr); + } + &.eael-product-columns-4 { + grid-template-columns: repeat(4, 1fr); + } + &.eael-product-columns-5 { + grid-template-columns: repeat(5, 1fr); + } + &.eael-product-columns-6 { + grid-template-columns: repeat(6, 1fr); } } } -} \ No newline at end of file + + // simple & reveal style + &.eael-product-simple, + &.eael-product-reveal { + .woocommerce { + ul.products { + li.product { + position: relative; + float: left; + overflow: hidden; + text-align: center; + padding: 0; + border-radius: 0; + background-color: #fff; + box-shadow: none; + + a { + text-decoration: none; + + &:hover { + outline: none; + box-shadow: none; + } + } + + img { + width: 100%; + height: auto; + backface-visibility: hidden; + } + + // product title + .woocommerce-loop-product__title { + font-size: 16px; + font-weight: 700; + line-height: 1; + color: #333; + margin: 25px 0 12px; + padding: 0; + } + + // onsale + .onsale { + display: block; + line-height: 170px; + font-size: 13px; + text-align: center; + letter-spacing: 0; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); + text-transform: uppercase; + color: #fff; + background-color: #ff2a13; + border-radius: 0; + border: none; + box-shadow: none; + position: absolute; + height: 100px; + width: 200px; + z-index: 1; + left: -100px; + top: -50px; + right: auto; + margin: 0; + padding: 0; + transform: rotate(-45deg); + } + + .price { + font-size: 14px; + margin-bottom: 0; + + del { + opacity: 0.5; + display: inline-block; + } + + ins { + font-weight: 400; + background-color: transparent; + color: #ff2a13; + } + } + + // star rating + .star-rating { + display: block; + float: none; + font-size: 14px; + margin: 10px auto; + } + + // add to cart button + .button.add_to_cart_button { + display: block; + font-size: 14px; + font-weight: 400; + line-height: 38px; + text-align: center; + text-transform: uppercase; + color: #fff; + background-color: #333; + padding: 0; + margin: 15px; + border-radius: 0; + + &:focus { + outline: none; + } + } + + a.added_to_cart { + display: block; + margin: 0 0 15px 0; + padding: 0; + font-size: 14px; + line-height: 1; + text-transform: capitalize; + color: #333; + background-color: transparent; + } + } + } + } + } + + // simple style + &.eael-product-simple { + .woocommerce { + ul.products { + li.product { + border: 1px solid #eee; + } + } + } + } + + // reveal style + &.eael-product-reveal { + .woocommerce { + ul.products { + li.product { + border: 1px solid transparent; + + .button.add_to_cart_button, + a.added_to_cart { + visibility: hidden; + transition: none; + } + + &:hover { + border: 1px solid #eee; + + .button.add_to_cart_button, + a.added_to_cart { + visibility: visible; + } + } + } + } + } + } + + // overlay style + &.eael-product-overlay { + .woocommerce { + ul.products { + li.product { + position: relative; + float: left; + overflow: hidden; + text-align: center; + padding: 0 0 15px 0; + border-radius: 0; + background-color: #fff; + box-shadow: none; + + a { + text-decoration: none; + + &:hover { + outline: none; + box-shadow: none; + } + } + + img { + width: 100%; + height: auto; + margin: 0; + backface-visibility: hidden; + } + + .overlay { + position: relative; + overflow: hidden; + line-height: 0; + + .button-wrap { + position: absolute; + top: 50%; + left: 0; + right: 0; + text-align: center; + transform: translateY(-50%); + } + + .product-link, + .add_to_cart_button, + .added_to_cart { + display: inline-block; + font-size: 14px; + line-height: 38px; + text-align: center; + color: #fff; + background-color: #333; + width: 38px; + height: 38px; + border-style: none; + border-radius: 50%; + vertical-align: middle; + padding: 0; + margin: 0 5px; + transform: translateY(20px); + opacity: 0; + transition: transform 200ms, opacity 300ms; + + &:focus { + outline: none; + } + } + + .add_to_cart_button { + font-size: 0; + &:before { + display: none; + } + + &:after { + content: "\f217"; + font: normal normal normal 14px/1 FontAwesome; + font-size: 14px; + line-height: 38px; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + vertical-align: middle; + margin: 0; + padding: 0; + } + + &.loading { + &:before { + display: none; + } + &:after { + content: "\f110"; + display: inline-block; + font: normal normal normal 14px/1 + FontAwesome; + font-size: 14px; + line-height: 38px; + color: #fff; + height: auto; + width: auto; + position: relative; + top: 0; + left: 0; + margin: 0; + padding: 0; + } + } + } + + .added_to_cart { + font-size: 0; + + &:after { + content: "\f06e"; + font: normal normal normal 14px/1 FontAwesome; + font-size: 14px; + line-height: 38px; + color: #fff; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + vertical-align: middle; + margin: 0; + padding: 0; + } + } + } + + // product title + .woocommerce-loop-product__title { + font-size: 16px; + font-weight: 700; + line-height: 1; + color: #333; + margin: 25px 0 12px; + padding: 0; + } + + // onsale + .onsale { + display: block; + line-height: 170px; + font-size: 13px; + text-align: center; + letter-spacing: 0; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); + text-transform: uppercase; + color: #fff; + background-color: #ff2a13; + border-radius: 0; + border: none; + box-shadow: none; + position: absolute; + height: 100px; + width: 200px; + z-index: 1; + left: -100px; + top: -50px; + right: auto; + margin: 0; + padding: 0; + transform: rotate(-45deg); + } + + .price { + font-size: 14px; + margin-bottom: 0; + + del { + opacity: 0.5; + display: inline-block; + } + + ins { + font-weight: 400; + background-color: transparent; + color: #ff2a13; + } + } + + // star rating + .star-rating { + display: block; + float: none; + font-size: 14px; + margin: 10px auto; + } + + &:hover { + .overlay { + a, + .add_to_cart_button { + opacity: 1; + transform: translateY(0); + } + } + } + } + } + } + } +} diff --git a/elements/product-grid/product-grid.php b/elements/product-grid/product-grid.php index e3440c367..b680644bb 100755 --- a/elements/product-grid/product-grid.php +++ b/elements/product-grid/product-grid.php @@ -494,7 +494,7 @@ protected function render() { echo '