445 lines
13 KiB
SCSS
445 lines
13 KiB
SCSS
|
/* +----------------------------------------------------+
|
||
|
|
TABLE OF CONTENTS
|
||
|
|
+----------------------------------------------------+
|
||
|
|
|
||
|
|
[1] BLOCK MODULE STYLE
|
||
|
|
[2] BLOCK LIST ITEM
|
||
|
|
[3] BLOCK MENU CATEGORY
|
||
|
|
[4] BLOCK FILTER SHOP BY
|
||
|
|
[5] BLOCK TAGS
|
||
|
|
[6] BLOCK LANGUAGE
|
||
|
|
[7] BLOCK CURRENCY
|
||
|
|
[8] BLOCK BREADCRUMB
|
||
|
|
[9] BLOCK LATEST PRODUCT
|
||
|
|
[10] BLOCK PRODUCT LAYOUT
|
||
|
|
*/
|
||
|
|
//---------------BLOCK MODULE STYLE -------------------------
|
||
|
|
h3.modtitle{@include rem(font-size, 22px); line-height: 30px;margin: 0 0 5px;position: relative;
|
||
|
|
font-weight: 400;color: #222222;
|
||
|
|
}
|
||
|
|
h3.modtitle3{
|
||
|
|
font-size: 44px;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #333333;
|
||
|
|
margin: 0 0 5px;
|
||
|
|
}
|
||
|
|
h3.modtitle4{
|
||
|
|
font-size: 40px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #333333;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
h3.modtitle7{
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 40px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
.box-full{
|
||
|
|
max-width: 1720px;
|
||
|
|
margin: 0 auto;
|
||
|
|
float: none;
|
||
|
|
|
||
|
|
}
|
||
|
|
@media(max-width: 1199px){
|
||
|
|
h3.modtitle{@include rem(font-size, 20px);
|
||
|
|
}
|
||
|
|
h3.modtitle4{
|
||
|
|
|
||
|
|
}
|
||
|
|
h3.modtitle4{@include rem(font-size, 35px);}
|
||
|
|
}
|
||
|
|
|
||
|
|
img{
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
//---------------BLOCK LIST ITEM -------------------------
|
||
|
|
.list-item{list-style: none;padding: 0;
|
||
|
|
li{ margin-bottom: 3px;
|
||
|
|
&:before{
|
||
|
|
font-family: $FontAwesome; margin-#{$right}:10px; display: inline-block;
|
||
|
|
@include if-ltr {content: "\f105";}
|
||
|
|
@include if-rtl { content: "\f104";}
|
||
|
|
}
|
||
|
|
a{@include linkGray();}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.htmlcontent-home{ @extend ul.blank;}
|
||
|
|
//---------------BLOCK MENU CATEGORY -------------------------
|
||
|
|
.menu-category{
|
||
|
|
.modcontent{border: 1px solid #e6e6e6; margin-top: 20px; padding: 0 20px;}
|
||
|
|
.list-group{ @extend ul.blank;
|
||
|
|
> li{border-bottom: 1px dotted #E4E4E4;margin: 0; position: relative;
|
||
|
|
//Menu level1
|
||
|
|
span.button-view {display: block;position: absolute;#{$right}: 0;top: 5px;cursor: pointer; z-index: 10;text-align: center; width: 30px; height: 30px;line-height: 30px; font-size: 14px;}
|
||
|
|
a{@include linkGrayDark();padding: 10px 0; display: block;}
|
||
|
|
a:hover + .button-view{color: $linkColor;}
|
||
|
|
.active,.active + .button-view{color: $linkColor;}
|
||
|
|
.active + .button-view:before{content: '\f147';}
|
||
|
|
//Menu level2
|
||
|
|
ul{@extend ul.blank;}
|
||
|
|
li{padding: 0 10px;position: relative; list-style: none;
|
||
|
|
a{padding: 5px 0;
|
||
|
|
&:before{
|
||
|
|
content: '';
|
||
|
|
padding: 0 5px;
|
||
|
|
font-family: $FontAwesome;
|
||
|
|
@include if-ltr { content: "\f105";}
|
||
|
|
@include if-rtl { content: "\f104";}
|
||
|
|
margin-#{$left}: -10px;
|
||
|
|
transition: all 400ms ease;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
&:hover:before{
|
||
|
|
opacity: 1;margin: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
//---------------BLOCK FILTER SHOP BY -------------------------
|
||
|
|
.filter-shopby{border: 1px solid #e6e6e6;padding: 20px;
|
||
|
|
.table_layout{display: block;}
|
||
|
|
.table_cell{margin-bottom: 10px;padding-bottom: 20px;border-bottom: #f1f1f1 1px solid;display: block;}
|
||
|
|
legend{border: none;font-size: 13px;margin: 0;text-transform: uppercase;}
|
||
|
|
.checkboxes_list,.simple_vertical_list{@extend ul.blank;}
|
||
|
|
.checkboxes_list > li:not(:last-child), .simple_vertical_list li:not(:last-child) {
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
.color_btn{
|
||
|
|
position: relative;
|
||
|
|
padding-#{$left}: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.color_btn::before{
|
||
|
|
content: "" !important;
|
||
|
|
padding: 1px;
|
||
|
|
background-clip: content-box !important;
|
||
|
|
border: 1px solid #eaeaea;
|
||
|
|
border-radius: 50% !important;
|
||
|
|
-webkit-transition: border-color .3s ease;
|
||
|
|
transition: border-color .3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.color_btn.green::before{ background: #269300; }
|
||
|
|
.color_btn.yellow::before{ background: #fccd36; }
|
||
|
|
.color_btn.red::before{ background: #ff0000; }
|
||
|
|
.color_btn.blue::before{ background: #018bc8; }
|
||
|
|
.color_btn.grey::before{ background: #b2b2b2; }
|
||
|
|
.color_btn.orange::before{ background: #ff7b1a; }
|
||
|
|
|
||
|
|
input[type="checkbox"]:checked + .color_btn::before{ border-color: #333; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-row{ @extend .filter-shopby;padding: 0;
|
||
|
|
.table_layout{
|
||
|
|
display: table;
|
||
|
|
width: 100%;
|
||
|
|
table-layout: fixed;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table_row{ display: table; width:100%;}
|
||
|
|
.table_cell{display: table-cell;border-right: 1px solid #e6e6e6;padding: 19px;}
|
||
|
|
.bottom_box {padding: 15px 19px;}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.ui-slider{
|
||
|
|
height: 7px;
|
||
|
|
background: #f8f8f8;
|
||
|
|
border:1px solid #eaeaea;
|
||
|
|
max-width: 220px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui-slider .ui-slider-handle{
|
||
|
|
display: block;
|
||
|
|
width: 19px;
|
||
|
|
height: 19px;
|
||
|
|
background: #fff;
|
||
|
|
border: 1px solid #eaeaea;
|
||
|
|
cursor: pointer;
|
||
|
|
top: -7px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui-slider .ui-slider-handle::before{
|
||
|
|
content: "";
|
||
|
|
display: block;
|
||
|
|
width: 9px;
|
||
|
|
height: 9px;
|
||
|
|
background: #b2b2b2;
|
||
|
|
position: absolute;
|
||
|
|
top: 4px;
|
||
|
|
#{$left}: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui-slider .ui-slider-handle,
|
||
|
|
.ui-slider .ui-slider-handle::before{ border-radius: 50%; }
|
||
|
|
|
||
|
|
.range{ margin-bottom: 15px; }
|
||
|
|
|
||
|
|
.range > *{ display: inline; }
|
||
|
|
|
||
|
|
.checkboxes_list{ color: #333; }
|
||
|
|
|
||
|
|
.simple_vertical_list,
|
||
|
|
.checkboxes_list{
|
||
|
|
input[type="radio"], input[type="checkbox"] {display: none;}
|
||
|
|
input[type="radio"] + label,
|
||
|
|
input[type="checkbox"] + label{
|
||
|
|
position: relative;
|
||
|
|
width: auto !important;
|
||
|
|
margin:0 17px 0 0 !important;
|
||
|
|
padding-#{$left}: 32px;
|
||
|
|
cursor: pointer;
|
||
|
|
-webkit-user-select: none;
|
||
|
|
-khtml-user-select: none;
|
||
|
|
-moz-user-select: none;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="radio"] + label::before,
|
||
|
|
input[type="checkbox"] + label::before{
|
||
|
|
content: "";
|
||
|
|
display: block;
|
||
|
|
text-align: center;
|
||
|
|
font-family: 'FontAwesome';
|
||
|
|
position: absolute;
|
||
|
|
#{$left}: 0;
|
||
|
|
top: -1px;
|
||
|
|
width:22px;
|
||
|
|
height:22px;
|
||
|
|
color:inherit;
|
||
|
|
background:#fff;
|
||
|
|
border:1px solid #eaeaea;
|
||
|
|
border-radius: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="checkbox"] + label::before{ font-size: 12px; }
|
||
|
|
|
||
|
|
input[type="radio"] + label::before{ border-radius: 50%; }
|
||
|
|
|
||
|
|
input[type="radio"] + label:empty{
|
||
|
|
width: 22px !important;
|
||
|
|
padding-#{$left}: 0px;
|
||
|
|
margin: 0px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="checkbox"]:checked + label::before{ content: '\f00c'; }
|
||
|
|
|
||
|
|
input[type="radio"]:checked + label::before{ content: "\f10c"; }
|
||
|
|
}
|
||
|
|
//---------------BLOCK TAGS -------------------------
|
||
|
|
.tags_cloud{ @extend ul.blank;
|
||
|
|
li{display: inline-block;margin: 0 4px 4px 0;}
|
||
|
|
}
|
||
|
|
|
||
|
|
.button_grey {
|
||
|
|
padding: 6px 15px; display: inline-block;color: $gray;background: #f1f1f1; text-transform: capitalize; border-radius: 3px; border: none;
|
||
|
|
&:hover{color: white;background: $background1;}
|
||
|
|
}
|
||
|
|
.button_submit{background: $background1;color: white; margin-right: 5px;}
|
||
|
|
|
||
|
|
//---------------BLOCK LANGUAGE -------------------------
|
||
|
|
.header-top ul.dropdown-menu{min-width: 105px;margin:0;border-radius:0;
|
||
|
|
li > a{color: $textBody;}
|
||
|
|
|
||
|
|
}
|
||
|
|
.languages-block{z-index: 10;position:relative;vertical-align:top; margin: 0; display: inline-block;
|
||
|
|
form{
|
||
|
|
> a{ color: $textBody; display:block;}
|
||
|
|
|
||
|
|
.dropdown-menu{margin: 0;}
|
||
|
|
span.fa-angle-down{margin-#{$left}: 3px;}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
//------------------BLOCK CURRENCY -------------------------
|
||
|
|
.currencies-block{@extend .languages-block; }
|
||
|
|
|
||
|
|
//------------------RESONSIVE HEADER TOP -------------------
|
||
|
|
@media (max-width: 767px){
|
||
|
|
.collapsed-block .tabBlockTitle {margin: 6px 0px;line-height: 20px;
|
||
|
|
.expander{margin: 0 10px; color: $gray-dark; font-size:14px;}
|
||
|
|
}
|
||
|
|
.collapsed-block .tabBlock{}
|
||
|
|
}
|
||
|
|
//------------------BLOCK BREADCRUMB -------------------------
|
||
|
|
.breadcrumb {
|
||
|
|
@include header-main;
|
||
|
|
background: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*==========================BLOCK CART ======================*/
|
||
|
|
//---------------BLOCK CART -------------------------
|
||
|
|
.shopping_cart{padding: 0;
|
||
|
|
.btn-group{display: block;z-index: 5;}
|
||
|
|
a.top_cart{display: block; position: relative; box-shadow: none !important; text-decoration: none !important;
|
||
|
|
.shopcart{
|
||
|
|
.title{color: #444;font-weight: bold; }
|
||
|
|
.text-shopping-cart{color: #999;margin-bottom:0; white-space: nowrap;}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
.shoppingcart-box{z-index: 9999;padding: 15px;border-radius: 0; border-top: 3px solid $linkColor;min-width: 300px;
|
||
|
|
// @include breakpoint(lg){
|
||
|
|
// &:before{content: ""; height: 1px; width: 1px; border-style: solid; border-bottom: 10px solid $linkColor; border-#{$left}: 10px solid transparent; border-right: 10px solid transparent; border-top: transparent; position: absolute;top: -10px;#{$right}: 129px;}
|
||
|
|
// }
|
||
|
|
.added_items{margin-bottom: 10px;}
|
||
|
|
.table-striped{
|
||
|
|
>tbody>tr:nth-of-type(odd){background: #fff;}
|
||
|
|
a{color: $textBody;
|
||
|
|
// font-weight: bold;
|
||
|
|
&.fa-edit{display: none;}
|
||
|
|
&:hover{color: $linkColor;}
|
||
|
|
}
|
||
|
|
|
||
|
|
a.fa-delete{width: 20px; height: 20px; background: #d6d6d6; border-radius: 3px; text-align: center; line-height: 19px; color: #000;
|
||
|
|
&:hover{background: $background1; color: #fff; text-decoration: none;}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
a.btn{ color: #fff;background: #444; border-color: #444;
|
||
|
|
i{margin-#{$right}: 5px;}
|
||
|
|
&:hover{border: 1px solid $linkColor;background: $background1;}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.table-bordered{border-#{$left}: 0; border-right: 0;}
|
||
|
|
.table>tbody>tr{margin: 10px 0;
|
||
|
|
&:first-child>td{border-top: 0;}
|
||
|
|
}
|
||
|
|
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{vertical-align: middle; }
|
||
|
|
.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td,
|
||
|
|
.table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th{border: 0;}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
//-------------------- BLOCK LATEST PRODUCT -----------------
|
||
|
|
.latest-product{
|
||
|
|
|
||
|
|
.product-latest-item{margin-bottom: 20px;}
|
||
|
|
.product-latest-item:last-child{margin:0;}
|
||
|
|
.media{
|
||
|
|
.media-left{float: $left; border: 1px solid #ddd; padding: 0; margin-#{$right}: 10px;}
|
||
|
|
.media-body{
|
||
|
|
h4{margin-top: 10px;
|
||
|
|
a{font-size: 14px; color: #222222; font-weight: 400;
|
||
|
|
&:hover{color: $linkColor;}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.price{
|
||
|
|
margin-top: 7px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:hover .media-left{border-color: $linkColor;}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//-------------------- BLOCK Newsleter Popup -----------------
|
||
|
|
.main-newsleter-popup{
|
||
|
|
.so-custom-popup{background-color: $white; border-radius: 5px;
|
||
|
|
@include breakpoint(sm){width:85% !important;
|
||
|
|
&:before{content: "";position: absolute;z-index: 2;background: rgba(255,255,255,0.9);width:100%;height: 100%;top:0;right: 0;}
|
||
|
|
}
|
||
|
|
@include breakpoint(xs){
|
||
|
|
&:before{content: "";position: absolute;z-index: 2;background: rgba(255,255,255,0.9);width:100%;height: 100%;top:0;right: 0;}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.modcontent{position: relative;z-index: 9;}
|
||
|
|
.so-custom-popup .oca_popup .popup-content{padding: 15px 10px; text-align: center;
|
||
|
|
@include breakpoint(lg){padding: 60px 30px;padding-#{$left}: 55%;margin: 0 20px;}
|
||
|
|
@include breakpoint(md){padding: 60px 30px;padding-#{$left}: 55%;margin: 0 20px;}
|
||
|
|
.popup-title{font-weight: bold;font-size: 22px;color: $gray-dark;text-transform: uppercase;}
|
||
|
|
.newsletter_promo {font-size: 18px;color: $linkColor;font-weight: bold;}
|
||
|
|
.email{margin: 30px 0;}
|
||
|
|
.form-control{
|
||
|
|
background: white;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 3px;
|
||
|
|
height: 41px;
|
||
|
|
max-width: 280px;
|
||
|
|
display: inline-block;
|
||
|
|
width:100%;
|
||
|
|
}
|
||
|
|
.hidden-popup{font-weight: normal;}
|
||
|
|
.btn-default{@include buttonColor();margin-bottom: 20px;min-width: 160px;text-transform: uppercase; padding: 8px 10px;border-radius: 3px; }
|
||
|
|
.newsletter_promo{padding: 10px 0;}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
//--------------------SLIDESHOW --------------------
|
||
|
|
.yt-content-slider--arrow1{
|
||
|
|
.owl2-controls .owl2-nav{
|
||
|
|
div{ position: absolute;top: 44.5%;outline: 0;width: 30px;height: 50px;font-size: 0; z-index: 9; transition: all 0.3s ease;
|
||
|
|
&.owl2-prev{#{$left}: 0px;background: url("#{$base-url-theme}/icons/arrow-slider-left.png") no-repeat;
|
||
|
|
&:hover{background-position: 0 -59px;}
|
||
|
|
}
|
||
|
|
&.owl2-next{right: 0px;background: url("#{$base-url-theme}/icons/arrow-slider-right.png") no-repeat;
|
||
|
|
&:hover{background-position: 0 -59px;}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.yt-content-slider--arrow2{ padding: 0px 70px 15px 70px; direction: ltr;
|
||
|
|
.owl2-controls{@include owl-controls($background,'default');}
|
||
|
|
}
|
||
|
|
|
||
|
|
.slider-brand--home6{ padding: 0 ; direction: ltr;
|
||
|
|
.owl2-controls{@include owl-controls($background,'default'); opacity: 0;
|
||
|
|
.owl2-nav .owl2-prev{#{$left}:-30px;}
|
||
|
|
.owl2-nav .owl2-next{#{$right}:-30px;}
|
||
|
|
}
|
||
|
|
&:hover .owl2-controls {opacity: 1;}
|
||
|
|
|
||
|
|
a{border: 1px solid #ddd; display: block;
|
||
|
|
&:hover{border-color: $linkColor;}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//------------CLIENT SAY------------
|
||
|
|
.block-clientsay {
|
||
|
|
.yt-content-slide{ border: 1px solid #ddd; padding: 15px 20px; margin-#{$right}:1px;
|
||
|
|
.client-info{ border-top: 1px solid #ddd; margin-top: 15px; padding-top: 20px;
|
||
|
|
strong{font-size: 116.6%; text-transform: uppercase; font-weight: bold; color: #444;}
|
||
|
|
img{float: $right; margin-right: 10px;width: auto;}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.owl2-controls{position: absolute; top: -30px;width: 100%;
|
||
|
|
@include owl-controls($background,'listing_tabs');
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//--------------BLOCK PRODUCT LAYOUT----------------
|
||
|
|
.product-layout{
|
||
|
|
@include product-layout;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media(max-width: 1199px){
|
||
|
|
.product-layout .product-item-container .left-block .hover .icon-search{
|
||
|
|
display: none!important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media(max-width: 991px){
|
||
|
|
.btn-block input.form-control{
|
||
|
|
|
||
|
|
margin: 10px;
|
||
|
|
}
|
||
|
|
.wishlist-remove{
|
||
|
|
margin-top: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (max-width: 767px){
|
||
|
|
.banners{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|