Download Builder: jqueryui.com or jqueryui.templersmc.net
Slider install files:
Products list
10
Filter
Slider range
PHP
<!-- Cart icon -->
<header>
<div class="wrapper">
<div class="cart_icon_wrap">
<div class="cart_icon">
<?= svg('iconCart2', '') ?>
<span class="cart_qty">10</span>
</div>
</div>
</div>
</header>
<!-- Product list section -->
<section class="products_section">
<div class="wrapper">
<aside>
<div class="filter_item">
<h3 class="filter_heading toggle active">Price</h3>
<div class="filter_list">
<div class="amounts">
<span>from</span>
<label>
<input type="number" id="amountMin" name="priceMin" data-price="1" data-min="1" class="input">
</label>
<span>to</span>
<label>
<input type="number" id="amountMax" name="priceMax" data-price="100" data-max="100" class="input">
</label>
<span> CAD</span>
<span class="ok">OK</span>
</div>
<div id="slider-range"></div>
</div>
</div>
<div class="filter_item">
<h3 class="filter_heading toggle active">Swimming Pool Parts</h3>
<ul class="filter_list">
<li class="active"><a href="#">Pump Baskets</a></li>
<li><a href="#">Skimmer Baskets</a></li>
<li><a href="#">Filter Parts</a></li>
<li><a href="#">Chlorinator Parts</a></li>
<li><a href="#">Pump Parts</a></li>
</ul>
</div>
<div class="filter_item">
<h3 class="filter_heading toggle active">Hot Tub Parts</h3>
<ul class="filter_list">
<li><a href="#">Heaters & Heater Parts</a></li>
<li><a href="#">Cabinetry </a></li>
<li><a href="#">Pumps & Wet Ends</a></li>
<li><a href="#">Massage Jets</a></li>
<li><a href="#">Cover Removers</a></li>
<li><a href="#">Hot Tub Covers</a></li>
</ul>
</div>
<div class="filter_item">
<h3 class="filter_heading toggle active">Type of product</h3>
<ul class="filter_list">
<li>
<input type="checkbox" name="product-type" id="productTypeNew" value="new">
<label for="productTypeNew">New</label>
</li>
<li>
<input type="checkbox" name="product-type" id="productTypePreOrder" value="preorder">
<label for="productTypePreOrder">Preorder</label>
</li>
<li>
<input type="checkbox" name="product-type" id="productTypeSale" value="sale">
<label for="productTypeSale">Sale</label>
</li>
</ul>
</div>
</aside>
<main>
<div class="products_list">
<div class="product_item">
<a href="#" class="img_wrap">
<img src="/img/product1.png" alt="">
</a>
<h3><a href="#">Hayward Aquavac 600 robotic pool cleaner with caddy</a></h3>
<p class="price">$1449.00</p>
<div class="buttons_wrap">
<a href="#" class="button">
<?= svg('icon_search', '') ?>
<span>Details</span>
</a>
<a href="#" class="button" data-modals="modal_cart_add">
<?= svg('iconCart2', '') ?>
<span>Add to cart</span>
</a>
</div>
</div>
<div class="product_item">
<a href="#" class="img_wrap">
<img src="/img/product1.png" alt="">
</a>
<h3><a href="#">Hayward Aquavac 600 robotic pool cleaner with caddy</a></h3>
<p class="price">$1449.00</p>
<div class="buttons_wrap">
<div class="value_buttons_wrap">
<div class="value_button decrease" data-direction="0">-</div>
<label for="qty">
<input type="number" pattern="\d*" class="input qty" id="qty" value="1" onkeydown="return event.keyCode !== 69">
</label>
<div class="value_button increase" data-direction="1">+</div>
</div>
<a href="#" class="button" data-modals="modal_cart_add">
<?= svg('iconCart2', '') ?>
<span>Add to cart</span>
</a>
</div>
</div>
</div>
</main>
</div>
</section>
<div class="filter_btn">
<?= svg('iconSettings', '') ?>
<span>Filter</span>
</div>
<div class="overlay_bg"></div>
<!-- Modal cart add product -->
<div class="modal_cart_add_content">
<div class="desc_wrap">
<div class="img_wrap">
<img src="/img/product1.png" alt="">
</div>
<p>Hayward Aquavac 600 robotic pool cleaner with caddy successfully added to your cart</p>
</div>
<div class="modal_btns tc">
<a class="button || btn_icon || dialog_close" href="#">
<?= svg('iconCart2', '') ?>
<span>Continue Shopping</span>
</a>
<a class="button || btn_icon" href="#">
<?= svg('iconCheckList', '')?>
<span>View Cart</span>
</a>
</div>
</div>CSS
/* input [type=number] */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
/* Firefox */
input[type=number] {-moz-appearance: textfield;}
/* Cart icon */
.cart_icon{position:relative;display:inline-block}
.cart_icon .icon{width:3rem;height:3rem;color:#066978}
.cart_icon .cart_qty{position:absolute;top:-.8rem;right:-1.5rem;font-size:1.4rem;font-weight:500;height:2rem;line-height:1.9rem;-webkit-border-radius:2rem;-moz-border-radius:2rem;border-radius:2rem;text-align:center;white-space:nowrap;padding:0 .6rem;background-color:#09a5be;color:#fff;z-index:3}
/* Product list */
.products_section aside{width:22%;float:left;padding:1.3rem 3rem 0 0}
.products_section aside .filter_item{margin:0 0 2rem;border-bottom:.1rem solid #09a5be;-webkit-transition:.4s;-o-transition:.4s;-moz-transition:.4s;transition:.4s}
.products_section aside .filter_item .filter_heading.active{margin:0 0 1rem}
.products_section aside .filter_item .filter_heading.active::after{top:-.1rem;right:-.4rem;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:.4s;-o-transition:.4s;-moz-transition:.4s;transition:.4s}
.products_section aside .filter_heading{font-size:1.6rem;line-height:1.2;margin:0 0 1.5rem;text-transform:uppercase;color:#09a5be;position:relative;cursor:pointer}
.products_section aside .filter_heading::after{content:'';position:relative;top:-.3rem;right:-1rem;display:inline-block;width:1rem;height:1rem;border-style:solid;border-width:0 .1rem .1rem 0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:.4s;-o-transition:.4s;-moz-transition:.4s;transition:.4s}
.products_section aside .filter_list{margin:0 0 1.5rem}
.products_section aside .filter_list li.active a{font-weight:700}
.products_section aside .filter_list li a{font-size:1.4rem;padding:.2rem 0;display:inline-block;-webkit-transition:all .3s linear;-o-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}
.products_section aside .amounts{margin-bottom:2rem;font-size:0}
.products_section aside .amounts span{display:inline-block;vertical-align:middle;color:#9d9d9d;font-size:1.4rem}
.products_section aside .amounts label{margin:0 .5rem;display:inline-block;vertical-align:middle}
.products_section aside .amounts label input{height:3rem;max-width:4.1rem;padding:0 .2rem}
.products_section aside .amounts .ok{cursor:pointer;height:3rem;margin:0 0 0 .5rem;line-height:3rem;padding:0 1rem;color:#fff;background:#09a5be;border:.1rem solid #09a5be;-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear}
.products_section main{float:left;width:78%}
.products_section .ui-state-default,.products_section .ui-widget-content .ui-state-default,.products_section .ui-widget-header .ui-state-default{background:url(/img/round.png) no-repeat;border:none;width:3.6rem;height:3.6rem;top:-1.4rem;cursor:pointer}
.products_section .ui-widget-content{background:#fff;border:.1rem solid #09a5be;height:.6rem;max-width:-webkit-calc(100% - 2.8rem);max-width:-moz-calc(100% - 2.8rem);max-width:calc(100% - 2.8rem);left:.6rem;margin:0 0 2rem}
.products_section .ui-slider-horizontal .ui-slider-range{background-color:#09a5be}
.products_list{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 -1.5rem}
.product_item{display:inline-block;vertical-align:top;width:-webkit-calc(100% / 3 - 3.01rem);width:-moz-calc(100% / 3 - 3.01rem);width:calc(100% / 3 - 3.01rem);margin:1.5rem;padding:1.5rem 1.5rem 8rem;-webkit-border-radius:1rem;-moz-border-radius:1rem;border-radius:1rem;text-align:center;-webkit-box-shadow:0 1px 10px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 10px rgba(0,0,0,0.15);box-shadow:0 1px 10px rgba(0,0,0,0.15);-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out;position:relative}
.product_item::after{content:'';position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;opacity:0;-webkit-border-radius:1rem;-moz-border-radius:1rem;border-radius:1rem;-webkit-box-shadow:0 5px 15px rgba(0,0,0,0.3);-moz-box-shadow:0 5px 15px rgba(0,0,0,0.3);box-shadow:0 5px 15px rgba(0,0,0,0.3);-webkit-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}
.product_item .img_wrap{display:block;padding-top:66%;overflow:hidden;position:relative;margin:0 0 1.5rem}
.product_item .img_wrap img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:block;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;font-family:'object-fit: contain;\A ';-webkit-transition:.25s linear;-o-transition:.25s linear;-moz-transition:.25s linear;transition:.25s linear}
.product_item h3{font-size:2rem;line-height:1.2;font-weight:700;color:#09a5be;margin:0 0 1rem}
.product_item p.price{font-size:1.6rem;font-weight:700;line-height:1.2;color:#066978;margin:0}
.product_item .buttons_wrap{position:absolute;bottom:1.5rem;left:1.5rem;width:-webkit-calc(100% - 3rem);width:-moz-calc(100% - 3rem);width:calc(100% - 3rem);font-size:0}
.product_item .buttons_wrap .button{min-width:6.55em;padding: 0 2rem}
.product_item .buttons_wrap .button:first-child{margin:0 1rem 0 0}
.product_item .buttons_wrap .button:only-child{margin:0}
.product_item .buttons_wrap .value_buttons_wrap{margin:0 1rem 0 0}
.value_buttons_wrap{font-size:0;display:inline-block;vertical-align:top;border:.1rem solid #efefef}
.value_buttons_wrap .value_button{display:inline-block;vertical-align:top;width:2.5rem;height:4rem;line-height:4rem;-webkit-transition:all .3s;-o-transition:all .3s;-moz-transition:all .3s;transition:all .3s;font-size:2.5rem;text-align:center;color:#b5b5b5;background:#efefef;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}
.value_buttons_wrap .input{text-align:center;display:inline-block;vertical-align:top;border:none;margin:0;width:5.9rem;height:4rem;font-size:1.6rem;color:#000;padding:0 .5rem;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
.value_buttons_wrap .input:focus,.value_buttons_wrap .input:active{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
.filter_btn{display:none;position:fixed;left:0;top:50%;background-color:#09a5be;z-index:15;padding:1rem;-webkit-border-radius:0 1.5rem 1.5rem 0;-moz-border-radius:0 1.5rem 1.5rem 0;border-radius:0 1.5rem 1.5rem 0;font-size:0;cursor:pointer}
.filter_btn.active{display:none}
.filter_btn .icon{display:inline-block;vertical-align:middle;margin:0 1rem 0 0;width:2rem;height:2rem;color:#fff}
.filter_btn span{color:#fff;display:inline-block;vertical-align:middle;font-size:1.6rem}
.overlay_bg::after{content:"";display:none;width:100%;height:100vh;background:#000;opacity:.8;position:fixed;top:0;left:0;z-index:3}
.overlay_bg.visible::after{display:block}
.aside_close{display:none;position:absolute;top:.5rem;right:1rem}
.aside_close .icon{width:1.6rem;height:1.6rem}
.aside_buttons_mobile{position:fixed;left:-webkit-calc(-100% - 1.5rem);left:-moz-calc(-100% - 1.5rem);left:calc(-100% - 1.5rem);bottom:0;width:29rem;background-color:#fff;text-align:center;padding:1rem 0;font-size:0;-webkit-transition:.3s;-o-transition:.3s;-moz-transition:.3s;transition:.3s}
/* modal cart add */
body.dialog_opened > :not(.dialog_wrapper){-webkit-filter:blur(1.5rem);filter:blur(1.5rem)}
.modal_cart_add{padding:2rem 2.5rem 3rem}
.modal_cart_add_content .desc_wrap{font-size:0;margin:0 0 2rem}
.modal_cart_add_content .desc_wrap p{font-size:1.8rem;line-height:1.3;font-weight:700;color:#09a5be;display:inline-block;vertical-align:middle;margin:0;width:-webkit-calc(100% - 11.5rem);width:-moz-calc(100% - 11.5rem);width:calc(100% - 11.5rem)}
.modal_cart_add_content .img_wrap{display:inline-block;vertical-align:middle;position:relative;overflow:hidden;padding-top:10rem;width:10rem;margin:0 1.5rem 0 0}
.modal_cart_add_content .img_wrap img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;height:100%;-o-object-fit:contain;object-fit:contain;font-family:'object-fit: contain;\A '}
.modal_cart_add_content .modal_btns{font-size:0}
.modal_cart_add_content .modal_btns .button{width:19rem}
.modal_cart_add_content .modal_btns .button:first-child{margin:0 1rem 0 0}
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
.product_item:hover{-webkit-transform:scale(1.01,1.01);-moz-transform:scale(1.01,1.01);-ms-transform:scale(1.01,1.01);-o-transform:scale(1.01,1.01);transform:scale(1.01,1.01)}
.product_item:hover::after{opacity:1}
.product_item .img_wrap:hover img{-webkit-transform:translate(-50%,-50%) scale(1.1);-moz-transform:translate(-50%,-50%) scale(1.1);-ms-transform:translate(-50%,-50%) scale(1.1);-o-transform:translate(-50%,-50%) scale(1.1);transform:translate(-50%,-50%) scale(1.1)}
.product_item h3:hover{color:#066978}
.value_button:hover{background-color:#e0e0e0}
.products_section aside .amounts .ok:hover{background:#066978;border-color:#066978}
.products_section aside .filter_list li a:hover{color:#09a5be}
}
@media only screen and (max-width: 1200px) {
.products_list{margin:0 -1rem}
.product_item .img_wrap{padding-top:50%}
.product_item{width:-webkit-calc(100% / 3 - 2.01rem);width:-moz-calc(100% / 3 - 2.01rem);width:calc(100% / 3 - 2.01rem);margin:1rem;padding:1rem 1rem 7rem}
.product_item h3{font-size:1.6rem}
.product_item .buttons_wrap{left:1rem;width:-webkit-calc(100% - 2rem);width:-moz-calc(100% - 2rem);width:calc(100% - 2rem)}
.product_item .buttons_wrap .value_buttons_wrap{margin:0 .7rem 0 0}
.product_item .buttons_wrap .button{min-width:auto;font-size:1.3rem;padding: 0 1.5rem;}
.product_item .value_buttons_wrap .value_button{height:3rem;line-height:3rem;font-size:2rem}
.product_item .value_buttons_wrap .input{width:3.8rem;height:3rem}
.products_section aside{width:26%;padding:1.3rem 2rem 0 0}
.products_section main{width:74%}
}
@media only screen and (max-width: 992px) {
.products_section aside{position:fixed;top:0;left:-webkit-calc(-100% - 1.5rem);left:-moz-calc(-100% - 1.5rem);left:calc(-100% - 1.5rem);padding:3rem 1rem 6rem;width:30rem;height:100%;min-height:100%;overflow-y:auto;margin:0;-webkit-transition:.3s;-o-transition:.3s;-moz-transition:.3s;transition:.3s;z-index:1000;float:none;background-color:#fff}
.products_section aside.active{left:0;-webkit-transition:.3s;-o-transition:.3s;-moz-transition:.3s;transition:.3s}
.products_section main{width:100%;float:none}
.filter_btn{display:block}
.aside_close{display:block}
.products_section aside.active .aside_buttons_mobile{left:0;-webkit-transition:.3s;-o-transition:.3s;-moz-transition:.3s;transition:.3s}
.products_section aside.active .aside_buttons_mobile .button:first-child{margin:0 1rem 0 0}
}
@media only screen and (max-width: 767px) {
.product_item{width:-webkit-calc(100% / 2 - 2.01rem);width:-moz-calc(100% / 2 - 2.01rem);width:calc(100% / 2 - 2.01rem)}
}
@media only screen and (max-width: 550px) {
.product_item{width:-webkit-calc(100% / 1 - 2.01rem);width:-moz-calc(100% / 1 - 2.01rem);width:calc(100% / 1 - 2.01rem)}
.product_item h3{max-width:70%;margin:0 auto 1rem}
.modal_cart_add_content .img_wrap{padding-top:8rem;width:8rem;margin:0 1rem 0 0}
.modal_cart_add_content .desc_wrap p{font-size:1.6rem;width:-webkit-calc(100% - 9rem);width:-moz-calc(100% - 9rem);width:calc(100% - 9rem)}
.modal_cart_add_content .modal_btns .button{width:auto}
}
@media only screen and (max-width: 450px) {
.product_item h3{max-width:80%}
.modal_cart_add_content .modal_btns .button{font-size:1.4rem}
.modal_cart_add{padding:1.5rem}
.modal_cart_add_content .desc_wrap p{font-size:1.4rem}
}
@media only screen and (max-width: 370px) {
.modal_cart_add_content .modal_btns .button{font-size:1.2rem}
}SCSS
/* Vars */
$main: #09a5be;
$dark: #066978;
$white: #ffffff;
/* input [type=number] */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
/* Cart icon */
.cart_icon {
position: relative;
display: inline-block;
.icon {
width: 3rem;
height: 3rem;
color: $dark;
}
.cart_qty {
position: absolute;
top: -0.8rem;
right: -1.5rem;
font-size: 1.4rem;
font-weight: 500;
height: 2rem;
line-height: 1.9rem;
border-radius: 2rem;
text-align: center;
white-space: nowrap;
padding: 0 0.6rem;
background-color: $main;
color: $white;
z-index: 3;
}
}
/* Product list */
.products_section {
aside {
width: 22%;
float: left;
padding: 1.3rem 3rem 0 0;
.filter_item {
margin: 0 0 2rem;
border-bottom: .1rem solid $main;
transition: .4s;
.filter_heading {
&.active {
margin: 0 0 1rem;
&::after {
top: -0.1rem;
right: -0.4rem;
transform: rotate(-45deg);
transition: .4s;
}
}
}
}
.filter_heading {
font-size: 1.6rem;
line-height: 1.2;
margin: 0 0 1.5rem;
text-transform: uppercase;
color: $main;
position: relative;
cursor: pointer;
&::after {
content: '';
position: relative;
top: -0.3rem;
right: -1rem;
display: inline-block;
width: 1rem;
height: 1rem;
border-style: solid;
border-width: 0 .1rem .1rem 0;
transform: rotate(45deg);
transition: .4s;
}
}
.filter_list {
margin: 0 0 1.5rem;
li {
&.active {
a {
font-weight: 700;
}
}
a {
font-size: 1.4rem;
padding: 0.2rem 0;
display: inline-block;
transition: all .3s linear;
}
}
}
.amounts {
margin-bottom: 2rem;
font-size: 0;
span {
display: inline-block;
vertical-align: middle;
color: #9d9d9d;
font-size: 1.4rem;
}
label {
margin: 0 .5rem;
display: inline-block;
vertical-align: middle;
input {
height: 3rem;
max-width: 4.1rem;
padding: 0 0.2rem;
}
}
.ok {
cursor: pointer;
height: 3rem;
margin: 0 0 0 .5rem;
line-height: 3rem;
padding: 0 1rem;
color: #fff;
background: $main;
border: 0.1rem solid $main;
transition: .3s linear;
}
}
}
main {
float: left;
width: 78%;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: url("/img/round.png") no-repeat;
border: none;
width: 3.6rem;
height: 3.6rem;
top: -1.4rem;
cursor: pointer
}
.ui-widget-content {
background: $white;
border: 0.1rem solid $main;
height: .6rem;
max-width: calc(100% - 2.8rem);
left: 0.6rem;
margin: 0 0 2rem;
}
.ui-slider-horizontal .ui-slider-range {
background-color: $main;
}
}
.products_list {
display: flex;
flex-wrap: wrap;
margin: 0 -1.5rem;
}
.product_item {
display: inline-block;
vertical-align: top;
width: calc(100% / 3 - 3.01rem);
margin: 1.5rem 1.5rem;
padding: 1.5rem 1.5rem 8rem;
border-radius: 1rem;
text-align: center;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease-in-out;
position: relative;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 1rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transition: opacity 0.3s ease-in-out;
}
.img_wrap {
display: block;
padding-top: 66%;
overflow: hidden;
position: relative;
margin: 0 0 1.5rem;
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 100%;
height: 100%;
object-fit: contain;
font-family: 'object-fit: contain;';
transition: .25s linear;
}
}
h3 {
font-size: 2rem;
line-height: 1.2;
font-weight: 700;
color: $main;
margin: 0 0 1rem;
}
p {
&.price {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.2;
color: $dark;
margin: 0;
}
}
.buttons_wrap {
position: absolute;
bottom: 1.5rem;
left: 1.5rem;
width: calc(100% - 3rem);
font-size: 0;
.button {
min-width: 6.55em;
padding: 0 2rem;
&:first-child {
margin: 0 1rem 0 0;
}
&:only-child {
margin: 0;
}
}
.value_buttons_wrap {
margin: 0 1rem 0 0;
}
}
}
.value_buttons_wrap {
font-size: 0;
display: inline-block;
vertical-align: top;
border: .1rem solid #efefef;
.value_button {
display: inline-block;
vertical-align: top;
width: 2.5rem;
height: 4rem;
line-height: 4rem;
transition: all .3s;
font-size: 2.5rem;
text-align: center;
color: #b5b5b5;
background: #efefef;
user-select: none;
cursor: pointer;
}
.input {
text-align: center;
display: inline-block;
vertical-align: top;
border: none;
margin: 0;
width: 5.9rem;
height: 4rem;
font-size: 1.6rem;
color: #000;
padding: 0 .5rem;
border-radius: 0;
&:focus, &:active {
box-shadow: none;
}
}
}
.filter_btn {
display: none;
position: fixed;
left: 0;
top: 50%;
background-color: $main;
z-index: 15;
padding: 1rem 1rem;
border-radius: 0 1.5rem 1.5rem 0;
font-size: 0;
cursor: pointer;
&.active {
display: none;
}
.icon {
display: inline-block;
vertical-align: middle;
margin: 0 1rem 0 0;
width: 2rem;
height: 2rem;
color: $white;
}
span {
color: #ffffff;
display: inline-block;
vertical-align: middle;
font-size: 1.6rem;
}
}
.overlay_bg {
&::after {
content: "";
display: none;
width: 100%;
height: 100vh;
background: #000;
opacity: .8;
position: fixed;
top: 0;
left: 0;
z-index: 3;
}
&.visible::after {
display: block;
}
}
.aside_close {
display: none;
position: absolute;
top: .5rem;
right: 1rem;
.icon {
width: 1.6rem;
height: 1.6rem;
}
}
.aside_buttons_mobile {
position: fixed;
left: calc(-100% - 1.5rem);
bottom: 0;
width: 29rem;
background-color: $white;
text-align: center;
padding: 1rem 0;
font-size: 0;
transition: 0.3s;
}
/* modal cart add */
body.dialog_opened > *:not(.dialog_wrapper) {
filter: blur(1.5rem);
}
.modal_cart_add {
padding: 2rem 2.5rem 3rem;
}
.modal_cart_add_content {
.desc_wrap {
font-size: 0;
margin: 0 0 2rem;
p {
font-size: 1.8rem;
line-height: 1.3;
font-weight: 700;
color: $main;
display: inline-block;
vertical-align: middle;
margin: 0;
width: calc(100% - 11.5rem);
}
}
.img_wrap {
display: inline-block;
vertical-align: middle;
position: relative;
overflow: hidden;
padding-top: 10rem;
width: 10rem;
margin:0 1.5rem 0 0;
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
object-fit: contain;
font-family: 'object-fit: contain;';
}
}
.modal_btns {
font-size: 0;
.button {
width: 19rem;
&:first-child {
margin: 0 1rem 0 0;
}
}
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
.product_item {
&:hover {
transform: scale(1.01, 1.01);
&::after {
opacity: 1;
}
}
.img_wrap:hover {
img {
transform: translate(-50%, -50%) scale(1.1);
}
}
h3:hover {
color: $dark;
}
}
.value_button:hover {
background-color: #e0e0e0;
}
.products_section aside .amounts .ok:hover {
background: $dark;
border-color: $dark;
}
.products_section aside .filter_list li a:hover {
color: $main;
}
}
@media only screen and (max-width: 1200px) {
.products_list {margin: 0 -1rem;}
.product_item .img_wrap {padding-top: 50%;}
.product_item {width: calc(100% / 3 - 2.01rem);margin: 1rem 1rem;padding: 1rem 1rem 7rem;}
.product_item h3 {font-size: 1.6rem;}
.product_item .buttons_wrap {left: 1rem;width: calc(100% - 2rem);}
.product_item .buttons_wrap .value_buttons_wrap {margin: 0 0.7rem 0 0;}
.product_item .buttons_wrap .button {min-width: auto;font-size: 1.3rem;padding: 0 1.5rem;}
.product_item .value_buttons_wrap .value_button {height: 3rem;line-height: 3rem;font-size: 2rem;}
.product_item .value_buttons_wrap .input {width: 3.8rem;height: 3rem;}
.products_section aside {width: 26%;padding: 1.3rem 2rem 0 0;}
.products_section main {width: 74%;}
}
@media only screen and (max-width: 992px) {
.products_section aside {position: fixed;top: 0;left: calc(-100% - 1.5rem);padding: 3rem 1rem 6rem;width: 30rem;height: 100%;min-height: 100%;overflow-y: auto;margin: 0;transition: 0.3s;z-index: 1000;float: none;background-color: $white;}
.products_section aside.active {left: 0;transition: 0.3s;}
.products_section main {width: 100%; float: none;}
.filter_btn {display: block;}
.aside_close {display: block;}
.products_section aside.active .aside_buttons_mobile {left: 0;transition: 0.3s;}
.products_section aside.active .aside_buttons_mobile .button:first-child{margin: 0 1rem 0 0;}
}
@media only screen and (max-width: 767px) {
.product_item {width: calc(100% / 2 - 2.01rem);}
}
@media only screen and (max-width: 550px) {
.product_item {width: calc(100% / 1 - 2.01rem);}
.product_item h3 {max-width: 70%;margin: 0 auto 1rem;}
.modal_cart_add_content .img_wrap {padding-top: 8rem;width: 8rem;margin: 0 1rem 0 0;}
.modal_cart_add_content .desc_wrap p {font-size: 1.6rem;width: calc(100% - 9rem);}
.modal_cart_add_content .modal_btns .button {width: auto;}
}
@media only screen and (max-width: 450px) {
.product_item h3 {max-width: 80%;}
.modal_cart_add_content .modal_btns .button {font-size: 1.4rem;}
.modal_cart_add {padding: 1.5rem;}
.modal_cart_add_content .desc_wrap p {font-size: 1.4rem;}
}
@media only screen and (max-width: 370px) {
.modal_cart_add_content .modal_btns .button {font-size: 1.2rem;}
}JavaScript
/* Slider range */
var priceMin = (Math.floor($('#amountMin').data('price')) ? Math.floor($('#amountMin').data('price')) : 0);
var priceMax = (Math.ceil($('#amountMax').data('price')) ? Math.ceil($('#amountMax').data('price')) : 0);
var priceAllMin = (Math.floor($('#amountMin').data('min')) ? Math.floor($('#amountMin').data('min')) : 0);
var priceAllMax = (Math.ceil($('#amountMax').data('max')) ? Math.ceil($('#amountMax').data('max')) : 0);
$("#slider-range").slider({
range: true,
min: priceAllMin,
max: priceAllMax,
values: [priceMin, priceMax],
slide: function (event, ui) {
$('#amountMin').val(ui.values[0]);
$('#amountMax').val(ui.values[1]);
}
});
$('#amountMin').on('change', function () {
var minVal = $(this).val();
var maxVal = $('#amountMax').val();
$("#slider-range").slider('values', 0, minVal);
$("#slider-range").slider('values', 1, maxVal);
});
$('#amountMax').on('change', function () {
var maxVal = $(this).val();
var minVal = $('#amountMin').val();
$("#slider-range").slider('values', 0, minVal);
$("#slider-range").slider('values', 1, maxVal);
});
$('#amountMin').val($("#slider-range").slider("values", 0));
$('#amountMax').val($("#slider-range").slider("values", 1));
/* Hide/Show filter items */
$('.toggle').click(function(e) {
e.preventDefault();
var $this = $(this);
var $parent = $this.closest('.filter_item');
var $listWrapper = $parent.find('.filter_list');
if ($this.hasClass('active')) {
$this.removeClass('active');
$listWrapper.slideUp(350);
} else {
$this.addClass('active');
$listWrapper.slideDown(350);
}
});
/* Filter mobile */
var $body = $('body');
var $window = $(window);
if ($window.width() <= 992) {
$('.filter_heading').addClass('active');
$('.filter_list').slideDown(350);
}
$body.on('click', '.filter_btn', function () {
$('.products_section aside').addClass('active');
$(this).addClass('active');
$('.header').addClass('filter_opened');
$('.overlay_bg').addClass('visible');
$('body').addClass('no-scroll');
});
$body.on('click', '.aside_close, .overlay_bg', function () {
$('.products_section aside').removeClass('active');
$('.filter_btn').removeClass('active');
$('.header').removeClass('filter_opened');
$('.overlay_bg').removeClass('visible');
$('body').removeClass('no-scroll');
});