File: /home/madepabj/hc-cosmetics.com/wp-content/themes/dbea/assets/scss/theme/_main.scss
/***************************************************
scss file: /assets/scss/theme/_main.scss
+ #sns_slideshow, sns_breadcrumbs
+ Content
- #sns_content
+ Footer
- #sns_footer
****************************************************/
#sns_slideshow{
.hephaistos.tparrows.tp-rightarrow::before{
content: "\e825"
}
.hephaistos.tparrows.tp-leftarrow::before{
content: "\e824"
}
.rev-btn{
@include transition(all 0.25s ease-out);
}
.sns-vertical-menu{
width: calc(25% - 15px); padding-left: 15px; float: left;
}
.sns-slide-show{ width: calc(75% + 15px); padding-right: 15px; float: left;
@media(max-width: $screen-lg){
width: 100%; padding: 0 15px;
}
}
@media(max-width: $screen-xs-max){ .tparrows{ display: none !important;} }
.sns-text-gradient1:hover{
background: linear-gradient(to right, #c4df9b 0%, $link-color 100%);
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.sns-text-gradient2:hover{
background: linear-gradient(to right, #fff799 0%, $link-color 100%);
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.sns-text-gradient3:hover{
background: linear-gradient(to right, #c1de9b 0%, $link-color 100%);
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.sns-text-gradient4:hover{
background: linear-gradient(to right, #8bcc9c 0%, $link-color 100%);
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.sns-text-gradient5:hover{
background: linear-gradient(to right, #c6dd9c 0%, $link-color 100%);
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.sns-text-gradient6:hover{
background: linear-gradient(to right, #efa1be 0%, $link-color 100%);
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
}
rs-slides{
.dbea-alink{ position: relative;
&:before{ position: absolute; content: ""; width: 30px; height: 2px; background: $color1; left: 0px; bottom: 1px;
@media(max-width: $screen-phone){ width: 20px; }
}
&:hover{
&:before{ width: 100%; }
}
}
}
#video_slider_forcefullwidth{
.rev_slider li.tp-revslider-slidesli{ opacity: 0.6 !important;
&.active-revslide{ opacity: 1 !important; }
}
}
@media(min-width: $screen-lg){
.rev_slider {
.sns-shape-btn{
position: relative;
&:before{
height: 3px; width: 11px; content: ""; background: #FFF; position: absolute; left: 6.5px; top: 11px;
}
&:after{
height: 11px; width: 3px; content: ""; background: #FFF; position: absolute; left: 11px; top: 6.5px;
@include opacity(1); @include transition(all 0.25s ease-out);
}
&:hover{
&:after{ @include opacity(0); }
}
}
}
}
// Breadcrumbs
.page-header{
margin: -5px 0 30px; padding: 0 0; border: none; line-height: 1.1; font-weight: bold; color: $link-color; position: relative;
text-transform: none; font-size: 3em;
@media(max-width: $screen-md-max){
font-size: 2.5em;
}
@media(max-width: $screen-xs-max){
font-size: 2.2857em;
}
}
.archive-header{ display: none; }
.breadcrumbs {
> * {
display: inline-block;
}
.navigation-pipe {
margin: 0px 10px; position: relative; width: 20px;
&:before{ position: absolute; content: ""; height: 1px; width: 100%; left: 0px; top:-4px; background: $gray; }
}
a{ position: relative;
&:hover{
color: $color1;
&:before{ width: 100%; }
}
}
body.have-breadcrumb-img & {
color: #FFF;
a{
&:hover{
color: $color1;
}
}
}
}
#sns_breadcrumbs.wrap{
background-color: #f9f9f9; border-top: 1px solid $line-border-color; margin: 0 0 80px; padding: 0 0;
@media(min-width: $screen-md-max){
> .container{ padding-left: 0px; padding-right: 0; }
}
.breadcrumbs{ margin: 17px 0;
> * {
display: inline-block;
}
}
.page-header{ margin: 0 0; color: $link-color; text-transform: none; }
body.have-breadcrumb-img & {
color: #FFF;
a{ color: inherit;
&:hover{ color: $color1; }
}
.page-header{ color: #FFF; }
.navigation-pipe {
&:before{ background: #fff; }
}
padding: 50px 0; text-align: center; background-repeat: no-repeat; background-position: top center;
min-height: 280px; position: relative; background-attachment: fixed;
@media(min-width: 1921px){
background-size: cover;
}
@media(max-width: $screen-md-max){
min-height: 180px; padding: 30px 20px;
}
@media(max-width: $screen-xs-max){
}
.inner{
@include translate(-50%, -50%); position: absolute;top: 50%; left: 50%; width: 100%; padding: 0 15px;
}
}
}
// Content
#sns_content{
position: relative; margin: 0 0;
&.m-no-content{ margin-top: 0px !important; display: none; }
> .container{
@media (min-width: $screen-lg){
padding-left: 0px; padding-right: 0px;
}
}
body.search-no-results & {
.sns-main { margin-bottom: 100px; }
}
body.error404 & {
margin-top: 0;
}
body.no-breadcrumb & { margin-top: 90px; }
.sns-right,
.sns-left{
margin-bottom: 105px;
}
.sns-right-sidebar,
.sns-left-sidebar{
margin-bottom: 105px;
> .vc_column-inner > .wpb_wrapper{
> * { margin-bottom: 60px;
&:last-child{ margin-bottom: 0px;}
ul.vertical-style{
border-top: 1px solid $base-border-color;
}
}
}
}
.sns-main{
> section.type-page {
> .inner-page{
@include clearfix();
> .inner{ @include clearfix();
> div:not(.vc_row):not(.vc_clearfix):not(.wpb-content-wrapper){
&:last-child{ margin-bottom: 110px; }
}
> *:not(.wpb-content-wrapper) {
&:last-child:not(.vc_row-full-width.vc_clearfix){ margin-bottom: 100px;}
.navigation{ margin-bottom: 0px;}
}
& + .sns-comments,
& + .page-links{ margin-bottom: 100px; margin-top: 0; }
}
}
}
}
}
.sticky-product-filter{
.inner{
position: fixed; top: 0; left: -345px; width: 345px; height: 100%; bottom: 0; overflow: auto;
background: $white; z-index: 1000; overflow: auto; height: 100%; @include transition(all 0.3s ease-out); padding: 30px 30px 30px;
@media(max-width: $screen-xs-max){ left: -290px; width: 290px; }
body.admin-bar & {
top: 32px;
@media(max-width: $screen-md-min){
top: 46px;
}
@media(max-width: $screen-phone){ top: 0px; }
}
}
.overlay{
content: ""; display: none; position: fixed; @include square(100%); top: 0; left: 0; right: 0; bottom: 0; z-index: 999; background: rgba(0,0,0,0.5);
@include transition(none); cursor: e-resize; cursor: url(#{$base-url}/close-white.png), auto;
}
&.active {
.inner{ left: 0; @include opacity(1); }
}
}
// Footer
#sns_footer{
position: relative;
@media (min-width: $screen-lg){
> .container:not(.extra-width){ padding-left: 0px; padding-right: 0px; }
}
.wpb_content_element{
margin-bottom: 0px;
}
.vc_custom_heading,
.wpb_heading,
.widgettitle{
text-transform: none; font-size: 1.2857em; font-weight: bold; text-transform: uppercase; padding: 0 0; margin: 0 0 25px; position: relative; line-height: 1.1;
}
.widget{
border: none; padding: 0 0; margin: 0px;
}
.wpb_text_column{
p{ margin-bottom: 15px;
&:last-child{ margin-bottom: 0; }
}
}
.vc_wp_custommenu:not(.inline-menu){
.widget_nav_menu{
.menu{
li{
padding: 4px 0;
&:first-child{ padding-top: 0px; }
&:last-child{ padding-bottom: 0px; }
a{
position: relative; display: inline-block; padding: 0 0 0 18px;
&:before{
position: absolute; @include font-ionicons('\f30f', 12px); left: 0px; top: 6px; font-size: 14px; text-align: left;
}
&:hover{
color: $color1;
}
}
}
}
}
}
.inline-menu{ display: inline-block;
.widget{
&.widget_nav_menu{
.menu{
> li{ display: inline-block; float: left; position: relative; padding: 0 22px; margin: 3px 0;
&:before{ @include font-awesome5('\f111', 14px, 900); font-size: 6px; color: #ccc; position: absolute; left: -7px; top: calc(50% - 7px); }
a{
padding: 0;
}
&:first-child{
padding-left: 0;
&:before{ display: none; }
}
&:last-child{
padding-right: 0;
}
ul.sub-menu{ display: none; }
}
}
}
}
&.align-center{
display: block;
.widget{ display: inline-block; margin-left: auto; margin-right: auto; }
}
}
.copyright{
&.default{
padding: 40px 0; position: relative; text-align: center;
}
}
.sns-social-links.inline-label{
.wpb_heading{ font-size: 1em; font-weight: bold; float: left; margin: 7px 8px 7px 0; }
}
&.footer-1{ background: #212121; color: #bbb;
.vertical-line-col{
.vc_column-inner{
position: relative;
.wpb_wrapper{
position: absolute; height: calc(100% - 35px); width: 1px; content: ""; background: rgba(#FFF, 0.1); left: 50%; top: 35px;
}
}
}
.vc_custom_heading,
.wpb_heading,
.widgettitle{
color: #FFF;
}
.sns-store-info{
.store-info{
> * {
&.store-maplink { margin-top: 15px;
span.vc_icon_element-icon{
}
}
}
}
}
.sns-list-posts{
&.style1 {
.item-post{
margin: 12px 0 0;
padding: 12px 0 0;
&:first-child{
margin-top: 0px;padding-top: 7px;border-top: none;
}
.post-title{ font-size: 1em; margin-top: 5px; }
}
}
}
a{
color: inherit;
&:hover{ color: $color1; }
}
.copyright{ color: inherit;
a{
position: relative; color: #FFF; font-weight: bold;
&:hover{ color: $color1; }
}
}
}
&.footer-2{ background: #333; color: #b5b5b5;
.vc_custom_heading,
.wpb_heading,
.widgettitle{
color: #FFF; margin-bottom: 30px; font-size: 1.1428em;
}
.vc_wp_custommenu:not(.inline-menu){
.widget_nav_menu{
.menu{
li{
padding: 6px 0;
&:first-child{ padding-top: 0px; }
&:last-child{ padding-bottom: 0px; }
a{
padding: 0 0 0 16px; color: inherit;
&:before{ position:absolute; content: ""; height: 6px; width: 6px; left: 0px; top: calc(50% - 3px); @include border-radius(0); background: #b5b5b5; margin-right: 10px; }
&:after{ position: absolute; content: ""; height: 1px; left: 15px; bottom: 1px; width: 0px; background: transparent; @include transition(all 0.25s ease-out); }
&:hover{ color: #FFF;
&:after{
background: #FFF;
width: calc(100% - 15px);
}
}
}
}
}
}
}
.sns-store-info{
.store-info{
> * {
margin-bottom: 12px;
> .vc_icon_element-icon,
span.label { color: #fff; }
}
}
}
.sns-list-posts{
&.style1 {
.item-post{
margin: 12px 0 0;
padding: 12px 0 0;
&:first-child{
margin-top: 0px;padding-top: 7px;border-top: none;
}
.post-title{ font-size: 1em; margin-top: 5px; }
}
}
}
a{
color: inherit;
&:hover{ color: #FFF;}
}
.copyright{ color: inherit;
a{ position: relative; color: #fff; font-weight: bold;
}
}
#sns-totop{
&:before{ color: inherit; }
&:hover{
&:before{ color: #fff; }
}
}
}
&.footer-3{
background: #333; color: #b5b5b5;
.vc_custom_heading,
.wpb_heading,
.widgettitle{
color: #FFF; margin-bottom: 30px; font-size: 1.1428em;
}
.vc_wp_custommenu:not(.inline-menu){
.widget_nav_menu{
.menu{
li{
padding: 6px 0;
&:first-child{ padding-top: 0px; }
&:last-child{ padding-bottom: 0px; }
a{
padding: 0 0 0 16px; color: inherit;
&:before{ position:absolute; content: ""; height: 6px; width: 6px; left: 0px; top: calc(50% - 3px); @include border-radius(0); background: #b5b5b5; margin-right: 10px; }
&:after{ position: absolute; content: ""; height: 1px; left: 15px; bottom: 1px; width: 0px; background: transparent; @include transition(all 0.25s ease-out); }
&:hover{ color: #FFF;
&:after{
background: #FFF;
width: calc(100% - 15px);
}
}
}
}
}
}
}
.sns-store-info{
.store-info{
> * {
margin-bottom: 12px;
> .vc_icon_element-icon,
span.label { color: #fff; }
}
}
}
.sns-list-posts{
&.style1 {
.item-post{
margin: 12px 0 0;
padding: 12px 0 0;
&:first-child{
margin-top: 0px;padding-top: 7px;border-top: none;
}
.post-title{ font-size: 1em; margin-top: 5px; }
}
}
}
.newsletter-form-1{
form.newsletter-1{
&:before{
color: #FFF; background: $button-bg-color; @include border-radius(0px);
}
.tnp-email{ background: #444; @include border-radius(0px);
}
&:focus,
&:hover{
&:before{ background: $color; }
}
}
}
a{
color: inherit;
&:hover{ color: #FFF;}
}
.copyright{ color: inherit;
a{ position: relative; color: #fff; font-weight: bold;
}
}
#sns-totop{
&:before{ color: inherit; }
&:hover{
&:before{ color: #fff; }
}
}
}
&.blank{
background: #212121; color: #bbb;
.copyright{ color: inherit;
a{ color: #fff;
&:hover{ color: $color1; }
}
}
}
}
// Not found
body.page-404{
@media(min-width: $screen-xs-max){
height: 100vh;
}
background-position: center top; background-size: cover; background-repeat: no-repeat;
#sns_wrapper{ height: 100%; }
#sns_header .main-header > .inner{ border: none !important; }
#sns_content.is-notfound{
margin-top: 0 !important; padding: 0; overflow: hidden; height: calc(100vh - 160px);
}
}
body.admin-bar.page-404{
height: calc(100vh - 32px);
@media(max-width: $screen-md-min){
height: calc(100vh - 46px);
}
@media(max-width: $screen-sm-max) and (min-width: $screen-xs-min){
height: auto;
}
#sns_content.is-notfound{
margin-top: 0 !important; overflow: hidden; height: calc(100vh - 160px - 32px);
@media(max-width: $screen-sm-max) and (min-width: $screen-xs-min){
height: auto; overflow: visible;
}
}
}
.sns-notfound-page{
padding: 30px 15px; text-align: center;
.sns-notfound-content{
margin: 0;
img.notfound-img{
@media(max-width: $screen-md-max){ max-width: 60%; }
@media(max-width: $screen-md-min){ max-width: 280px; }
@media(max-width: $screen-xs-max){ margin-top: 30px; }
}
h1{
display: block; font-size: 3em; position: relative; padding: 0 0; margin: 90px 0 10px;
@media(max-width: $screen-md-max){ font-size: 2.5em; margin-top: 40px; }
@media(max-width: $screen-xs-max){ font-size: 2em; margin-top: 30px; }
}
p{
margin: 0 0 25px; font-size: 1.1428em;
@media(max-width: $screen-xs-max){ font-size: 1em; }
}
}
#searchform{
position: relative;padding: 0; @include transition(all 0.25s ease-out);
max-width: 460px; margin: 40px auto 0;
@media(max-width: $screen-md-max){
max-width: 460px;
}
@media(max-width: $screen-xs-max){
margin-top: 30px;
}
&:before{
position: absolute; @include font-ionicons("\f4a4", 60px); text-align: center; line-height: 60px; background: $button-bg-color; color: #FFF;
font-size: 20px; @include transition(all 0.25s ease-out); right: 0px; bottom: 0px; margin: 0 0; @include border-radius(4px);
}
label.screen-reader-text{display: none;}
input#s{
width: 100%; box-shadow: none; @include transition(all 0.25s ease-out); background: transparent; height: 60px; line-height: 60px;
padding: 0 25px; font-size: 1em; background: #f9f9f9; @include border-radius(4px);
&:focus{ border-color: $base-border-color; }
}
input#searchsubmit{
position: absolute; @include square(60px); bottom: 0px; right: 0px; padding: 0 0; margin: 0 0; border: none; @include border-radius(4px);
text-indent: -99em; overflow:hidden; @include border-radius(0px);@include transition(all 0.25s ease-out); color: $button-bg-color;
background: transparent;
}
&:hover{
&:before{ background: $color1; }
}
}
@media(min-width: $screen-sm-max){
@include translate(-50%, -50%); position: absolute;top: 50%; left: 50%;
}
}