XylotrechusZ
/* Woocommerce Product Detail --------------------------------------*/
.margin-22 {
margin-bottom: 22px !important;
}
/* Price */
.price {
line-height: 24px;
font-size: 18px;
color: $product-price-color;
font-weight:500;
ins {
text-decoration: none;
color:#ff4545;
}
del {
span {
text-decoration: line-through;
}
}
@media (max-width:$screen-xs){
font-size:15px;
}
}
/* Product name */
.product-name a {
@include font-size(font-size, $product-name-font-size);
line-height: $product-name-line-height;
font-weight: $product-name-font-weight;
color:$text-color;
}
.contents-detail .images .woocommerce-main-image {
img{
display: block;
width: 100%;
height: auto;
box-shadow: none;
}
.owl-buttons{
.carousel-control{
background: #fff;
}
}
}
/* Product item container */
.no-sidebar-left,
.no-sidebar-right{
// 4 Product
.col-lg-3,
.col-md-3{
.product-grid{
}
}
// 6 Product
.col-lg-2,
.col-md-2{
.product-grid{
.onsale,
.button-groups,
.category,
.price,
.rating {
@extend .hidden;
}
}
}
}
.products{
display: flex;
flex-wrap: wrap;
/* Product List ------------------------------------*/
.product-list{
border: 1px solid $border-color;
margin-bottom: 20px;
background: $white;
img{
height: auto;
}
.button-groups{
@include rtl-text-align-right;
> div, a{
margin-top: 0;
padding: 0;
margin-top: 0;
margin-bottom: $padding-lg-vertical;
display: block;
border: none;
}
a{
width: auto;
height: auto;
text-transform: capitalize;
&:focus, &:active, &:hover{
background: $nocolor!important;
color: $theme-color;
}
}
.button{
display: block;
text-transform: uppercase;
}
.fa,.icon{
margin-right: 6px!important;
@include font-size(font-size,$product-icon-font-size);
}
.feedback{
@extend .hidden;
}
}
.rating{
margin-bottom: $padding-lg-vertical;
@include clearfix();
.star-rating{
@include rtl-float-right;
}
}
.price{
margin-bottom: 10px;
@include rtl-text-align-right;
ins{
@include rtl-text-align-right;
}
> *{
width: inherit;
}
}
.description{
text-align: justify;
}
.product-assets{
.name{
display: none;
}
@include rtl-margin(20px, 20px, 0, 0);
text-align: right;
a{
background: none!important;
text-align: right;
color: $text-color;
font-size: $font-size-base;
font-weight: 300;
&:hover, &:focus, &:active{
background: none!important;
color: $theme-color;
}
}
.btn-cart, .btn-cart a{
background: none;
&:after, &:before{
content: none!important;
}
}
}
}
}
/* Product Info ---------------------------------------------*/
.product-info{
padding-bottom: 30px;
.product-title{
@include font-size(font-size,$single-product-title-font-size);
line-height: $single-product-title-line-height;
font-weight: $single-product-title-font-weight;
margin: $single-product-title-margin;
text-transform: $single-product-title-transform;
}
.woocommerce-main-image{
margin-bottom: 5px;
width: percentage(1);
display: block;
border: 1px solid $border-color;
}
.summary{
@include font-size(font-size, $single-product-summary-font-size);
.product_meta{
clear: both;
color: $black;
margin-top: 0;
padding: 10px 0 5px;
a{
color: #a0a0a0;
&:hover{
color: $theme-color;
text-decoration: none;
}
}
> div{
margin-bottom: $theme-margin / 2;
}
}
}
.single-product-description{
margin-bottom: 22px;
}
.out-of-stock{
display: none;
}
.label{
color: $black;
display: table-cell;
padding: 0;
vertical-align: middle;
font-size: $font-size-base;
@include rtl-text-align-right();
}
.addthis{
@include rtl-clear-left();
overflow: hidden;
padding: $theme-padding 0;
min-height: 60px;
border-top: 1px solid $border-color;
margin-top: 10px;
}
.rating{
@include clearfix();
margin-bottom: $theme-margin;
> *{
@include rtl-float-left();
}
.star-rating{
margin-top: $theme-margin / 2;
@include rtl-margin-right(10px);
}
}
.cart{
@include rtl-float-left();
>div{
@include rtl-float-left();
}
.cart-number{
padding: 0 0 $theme-padding 0;
@include clearfix();
> *{
@include rtl-float-left();
}
}
.qty{
width: 60px;
padding: 0;
text-align: center;
color: $black;
font-weight: 400;
}
.button{
margin-bottom: 10px;
.fa,[class^="icon-"], [class*=" icon-"]{
@extend .hidden;
}
}
.add-cart{
margin-left: 10px;
}
>a.add_to_cart_button, .add-cart button{
@include transition(all 0.35s);
text-transform: uppercase;
@include font-size(font-size, 11px);
position: relative;
height: 38px;
line-height: 36px;
padding: 0 35px;
display: block;
font-weight: $headings-font-weight;
@include border-radius(4px);
@extend .btn-link;
border: 1px solid $black;
background: $black;
color: $white;
&:active, &:focus, &:hover{
border-color: $theme-color;
background: $theme-color;
color: $white;
text-decoration: none;
}
}
> a.single_add_to_cart_button{
@include rtl-float-left();
display: inline-block;
}
}
.table-product-group{
width: 100%;
clear: both;
td{
vertical-align: middle;
}
.add_cart{
margin-left: 0;
}
.price{
padding: 5px;
}
.cart-number{
padding: 0;
}
.label label{
font-weight: 300;
}
.price{
display: inline-block!important;
border: none;
line-height: 50px;
del{
float: right;
margin-top: 5px;
}
ins{
float: left;
margin-right: 5px;
}
}
}
.button-action{
color: #aaaaaa;
font-weight: 900;
text-transform: uppercase;
@include font-size(font-size, 11px);
position: relative;
height: 38px;
line-height: 36px;
padding: 0 35px;
display: inline-block;
font-weight: $headings-font-weight;
@include border-radius(4px);
@extend .btn-link;
border: 1px solid $border-color;
&:focus, &:hover{
border-color: $theme-color;
background: $theme-color;
color: $white;
text-decoration: none;
}
}
.clear{
display: none;
}
.price{
display: table;
color: $single-new-price-color;
font-weight: $single-new-price-font-weight;
@include font-size(font-size,$single-new-price-font-size);
padding: 5px 0 10px;
line-height: 30px;
> *{
display: table-cell;
vertical-align: middle;
}
del{
padding-top: 10px;
line-height: 20px;
span{
color: $black;
@include rtl-margin-right(10px);
}
}
}
.onsale{
@include rtl-left(32px);
}
}
/* Product Category and Subcategories ------------------------*/
.product-category{
.product-category-content{
position: relative;
overflow: hidden;
min-height: $product-category-content-height;
margin: $product-category-content-margin;
}
.product-category-image{
display: block;
img{
@include img-responsive();
}
}
.product-category-title{
text-transform: none;
position: absolute;
text-align: center;
bottom: 0;
@include rtl-left(0);
width: 100%;
font-weight: $product-category-title-font-weight;
@include font-size(font-size,$product-category-title-font-size);
color: $product-category-title-color;
margin: $product-category-title-margin;
padding: $product-category-title-padding;
background: rgba($product-category-title-bg, .3);
.count{
background: transparent;
color: $product-category-title-color;
}
}
}
/* Bingo Product List---------------------------------------------*/
.woo-default-2,&.woo-slider-default{
.title-block{
margin-bottom: 42px;
h2{
display: inline-block;
font-size: 25px;
color: $gray-dark;
margin: 0;
}
}
.products-list.grid{
margin: -10px;
.slick-list{
padding:10px;
}
.product-wapper{
display: flex;
margin-bottom: 20px;
padding: 10px;
@media(max-width:$screen-sm-max)and(min-width:$screen-sm){
display:block;
}
.products-thumb{
margin: 0;
max-width: 120px;
flex: 0 0 50%;
@media (max-width: $screen-md-max)and(min-width:$screen-md){
max-width: 90px;
}
@media (min-width: $screen-sm) and (max-width: $screen-sm-max) {
max-width: 200px;
flex: 0 0 30%;
}
@media (min-width: 1550px){
max-width: 170px;
}
.product-thumb-hover{
overflow: hidden;
}
}
.products-content{
padding-top: 15px;
@include rtl-text-align-left();
@include rtl-padding-left(30px);
padding-bottom:0;
@media(max-width:$screen-md-max)and(min-width:$screen-md){
padding-top:0;
}
@media (min-width: $screen-sm) and (max-width: $screen-sm-max) {
@include rtl-padding-left(15px);
padding-top: 15px;
padding-bottom:15px;
text-align:center;
}
h3.product-title{
margin-bottom: 10px;
a{
line-height: 24px;
}
}
.price{
padding: 0;
&:before{
display: none;
}
}
.star-rating{
margin: 0;
@media(min-width: $screen-sm) and (max-width: $screen-sm-max){
margin:auto;
}
}
.add_to_cart_button,
.added_to_cart,
.product_type_external,
.product_type_variable,
.read_more{
display:none;
}
}
.product-button{
display: none;
}
.onsale, .hot{
display: none;
}
&:hover{
.rating{
@include opacity-s();
}
}
}
}
}
.woo-slider-default-2{
.content-product-list{
.slick-slider{
overflow:unset;
}
}
.title-block{
margin-bottom: 30px;
display:flex;
h2{
display: inline-block;
font-size: 35px;
color: $gray-dark;
margin: 0;
padding-bottom: 37px;
background: url('#{$image-theme-path}bottom-2.png') left bottom no-repeat;
flex:1 25%;
}
.page-description{
flex: 1 100%;
}
}
}
.woo-slider-default {
position:relative;
.content-product-list{
.slick-arrow{
top: 4px;
right: 0;
@include square(22px);
line-height: 22px;
font-size: 12px;
color: $white;
background: $theme-color;
&.fa-angle-left{
right: 30px;
left: auto;
}
&:hover{
color:$theme-color;
background:$white;
}
}
}
}
.woo-slider-2{
.content-product-list{
.products-list.grid{
.slick-list{
}
}
.slick-slider{
overflow:unset;
}
.slick-arrow{
background:$white;
border-color:$theme-color;
top:calc(50% + 30px);
opacity:0;
right:0;
left:auto;
&.fa-angle-left{
right:auto;
left:0;
}
&:hover{
border-color:$theme-color;
background:$theme-color;
color:$white;
}
}
&:hover{
.slick-arrow{
opacity:1;
right:-60px;
&.fa-angle-left{
right:auto;
left:-60px;
}
}
}
}
}
.bwp-woo-slider {
.content-product-list{
position: relative;
}
.banner-block{
overflow: hidden;
img{
backface-visibility: hidden;
filter: alpha(opacity=100);
@include transition( opacity 1s ease 0s, transform 1s ease 0s);
}
&:hover{
img{
filter: alpha(opacity=80);
transform: scale3d(1.1, 1.1, 1);
}
}
}
}
/************************************************************************************************
LIST PROCDUCT
*************************************************************************************************/
.bwp_product_list{
&.slider{
.slick-slider{
overflow: unset;
}
@media(max-width: $screen-md-max){
.slick-list{
margin: 0 -7.5px;
.item-product{
padding: 0 7.5px;
}
}
}
}
&.default{
.bwp-heading-content{
display: flex;
justify-content: space-between;
margin: 15px 0 15px;
}
.content-title h2{
margin: 0;
font-size: 24px;
}
.btn-all{
a{
display:inline-block;
font-size:12px;
font-weight:500;
border-bottom:1px solid $gray-dark;
&:after{
content: "\24";
display:inline-block;
font-family: eleganticons;
font-size:18px;
position:relative;
top:4px;
@include rtl-margin-left(5px);
}
&:hover{
color:$theme-color;
border-color:$theme-color;
}
}
}
}
&.slider2{
.item-product{
@include rtl-border-right(1px solid #e1e1e1);
}
.products-thumb{
border: 0 !important;
}
}
&:hover{
.slick-arrow{
@include opacity-s();
}
}
&.scroll{
margin:0 -15px;
position:relative;
.product-content{
.item-product{
padding:0 15px;
}
}
.scrollbar{
margin: 50px 15px 0;
height: 1px;
background: #dfdfdf;
line-height: 0;
cursor: pointer;
.handle{
background: #000000;
height: 3px;
position: relative;
top: -1px;
}
.mousearea{
position: absolute;
top: -30px;
left: 0;
width: 100%;
height: 20px;
font-size: 12px;
text-transform: uppercase;
color: $gray-dark;
white-space: nowrap;
line-height:20px;
font-weight:600;
i{
font-size:16px;
line-height:20px;
position:relative;
top:3px;
@include rtl-margin-left(5px);
}
&:hover{
color:$theme-color;
}
}
}
.controls{
button{
position:absolute;
top:33%;
@include square(33px);
background:transparent;
border:1px solid $gray-dark;
cursor:pointer;
@include border-radius(0);
color:$gray-dark;
&.prev{
@include rtl-left(0);
}
&.next{
@include rtl-right(0);
}
&.disabled{
cursor:no-drop;
opacity:1;
}
&:hover{
background:$gray-dark;
color:$white;
}
}
}
@media (max-width:$screen-md-max) and (min-width:$screen-sm-max){
margin:0;
}
}
&.slider{
&:hover{
.slick-arrow{
@include opacity-s();
}
}
.bwp-heading-content{
display: flex;
justify-content: space-between;
margin: 0 0 35px;
}
.page-description{
font-size: 16px;
}
.content-title h2{
margin: 0;
font-size: 24px;
}
.btn-all{
a{
display:inline-block;
font-size:12px;
font-weight:500;
border-bottom:1px solid $gray-dark;
&:after{
content: "\24";
display:inline-block;
font-family: eleganticons;
font-size:18px;
position:relative;
top:4px;
@include rtl-margin-left(5px);
}
&:hover{
color:$theme-color;
border-color:$theme-color;
}
}
}
.slick-arrow{
@media(max-width: $screen-md-max){
&.fa-angle-left{
@include rtl-left(-15px);
}
&.fa-angle-right{
@include rtl-right(-15px);
}
}
}
.slick-dots{
margin-top:10px;
}
@media(max-width: $screen-sm-max){
.bwp-heading-content{
display: block;
text-align: center;
}
.content-title h2{
font-size: 20px;
}
}
}
&.slider2{
.bwp-heading-content{
display: flex;
justify-content: space-between;
margin: 15px 0 15px;
}
.content-title h2{
margin: 0;
font-size: 24px;
}
.btn-all{
a{
display:inline-block;
font-size:12px;
font-weight:500;
border-bottom:1px solid $gray-dark;
&:after{
content: "\24";
display:inline-block;
font-family: eleganticons;
font-size:18px;
position:relative;
top:4px;
@include rtl-margin-left(5px);
}
&:hover{
color:$theme-color;
border-color:$theme-color;
}
}
}
@media(max-width: $screen-sm-max){
.countdown{
display: none;
}
.slick-slider{
overflow: unset;
}
}
@media(max-width: $screen-xs){
.bwp-heading-content{
display: block;
text-align: center;
}
.content-title h2{
font-size: 20px;
}
}
}
&.slider3{
background: $white;
padding-top: 25px;
.bwp-heading-content{
display: flex;
justify-content: space-between;
margin: 0 -15px;
padding: 0 30px 7px;
position: relative;
&:before{
position: absolute;
content: "";
@include size(100%, 1px);
background: #e1e1e1;
bottom: 0;
left: 0;
}
}
.content-title h2{
margin: 0;
font-size: 20px;
position: relative;
&:before{
position: absolute;
content: "";
@include size(100%, 3px);
background: $theme-color;
bottom: -15px;
z-index: 2;
}
}
.btn-all{
position: relative;
top: -10px;
a{
display:inline-block;
font-size:12px;
font-weight:500;
border-bottom:1px solid $gray-dark;
&:after{
content: "\24";
display:inline-block;
font-family: eleganticons;
font-size:18px;
position:relative;
top:4px;
@include rtl-margin-left(5px);
}
&:hover{
color:$theme-color;
border-color:$theme-color;
}
}
}
.slick-arrow{
@include opacity-s();
font-size:10px;
@include square(35px);
@include border-radius(50%);
border:1px solid #dadada;
line-height:33px;
background:$white;
top:calc(50% - 50px);
&:hover{
background:$theme-color;
border-color:$theme-color;
color:$white;
}
&.fa-angle-left{
@include rtl-left(-17.5px);
}
&.fa-angle-right{
@include rtl-right(-17.5px);
}
@media(max-width: $screen-md-max){
&.fa-angle-left{
@include rtl-left(-15px);
}
&.fa-angle-right{
@include rtl-right(-15px);
}
}
}
.slick-dots{
margin-top:10px;
}
.slick-list{
margin:0 -13px;
}
@media(max-width: $screen-xs){
.bwp-heading-content{
display: block;
text-align: center;
}
.content-title h2{
font-size: 20px;
}
}
@media(max-width: $screen-sm-max){
.bwp-heading-content{
display: block;
}
.content-title h2{
display: inline-block;
margin: 0 0 15px;
&:before{
bottom: -3px;
}
}
}
}
&.list-deal{
.content-product-list{
position:relative;
}
.slick-arrow{
@include opacity-s();
font-size:10px;
@include square(35px);
@include border-radius(50%);
border:1px solid $border-color;
line-height:33px;
background:$white;
top:calc(50% - 50px);
&:hover{
background:$theme-color;
border-color:$theme-color;
color:$white;
}
&.fa-angle-left{
@include rtl-left(-17.5px);
}
&.fa-angle-right{
@include rtl-right(-17.5px);
}
}
.list-product{
padding:55px 30px 0;
border:2px solid $theme-color;
@include border-radius(15px);
}
.content-title{
display:flex;
align-items:center;
max-width:500px;
justify-content:center;
border:2px solid $border-color;
padding:5px;
@include border-radius(30px);
@include rtl-margin-left(120px);
@include transform(translateY(50%));
background:$white;
h2{
font-size:20px;
text-transform:uppercase;
font-weight:600;
@include rtl-margin(0 ,30px ,0 ,0);
&:after{
content:"";
display:inline-block;
@include square(4px);
@include border-radius(50%);
background:$theme-color;
}
}
}
.countdown-deal{
display:flex;
align-items:center;
label{
color:$gray-dark;
font-weight:500;
@include rtl-margin(0 ,10px ,0 ,0);
}
.countdown-content{
>span{
@include square(40px);
background:$theme-color;
color:$white;
text-align:center;
@include border-radius(50%);
display:inline-block;
line-height:40px;
font-weight:500;
text-transform:uppercase;
font-size:13px;
@include rtl-margin-right(5px);
&:last-child{
@include rtl-margin-right(0);
}
}
}
}
.products-thumb{
.countdown{
display:none;
}
}
@media (max-width:$screen-sm-max){
.content-title{
@include rtl-margin-left(50px);
}
}
@media (max-width:$screen-xs-max){
.content-title{
@include rtl-margin-left(0);
flex-wrap:wrap;
justify-content:center;
text-align:center;
@include border-radius(50px);
max-width:300px;
margin:auto;
>*{
width:100%;
}
h2{
margin:0;
}
.countdown-deal{
justify-content:center;
}
}
}
}
&.list-deal2{
.bwp-heading-content{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}
.content-title{
display:flex;
flex-wrap:wrap;
align-items:center;
h2{
margin:0;
font-size:28px;
&:after{
display:inline-block;
content:".";
color:$theme-color;
}
}
}
.countdown-deal{
border:2px solid #f03333;
padding:0 20px;
@include rtl-margin-left(20px);
@include border-radius(30px);
color:#f03333;
font-weight:600;
.countdown-content >span{
@include rtl-margin-right(15px);
&:last-child{
@include rtl-margin-right(0);
}
}
.countdown-amount{
font-size:20px;
}
.countdown-text{
font-size:13px;
}
}
.btn-all{
a{
display:inline-block;
font-size:13px;
font-weight:500;
border-bottom:2px solid $gray-dark;
&:after{
content: "\24";
display:inline-block;
font-family: eleganticons;
font-size:18px;
position:relative;
top:4px;
@include rtl-margin-left(5px);
}
&:hover{
color:$theme-color;
border-color:$theme-color;
}
}
}
.list-product{
background:$white;
padding:30px 30px 0;
}
.content-product-list{
position:relative;
}
.slick-arrow{
@include opacity-s();
font-size:10px;
@include square(35px);
@include border-radius(50%);
border:1px solid $border-color;
line-height:33px;
background:$white;
top:calc(50% - 50px);
&:hover{
background:$theme-color;
border-color:$theme-color;
color:$white;
}
&.fa-angle-left{
@include rtl-left(-17.5px);
}
&.fa-angle-right{
@include rtl-right(-17.5px);
}
}
.products-thumb{
.countdown{
display:none;
}
}
@media (max-width:$screen-sm-max){
.content-title h2{
font-size:24px;
}
}
@media (max-width:$screen-xs-max){
.bwp-heading-content{
justify-content:center;
text-align:center;
>*{
width:100%;
}
}
.content-title{
>*{
width:100%;
}
}
.countdown-deal{
margin:10px 0;
}
.countdown-deal{
padding:0 10px;
@include rtl-margin-left(10px);
.countdown-content >span{
@include rtl-margin-right(10px);
&:last-child{
@include rtl-margin-right(0);
}
}
.countdown-amount{
font-size:16px;
}
.countdown-text{
font-size:13px;
}
}
}
}
&.list-deal3{
position:relative;
.slick-arrow{
@include opacity-s();
@media (min-width:$screen-xs-max){
@include square(21px);
border:1px solid $gray-dark;
color:$gray-dark;
font-size:8px;
line-height:18px;
font-weight:600;
top:5px;
background:$white;
&:hover{
background:$theme-color;
color:$white;
border-color:$theme-color;
}
&.fa-angle-left{
right:26px;
left:auto;
}
&.fa-angle-right{
right:0px;
}
}
}
.bwp-heading-content{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
margin-bottom:30px;
@include rtl-padding-right(80px);
}
.content-title{
display:flex;
flex-wrap:wrap;
align-items:center;
h2{
margin:0;
font-size:28px;
&:after{
display:inline-block;
content:".";
color:$theme-color;
}
}
}
.countdown-deal{
border:2px solid #f03333;
padding:0 20px;
@include rtl-margin-left(20px);
@include border-radius(30px);
color:#f03333;
font-weight:600;
.countdown-content >span{
@include rtl-margin-right(15px);
&:last-child{
@include rtl-margin-right(0);
}
}
.countdown-amount{
font-size:20px;
}
.countdown-text{
font-size:13px;
}
}
.list-link{
@include rtl-padding-left(30px);
ul{
list-style:none;
padding:0;
li{
display:inline-block;
@include rtl-margin-right(10px);
font-size:13px;
font-weight:500;
line-height:23px;
border:1px dashed transparent;
@include border-radius(20px);
padding:0 15px;
color:$text-color;
&.active{
color:$theme-color;
border-color:$theme-color;
}
a{
color:$text-color;
&:hover{
color:$theme-color;
}
}
&:last-child{
@include rtl-margin-right(0);
}
}
}
}
@media (max-width:$screen-md-max){
.bwp-heading-content{
@include rtl-padding-right(50px);
}
.content-title h2{
font-size:18px;
}
.list-link{
max-width: 350px;
ul{
white-space: nowrap;
overflow: auto;
}
}
}
@media (max-width:$screen-sm-max){
.list-link{
max-width:100%;
width:100%;
padding:10px 15px;
border-bottom:1px solid $border-color;
}
.bwp-heading-content{
@include rtl-padding-right(0);
}
}
@media (max-width:$screen-xs-max){
.bwp-heading-content{
justify-content:center;
text-align:center;
>*{
width:100%;
}
}
.content-title{
>*{
width:100%;
}
}
.countdown-deal{
margin:10px 0;
}
.countdown-deal{
padding:0 10px;
@include rtl-margin-left(10px);
.countdown-content >span{
@include rtl-margin-right(10px);
&:last-child{
@include rtl-margin-right(0);
}
}
.countdown-amount{
font-size:16px;
}
.countdown-text{
font-size:13px;
}
}
}
}
&.list-link1{
.list-product{
border: 1px solid #e6e6e6;
border-top: 0;
}
.slick-list{
margin: 0px;
}
.item-product{
padding: 0px;
@include rtl-border-right(1px solid #e6e6e6);
}
.content-heading{
display:flex;
justify-content: space-between;
flex-wrap:wrap;
padding-bottom:13px;
margin-bottom:25px;
align-items:center;
}
.title-block{
h2{
margin:0;
font-size:24px;
display:inline-block;
text-transform: uppercase;
}
}
.list-link{
@include rtl-padding-left(40px);
ul{
list-style:none;
padding:0;
li{
display:inline-block;
@include rtl-margin-right(5px);
font-size:12px;
text-transform: uppercase;
font-weight:600;
letter-spacing: 1.5px;
line-height:24px;
border:1px solid transparent;
padding:0 15px;
color:$gray-dark;
&.active{
color: #de2828;
border-color:#de2828;
}
a{
color:$gray-dark;
&:hover{
color:#de2828;
}
}
&:last-child{
@include rtl-margin-right(0);
@include rtl-padding-right(0);
}
}
}
}
@media (max-width:$screen-md-max){
.title-block h2{
font-size:18px;
}
.list-link{
max-width: 400px;
ul{
white-space: nowrap;
overflow: auto;
}
}
}
@media (max-width:$screen-sm-max){
.list-link{
max-width:100%;
width:100%;
padding:10px 15px;
border-bottom:1px solid $border-color;
}
.content-heading{
padding:0;
border:0;
}
.title-block{
padding-bottom:6px;
border-bottom:1px solid $border-color;
width:100%;
}
}
}
&.sidebar{
.items{
margin-bottom:15px;
padding-bottom:15px;
border-bottom:1px solid $border-color;
&:last-child{
margin-bottom:0;
padding-bottom:0;
border-bottom:0;
}
}
.products-list.grid .product-wapper.content-product3 {
margin-bottom:0;
.products-thumb{
flex:0 0 85px;
}
.products-content{
.cat-products{
display:none;
}
h3.product-title{
margin-bottom:0;
margin-top:3px;
}
}
.price{
font-size:14px;
del{
font-size:12px;
}
}
}
}
&.list-menu{
.products-list.grid .product-wapper.content-product3{
margin-bottom:10px;
&:before{
display:none;
}
.products-thumb{
flex: 0 0 75px;
.product-thumb-hover .wp-post-image{
visibility: unset;
}
}
}
.cat-products,.product-lable{
display:none;
}
}
}
/************************************************************************************************
RELATE PROCDUCT
*************************************************************************************************/
.related, .cross_sell, .upsells{
position: relative;
margin-top: 50px;
max-width:1440px;
padding:0 15px;
margin-left:auto;
margin-right:auto;
width:100%;
.slick-dots{
margin-top:30px;
}
.title-block{
text-align:center;
margin-bottom: 35px;
h2{
font-size: 24px;
color:$gray-dark;
margin: 0;
display:inline-block;
position:relative;
font-weight:600;
}
}
.content-product-list{
position:relative;
&:hover{
.slick-arrow{
@include opacity-s();
}
}
.slick-arrow{
@include square(30px);
border:1px solid $light-gray;
line-height:28px;
font-size:10px;
color:$gray-dark;
top:calc(50% - 15px);
background:$white;
@include border-radius(50%);
&.fa-angle-left{
@include rtl-left(-15px);
}
&.fa-angle-right{
@include rtl-right(-15px);
}
&:hover{
color:$white;
border-color:$theme-color;
background:$theme-color;
}
@media (max-width:$screen-xs-max){
&.fa-angle-left{
@include rtl-left(0);
}
&.fa-angle-right{
@include rtl-right(0);
}
}
}
.products-list.grid{
.product-wapper{
margin: 0 15px;
}
}
}
.product-container{ margin: 0; }
}
/************************************************************************************************
QUICK VIEW PRODUCT
*************************************************************************************************/
.bwp-quick-view{
content: "";
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: inline-block;
background: rgba(0,0,0,.5);
opacity: 0;
visibility : hidden;
@include transition(all 0.8s ease-in-out);
&.active{
opacity: 1;
visibility : visible;
}
.quickview-container{
position : fixed;
z-index: 10;
left : 50%;
top: 50%;
@include translate(-50%,-50%);
.quickview-close{
text-align: center;
position: absolute;
cursor: pointer;
top : 20px;
right: 15px;
color:$gray-dark;
z-index:10000;
@include square(36px);
border: 9px solid transparent;
@include border-radius(100%);
&:after{
content: '';
position: absolute;
height: 2px;
width: 100%;
top: 50%;
left: 0;
margin-top: -1px;
background-color: rgba($gray-dark,0.5);
transform-origin: 50% 50%;
@include transform(rotate(45deg));
@include transition(all 0.3s ease);
}
&:before{
content: '';
position: absolute;
height: 2px;
width: 100%;
top: 50%;
left: 0;
margin-top: -1px;
background-color: rgba($gray-dark,0.5);
transform-origin: 50% 50%;
@include transform(rotate(-45deg));
@include transition(all 0.3s ease);
}
&:hover{
background:#e5e5e5;
&:after,&:before{
@include transform(rotate(0deg));
}
}
}
.product-type-variable .variations_form.cart table tr td.label{
display:none;
}
.img-quickview{
width:55%;
}
.bwp-single-info{
width:45%;
padding:0 45px;
.quantity{
@include rtl-margin-right(10px);
}
.description{
margin-bottom:15px;
}
.content_product_detail{
max-height: 435px;
overflow-x: hidden;
padding-right:8px;
&::-webkit-scrollbar-track
{
background-color: #F5F5F5;
}
&::-webkit-scrollbar
{
width: 5px;
background-color: #F5F5F5;
}
&::-webkit-scrollbar-thumb
{
background-color: rgba($gray-dark, 0.1);
}
}
.woocommerce-variation-price, .woocommerce-variation-availability, .woocommerce-variation-add-to-cart .quantity{
display: block !important;
visibility: visible !important;
}
}
.quickview-slick{
ul.slick-dots{
position: initial;
margin-top: 10px;
}
.slick-arrow{display: none !important;}
}
.product_detail{
overflow: hidden;
display: block;
background: $white;
color: $text-color;
max-width : 980px;
width:100%;
max-height:705px;
overflow-y : scroll;
.product_meta{
#report_abuse_form{
padding:0;
box-shadow:none;
}
}
>.row{
margin:0;
align-items:center;
}
&::-webkit-scrollbar
{
width: 5px;
}
&::-webkit-scrollbar-thumb
{
background-color: rgba($gray-dark, 0.1);
}
}
.woocommerce-message{
display : none;
}
.woocommerce-product-rating{
display:flex;
}
.slick-dots{
position:absolute;
bottom:35px;
li{
@include square(8px);
@include border-radius(50%);
button{
@include square(8px);
@include border-radius(50%);
&:before{
display:none;
}
}
}
}
.slick-track,.slick-list{
display:flex;
}
.slider_img_productd{
.img-thumbnail{
border:0;
display:inline-block;
float:unset;
}
.video-additional{
display:flex;
float:unset;
height:100%;
iframe{
width:100% !important;
height:100% !important;
}
}
.col-sm-12{
padding:0;
.slick-arrow{
@include square(25px);
line-height:25px;
@include opacity-h();
background:transparent;
top:calc(50% - 12.5px);
border:0;
color:$gray-dark;
font-size:22px;
&:hover{
color:$theme-color;
background:transparent;
}
&.fa-angle-right{
right:15px;
}
&.fa-angle-left{
left:15px;
}
}
&:hover{
.slick-arrow{
@include opacity-s();
}
}
}
}
}
}
.scroll-image{
position:relative;
}
.content-product-360-view{
position:fixed !important;
top:0;
left:0;
z-index:9999;
height:100%;
width:100%;
background:rgba($gray-dark,0.8);
align-items:center;
display:none;
&.active{
display:flex;
}
.product-360-view{
width:calc(100% - 30px) !important;
max-width:700px;
height:auto !important;
padding:30px;
background:$white;
.vapier-360-button{
top:10px;
bottom:auto;
right:10px;
background:$white;
padding:0;
@include box-shadow(unset);
border:1px solid $gray-lighter;
@include square(35px);
line-height:33px;
text-align:center;
margin:0;
@include square(28px);
padding: 6px;
border:1px solid #d6d6d6;
@include border-radius(100%);
&:after{
content: '';
position: absolute;
height: 2px;
width: 12px;
top: 50%;
left:calc(50% - 6px);
margin-top: -1px;
background-color: rgba($gray-dark,0.5);
transform-origin: 50% 50%;
@include transform(rotate(45deg));
@include transition(all 0.3s ease);
}
&:before{
content: '';
position: absolute;
height: 2px;
width: 12px;
top: 50%;
left:calc(50% - 6px);
margin-top: -1px;
background-color: rgba($gray-dark,0.5);
transform-origin: 50% 50%;
@include transform(rotate(-45deg));
@include transition(all 0.3s ease);
}
&:hover{
background:#e5e5e5;
&:after,&:before{
@include transform(rotate(0deg));
}
}
}
.images-list{
padding:0;
list-style:none;
cursor: grab;
.images-display{
display:none;
&.active{
display:block;
}
}
}
.navigation-bar-wrapper{
position:absolute;
width:calc(100% - 60px);
bottom:60px;
.navigation-bar{
max-width:150px;
margin:auto;
display:flex;
background:$white;
padding:5px 10px;
@include border-radius(25px);
@include box-shadow( 0px 1px 12px 2px rgba(144, 144, 144, 0.3));
>*{
flex:1;
cursor:pointer;
color:$gray-dark;
font-size:18px;
text-align:center;
font-family:FontAwesome;
&:hover{
color:$theme-color;
}
}
}
.navigation-bar-previous{
&:before{
content:"\f048";
}
}
.navigation-bar-next{
&:before{
content:"\f051";
}
}
.navigation-bar-play{
&:before{
content:"\f04b";
}
&.navigation-bar-stop{
&:before{
content:"\f04d";
}
}
}
}
.loading-spinner{
display: block;
position: absolute;
z-index: 10000;
background: $white;
opacity: 0.5;
&:after{
display: block;
background-image: url("images/icons/loading.gif");
background-size: contain;
content: '';
width: 50%;
height: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 100001;
}
}
@media (max-width:$screen-sm-max){
max-width:500px !important;
}
@media (max-width:$screen-xs){
padding:15px;
.vapier-360-button{
top:5px;
right:5px;
@include square(30px);
line-height:24px;
i{
font-size:18px;
}
}
.navigation-bar-wrapper{
bottom:20px;
width: calc(100% - 30px);
}
}
}
}
.vapier-360-button{
position:absolute;
bottom:15px;
@include square(55px);
border:1px solid $gray-dark;
@include rtl-right(15px);
line-height:53px;
color:$gray-dark;
@include border-radius(50%);
z-index:9993;
cursor:pointer;
h2{
display:none;
}
i{
font-size:30px;
line-height:1;
display:inline-block;
vertical-align:middle;
}
&:hover{
color:$theme-color;
border-color:$theme-color;
}
}
.zoomContainer{
z-index:999 ;
}