File: /home/madepabj/hc-cosmetics.com/wp-content/themes/dbea/assets/scss/theme/_snsmenu.scss
/***************************************************
scss file: /assets/scss/theme/_snsmenu.scss
+ Style for main menu
+ Style for Vertical Menu
****************************************************/
#sns_mainmenu {
@media(min-width: $screen-md-max){ display: inline-block !important; }
&.main-cat{
@media(max-width: $screen-md-max){
position: fixed !important; top: 0; right: -290px; width: 290px; padding: 0 20px; height: 100vh; bottom: 0; overflow-y: auto;
background: $white; z-index: 1000; @include transition(all 0.3s ease-out); text-align: left;
ul.main-big-cat,
ul.main-cat{ padding: 0 !important; display: none; text-align: center; }
&.active {
right: 0; @include opacity(1);
}
}
body.admin-bar &{
@media(max-width: $screen-md-max){
top: 32px; height: calc(100vh - 32px);
}
@media (max-width: $screen-md-min){
top: 46px; height: calc(100vh - 46px);
}
@media (max-width: $screen-phone){
top: 0px; height: 100vh; padding-top: 46px;
}
}
}
&:hover {
overflow: visible; position: static;
}
> p.main_navigation_alert{
color: $color; margin: 17px 0;
}
li:hover {z-index: 999;}
ul.navbar-nav {
@include clearfix();
@include ulclear(); float: none;
li.menu-item{ list-style:none;
.megamenu-title{
i{margin-right: 8px;}
img.sns-megamenu-icon-img{
display: inline-block;height: auto;vertical-align: middle; margin-right: 8px;
}
}
a{
i{ margin-right: 8px; font-size: 1em; font-weight: normal; vertical-align: middle; }
img.sns-megamenu-icon-img{
display: inline-block;height: auto; max-width: 25px; vertical-align: middle; margin-right: 8px;
}
&:focus{background: none}
}
}
&.main-cat{ padding: 26px 0 25px; text-align: center;
> li.menu-item{ padding: 0 0; margin: 0 25px;
> a{
&:before{ display: none; }
span{
@include transition(none);
}
i{ margin-right: 10px; font-size: 32px; font-weight: normal; vertical-align: middle; }
img.sns-megamenu-icon-img{
display: inline-block;height: auto; max-width: 25px; vertical-align: middle; margin-right: 10px;
}
}
&:hover{
> a{ color: $color1;
i{ color: inherit; }
}
}
&.current-menu-item,
&.current-menu-parent{
> a{
color: $color1;
i{color: inherit;}
&:before {color: $color1;}
}
}
}
@media(max-width: $screen-md-max){
padding: 10px 0;
> li.menu-item{ padding: 5px 0;
&:first-child{ padding-top: 20px; }
&:last-child{ padding-bottom: 20px; }
float: none; display: block; margin: 0 0; padding: 5px 0;
> a{ padding: 0 0; border: 1px solid $line-border-color; height: 80px; @include border-radius(0px); text-align: center;
&:hover{ border-color: $color1; background-color: $color1; }
span{
display: inline-block;
position: relative; top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
}
}
}
}
&.main-big-cat{
@media(min-width: $screen-md-max){ display: table; margin: 0 auto; }
> li.menu-item{ margin: 0 0; float: left; padding: 0 0;
> a{ border: none; border-right: 1px solid $line-border-color; @include border-radius(0px); text-align: center;
padding: 10px 45px; height: 132px;
@media(max-width:$screen-xlarge) and (min-width: $screen-md-max){
padding: 10px 25px;
}
span{
display: inline-block;
position: relative; top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
i,
img{
display: block; margin: 0 auto 12px;
}
}
&:first-child{
> a{ border-left: 1px solid $line-border-color; }
}
&:hover{
> a{ color: #fff; border-color: $color1; background-color: $color1;
i{color: #fff;}
img.sns-megamenu-icon-img{
filter: grayscale(100%) brightness(1000%); -webkit-filter: grayscale(100%) brightness(1000%);
}
}
}
&.current-menu-item,
&.current-menu-parent{
> a{
color: #fff; border-color: $color1; background-color: $color1;
i{color: #fff;}
&:before {color: $color1;}
img.sns-megamenu-icon-img{
filter: grayscale(100%) brightness(1000%); -webkit-filter: grayscale(100%) brightness(1000%);
}
}
}
}
@media(max-width: $screen-md-max){
> li.menu-item{
float: none; display: block; margin: 0 0; padding: 5px 0;
&:first-child{ padding-top: 20px; }
&:last-child{ padding-bottom: 20px; }
> a{ padding: 0 0; border: 1px solid $line-border-color; height: 100px;
&:hover{ border-color: $color1; }
}
}
}
}
// Level 1
> li.menu-item {
border: none; position: relative; display: inline-block; text-align: left; float: none; margin: 0 20px; padding: 0;
@media (min-width: $screen-lg) and (max-width: $screen-xlarge ){
&:first-child{ margin-left: 0px; }
&:last-child{ margin-right: 0px; }
}
&.enable-mega {
position: static;
.sub-content{
display: none; position: absolute; @include effect-block-hide(); z-index: 999; border: 1px solid $line-border-color; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@include border-radius(3px); @include mega-cols(); left: 0px; background: #fff; padding-bottom: 40px; width: 100%; top: calc(50% + 30px);
&.sub-content-background{
background-position: right bottom; background-repeat: no-repeat;
}
li.menu-item{
position: relative; padding: 0;
a{
padding: 14px 15px; line-height: 1.5; display: block; border-bottom: 1px solid $line-border-color;
}
&:last-child{
> a{ border: none; }
}
&.have-icon{
> a{
i{margin-right: 8px;}
}
}
ul.sub-menu{
padding: 0px 15px 30px 15px;
}
// ul of level n, n >=2
ul.sub-menu:not(.enable-megamenu) {
display: none;position: absolute; padding: 14px 15px; @include effect-block-hide(); border: 1px solid $line-border-color; z-index: 999; width: 220px; left:208px;
}
&:hover{
> ul.sub-menu:not(.enable-megamenu){@include effect-block-show(); top: 2px; z-index: 999}
> a{
color: $color1; background: #f6f6f6;
i{color: $color1;}
&:before {color: $color1;}
}
}
&.current-menu-item{
> a{
color: $color1;
i{color: $color1; }
&:before {color: $color1; }
}
}
}
> ul.columns {
@include mega-cols(); left: 0; position: relative; z-index: 999; margin: 0; padding: 0 30px;
@media(max-width: $screen-md-max){
padding: 0 10px;
}
> li.menu-item{
&:before{
content: "";width: 1px;height: 100%;position: absolute;left: 0;top: 0;
}
&:first-child:before{
display: none;
}
}
li.menu-item{
position: relative;
.megamenu-title{
display: block; margin: 45px 15px 15px 15px; padding: 0 0; font-size: 1.1428em;
a{
color: $link-color; padding: 15px 25px; background: #f3f3f3; border: none; position: relative; display: block;
}
img:hover{
@include opacity(0.8);
}
&:hover{
a{ color: $color1; }
}
}
> ul.sub-menu{
padding: 0 15px;
@media(max-width: $screen-md-max){
}
li.menu-item-has-children{
&:before{ position: absolute; right:20px; top: calc(50% - 4px); @include font-ionicons('\f104', 8px); font-size: 12px;
}
&:hover{
ul.sub-menu{
display: block; @include effect-block-show(); top: 2px; z-index: 999;
}
}
}
li.current-menu-ancestor{
>a{
}
}
ul.sub-menu{
display: none;position: absolute; background: #fff; padding: 15px 20px;@include effect-block-hide(); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 999; width: 220px; left:100%; @include border-radius(3px);
li.menu-item a:hover{
color: $color1;
}
}
}
}
> li.menu-item{
float: left;
}
&.col-1{
> li.menu-item{
width: 100%;
}
}
&.col-2{
> li.menu-item{
width: 50%;
}
}
&.col-3{
> li.menu-item{
width: 33.33%;
}
}
&.col-4{
> li.menu-item{
width: 25%;
}
}
&.col-5{
> li.menu-item{
width: 20%;
}
}
&.col-6{
> li.menu-item{
width: 16.66%;
}
}
}
> ul.columns {
width: 100%;
}
&.has-left-content{ @include clearfix();
> ul.columns {
width: 65%; float: left;
}
.mega-left-content{
padding: 35px 20px 10px; width: 35%; float: left;
}
}
&.has-right-content{ @include clearfix();
> ul.columns {
width: 65%; float: left;
}
.mega-right-content{
padding: 35px 20px 10px; width: 35%; float: left;
}
}
.mega-bottom-content{
padding: 35px 20px 10px; width: 100%; float: left;
}
}
&:hover { // hover on Level 1 megamenu
.sub-content{
display: block; @include effect-block-show(); top: calc(50% + 30px);
}
}
}
ul.sub-menu{
padding: 0 0;
}
// ul of level 2
> ul.sub-menu{
display: none; position: absolute; left: -25px; background: #fff; @include effect-block-hide(); z-index: 999;
min-width: 240px; padding: 0 0; border: 1px solid $line-border-color; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); @include border-radius(3px);
@media(max-width: $screen-md-max){
min-width: 240px;
}
li.menu-item{
position: relative; margin:0px; padding: 0 0;
&:last-child{
> a{ border:none; }
}
a{
padding: 15px 25px; line-height: 1.5; display: block; font-size: 1em; border-bottom: 1px solid $line-border-color;
}
&.have-icon{
> a{
i{margin-right: 10px;}
}
}
&.menu-item-has-children{
&:before{ position: absolute; right: 20px; top: calc(50% - 4px); @include font-ionicons('\f104', 8px); font-size: 12px; }
}
// ul of level n, n >=2
ul.sub-menu:not(.enable-megamenu) {
position: absolute; padding: 0 0; min-width: 240px; background: #fff; top: 0%; left: calc(100% + 20px); border: 1px solid $line-border-color;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); @include border-radius(3px); z-index: 999; @include effect-block-hide-child();
@media(max-width: $screen-md-max){
min-width: 240px;
}
}
&:hover{
> ul.sub-menu:not(.enable-megamenu){
@include effect-block-show-child(); left: 93%;
}
> a{
color: $color1; background: #f6f6f6;
i{color: $color1;}
}
&:before{
color: $color1;
}
}
&.current-menu-item,
&.current-menu-parent{
> a{
color: $color1;
i{color: $color1;}
&:before {color: $color1;}
}
}
}
> li.menu-item{
// level 3
> ul.sub-menu:not(.enable-megamenu){
top: 8px; right: auto; left: calc(100% + 20px);
> li.menu-item{
// level 4
> ul.sub-menu:not(.enable-megamenu){
top: 8px; left: auto; right: calc(100% + 20px);
> li.menu-item{
// level 5
> ul.sub-menu:not(.enable-megamenu){
top: 8px; right: auto; left: calc(100% + 20px);
> li.menu-item{
// level 6
> ul.sub-menu:not(.enable-megamenu){
top: 8px; left: auto; right: calc(100% + 20px);
> li.menu-item{
// level 7
> ul.sub-menu:not(.enable-megamenu){
top: 8px; right: auto; left: calc(100% + 20px);
> li.menu-item{
// level 8
> ul.sub-menu:not(.enable-megamenu){
top: 8px; left: auto; right: calc(100% + 20px);
> li.menu-item{
// level 9
> ul.sub-menu:not(.enable-megamenu){
top: 8px; right: auto; left: calc(100% + 20px);
> li.menu-item{
// level 10
> ul.sub-menu:not(.enable-megamenu){
top: 8px; left: auto; right: calc(100% + 20px);
> li.menu-item{
// level 11
> ul.sub-menu:not(.enable-megamenu){
top: 8px; right: auto; left: calc(100% + 20px);
}
&:hover{
> ul.sub-menu:not(.enable-megamenu){
right: auto; left: 100%;
}
}
}
}
&:hover{
> ul.sub-menu:not(.enable-megamenu){
left: auto; right: 100%;
}
}
}
}
&:hover{
> ul.sub-menu:not(.enable-megamenu){
right: auto; left: 100%;
}
}
}
}
&:hover{
> ul.sub-menu:not(.enable-megamenu){
left: auto; right: 100%;
}
}
}
}
&:hover{
> ul.sub-menu:not(.enable-megamenu){
right: auto; left: 100%;
}
}
}
}
&:hover{
> ul.sub-menu:not(.enable-megamenu){
left: auto; right: 100%;
}
}
}
}
&:hover{
> ul.sub-menu:not(.enable-megamenu){
right: auto; left: 100%;
}
}
}
}
&:hover{
> ul.sub-menu:not(.enable-megamenu){
left: auto; right: 100%;
}
}
}
}
&:hover{
> ul.sub-menu:not(.enable-megamenu){
right: auto; left: 100%;
}
}
}
}
&:first-child {
}
> a { // link level 1
display:block; padding: 20px 0; font-size: 1.1428em; font-weight: bold; text-transform: uppercase; position: relative; z-index: 1; margin: 0; background: none;
}
&.menu-item-has-children{
> a{
&:after{
@include font-ionicons('\f104', 8px); text-align: right; font-size: 12px; margin-left: 5px; @include transition(all 0.25s ease-out);
}
}
&.current-menu-ancestor,
&.current-menu-item{
> a{
}
}
}
&.current-menu-ancestor,
&.current-menu-item{
> a{ color: $color1;
&:after{ color: inherit; }
}
}
&:hover {
> a{ color: $color1;; background: none;
&:before{ background: $color1; }
&:after{ color: inherit; }
}
> ul.sub-menu {
display: block; @include effect-block-show(); z-index: 999; top: 100%;
}
&.menu-item-has-children{
> a{
&:after{
color: inherit;
}
}
}
}
}
}
}
// Responsive Menu / Accordion
.sns-respmenu{
ul {
@include ulclear();
}
.resp-nav {
&:not(.handled){ @include opacity(0); }
.accr_content {
padding: 0;
ul{ padding: 0 0; margin: 0 0 0 20px; }
}
a{
color: $link-color;
&:hover{color: $color1;}
}
.accr_header {
padding: 5px 0; position: relative; display: block;
.btn_accor{
position: absolute; top: 50%; right: 0px; cursor: pointer; margin-top: -7px;
.ac-tongle{
display: block; @include square(14px); text-align: center; @include transition(all 0.25s ease-out); font-size: 0px; position: relative;
&:before {
@include font-awesome5('\f0d8', 14px, 900); font-size: 14px; position: absolute; left: 0px; top: 0px;
}
&:hover {
&:before{
color: $color;
}
}
&.open{
&:before {@include font-ionicons('\f104', 8px); font-size: 12px; }
}
&.close{ @include opacity(1);
&:before { @include font-awesome5('\f0d8', 14px, 900); color: $color1; }
}
}
}
&.open{
> a { color: $color1; }
}
}
}
}
#main_menu_cats_res{
&:not(.handled){ @include opacity(0); }
@include ulclear(); margin: 30px 0; text-align: center;
> li{ padding: 0;
> .accr_header{
border: 1px solid $line-border-color; margin: 0 0 15px; padding: 0 0; @include transition(all 0.25s ease-out);
> a{
padding: 15px 0; margin: 0 0; font-size: 1em; text-transform: uppercase; position: relative; display: block;
}
&.open,
&:hover{
border-color: $color1; background: $color1;
> a{ color: #FFF; text-decoration: none; }
.btn_accor{
.ac-tongle{
&:before{
color: #FFF;
}
}
}
}
}
}
.accr_content {
padding: 5px 0 0; margin: 0 0 15px;
ul{ padding: 0 0; margin: 0 0; }
}
a{
color: $link-color;
&:hover{color: $color1;}
}
.accr_header {
padding: 5px 0; position: relative; display: block;
.btn_accor{
position: absolute; cursor: pointer; @include square(24px); top: calc(50% - 12px); right: 10px;
.ac-tongle{
display: block; @include square(24px); text-align: center; @include transition(all 0.25s ease-out); font-size: 0px; position: relative;
&:before {
@include font-awesome5('\f0d8', 24px, 900); font-size: 16px;
}
&:hover {
&:before{
color: $color;
}
}
&.open{
&:before { @include font-ionicons('\f104', 8px); font-size: 12px; }
}
&.close{ @include opacity(1);
&:before { @include font-awesome5('\f0d8', 24px, 900); color: $color1; }
}
}
}
&.open{
> a { color: $color1; }
}
}
ul {
@include ulclear();
}
}
#sns_header{
.menu-sidebar-accordion,
.menu-sidebar{
.mainmenu-sidebar-mobile{
@include ulclear(); line-height: 46px;
ul{ @include ulclear();
li{ padding: 0; }
}
.accr_content {
padding-left: 20px;
}
> li { padding: 0;
> .accr_header{
a{
color: $link-color; text-transform: uppercase; font-weight: bold;
&:hover,
&.active {color: $color1;}
}
}
}
.accr_header {
border-bottom: 1px solid $line-border-color; padding: 0; position: relative;
.btn_accor{
position: absolute; top: calc(50% - 8px); right: 0px; cursor: pointer;
.ac-tongle{
display: block; @include square(16px); text-align: center; @include transition(all 0.25s ease-out); font-size: 0px; position: relative;
&:before {
@include font-ionicons('\f104', 16px); font-size: 12px; position: absolute; right: 0px; top: 0px;
}
&:hover {
&:before{
color: $color1;
}
}
&.open{
&:before { @include font-ionicons('\f104', 16px); font-size: 12px; }
}
&.close{ @include opacity(1);
&:before { @include font-ionicons('\f10d', 16px); font-size: 12px; color: $color1; }
}
}
}
&.open{
> a{ color: $color1; }
}
}
}
}
}
// Sidebar
#sns_content .sns-main .right.inner-sidebar,
.sns-right{
@media(max-width: $screen-md-min){
position: fixed; top: 0;right: -345px; width: 345px; padding: 0 30px; height: 100vh; bottom: 0; overflow: auto; margin: 0 0;
background: $white; z-index: 1000; @include transition(all 0.3s ease-out);
> * {
&:first-child{ padding-top: 30px !important; }
&:last-child{ padding-bottom: 30px !important; }
}
&.active {
right: 0;@include opacity(1);
}
.sns-col-inner {
padding: 0px 0 50px;
}
@media(max-width: $screen-xs-max){
right: -290px; width: 290px; padding: 0 20px;
}
}
body.admin-bar &{
@media(max-width: $screen-md-min){
top: 32px; height: calc(100vh - 32px);
}
@media (max-width: $screen-phone){
top: 0px; height: 100vh; padding-top: 46px;
}
}
}
#sns_content .sns-main .left.inner-sidebar,
.sns-left {
@media(max-width: $screen-md-min){
position: fixed; top: 0; left: -345px; width: 345px; padding: 0 30px; height: 100vh; bottom: 0; overflow: auto; margin: 0 0;
background: $white; z-index: 1000; @include transition(all 0.3s ease-out);
> * {
&:first-child{ padding-top: 30px !important; }
&:last-child{ padding-bottom: 30px !important; }
}
&.active {
left: 0;@include opacity(1);
}
.sns-col-inner {
padding: 30px 0 50px;
}
@media(max-width: $screen-xs-max){
left: -290px; width: 290px; padding: 0 20px;
}
}
body.admin-bar &{
@media(max-width: $screen-md-min){
top: 46px; height: calc(100vh - 46px);
}
@media (max-width: $screen-phone){
top: 0px; height: 100vh; padding-top: 46px;
}
}
}
@media(max-width: $screen-md-max){
#sns_content .sns-main .column-content-box{
position: fixed;top: 0;right: -270px;width: 270px;padding:0px;height: 100%;bottom: 0;overflow: auto;
background: $white;z-index: 1000;overflow: auto;height: 100%;@include transition(all 0.3s ease-out);
&.active {
right: 0;@include opacity(1);
}
}
}
// Inline menu
.sns-inline-menu{
> ul{
li{
padding: 0 0 0 24px; margin: 0 0 0 24px; position: relative;
&:before{
position: absolute; content: ""; height: 15px; left: 0px; top: 50%; margin: -7.5px 0 0; width: 1px; background: $line-border-color;
}
&:first-child{ padding: 0 0; margin: 0 0;
&:before{ display: none; }
}
a { padding: 0; color: $color; line-height: inherit;
i{
margin-right: 6px; font-size: 14px; line-height: 1em;
}
img.sns-megamenu-icon-img{
display: inline-block;height: auto;vertical-align: middle;margin-right: 8px; line-height: 1em;
}
&:hover{ background: transparent; color: $color1; }
}
}
&.uppercase{
li{
a { text-transform: uppercase; }
}
}
ul.sub-menu{ display: none; }
}
}
// Vertical Menu
.sns-vertical-menu{
> p.main_navigation_alert{
color: $color; line-height: 50px; margin: 0 20px;
}
}
ul.vertical-style{
@include ulclear();
li.menu-item{ // Level 1
position: relative;display: block; padding: 0;
> a{
display: block; position: relative; padding: 4px 30px; color: $color;
&:hover{ color: $color1; }
i{
display: inline-block; margin-right: 8px; font-size: 16px; line-height: 1em; vertical-align: middle;
}
img.sns-megamenu-icon-img{
display: inline-block;height: auto;vertical-align: middle;margin-right: 8px; line-height: 1em;
}
}
&.menu-item-has-children{
position: relative;
&:after{
position: absolute; right: 20px; top: calc(50% - 4px); @include font-ionicons('\f104', 8px); font-size: 12px;
}
.sns-products{
@include scale(0);
}
&:hover{
.sub-content,
> ul.sub-menu:not(.enable-megamenu){
@include effect-block-show-child(); left: 95%; top: 10px; z-index: 9999;
}
.sns-products{
@include scale(1);
}
}
}
&.just-postwcode{
.sub-content{ padding-top: 15px; }
}
&:hover,
&.current-menu-ancestor,
&.current-menu-item{
> a{
color: $color1;
&:before{ color: $color1; }
}
}
// Level 2 - List style
> ul.sub-menu:not(.enable-megamenu){
@include ulclear();@include effect-block-hide-child();position: absolute; left: calc(100% + 20px); top: 10px; background: #fff;
border: 1px solid $line-border-color; padding: 25px 0; min-width: 240px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); @include border-radius(3px);
}
// Megamenu
.sub-content{
background: #fff;@include effect-block-hide-child();position: absolute; top: 10px; left: calc(100% + 20px);width: 1000px; border: 1px solid $line-border-color; padding: 0 20px 30px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); @include border-radius(3px);
@media(max-width: $screen-md-max){
width: 750px; padding: 0 10px 20px; left: 100%;
}
&.sub-content-background{
background-position: right bottom; background-repeat: no-repeat;
}
// Columns style
ul.columns{
@include ulclear();display: inline-block;float: left;vertical-align: top;
.menu-item{
&:after{ display: none;}
position: relative; border: none;
.megamenu-title{
display: block; margin: 35px 20px 5px 20px; padding: 0 0 10px; font-size: 1em; text-transform: uppercase; color: $link-color;
@media(max-width: $screen-md-max){
margin: 25px 10px 5px 10px;
}
a{
padding: 0 0 0; position: relative; display: block;
&:before{ position: absolute; content: ""; height: 1px; width: 100%; left: 0px; bottom: -11px; background-color: $line-border-color;}
}
}
.sub-menu{ padding: 10px 20px 0;
@media(max-width: $screen-md-max){
padding: 10px 10px 0;
}
li.menu-item{ padding: 0;
a{ padding: 4px 0; }
&:hover{
a{ background-color: transparent; }
}
}
}
}
> li.menu-item{
float: left;
}
&.col-1{
> li.menu-item{
width: 100%;
}
}
&.col-2{
> li.menu-item{
width: 50%;
}
}
&.col-3{
> li.menu-item{
width: 33.33%;
}
}
&.col-4{
> li.menu-item{
width: 25%;
}
}
&.col-5{
> li.menu-item{
width: 20%;
}
}
&.col-6{
> li.menu-item{
width: 16.66%;
}
}
}
> ul.columns {
width: 100%;
}
&.has-left-content{ @include clearfix();
> ul.columns {
width: 65%; float: left;
}
.mega-left-content{
padding: 35px 20px 10px; width: 35%; float: left;
@media(max-width: $screen-md-max){
padding: 25px 10px 10px;
}
}
}
&.has-right-content{ @include clearfix();
> ul.columns {
width: 65%; float: left;
}
.mega-right-content{
padding: 35px 20px 10px; width: 35%; float: left;
@media(max-width: $screen-md-max){
padding: 25px 10px 10px;
}
}
}
.mega-bottom-content{
padding: 15px 20px 10px; width: 100%; float: left;
@media(max-width: $screen-md-max){
padding: 10px 10px 10px;
}
}
.sns-products{
.wpb_heading{
margin: 5px 0 20px; padding: 0 0 10px; font-size: 1.2857em; position: relative;
&:before{ position: absolute; content: ""; height: 1px; width: 100%; left: 0px; bottom: -1px; background-color: $line-border-color;}
}
.product_list{ margin-bottom: 0;}
&.list-mode{
.owl-nav{ top: -50px; }
}
}
.sns-list-posts{
.wpb_heading{
margin: 5px 15px 20px; padding: 0 0 10px; font-size: 1.2857em; position: relative;
&:before{ position: absolute; content: ""; height: 1px; width: 100%; left: 0px; bottom: -1px; background-color: $line-border-color;}
}
}
}
}
> li.menu-item{
> a{ padding: 6px 0px 6px 0; color: $link-color;
&:hover{ color: $color1; }
i{
margin-right: 15px;
}
img.sns-megamenu-icon-img{
margin-right: 15px;
}
}
&.menu-item-has-children{
&:after{
right: 0px;
}
}
}
}