Default page

View File Name : _productlist.scss

/*===============================================
	[SASS DIRECTORY ]
	
    [1] BOX SALE,NEW
    [2] RATE
    [3] TODAY'S DEALS 
    [4] PRODUCT CATEGORY
    [5] TOOLBAR
    [6] PRODUCT LIST SIMPLE
    [7] QUICKVIEW
==============================================*/

/*============ BOX SALE,NEW ==============*/
.label-product{    
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    display: inline-block;
    width: 33px;
    height: 33px;
    z-index: 9;
    border-radius: 50%;
    line-height: 33px;
    position: absolute;
    &.label-sale{background: #ff5c00;top: 10px; #{$right}: 10px; }
    &.label-new{background: #00ABF0; top: 10px; #{$left}: 10px;;
}
     

    
}
.label-percent{padding: 2px 5px; background: $background; font-size: 13px; font-weight: normal;}
.product-options{
    label{padding:0;color: #666;}
    .label{font-weight: normal;font-size: 11px;}
    .radio{position: relative;z-index: 2;  text-transform: capitalize; cursor: pointer;
	.fa{display: none;}
    }
   
    .active .fa{display: block;}
    .fa{position: absolute;top: 0;#{$left} : 0;z-index: 2;width: 22px;height: 22px; color: white;line-height: 22px;text-align: center;}
}

/*============ BOX RATE ==============*/
.rating,
.ratings{font-size: 13px;margin-bottom: 0;
    span.fa-stack{
        .fa-star-o:before{content: "\f006"; color: #ff5c00;}
        .fa-star.fa-stack-1x{ z-index: 1;
            &:before{content: "\f005";color: #ebdb2c;}
        }
    }
}
span.fa-stack{width: 14px; height: 14px; line-height: 14px;
    .fa-star-o:before{content: "\f006"; color: #ff5c00;}
    .fa-stack-2x{font-size: 1em;}
    .fa-star.fa-stack-2x{position: relative; z-index: 1;
	&:before{content: "\f005";color: #ebdb2c;}
    }
    
}
.so_filter_wrap  .modcontent .so-filter-heading i{ float: $right; }
.module.so_filter_wrap .modcontent #text_search,
.input-group-btn>.btn{ border-radius: 0; }
.module.so_filter_wrap .modcontent #text_search{ overflow: hidden; }
.product-compare .overflow_auto{ overflow-x: auto; 
    @include if-rtl{ direction: ltr; }
}
.account-voucher .buttons input[type="checkbox"], input[type="radio"]{
    float: $left;
    margin-#{$right}: 4px;;
}
.price{
    margin: 0 0 10px 0;
    line-height: normal;
    color: #ff5c00;
    font-size: 14px;
    font-weight: normal;
    .price-old{
        line-height: normal;
        padding: 0 5px;
        display: inline-block;
        text-decoration: line-through;
        color: #999;
        font-size: 12px;
        font-weight: normal;
    }
    .price-new, span.price{
        color: #ff5c00;
        font-size: 16px;
        font-weight: normal;
    }
}
.product-filter{
    .short-by-show p{ margin: 15px 0 0;}
}
.checkout-cart .form-content .input-group.btn-block input{ border-radius: 0; max-height: 34px; }
.checkout-cart .form-content  .btn.btn-danger{ border-radius: 0; }
/*====================TODAY'S DEALS ====================*/
.countdown_box{ 
    width:100%;
        .countdown_inner{display: table;  width:100%; text-align: center; line-height: 20px; border: 1px solid $input-border;}
        .title {border-bottom: 1px solid rgba(255,255,255,0.2); display: none; }
        .time-item{display:inline-block; color: $gray;font-size: 12px;border-#{$right}:1px solid $input-border;; width:25%;
        .num-time{font-size: 13px;font-weight: 700;}
        .num-time,.name-time{padding: 0  3px;}
        &:last-child{border: none;}
    }
}


/*====================PRODUCT CATEGORY ====================*/
.title-category{ color: $textColor; text-transform: uppercase; font-size: 16px; font-weight: bold;width: 100%;}
.products-category{ margin-bottom: 30px;
    .form-group.clearfix{ margin: 0; }
    .filter_group{width: 25%;display: inline-block;vertical-align: top;}
    
}
.refine-search{
    a{@include linkGray(); display: block; text-align: center;}
}
.refine-search__list{
    .thumbnail{margin-bottom: 0;}
    > li{margin-bottom: 10px;}
}


	
/*TOOLBAR LISTING TOP*/
.filters-panel{margin-top: 10px; position: relative;z-index: 89;
    .col-xs-4,.col-xs-8{padding: 0;}
    .pagination{margin: 0;}
    .list-view{
        button.btn{border-radius: 0; padding: 9px; color: #fff;    border: none; background: #252525; width: 35px; height: 35px; font-size: 14px;
            &.grid{ margin-#{right}: -3px;; }
            &.active{background: $background; color: #fff; box-shadow: none;
            &:hover{background: $background; color: #fff;}
            }
            &:hover{color: #fff; background: $background;}
            &:focus{border-radius: 0; border-color: $linkColor; outline: none;}
        }
        .fa{margin: 0;}
    }
    
}

.box-pagination{
    .pagination > li span, .pagination > li a{padding: 0; width: 27px; height: 28px; line-height: 28px; text-align: center;}
    .pagination{
		display: block;
	}
}

/*================ PRODUCT LIST ===================*/
//Fixed second_img Product grid Columns (1,2) 
.product-layout {
	.second_img .img_0{
		right: 50%; top:0;
          transform: translate(50%, 0);
          }
}

.products-list { margin: 0;
    .product-layout {
        .product-item-container{ margin-bottom: 10px;
           
            .button-group {
                button{
                    &.addToCart, &.wishlist, &.compare { background-color: #fff; border: 1px solid $linkColor;  }
                }
            }
             
        }
    }
    /*------------------PRODUCT GRID ====================*/ 
    &.grid .product-layout{
        .product-item-container{padding: 0 0 15px; position: relative; border: 1px solid $border-color; overflow: hidden;margin-#{$right}:-1px; margin-bottom: -1px;
            .left-block{ position: relative; width: 100%; float: $left;
                .countdown_box { display: none;}    
            } 
            .right-block{padding-top: 10px; width: 100%; text-align: center; clear: both;
                .caption{padding: 0;
                    @include transition(all 0.3s ease-in-out);
                    h4{ margin-bottom: 5px;font-size: 14px;  font-weight: normal;
                        a{ color: #222; text-transform: capitalize; }
                    }
                    .ratings{margin-bottom: 5px;}
                }
                .description  {display: none;}
            }
            .button-group{ display: none;
                button{
                    border: none; height: 32px; line-height: 30px; border-radius: 100%;  color: $linkColor; border: 1px solid $background; min-width: 32px; margin: 0 2px; padding: 0;
                    &.addToCart{ 
                     > span{display: none;}
                    }
                    &.wishlist {  @include transition(bottom 0.4s ease-in-out); color: $linkColor; } 
                    &.compare  {  @include transition(bottom 0.6s ease-in-out); color: $linkColor; }
                }
            }
            
        }
    }
    /*----------------PRODUCT LIST ------------------*/
    &.list.nopadding-xs {margin: 0;}
    &.list .product-layout{
        .product-item-container{ border-bottom: 1px solid #eee;
            .left-block{
                width: 45%;
                float: $left;
                margin-bottom: 0px;
                margin-#{$right}: 5px;
                position: relative;
                
                
            }
            .description p { font-size: 12px;  line-height: 20px;    text-transform: capitalize;}
            .countdown_box{position: relative;z-index: 2;margin-top: -20px; padding: 0 10px;}
            .label-new { top: 8px; right: 8px; }
            .label-sale{ top: 8px; left: 8px; }
            
            .right-block{ overflow: hidden;
                .caption {
                    h4{
                        font-weight: 500;
                        font-size: 14px;
                       text-transform: capitalize;
                        margin-bottom: 5px;
                        a{ color: #222;}
                    }
                }
                .description  {display: block;}
                .button-group{ margin: 0px 0 20px 0;display: block;  }    
            }
            .button-group button{ background-color: $background; color: #fff; font-size: 13px; transition: all .3s; height: 32px; line-height: 30px; border: 1px solid $background; @include transition(all 0.2s ease-in-out); border-radius: 50%; min-width: 32px; padding: 0;
                &.addToCart{  padding: 0 10px; color: #fff;  background: $background; border-radius: 15px;
                    > i{padding-#{$right}: 5px}
                }
               
                &.wishlist {  color: $linkColor; background: transparent; } 
                &.compare  {  color: $linkColor; background: transparent; }
            }
            
        } 
    }    
}
.products-category{
    .btn-block{
        border-color: #e8e8e8;box-shadow: none; background: #f1f1f1;
        &.active{background: $gray;color: white;}
    }
    .short-by{
        select{ border-radius: 0; box-shadow: none; margin-bottom: 0px; border-color: #e8e8e8;     width: calc(100% - 17px);display: inline-block;}
    } 
}


/*SIDEBAR LISTING - RESPONSIVE*/
.open-sidebar {
  
}


.open-sidebar i.fa{ margin-right: 5px;  }

.page-category .sidebar-overlay {
    background: rgba(0,0,0,0.5);
    display: none;
    height: 100%;
    opacity: 1;
    position: fixed;
    top: 0;
    left: 0px;
    right: 0px;
    width: 100%;
    z-index: 9998;
}

.page-category .sidebar-offcanvas {
    background: #fff;
    width: 300px;
    position: fixed;
    top: 0px;
    bottom: 0px;
    z-index: 9999;
    height: 100%;
    overflow-x: scroll;
    box-shadow: 0 0 5px 0 rgba(50,50,50,0.75);
    transition: all 300ms ease-in-out;
    padding-top: 15px;
    #{$left}: -100%;
    &.active {#{$left}: 0;}
    #close-sidebar{
        font-size: 16px;
        margin-bottom: 10px;
        display: block;
        background: #eee;
    }        
}