| Current Path : /home/digilove/public_html/templates/sj_revo/less/ |
| Current File : /home/digilove/public_html/templates/sj_revo/less/modules.less |
/*******************************************
*** YT Framework: less ***
*******************************************/
// ----------------------------------------
/* 1.Module variations
* 2.Module Joomla default
* 3.Module Xhtml
* 4.Module Smartaddons
*/
/* 1.Module Variations
--------------------------------------------------------- */
.col-xs-15{width: 20%;padding: 0 15px;float: left;}
.suffix strong { display: inline-block; }
.loader-mod-box {background: white url("../images/lazy-loader.gif") no-repeat scroll 50% 50%;height: 100%;left: 0;position: absolute;top: 0;width: 100%;z-index: 9999;}
/*============Preloading Screen==================*/
.loader-content {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000111;
background-color: #ffffff;
opacity: 1;
transition: all 500ms linear 0s;
}
.loader-content.loader-off,
body.loaded .loader-content {
opacity: 0;
visibility: hidden;
transition: all 500ms linear 0s;
}
#loader {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
perspective: 400px;
transform-type: preserve-3d;
}
#loader .dot {
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -80px;
transform-type: preserve-3d;
transform-origin: 80px 50%;
transform: rotateY(0);
background-color: #1fc0a0;
animation: dot1 2000ms cubic-bezier(0.56, 0.09, 0.89, 0.69) infinite;
}
#loader .dot:nth-child(2) {z-index: 9;animation-delay: 150ms;}
#loader .dot:nth-child(3) {z-index: 8;animation-delay: 300ms;}
#loader .dot:nth-child(4) {z-index: 7;animation-delay: 450ms;}
#loader .dot:nth-child(5) {z-index: 6;animation-delay: 600ms;}
#loader .dot:nth-child(6) {z-index: 5;animation-delay: 750ms;}
#loader .dot:nth-child(7) {z-index: 4;animation-delay: 900ms;}
#loader .dot:nth-child(8) {z-index: 3;animation-delay: 1050ms;}
@keyframes dot1 {
0% {transform: rotateY(0) rotateZ(0) rotateX(0);background-color: @background1;}
45% {transform: rotateZ(180deg) rotateY(360deg) rotateX(90deg);background-color: #000000;animation-timing-function: cubic-bezier(0.15, 0.62, 0.72, 0.98);}
90%,100% {transform: rotateY(0) rotateZ(360deg) rotateX(180deg);background-color: @background1;}
}
//
.product-container{
.vm-product-media-container img{
transition: all 0.3s ease-in-out;
}
&:hover{
.vm-product-media-container img{
opacity: 0.6;
transition: all 0.3s ease-in-out;
}
}
}
.item {
.image-cat img{
transition: all 0.3s ease-in-out;
}
&:hover{
.image-cat img{
opacity: 0.6;
transition: all 0.3s ease-in-out;
}
}
}
.catItemView {
.item-image img{
transition: all 0.3s ease-in-out;
}
&:hover{
.item-image img{
opacity: 0.6;
transition: all 0.3s ease-in-out;
}
}
}
ul{list-style: none;padding: 0;margin: 0;}
// Mod Default Style
.module_menu, div.module { margin: 0 0 30px; }
#left, #right {
.module{
margin: 0 0 30px;
}
}
.module {
&.diamond{
border: 1px solid #e8e8e8;
h3.modtitle{
position: relative;
text-transform: uppercase;
color: #222;
background: #f2f2f2;
padding: 15px 0;
margin: 0;
border-bottom: 1px solid #e8e8e8;
&:before{
content: "\f219";
display: inline-block;
font-family: fontawesome;
padding: 0 10px;
color: @linkColor;
font-size: 20px;
}
}
}
// Menu Style
&._menu {
.modcontent {
ul.menu {
li {
a {
color: #666;
&:hover {
color: @linkColor;
}
}
}
}
}
}
}
/* 2.Module Joomla Default
--------------------------------------------------------- */
//breadcumb
.breadcrumb {
margin: 0; padding: 0 0 10px;
background: none;
li {
&:before {display: none;}
a, span {color: #444;}
.divider {margin: 0 5px;&.icon-location {display: none;}}
&.active {
a, span {color: @linkColor;}
}
}
}
.wrap_breadcrumbs {
text-align: left;
padding: 40px 0;
ul.breadcrumb {
display: inline-block;
border: none;
margin: 0;
padding: 0;
li {
a {
color: #7d7d7d;
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
&:hover {color: @linkColor;}
}
span.divider {
color: #7d7d7d;
margin: 0 15px;
}
span {
text-transform: uppercase;
font-weight: 300;
color: #7d7d7d;
font-size: 12px;
}
&:last-child{
span.divider{ display: none;}
}
}
}
}
//Menu Style
// Flat Menu
.module._menu {
// Side Menu
&.side-menu {
// Show All Submenu
.modcontent ul.menu {
> li.parent {
>a, span {
&:after {
content: "\f0da";
font-family: FontAwesome;
float: right;
}
}
ul {
left: -100%;
.transition(transform 0.2s ease-in-out 0s);
li.parent > span {
color: @linkColor2;
cursor: pointer;
&:after {
content: "\f0da";
font-family: FontAwesome;
position: relative;
float: right;
}
&:hover { color: @linkColor; }
}
//Menu lelel 3
li ul {
display: none;
width: 220px;
}
}
&:hover ul {
top: 0;
background: #fff;
border: 1px solid #ccc;
padding: 15px;
li {
position: relative;
border-bottom: 1px solid #e5e5e5;
padding: 4px 10px;
&:last-child { border: none; }
&.parent > a {
&:after {
content: "\f0da";
font-family: FontAwesome;
position: relative;
float: right;
}
}
}
li:hover ul {
display: block;
left: -220px;
position: absolute;
top: 0;
z-index: 10;
background: #fff;
li { padding: 4px 5px; }
}
}
}
li a.fa-home:before { margin-right: 10px; }
}
}
// Tree Menu
&.tree-menu {
// Show All Submenu
.modcontent ul.menu {
padding: 10px 15px;
> li.parent.active {
> a:after { display: inline-block; }
ul {
//background: #fff;
display: block;
position: static;
border: 0;
padding: 0 20px;
li.parent > span, a {
color: #666;
cursor: pointer;
&:hover { color: @linkColor; }
}
//Menu lelel 3
>li >ul{
padding: 0 20px;
}
}
}
li a.fa-home:before { margin-right: 10px; }
}
}
}
.module {
&.sjflatmenu {
position: relative; z-index: 2;
.modcontent {
ul.sj-flat-menu{
padding: 0; background: none;
ul{
padding: 0;
}
li {
padding: 10px;
}
}
.pretext, .posttext { display: none; }
.flyout-menu {
border: none;
li {
z-index: 1;
a {
color: #666;
&:hover {color: @linkColor;}
}
> .fm-container {
padding: 15px 20px; background: #fff;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
ul {
min-width: 160px;
.fm-item > .fm-link a {
color: #666;
&:hover {color: @linkColor;}
}
}
}
&.fm-last { border: none; }
}
}
.accordion-menu{
border: none;
li {
a {
color: #666;
img { display: none; }
}
&.fm-last { border-bottom: none; }
&.fm-opened {
> .fm-item { border-bottom: none; }
.fm-container ul {
list-style-type: none;
margin-left: 20px;
li {
border: none;
padding: 2px 0;
.fm-item {
position: relative;
top: 6px;
}
a {
padding-left: 0;
line-height: normal;
}
}
}
}
.fm-item a {
background: none;
padding-left: none;
font-weight: normal;
}
&:hover {
a { color:@linkColor; }
}
&.fm-opened {
&:hover {
background: #fff;
li:hover { background: #fff; }
a {
color: #666;
&:hover { color: @linkColor; }
}
}
.fm-item {
a { color: #666; }
&:hover a { color: @linkColor; }
}
}
}
}
}
}
}
//module blank languages-top
.module.languages-top{
position: relative;
.mod-languages{
>a{
font-size: 12px;
color: #2d2d2d;
cursor: pointer;
line-height: 40px;
height: 40px;
img{border-radius: 3px;}
}
}
.dropdown-menu{
min-width: auto;
width: 100%;
background: #f2f2f2;
border-radius: 0;
border: none;
box-shadow: 0 1px 1px #555;
>li{
display: inline-block;
padding: 8px 12px;
width: 100%;
margin: 0;
border-bottom: 1px solid #e8e8e8;
a{
padding: 0;
margin: 0;
font-size: 12px;
color: #2d2d2d;
background: none;
img{
width: 14px;
}
}
&:hover{
background: #fff;
}
&:last-child{
border: none;
}
}
}
&:hover{
.mod-languages > a{
color: @linkColor;
}
}
}
.mod-currency{ display:block;
.bootstrap-select {
.dropdown-toggle{
background: none;
font-size: 12px;
color: #2d2d2d;
height: 40px;
line-height: 40px;
padding: 0;
.filter-option{
&:after{
content: "\f107";
font-family: fontawesome;
display: inline-block;
padding: 0 5px;
}
}
.caret{
display: none;
}
&:hover{
span{color: @linkColor;}
}
}
.dropdown-menu{
min-width: 65px;
border-radius: 0;
background: #f2f2f2;
margin: 0;
padding: 0;
border: none;
left: -10px;
.dropdown-menu-inner{
margin:0;
>li{
display: inline-block;
padding: 6px 10px;
width: 100%;
margin: 0;
border-bottom: 1px solid #e8e8e8;
a{
padding: 0;
margin: 0;
font-size: 12px;
color: #2d2d2d;
background: none;
i{display: none;}
}
&:hover{
background: #fff;
}
&:last-child{
border: none;
}
}
}
}
&:hover{
.dropdown-toggle{color: @linkColor;}
}
}
}
//slideshow
.slideshow{
.sj-extraslider{
margin: 0;
position: relative;
.owl-controls{
padding: 0 30px 25px;
position: absolute;
bottom: 0;
left: 0;
display: inline-block;
z-index: 2;
width: auto;
.owl-dots{
margin: 0;
.owl-dot{
height: 8px;
width: 8px;
background: #7d7d7d;margin: 3px;
&.active{
background: @background1;
width: 25px;
}
}
}
}
.extraslider-inner{
border: none;
padding: 0;
.item-wrap-inner{margin: 0;
.content{
display: inline-block;
position: absolute;
top: 50%;
left: 0;
.lib-tranlate-y();
padding: 0 30px;
.title-small{
font-size: 20px;
text-transform: uppercase;
font-weight: 600;
margin: 0 0 5px;
opacity: 0;
&.color{
color: @linkColor;
}
&.black{
color: #222;
}
&.white{
color: #fff;
}
&.grey{
color: #7d7d7d;
}
}
.title-lage{
font-weight: bold;
text-transform: uppercase;
font-size: 36px;
margin: 0 0 5px;
opacity: 0;
&.color{
color: @linkColor;
}
&.black{
color: #222;
}
&.white{
color: #fff;
}
&.grey{
color: #7d7d7d;
}
}
.des{
font-size: 14px;
font-weight: bold;
width: 70%;
opacity: 0;
&.color{
color: @linkColor;
}
&.black{
color: #222;
}
&.white{
color: #fff;
}
&.grey{
color: #7d7d7d;
}
}
.price {
font-size: 70px;
font-weight: bold;
display: block;
line-height: 70px;
opacity: 0;
&.color{
color: @linkColor;
}
&.black{
color: #222;
}
&.white{
color: #fff;
}
&.grey{
color: #7d7d7d;
}
}
.see-more{
font-weight: 800;
display: inline-block;
text-decoration: none;
opacity: 0;
margin-top: 30px;
&:before{
content: "\f0da";
font-family: fontawesome;
display: inline-block;
margin-right: 3px;
}
&.color{
color: @linkColor;
}
&.black{
color: #222;
}
&.white{
color: #fff;
}
&.grey{
color: #7d7d7d;
}
&:hover{
color: #222;
}
}
}
.image-item{
display: inline-block;
position: absolute;
top: 50%;
right: 0;
padding: 0 30px;
opacity: 0;
.lib-tranlate-y();
}
}
}
.extraslider-inner .owl-item.active .item-wrap-inner{
.content{
.title-small-active{
opacity: 1;
animation: myeffect-slideshow 3s ease-in-out ;
-webkit-animation: myeffect-slideshow 3s ease-in-out; /* Chrome, Safari, Opera */
-moz-animation: myeffect-slideshow 3s ease-in-out ;
-o-animation: myeffect-slideshow 3s ease-in-out ;
-ms-animation: myeffect-slideshow 3s ease-in-out ;
}
.title-lage-active{
opacity: 1;
animation: myeffect-slideshow 2.5s ease-in-out ;
-webkit-animation: myeffect-slideshow 2.5s ease-in-out; /* Chrome, Safari, Opera */
-moz-animation: myeffect-slideshow 2.5s ease-in-out ;
-o-animation: myeffect-slideshow 2.5s ease-in-out ;
}
.des-active{
opacity: 1;
animation: myeffect-slideshow 2s ease-in-out ;
-webkit-animation: myeffect-slideshow 2s ease-in-out; /* Chrome, Safari, Opera */
-moz-animation: myeffect-slideshow 2s ease-in-out ;
-o-animation: myeffect-slideshow 2s ease-in-out ;
}
.price-active{
opacity: 1;
animation: myeffect-slideshow 1.5s ease-in-out ;
-webkit-animation: myeffect-slideshow 1.5s ease-in-out; /* Chrome, Safari, Opera */
-moz-animation: myeffect-slideshow 1.5s ease-in-out ;
-o-animation: myeffect-slideshow 1.5s ease-in-out ;
}
.see-active{
opacity: 1;
animation: myeffect-slideshow 1s ease-in-out ;
-webkit-animation: myeffect-slideshow 1s ease-in-out; /* Chrome, Safari, Opera */
-moz-animation: myeffect-slideshow 1s ease-in-out ;
-o-animation: myeffect-slideshow 1s ease-in-out ;
}
}
.image-item-active{
opacity: 1;
animation: myeffect-slideshow-img 3s ease-in-out ;
-webkit-animation: myeffect-slideshow-img 3s ease-in-out; /* Chrome, Safari, Opera */
-moz-animation: myeffect-slideshow-img 3s ease-in-out ;
-o-animation: myeffect-slideshow-img 3s ease-in-out ;
}
}
}
}
//mod-login
#logout-form{
display: inline-block;
float: right;
.btn {
background: @background1;
padding: 0 5px;
margin: 12px 0 12px 20px;
&:hover{
background: darken(@background1, 30%);
}
}
}
div.mod-login{
.dropdown-toggle{
font-size: 12px;
color: #2d2d2d;
padding: 0;
height: 40px;
line-height: 40px;
i{
margin: 0 5px;
}
}
#myLogin {
.modal-dialog {
width: 380px;
margin: 100px auto;
z-index: 9999;
text-align: left;
}
.modal-content {
padding: 30px;
border-radius: 0;
background: #fff;
}
h3.title {
font-size: 24px;
color: #000;
margin-bottom: 20px;
text-transform: uppercase;
}
.btReverse {
display: block;
text-align: center;
text-transform: uppercase;
&:hover{
color: #fff;
}
}
#login-form {
font-family: @sansFontFamily;
.userdata {
margin: 0 0 20px;
.inputbox{width: 100%;}
label { font-weight: 500;display: inline-block; }
input[type="checkbox"] {
margin: 3px 5px 0px 0px;
}
.button { text-transform: uppercase; }
}
ul.listlogin {
border-top: 1px solid #E7E7E7;
margin: 30px 0;
padding: 10px 0px 0px;
font-size: 12px;
li {
display: inline-block;
margin-right: 10px;
a { .linkGraylighter(); }
}
}
}
}
.yt-loginform{
padding: 0;
margin: 0;
list-style: none;
border-radius: 0;
background: #f2f2f2;
min-width: 80px;
border: none;
box-shadow: 0px 1px 1px #555;
>li{
display: inline-block;
padding: 8px 12px;
border-radius: 0;
width: 100%;
text-align: left;
a{
font-size: 12px;
color: #2d2d2d;
background: none;
padding: 0;
}
&:hover{
background: #fff;
}
&:last-child{
border: none;
}
}
}
&:hover{
.dropdown-toggle{
color: @linkColor;
}
}
}
//
.module.my-account{
h3.modtitle{
margin: 0;
padding: 0;
height: 40px;
line-height: 40px;
font-size: 12px;
color: #2d2d2d;
font-weight: normal;
cursor: pointer;
&:before{
content: "\f007";
font-family: fontawesome;
display: inline-block;
padding: 0 5px;
}
&:after{
content: "\f107";
font-family: fontawesome;
display: inline-block;
padding: 0 5px;
}
}
.modcontent{
border-radius: 0;
margin: 0;
padding: 0;
background: #f2f2f2;
border: none;
box-shadow: 0 1px 1px #555;
display: none;
.menu {
margin: 0;
> li{
display: inline-block;
padding: 8px 12px;
width: 100%;
border-bottom: 1px solid #e8e8e8;
font-size: 12px;
a{
color: #2d2d2d;
}
&:hover{
background: #fff;
}
&:last-child{
border: none;
}
}
}
}
&:hover{
h3.modtitle{
color: @linkColor;
}
}
}
//
.contact-infomation {
.list-info{
margin: 0;
.item{
margin: 0 0 15px;
display: block;
overflow: hidden;
.icon{
width: 30px;
height: 30px;
background: #444;
color: #fff;
text-align: center;
line-height: 30px;
display: inline-block;
float: left;
margin-right: 10px;
margin-top: 10px;
border-radius: 2px;
&:before{
width: 100%;
height: 100%;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
&.fa-mobile, &.fa-map-marker{
font-size: 20px;
}
}
.phone, p, a{
overflow: hidden;
display: block;
margin: 0;
color: #7d7d7d;
}
&:hover{
.icon{
background: @background1;
}
}
}
}
}
//Module Blog Category
.module.blog_category {
h3.modtitle {margin-bottom: 10px;}
ul.menu {
margin: 0; padding: 0; list-style: none;
li {
border-bottom: #ddd 1px dotted;
a {
display: block; padding: 5px 0; color: #666;
&:hover {color: @linkColor;}
}
}
}
}
//archivements
.module.archivements {
.modcontent{
padding: 0 20px;
}
ul{
padding: 0;
list-style: none;
li{
list-style: none;
padding: 0;
margin: 0 0 20px;
border: none;
&:last-child{
margin: 0;
}
}
a{
font-size: 12px;
color: #666;
&:hover{
color: @linkColor;
}
&:before{display: none;}
}
}
}
//categories content
ul.categories-module{
padding: 0;
list-style: none;
margin: 0;
li{
padding: 15px;
margin: 0;
border-bottom: 1px solid #e8e8e8;
a{
color: #7d7d7d;
font-size: 13px;
font-weight: bold;
&:hover{
color: @linkColor;
}
}
&:last-child{margin: 0;border: none}
}
}
//archive content
ul.archive-module{
padding: 0;
margin: 0;
list-style: none;
li{
padding: 15px;
margin: 0;
border-bottom: 1px solid #e8e8e8;
a{
color: #7d7d7d;
font-size: 13px;
font-weight: bold;
&:hover{
color: @linkColor;
}
}
&:last-child{margin: 0;border: none}
}
}
//
.module.recent-post{
.sj-basic-news{
margin: 0;
}
.bs-items{
.bs-item{
padding: 15px;
margin: 0;
border-bottom: 1px solid #e8e8e8;
a{
color: #7d7d7d;
font-size: 13px;
font-weight: bold;
&:hover{
color: @linkColor;
text-decoration: none;
}
}
&:last-child{margin: 0;border: none}
}
}
}
//slideshow
div.news-scroller{
.scroller-container{
background: none;
box-shadow: none;
padding: 0;
border-radius: 0;
&.nav-style2 div.iview-directionNav{
a.iview-prevNav{
background: url(../images/icon/row-left.png) no-repeat 0 0;
height: 62px;
width: 34px;
&:hover{
background: url(@{base-url}/row-left.png) no-repeat 0 0;
}
}
a.iview-nextNav{
background: url(../images/icon/row-right.png) no-repeat 0 0;
height: 62px;
width: 34px;
&:hover{
background: url(@{base-url}/row-right.png) no-repeat 0 0;
}
}
}
&.nav-style2{
.iview-tooltip{
background: none;
}
.iview-controlNav{
background: none;
opacity: 1 !important;
display: inline-block;
width: auto;
top: auto;
bottom: 20px;
right: auto;
margin: 0 !important;
.lib-tranlate-x();
a img{
height: auto;
width: auto;
border: none;
margin: 0;
border-radius: 0;
&:hover{
opacity: 1;
}
}
.iview-items ul{padding: 0;text-align: center;}
div.iview-items{
padding: 0;
background: none;
display: inline-block;
> ul >li{
display: inline-block;
padding: 0 5px;
width: 20%;
margin: 0;
.iview-control{
display: inline-block;
background: #000;
border: 1px solid transparent;
transition: all 0.3s ease-in-out;
height: 16px;
width: 16px;
border-radius: 50%;
background: none;
position: relative;
&:before{
content: "";
height: 8px;
width: 8px;
border-radius: 50%;
background: #fff;
top: 50%;
left: 50%;
position: absolute;
.lib-tranlate-xy();
}
img{
opacity: 0.6;
transition: all 0.3s ease-in-out;
}
&:hover, &.active{
border: 1px solid #fff;
img{
opacity: 1;
transition: all 0.3s ease-in-out;
}
}
}
}
}
}
.iviewSlider {
border-radius: 0;
.iview-caption{
height: auto !important;
padding: 0;
border-radius: 0;
overflow: visible;
text-align: center;
background: none;
.title-faq{
color: @linkColor;
display: block;
font-size: 20px;
font-weight: bold;
text-shadow: none;
text-transform: uppercase;
white-space: nowrap;
}
.ns-description{
text-align: left;
h3.title{
font-size: 70px;
text-transform: uppercase;
color: #fff;
text-shadow: none;
}
p{
width: 50%;
text-shadow: none;
font-size: 16px;
margin: 0 0 50px;
}
.list-button{
padding: 0;
list-style: none;
margin: 0 -10px;
>li{
display: inline-block;
padding: 0 10px;
a{
background: none;
padding: 11px 28px;
border: 1px solid #f1f1f1;
font-size: 16px;
color: #fff;
font-weight: bold;
text-shadow: none;
text-transform: uppercase;
&:hover{
background: @background1;
border-color: @linkColor;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}
}
&.view-more{
a{
background: @background1;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
border-color: @linkColor;
&:hover{
box-shadow: none;
border-color: #fff;
background: none;
}
}
}
}
}
}
}
}
}
}
}
// dev-mod-k2-grid
.module.dev-mod-k2-grid{
overflow: hidden;
margin: 0 0 60px;
h3.modtitle{
font-size: 26px;
text-transform: uppercase;
color: #222;
padding: 0 8px;
position: relative;
z-index: 2;
margin: 0 0 25px;
&:before{
content: "";
height: 2px;
width: 20px;
display: inline-block;
background: @background1;
position: absolute;
left: 0;
top: 50%;
z-index: -1;
.lib-tranlate-y();
}
}
.sj-gridslider{
margin: 0;
.owl-controls{
position: absolute;
top: -60px;
right: 0;
.owl-buttons{margin: -4px;}
.owl-prev{
position: relative;
display: inline-block;
background: none;
left: auto;
width: 20px;
margin: 0 4px;
&:before{
content: "\f177";
display: block;
position: absolute;
top: 0;
left: 0;
font-family: fontawesome;
line-height: 50px;
margin: 0;
height: 100%;
width: 100%;
text-indent: 0px;
font-size: 16px;
background: none;
opacity: 1;
}
&:after{
display: none;
}
&:hover{
color: @linkColor;
}
}
.owl-next{
position: relative;
display: inline-block;
background: none;
right: auto;
width: 20px;
margin: 0 4px;
&:before{
content: "\f178";
display: block;
position: absolute;
top: 0;
left: 0;
font-family: fontawesome;
line-height: 50px;
margin: 0;
height: 100%;
width: 100%;
text-indent: 0px;
font-size: 16px;
background: none;
opacity: 1;
}
&:after{
display: none;
}
&:hover{
color: @linkColor;
}
}
}
.gridslider-inner {
overflow: visible;
.two-item .item-wrap:nth-child(1) .item-wrap-inner{margin: 0 0 30px;}
.item-wrap img{max-width: none;}
.owl-item{
.item-wrap-inner{.lib-item-mod();}
&.active{
margin-right: 30px;
}
.item-image{
margin: 0 0 8px;
}
.item-wrap .item-info{
position: static;
padding: 0;
&:before{
display: none;
}
.item-title a{
color: #222;
font-weight: bold;
font-size: 14px;
margin: 0;
}
.item-content{
max-height: none !important;
.item-description{
color: #444;
}
}
}
}
&:hover{
.owl-prev,
.owl-next{
animation: none;
-moz-animation: none;
-webkit-animation: none;
}
}
}
}
}
//dev-social-counter
.module.dev-social-counter{
margin: 0 0 20px;
.sj-social-media-counts{
.sc-wrap{
margin: 0 -5px;
.sc-item{
width: 25%;
margin: 0 0 10px;
padding: 0 5px;
height: auto;
.sc-item-inner{
margin: 0;
.sc-icon{
border: none;
width: 100%;
height: auto;
line-height: normal;
font-size: 18px;
padding: 5px;
}
.text-count{
position: relative;
display: inline-block;
overflow: hidden;
width: 100%;
.like-count{
padding: 0;
text-align: center;
display: inline-block;
width: 100%;
margin: 0;
position: absolute;
top: -100%;
left: 50%;
font-size: 12px;
.lib-tranlate-xy;
transition: all 0.3s ease-in-out;
}
.like-text{
padding: 0;
text-align: center;
font-size: 12px;
.lib-tranlate-yo();
transition: all 0.3s ease-in-out;
}
}
}
&:hover{
.text-count {
.like-count{
top: 50%;
transition: all 0.3s ease-in-out;
}
.like-text{
transform: translateY(100%);
transition: all 0.3s ease-in-out;
}
}
}
}
}
}
}
// Tabs
.module.dev-mod-tabs{
margin: 0 0 20px;
div.moduletabs.top-position {
margin: 0;
div.tabs-container{
border: none;
margin: 0 0 20px;
.tabs{
>li{
width: 50%;
.tab{
border: none;
background: #f5f5f5;
text-transform: uppercase;
font-weight: bold;
text-align: center;
font-size: 16px;
color: #999;
&.selected{
background: @background1;
color: #fff;
&:hover{
background: @background1;
color: #fff;
}
}
&:hover{
background: #ebebeb;
}
}
}
}
}
}
.tabs-content{
padding: 0;
border: none;
.dev-k2-content{
.module.k2-recent-new();
li.clearList{margin: 0;}
}
}
}
//************************* Custom HTML *******************
//
.module.banner{
ul.list-item{margin-bottom:0;}
.item a{
display: inline-block;
overflow: hidden;
position: relative;
background: #000;
transition: all 0.5s ease-in-out;
img{
opacity: 1;
transition: all 0.5s ease-in-out;
}
&:before{
content: "";
position: absolute;
top: 30px;
bottom: 30px;
left: 20px;
right: 100%;
border-width: 1px 0;
border-style: solid;
border-color: #fff;
opacity: 1;
opacity: 0;
transition: all 0.5s ease-in-out;
}
&:after{
content: "";
position: absolute;
top: 20px;
bottom: 100%;
left: 30px;
right: 30px;
border-width: 0 1px;
border-style: solid;
border-color: #fff;
opacity: 0;
transition: all 0.5s ease-in-out;
}
&:hover{
&:before{
right: 20px;
opacity: 0.6;
transition: all 0.5s ease-in-out;
}
&:after{
bottom: 20px;
opacity: 0.4;
transition: all 0.5s ease-in-out;
}
img{
opacity: 0.5;
transition: all 0.5s ease-in-out;
}
}
}
}
//
.module.delivery{
font-size: 12px;
color: #2d2d2d;
p{
margin: 0;
line-height: 40px;
}
}
//
.module.phone-mail{
margin: 0;
text-align: right;
padding: 40px 0 0;
ul{
display: inline-block;
margin: 0;
padding-left: 45px;
background: url(../images/icon/phone.png) no-repeat left center;
>li{
color: #fff;
}
}
}
//
.module.shipping{
margin: 0;
.list-item{
> .item{
display: inline-block;
width: 33.3333%;
float: left;
font-size: 14px;
color: #7d7d7d;
padding: 10px 0 0;
strong{
color: #222;
&:before{
content: "\f00c";
font-family: fontawesome;
display: inline-block;
margin-right: 8px;
}
}
}
}
}
//
.module.brand{
#owl-carousel-brand{
margin: 0;
border: 1px solid #ebebeb;
padding: 30px 80px;
border-radius: 8px;
.owl-prev, .owl-next{
position: absolute;
margin: 0 2px;
height: 40px;
width: 40px;
border-radius: 50%;
color: #c3c3c3;
border: 2px solid #c3c3c3;
text-align: center;
font-size: 0;
background: #fff;
&:before{
font-family: fontawesome;
font-size: 18px;
line-height: 38px;
}
&:hover{
color: @linkColor;
border-color: @linkColor;
}
}
.owl-prev{
left: 10px;
top: 50%;
.lib-tranlate-y();
&:before{
content: "\f0d9";
}
}
.owl-next{
right: 10px;
top: 50%;
.lib-tranlate-y();
&:before{
content: "\f0da"
}
}
img{
width: auto;
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
opacity: 0.5;
&:hover{
-webkit-filter: grayscale(0); /* Safari 6.0 - 9.0 */
filter: grayscale(0);
opacity: 1;
}
}
}
}
//
.module.logo-bottom{
border-bottom: 1px solid #373737;
text-align: center;
padding-bottom: 40px;
margin: 0 0 40px;
.img-logo{
margin: 0 0 38px;
}
p{
width: 50%;
margin: 0 auto 20px;
color: #7d7d7d;
line-height: 28px;
}
.social{
.follow-text{
display: inline-block;
padding: 0 10px;
text-transform: uppercase;
color: #fff;
font-weight: bold;
font-size: 16px;
}
.list-social-footer{
display: inline-block;
padding: 0 10px;
.item{
display: inline-block;
a{
height: 35px;
width: 35px;
border-radius: 35px;
background: #fff;
line-height: 38px;
color: #222;
display: inline-block;
&:hover{
background: @background1;
color: #fff;
}
}
}
}
}
}
//list-social-footer
.list-social-footer{
margin: 0 -4px;
.item{
display: inline-block;
padding: 0 4px;
a{
color: #888;
i{
font-size: 0;
&:before{
font-size: 18px;
}
}
&:hover{
color: #fff;
}
}
}
}
#myModal .modal-dialog{
z-index: 999;
}
//dev-gallery
#fancybox-title{
width: auto !important;
margin: 0 !important;
left: 10px;
right: -10px;
}
.rtl #fancybox-title{
left: -10px;
right: 10px;
}
//Newletter
.module.newsletter{
margin: 0;
h3.modtitle{
font-size: 16px;
color: #fff;
text-transform: uppercase;
text-align: center;
margin: 0 0 30px;
}
.acymailing{
width: 45%;
margin: 0 auto;
.acymailing_form{
position: relative;
border-radius: 50px;
overflow: hidden;
.inputbox{
min-height: 42px;
padding: 4px 35px;
margin: 0 -5px;
border-radius: 100px;
}
.subbutton {
position: absolute;
right: 0;
top: 0;
height: 100%;
background: @background1;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
padding: 0 30px;
&:hover{
background: darken(@background1, 20%);
}
}
}
}
}
//Module Search
.chzn-container-single .chzn-search input[type="text"]{min-height: 24px;}
.module.smart-search {
margin: 0;
padding: 12px 0;
.mod-finder-searchform{
position: relative;
display: inline-block;
float: right;
#mod-finder-searchword{
width: 245px;
border: none;
height: 40px;
color: #666;
padding-right: 40px;
border: 1px solid #e1e1e1;
}
button.btn {
position: absolute;
top: 0;
right: 0;
bottom: 0;
background: none;
color: #666;
padding: 0 20px;
&:before{
content: "";
height: 15px;
width: 1px;
background: #ccc;
left: 0;
top: 50%;
margin-top: -7px;
position: absolute;
}
&:hover .icon-search{
color: @linkColor;
}
}
}
}
//Module Login
.sjlogin {
float: right; display: inline-block !important;
.sjloginbt {
text-transform: uppercase; padding: 5px 15px; border-radius: 5px; border-bottom: darken(@background1,10%) 2px solid;
&:hover {background: darken(@background1,10%);}
}
.dropdown-menu {
float: right; left: auto; right: 0; min-width: 210px; padding:10px 20px;
.control-group {
margin-bottom: 5px;
.input-small {width: 100%;}
button.btn.btn-primary {
background: @background1;
&:hover {background: darken(@background1, 10%);}
}
ul.unstyled {
li {
a {
color: @linkColor;
&:hover {color: darken(@linkColor,10%);}
}
}
}
}
}
&.open {
.sjloginbt { background: darken(@background1,10%);}
.checkbox input[type="checkbox"] {position: relative; margin: 0;}
}
}
#login-form.form-vertical {
float: right; display: inline-block; padding: 0;
.logout-button .btn {
text-transform: uppercase; padding: 5px 15px; border-radius: 5px; border-bottom: darken(@background1,10%) 2px solid;
&:hover {background: darken(@background1,10%); color: #fff;}
}
}
//Module Sj Flatmenu
.module.mcat {
ul.menu {
margin: -10px 0 0; padding: 0;
li {
display: block; padding: 5px 0; border-bottom: #ebebeb 1px solid;
a {
color: #222; position: relative; font-weight: 300; display: block;
&:before {
font-family: fontawesome; content: "\f111"; color: #222; margin-right: 10px;
font-size: 6px; position: relative; top: -2px;
}
&:hover {
color: @linkColor;
&:before {color: @linkColor;}
}
}
}
}
}
// ********************** Content Module *******************
.module.the-blog{
h3.modtitle{
text-align: center;
font-size: 18px;
color: #222;
text-transform: uppercase;
margin: 0 0 30px;
span{
padding: 0 0 15px;
position: relative;
display: inline-block;
&:before{
content: "";
height: 2px;
width: 60%;
position: absolute;
bottom: 0;
left: 50%;
.lib-tranlate-x();
background: @background1;
}
}
}
.sj-basic-news{
margin: 0;
overflow: visible;
#owl-carousel-blog{
position: relative;
.owl-controls{
position: absolute;
top: -60px;
right: -2px;
}
.owl-prev, .owl-next{
margin: 0 2px;
height: 27px;
width: 27px;
border-radius: 27px;
border: 2px solid #c3c3c3;
color: #c3c3c3;
text-align: center;
font-size: 0px;
display: inline-block;
position: relative;
&:before{
font-family: fontawesome;
font-size: 16px;
line-height: 22px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&:hover{
color: @linkColor;
border-color: @linkColor;
background: none;
}
}
.owl-prev{
&:before{
content: "\f0d9";
}
}
.owl-next{
&:before{
content: "\f0da";
left: 2px;
}
}
}
.bs-items{
overflow: visible;
.catItemView{
display: block;
overflow: hidden;
position: relative;
.item-image{
margin: 0 0 20px;
display: block;
overflow: hidden;
img{transform-style: none;}
}
.catItemTitle{
margin: 0 0 2px;
a {
font-size: 14px;
color: #222;
text-decoration: none;
}
}
.readmore{
font-size: 13px;
color: @linkColor;
text-decoration: none;
i{margin-right: 4px;}
&:hover{color: #444;}
}
.catItemBody{
padding: 0 0 10px;
margin: 0 0 10px;
border-bottom: 1px solid #ebebeb;
.catToolbar{
margin: 0 -10px;
>li{
display: inline-block;
padding: 0 10px;
font-size: 13px;
color: #909090;
a{
color: #909090;
font-weight: normal;
&:hover{
color: @linkColor;
text-decoration: none;
}
}
}
}
}
&:before{
background: #fff;
content: "";
height: 100px;
left: -110px;
position: absolute;
top: -20px;
transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 200px;
z-index: 2;
}
.date{
position: absolute;
top: 0;
left: 0;
padding: 0 3px;
overflow: hidden;
display: block;
z-index: 3;
span{
display: block;
color: #909090;
&.day{
font-size: 24px;
font-weight: bold;
transition: all 0.3s ease-in-out
}
&.month{
font-size: 14px;
transition: all 0.3s ease-in-out
}
&.year{
transform: translateY(100%);
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
}
}
}
&:hover{
.catItemTitle a{
color: @linkColor;
}
.date {
span.year{
transform: translateY(-100%);
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transition-delay: 0.3s
}
span.day, span.month{
transform: translateY(-100%);
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transition: all 0.3s ease-in-out
}
}
}
}
}
}
}
// ********************** VM Module ************************
//
.module.mini-cart{
margin: 0;
.sj-minicart-pro .mc-wrap{
height: auto;
width: 100%;
.mc-header{
text-align: right;
height: auto;
width: 100%;
overflow: visible;
padding: 12px 0;
.mc-totalprice{
float: right;
display: inline-block;
padding: 0;
background: none;
border: none;
font-weight: bold;
padding: 7px 10px;
}
.mc-yourcart{
float: right;
display: inline-block;
padding: 0;
height: 36px;
width: 36px;
border-radius: 36px;
position: relative;
background: #fff url(../images/icon/cart.png) no-repeat center;
.mc-totalproduct{
background: #ff5c00;
border-radius: 50%;
display: block;
font-size: 14px;
height: 20px;
line-height: normal;
overflow: hidden;
padding: 0;
text-align: center;
width: 20px;
position: absolute;
top: -6px;
right: -10px;
}
}
}
.mc-content{
left: auto;
right: 0;
border: 1px solid #eaeaea;
box-shadow: 0 2px 2px #ccc;
padding: 20px 10px;
.mc-empty{
color: @linkColor;
font-size: 12px;
text-transform: uppercase;
font-weight: bold;
}
.mc-top{
background: none;
margin: 0 15px 30px;
.mc-header{
color: #7d7d7d;
text-align: left;
width: auto;
small{
color: @linkColor;
}
}
.mc-update-btn{
background: @background1;
border-radius: 0;
top: 28px;
right: 12px;
position: absolute;
&:hover{
background: #00cc00;
}
}
}
.mc-list{
.mc-product:last-child{
.mc-product-inner{border: none}
}
.mc-product-inner{
border-bottom: 1px solid #ebebeb;
margin: 0 0 25px;
.mc-image{
border: 1px solid #ebebeb;
}
.mc-attribute{
.attr-name{
margin: 0 0 15px;
padding: 0;
a{
color: #222;
font-size: 14px;
font-weight: 800;
text-decoration: none;
&:hover{
color: @linkColor;
}
}
}
.attr-price{
margin: 0 0 12px;
span.value{
font-size: 16px;
font-weight: bold;
color: @linkColor;
}
}
.attr-quantity{
margin: 0;
.quantity-control{
border: 1px solid #ebebeb;
.quantity-plus{
display: block;
background: none;
margin: 0;
height: 17px;
position: relative;
&:before{
content: "\f0d8";
position: absolute;
font-family: fontawesome;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-align: center;
color: #4f4f4f;
font-size: 14px;
}
}
.quantity-minus{
display: block;
background: none;
margin: 0;
height: 17px;
position: relative;
&:before{
content: "\f0d7";
position: absolute;
font-family: fontawesome;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-align: center;
color: #4f4f4f;
font-size: 14px;
}
}
}
}
}
.mc-remove{
background: none;
&:before{
content: "\f014 ";
position: absolute;
font-family: fontawesome;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-align: center;
color: #4f4f4f;
font-size: 14px;
}
&:hover:before{color: red;}
}
}
}
.mc-coupon{
border-top: 1px solid #ebebeb;
padding: 20px 0;
height: auto;
.coupon-title{
font-size: 14px;
color: #222;
font-weight: bold;
margin: 0;
}
.coupon-input{
input.coupon-code{
padding: 0 20px;
}
.coupon-button-add{
height: 37px;
line-height: 37px;
background: @background1;
border-radius: 0;
&:hover{background: #444;}
}
}
}
.mc-footer{
border-top: 1px solid #ebebeb;
.mc-totalprice-footer{
font-size: 14px;
color: #222;
text-align: left;
display: block;
margin: 25px 0;
strong{
color: @linkColor;
font-weight: bold;
float: right;
font-size: 22px;
}
}
.mc-gotocart{
background: none;
border: 1px solid #ebebeb;
border-radius: 0;
color: #222;
font-size: 14px;
font-weight: bold;
padding: 12px 20px;
&:hover{
color: #fff;
background: #444;
border-color: #444;
}
}
.mc-checkout-footer{
background: @background1;
border-radius: 0;
color: #fff;
font-size: 14px;
font-weight: bold;
padding: 12px 20px;
height: auto;
.mc-checkout{
border: none;
padding: 0;
background: none;
line-height: normal;
}
.mc-checkout-arrow{display: none;}
&:hover{
background: #444;
}
}
}
}
}
}
//
.module.shop-by{
.sj-vm-filter{
.ft-wrap .ft-group{
margin: 0;
border: none;
.ft-heading {
font-size: 13px;
color: #222;
font-weight: bold;
background: none;
border-bottom: 1px solid #e8e8e8;
}
.ft-content{
padding: 0;
.ft-opt-clearall{
margin: 0 15px;
}
.ft-option{
padding: 12px 16px;
border-bottom: 1px solid #e8e8e8;
.ft-opt-inner{
.ft-opt-close{display: none;}
span{
color: #7d7d7d;
font-size: 13px;
font-weight: 600;
}
&:hover span{
color: @linkColor;
}
}
}
}
//group-size
&.ft-group-size{
input{display: none;}
.ft-content{
.ft-select {
padding: 20px 16px;
.ft-option{
display: inline-block;
border: 1px solid #e8e8e8;
padding: 0;
font-size: 12px;
line-height: normal;
.ft-opt-inner{
padding: 8px;
display: inline-block;
cursor: pointer;
min-width: 30px;
}
&:hover{
border-color: @linkColor;
background: @background1;
color: #fff;
span{color: #fff;}
}
}
}
}
}
//group-color
&.ft-group-color{
.ft-content .ft-opt-clearall{
margin: 16px;
}
.ft-select{
border: none;
margin: 0;
padding: 20px 16px 0;
.ft-option{
padding: 1px;
border: 1px solid #e8e8e8;
width: auto;
.ft-color-value{
width: 32px;
height: 32px;
}
}
}
}
//
&.ft-group-manuafactures{
.ft-opt-clearall{margin-top: 10px;}
}
//current-label
&.ft-filtering {
.ft-current-label{
padding: 20px 16px;
margin: 0;
}
.ft-current-group{
padding: 0 16px;
color: @linkColor;
}
.ft-option .ft-opt-close{
right: 16px;
}
.ft-content .ft-opt-clearall{
margin: 16px;
}
}
//ft-group-prices
&.ft-group-prices{
.ft-slider-price{
height: 8px;
border: none;
border-radius: 8px;
background: #555;
margin: 20px 0;
.ui-slider-range{
background: @background1;
}
&.ui-slider-horizontal .ui-slider-handle{
height: 16px;
width: 16px;
border-radius: 16px;
border-color: #e9e9e9;
background: #fff;
top: -4px;
}
}
.ft-content-prices {
.ft-price-value input[type="text"]{
min-height: 30px;
}
.ft-opt-inner .ft-price-curent{border-width: 1px;border-style: solid;border-color: #e8e8e8;}
}
.ft-content-prices .ft-opt-inner{
&:hover{
span{
color: #7d7d7d;
}
}
}
}
}
}
}
// Extra slider best sellers
.module.best-sellers{
.extraslider-inner{
border: none;
.item {
.item-wrap-inner{
margin: 0;
padding: 0;
.item-image{
display: inline-block;
float: left;
width: auto;
padding: 0 12px;
&:hover{
box-shadow: none;
}
}
.item-info{
display: block;
overflow: hidden;
width: auto;
background: none;
.item-title{
padding: 0;
margin: 15px 0 0;
a{
color: #222;
font-size: 14px;
text-transform: capitalize;
font-weight: 500;
}
}
.item-addtocart{
.addtocart-button input{
margin: 0;
background: none;
color: #909090;
padding: 0;
border: none;
font-size: 13px;
&:hover{
color: @linkColor;
}
}
}
.item-content{
margin: 0;
.PricesalesPrice{
font-weight: bold;
font-size: 16px;
color: @linkColor;
}
.item-readmore a{color: #444;}
}
}
&:hover{
.item-info .item-title a{color: @linkColor;}
}
}
}
}
}
//
.module.vm-search{
margin: 0;
.sj-search-pro-wrapper{
padding: 39px 0 0;
.select_category{
width: 22%;
border: none;
border-right: 1px solid @linkColor;
border-radius: 30px;
height: 45 px;
&:before{
content: "\f0d7";
position: absolute;
top: 12px;
right: 10px;
font-family: fontawesome;
}
select{
height: 45px;
line-height: 45px;
padding: 0 18px;
cursor: pointer;
}
.chzn-container{
margin: 0;
.chzn-single{
border: none;
background: none;
border-radius: 0;
box-shadow: none;
height: 45px;
line-height: 45px;
margin: 0;
color: #232f3e;
padding: 0 20px;
font-size: 13px;
div b{
background-position: 0 15px;
}
}
}
}
.autosearch-input{
height: 45px;
border: none;
background: #fff;
&:-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #7d7d7d;
}
&:-moz-placeholder { /* Firefox 19+ */
color: #7d7d7d;
}
&:-ms-input-placeholder { /* IE 10+ */
color: #7d7d7d;
}
&:-moz-placeholder { /* Firefox 18- */
color: #7d7d7d;
}
}
.input-group-btn {
.button-search{
height: 45px;
border: none;
background: darken(@background1, 10%);
padding: 0 30px;
color: #fff;
box-shadow: none;
border-radius: 0 30px 30px 0;
&:hover{
background: #2d2d2d;
}
}
}
.dropdown-menu-sj{
.media-body{
a{
font-size: 14px;
color: #222;
font-weight: bold;
&:hover{
color: @linkColor;
}
}
.PricesalesPrice{
font-size: 16px;
color: @linkColor;
font-weight: bold;
}
.PricediscountAmount{
color: #7d7d7d;
font-size: 14px;
font-weight: bold;
}
}
}
}
}
//
div.sj-listing-tabs .ltabs-wrap{
.ltabs-tabs-container{
margin: 0;
.ltabs-tabs{
text-align: center;
margin: 0 0 30px;
.ltabs-tab{
float: none;
display: inline-block;
padding: 0;
margin: 0;
border: none;
&:after{
content: "/";
display: inline-block;
margin: 0 10px;
color: #e6e6e6;
font-size: 30px;
position: relative;
}
&:last-child:after{display: none;}
.ltabs-tab-label{
padding: 0 0 7px;
font-size: 18px;
color: #222;
font-weight: bold;
display: inline-block;
position: relative;
}
&.tab-sel, &:hover{
background: none;
.ltabs-tab-label{
color: @linkColor;
&:before{
content: "";
height: 2px;
width: 80%;
position: absolute;
bottom: 0;
left: 50%;
.lib-tranlate-x();
background: @background1;
}
}
}
}
}
}
.ltabs-items-container {
position: relative;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
overflow: visible;
margin-bottom: 10px;
&:before{
content: "";
height: 100%;
width: 1px;
position: absolute;
top: 0;
left: 0;
background: #ebebeb;
}
&:after{
content: "";
height: 100%;
width: 1px;
position: absolute;
top: 0;
right: 0;
background: #ebebeb;
}
.owl2-controls{
position: absolute;
top: -66px;
right: -2px;
.owl2-prev, .owl2-next{
position: relative;
margin: 0 2px;
height: 27px;
width: 27px;
border-radius: 27px;
border: 2px solid #c3c3c3;
color: #c3c3c3;
&:before{
font-size: 16px;
line-height: 22px;
width: 100%;
height: 100%;
border-radius: 50%;
top: 0;
left: 0;
text-align: center;
position: absolute;
}
&:hover{
color: @linkColor;
background: none;
border-color: @linkColor;
}
}
.owl2-prev{
&:before{
content: "\f0d9";
}
}
.owl2-next{
&:before{
content: "\f0da";
left: 2px;
}
}
}
.ltabs-items{overflow: visible}
.ltabs-items-inner{overflow: visible;}
.ltabs-items .ltabs-slider .ltabs-item{
margin: 0;
.product-container{
padding: 0;
margin: 0;
border-width: 0 0 0 1px;
border-style: solid;
border-color: #ebebeb;
overflow: hidden;
position: relative;
.vm-product-media-container{
position: relative;
.browseProductImage{
max-height: none;
}
.sj_quickview_handler{
height: 40px;
width: 40px;
border-radius: 50%;
background: @background1;
color: #fff;
position: absolute;
top: 0;
left: 50%;
.lib-tranlate-xy();
font-size: 0;
transition: all 0.3s ease-in-out;
opacity: 0;
&:before{
content: "\f002";
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
line-height: 40px;
text-align: center;
font-size: 14px;
font-family: fontawesome;
}
&:hover{
background: #444;
}
}
}
.vm-product-rating-container{
display: block;
width: 100%;
text-align: center;
.ratingbox{
float: none;
margin: 0;
}
.vmicon{display: none;}
.availability{
display: none;
}
}
.group-title-des{
min-height: auto;
text-align: center;
h2 a{
font-size: 14px;
color: #222;
font-weight: 500;
}
.product_s_desc{
display: none;
}
}
.product-price{
width: 100%;
text-align: center;
min-height: 32px;
.PricesalesPrice{
display: inline-block;
font-size: 16px;
color: @linkColor;
font-weight: bold;
margin: 0 2px;
}
.PricebasePriceVariant{
display: inline-block;
font-size: 14px;
color: #7d7d7d;
text-decoration: line-through;
font-weight: 600;
}
}
.group-addtocart{
position: absolute;
bottom: -50%;
left: 1px;
right: 1px;
background: #fff;
padding: 25px 0;
opacity: 0;
text-align: center;
transition: all 0.4s ease-in-out;
.addtocart-area{min-height: auto;}
.vm-customfields-wrap{
display: none;
}
.addtocart-button {
font-size: 13px;
font-weight: 600;
background: @background1;
border-radius: 20px;
border: none;
text-transform: capitalize;
padding: 2px 5px 4px;
display: inline-block;
line-height: normal;
.addtocart-button{background: none;}
&:hover{
background: darken(@background1, 20%);
}
}
.quantity-box{
border: 1px solid #ebebeb;
padding: 0 10px;
display: none;
.quantity-input{
border: none;
font-weight: bold;
min-height: 30px;
height: 30px;
width: 35px;
}
.quantity-minus{
background: url(../images/icon/mins.png) no-repeat scroll center center;
border: none;
}
.quantity-plus{
background: url(../images/icon/plus.png) no-repeat scroll center center;
border: none;
}
}
}
&:hover{
.group-addtocart{
opacity: 1;
bottom: 0;
transition: all 0.4s ease-in-out;
}
.sj_quickview_handler{
opacity: 1;
top: 50%;
transition: all 0.3s ease-in-out;
}
}
}
}
}
}
//
.module.featured-products{
h3.modtitle{
text-align: center;
font-size: 18px;
color: #222;
text-transform: uppercase;
margin: 5px 0 30px;
width:100%;
display: inline-block;
span{
padding: 0 0 15px;
position: relative;
display: inline-block;
&:before{
content: "";
height: 2px;
width: 60%;
position: absolute;
bottom: 0;
left: 50%;
.lib-tranlate-x();
background: @background1;
}
}
}
.sj-extra-slider{
margin: 0;
position: relative;
.owl-controls{
position: absolute;
top: -60px;
right: -2px;
.owl-prev, .owl-next{
position: relative;
margin: 0 2px;
height: 27px;
width: 27px;
border-radius: 27px;
border: 2px solid #c3c3c3;
color: #c3c3c3;
text-align: center;
&:before{
font-family: fontawesome;
font-size: 16px;
line-height: 22px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&:hover{
color: @linkColor;
border-color: @linkColor;
background: none;
}
}
.owl-prev{
&:before{
content: "\f0d9";
}
}
.owl-next{
&:before{
content: "\f0da";
left: 2px;
}
}
}
.extraslider-inner{
padding: 0;
position: relative;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
&:before{
content: "";
height: 100%;
width: 1px;
position: absolute;
top: 0;
left: 0;
background: #ebebeb;
}
&:after{
content: "";
height: 100%;
width: 1px;
position: absolute;
top: 0;
right: 0;
background: #ebebeb;
}
.item-wrap{
img{
transform-style: inherit;
width: auto;
}
.product-container{
padding: 0;
margin: 0;
border-width: 0 0 0 1px;
border-style: solid;
border-color: #ebebeb;
overflow: hidden;
position: relative;
.vm-product-media-container{
position: relative;
margin: 0;
.browseProductImage{
max-height: none;
}
.sj_quickview_handler{
height: 40px;
width: 40px;
border-radius: 50%;
background: @background1;
color: #fff;
position: absolute;
top: 0;
left: 50%;
.lib-tranlate-xy();
font-size: 0;
transition: all 0.3s ease-in-out;
opacity: 0;
&:before{
content: "\f002";
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
line-height: 40px;
text-align: center;
font-size: 14px;
font-family: fontawesome;
}
&:hover{
background: #444;
}
}
}
.vm-product-rating-container{
display: block;
width: 100%;
text-align: center;
.ratingbox{
float: none;
margin: 0;
}
.vmicon{display: none;}
.availability{
display: none;
}
}
.group-title-des{
min-height: auto;
text-align: center;
h2 a{
font-size: 14px;
color: #222;
font-weight: 500;
}
.product_s_desc{
display: none;
}
}
.product-price{
width: 100%;
text-align: center;
min-height: 32px;
.PricesalesPrice{
display: inline-block;
font-size: 16px;
color: @linkColor;
font-weight: bold;
margin: 0 2px;
}
.PricebasePriceVariant{
display: inline-block;
font-size: 14px;
color: #7d7d7d;
text-decoration: line-through;
font-weight: 600;
}
}
.group-addtocart{
position: absolute;
bottom: -50%;
left: 0;
width: 100%;
background: #fff;
padding: 25px 0;
opacity: 0;
text-align: center;
transition: all 0.4s ease-in-out;
.addtocart-area{min-height: auto;}
.vm-customfields-wrap{
display: none;
}
.addtocart-button {
font-size: 13px;
font-weight: 600;
background: @background1;
border-radius: 20px;
border: none;
text-transform: capitalize;
padding: 2px 5px 4px;
display: inline-block;
line-height: normal;
.addtocart-button{background: none;}
&:hover{
background: darken(@background1, 20%);
}
}
.quantity-box{
border: 1px solid #ebebeb;
padding: 0 10px;
display: none;
.quantity-input{
border: none;
font-weight: bold;
min-height: 30px;
height: 30px;
width: 35px;
}
.quantity-minus{
background: url(../images/icon/mins.png) no-repeat scroll center center;
border: none;
}
.quantity-plus{
background: url(../images/icon/plus.png) no-repeat scroll center center;
border: none;
}
}
}
&:hover{
.group-addtocart{
opacity: 1;
bottom: 0;
transition: all 0.4s ease-in-out;
}
.sj_quickview_handler{
opacity: 1;
top: 50%;
transition: all 0.3s ease-in-out;
}
}
}
}
}
}
}
//
.module.featured-categories{
margin: 0 -30px 10px;
h3.modtitle{
text-align: center;
font-size: 18px;
color: #222;
text-transform: uppercase;
margin: 0 0 30px;
span{
padding: 0 0 10px;
position: relative;
display: inline-block;
&:before{
content: "";
height: 2px;
width: 60%;
position: absolute;
bottom: 0;
left: 50%;
.lib-tranlate-x();
background: @background1;
}
}
}
.sj-categories{
margin: 0;
padding: 30px;
background: #fff;
#owl-carousel-cate-featured{
position: relative;
.owl-prev, .owl-next{
position: absolute;
margin: 0 2px;
height: 32px;
width: 32px;
border-radius: 27px;
color: #c3c3c3;
text-align: center;
font-size: 0;
background: #fff;
&:before{
font-family: fontawesome;
font-size: 18px;
line-height: 32px;
}
&:hover{
color: #fff;
background: @background1;
}
}
.owl-prev{
left: 10px;
top: 50%;
.lib-tranlate-y();
&:before{
content: "\f0d9";
}
}
.owl-next{
right: 10px;
top: 50%;
.lib-tranlate-y();
&:before{
content: "\f0da"
}
}
}
.item{
text-align: center;
.cat-title{
padding: 15px 10px;
margin: 0 1px 3px;
box-shadow: 0 2px 3px #dedede;
a{
font-size: 16px;
text-transform: uppercase;
color: #222;
}
}
&:hover{
.cat-title{
background: #222;
margin: 0 0 3px;
a{color: #fff;}
}
}
}
}
}