File: /home/madepabj/hc-cosmetics.com/wp-content/themes/dbea/assets/scss/theme/_widgets.scss
/***************************************************
scss file: assets/scss/theme/_widgets.scss
+ All style about widget
****************************************************/
.sns-left,
.sns-right,
.sticky-product-filter .inner,
.inner-sidebar{
> .widget:last-child{
margin-bottom: 0 !important; border: none !important;
}
> .postwcode-widget{ margin-bottom: 70px;
&:last-child{ margin-bottom: 0px; }
}
> .postwcode-widget div:not(.wpb_content_element) > .wpb_wrapper > div,
> .widget{
margin-bottom: 70px; padding-bottom: 0px; position: relative; @include clearfix();
&:last-child{
margin-bottom: 0px; padding-bottom: 0px; border-bottom: none;
}
.widget{
margin-bottom: 0; padding-bottom: 0; border: none;
}
.widgettitle,
.widget-title{
font-size: 1.5em; color: $link-color; text-transform: uppercase; font-weight: bold; display: block; padding: 0 0; line-height: 1.1;
margin: 0 0 21px; position: relative;
display: flex; align-items: center;
> span{
display: inline-block; line-height: inherit; position: relative;
}
&:after{ content: ""; flex: 1; margin-left: 20px; height: 1px; background: $line-border-color; }
}
.wpb_heading{
font-size: 1.5em; color: $link-color; text-transform: uppercase; font-weight: bold; display: block; padding: 0 0; margin: 0px 0 21px; text-align: left; line-height: 1.1;
display: flex; align-items: center;
> span{
display: inline-block; line-height: inherit; position: relative;
}
&:after{ content: ""; flex: 1; margin-left: 20px; height: 1px; background: $line-border-color; }
}
select{
height: 40px; line-height: 40px; border-color: $line-border-color;
}
&.yith-woo-ajax-reset-navigation{
padding: 0; margin: 0; border-bottom: none;
> .yith-wcan{ margin-bottom: 50px; padding-bottom: 50px; border-bottom: 1px solid $line-border-color; }
}
&.widget_dbea_widget_vertical_menu{
background: #333; padding: 0 30px 20px 30px; border: none; z-index: 3;
@media(max-width: $screen-md-max){
padding: 0 20px 20px 20px;
}
.widget-title{
padding: 30px 0 25px; margin-bottom: 10px; border-bottom: 1px solid #424242; color: #FFF;
}
ul.vertical-style{
padding: 0 0;
> li.menu-item{
> a{ color: #FFF;}
&.menu-item-has-children{
&:after{ color: #FFF; }
}
&.current-menu-ancestor,
&.current-menu-item,
&:hover{
> a{ color: $color1; }
}
}
}
.sns-respmenu{
.resp-nav {
a{
color: #FFF;
&:hover,
&.active {color: $color1;}
}
.accr_header {
.btn_accor{
.ac-tongle{
&.open{
&:before { color: #ccc; }
}
}
}
&.open{
> a { color: $color1; }
}
}
}
}
}
}
.postwcode-widget .wpb_wrapper > div.no-padding-border{
border:none; padding-bottom: 0px;
}
.postwcode-widget .wpb_wrapper > div.no-space-separator{
padding-bottom: 0px; margin-bottom: 0px;
}
}
body.special-sidebar.left-sidebar{
}
body.special-sidebar{
.sns-left,
.sns-right,
.inner-sidebar{
z-index: 2;
}
.sns-left > .postwcode-widget .wpb_wrapper > div,
.sns-right > .postwcode-widget .wpb_wrapper > div,
.sns-left > .widget:not(.widget_dbea_widget_vertical_menu),
.sns-right > .widget:not(.widget_dbea_widget_vertical_menu),
.inner-sidebar > .vc_column-inner > .wpb_wrapper > div{
margin-bottom: 70px;
&:last-child{ margin-bottom: 0px; }
> .wpb_heading,
> .widget-title{
margin: 0 0 26px; position: relative; font-size: 1.5em; line-height: 1.1;
&:before{
position: absolute; content: ""; left: 0px; bottom: -17px; width: 100px; height: 3px; background: $color1;
}
& + ul:not(.vertical-style),
& + div,
& + label,
& + form{
padding: 20px; border: 1px solid $line-border-color; @include border-radius(0 5px 5px 5px);
}
}
&.sns-products.list-mode{
.prdlist-content {
.product_list.list {
margin: 0;
.item-row{
.product{
border-top: 1px solid $line-border-color; padding-top: 20px; margin-top: 20px;
&:first-child{ border: none; margin-top: 0px; padding-top: 0px; }
.list-view {
.item-img {
margin: 0 10px 0 0;
.product-image {
border: none; max-width: 75px;
}
}
.item-info{
.item-title{ margin-bottom: 8px; }
.price .amount{ font-size: 1em; }
}
}
}
}
}
}
.owl-nav{ top: -55px; right: -20px; width: 40px;
.owl-prev{ text-align: left;
&:before{ text-align: left;}
}
.owl-next{ text-align: right;
&:before{ text-align: right;}
}
}
}
.sns-info-box{
margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid $line-border-color;
&:first-child{ border-top: none; margin: 0 0; padding: 8px 0 0; }
}
}
.wpb_wrapper > .sns-vertical-menu,
.widget.widget_dbea_widget_vertical_menu{
padding: 0 0; background: #FFF; z-index: 3;
> .wpb_heading,
.widget-title{
background: $color1; color: #FFF; margin: 0 0 !important; padding: 15px 20px; @include border-radius(5px 5px 0 0); font-size: 1.1428em !important; margin: 0 0;
border: none; text-transform: uppercase;
&:before{ display: none; }
}
ul.vertical-style{
padding: 0 20px; border: 1px solid $line-border-color; border-top: none; @include border-radius(0 0 5px 5px);
> li.menu-item{
border-top: 1px solid $line-border-color;
&:first-child{ border-top: none; }
> a { padding: 13px 20px 13px 0; }
}
}
}
}
.widget{
position: relative; @include clearfix();
.screen-reader-text {
border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block;
font-size: 1em; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000;
}
.widget-title{
font-size: 1.5em; color: $link-color; text-transform: none; font-weight: bold;
display: block; padding: 0 0; margin: 0 0 26px; line-height: 1.1;
> span{
display: inline-block; position: relative;
}
& + ul,
& + div,
& + label,
& + form{
padding: 0;
}
}
select{ width: 100%; display: block; }
ul{
@include ulclear();
@include accor-widget();
li{
a{
display: inline; padding: 5px 0; color: $link-color;
&:hover{ color: $color1; }
}
&:first-child{
a{
padding-top:0;
}
}
&:last-child{
a{
padding-bottom:0;
}
}
ul{
padding-left: 20px;
}
}
}
a .product-title,
.title,
.post-title{
font-size: 1em;
}
&.yith-woo-ajax-reset-navigation{
&:before,
&:after{
display: inline;
}
a.button{
display: block; text-align: center; @include transition(all 0.25s ease-out 0s); border: none; background: $button-bg-color; color: #FFF;
&:focus,
&:hover{
color: #FFF; background: $color1; border-color: $color1;
}
}
}
&.widget_recent_entries{
> ul{ margin-top: -2px; }
ul{
li{
position: relative; padding: 10px 0 0; margin: 8px 0 0; border-top: 1px solid $line-border-color;
&:first-child{ padding-top: 3px; margin-top: 0px; border-top: none; }
&:last-child{ padding-bottom: 0px; }
a{ display: block; position: relative; padding: 0 0; font-weight: bold; line-height: 1.42857;
&:hover{
&:before{ color: inherit; }
}
}
.post-date{
font-size: 0.8571em; text-transform: uppercase; display: block; margin-top: 8px; color: $low-color; padding-left: 16px; position: relative;
&:before{ position: absolute; content: ""; height: 5px; width: 5px; background: $base-border-color; left: 0px; top: calc(50% - 2.5px); @include border-radius(100%); }
}
}
}
}
&.widget_archive{
> ul { margin: 0 0; }
> select{ margin-top: 5px; margin-bottom: 5px; }
ul{
li{
position: relative; padding: 8px 0 0; margin: 8px 0 0; border-top: 1px solid $line-border-color;
&:first-child{padding-top: 0px; border-top: none; }
&:last-child{ padding-bottom: 0px; }
a{ position: relative; padding: 0;
&:before{
@include font-ionicons('\f2d1', 14px); font-size: 16px; margin-top: -3px; margin-right: 6px; text-align: left; @include transition(all 0.25s ease-out 0s); vertical-align: middle;
color: $color;
}
&:hover{
&:before{ color: inherit; }
}
}
}
}
}
&.widget_categories{
> ul{
padding-right: 0; list-style: none; padding-left: 0px; margin-top: -2px; margin-bottom: 1px;
.children{
padding-top: 7px; padding-left: 25px; position: relative;
}
li{
position: relative; padding: 4px 0px; margin: 0; @include clearfix();
&:last-child{
border-bottom: none;
}
&:first-child{ border-top: none; }
.accr_header{ padding: 0 0; display: block; }
> a,
.accr_header:first-child{
padding: 0 0;
}
.count{ color: $low-color; }
}
> li{ color: $low-color;
.accr_header a,
> a{
padding: 0 3px 0 0; float: left; color: $link-color; font-weight: bold;
&:before{
@include font-ionicons('\f30f', 12px); font-size: 16px; margin-top: -2px; margin-right: 10px; text-align: left; vertical-align: middle;
@include transition(all 0.25s ease-out 0s);
}
&:hover{
&:before{ color: inherit; }
}
}
.accr_header { position: relative;
.btn_accor{ top: 0px;
i{ display: none; }
&:before{
@include font-awesome5('\f067', 10px, 900); font-size: 10px; margin-top: -2px; text-align: center; vertical-align: middle; color: #ccc;
}
}
&:hover{
> a{ color: $color1;
&:before{ color: $color1; }
}
.btn_accor{ color: $color1; }
}
&.open{
> a{ color: $color1;
&:before{ color: $color1; }
}
.btn_accor{ color: $color1;
&:before{ @include font-awesome5('\f068', 10px, 900); }
}
}
}
&:first-child{ padding-top: 0px;}
&:last-child{ padding-bottom: 0px;}
}
}
> form { padding-top: 5px; margin-bottom: 5px; }
}
&.widget_pages{
ul{
list-style: none;
li{
position: relative;
padding: 5px 0;
margin: 0;
ul{
margin: 8px 0 0; padding-left: 30px;
}
&:first-child{
padding-top: 0px;
}
&:last-child{
padding-bottom: 0px;
}
}
}
}
&.widget_meta{
ul{
list-style: none;
li{
position: relative; padding: 8px 0 0; margin: 8px 0 0; border-top: 1px solid $line-border-color;
a{ padding: 0; }
ul{
margin: 8px 0 0 10px;
}
&:first-child{
padding-top: 0px; margin-top: 0px; border:none;
}
}
}
}
&.widget_nav_menu{
ul{
&.menu{
> li{
&:first-child{
padding-top: 0px;
}
}
}
list-style: none;
li{
position: relative;
padding: 5px 0;
margin: 0;
a{
&::empty{ display: none; }
}
ul{
margin: 8px 0 0;
}
&:first-child{
padding-top: 0px;
}
&:last-child{
padding-bottom: 0px;
}
}
}
}
&.widget_tag_cloud{
background: none !important;
.tagcloud{
margin: 1px 0 -7px; display: inline-block;
> a{
border: 1px solid $base-border-color; background: #f9f9f9; @include border-radius(4px); display: inline-block; float: left; margin: 5px 10px 5px 0;
padding: 0 12px; height:36px; line-height:36px; @include transition(all 0.25s ease-out 0s); position:relative; font-size: 1em !important;
&:hover{
color: #FFF; background-color: $color1; border-color: $color1;
&:before{color: inherit; }
}
&.is_hidden{
@include opacity(1);
}
&.is_visible{
@include opacity(0);
}
}
.view-more-tag{
display: inline-block; position: relative; width: 100%; margin-top:10px;
a{
text-decoration: underline;
&:hover{
text-decoration: underline;
}
}
}
}
}
&.widget_recent_comments{
ul{
li{
position: relative; padding: 10px 0 0; margin: 10px 0 0; border-top: 1px dashed $base-border-color;
&:before{ @include font-ionicons('\f3fc', 14px); font-size: 17px; text-align: left; margin-right: 6px; }
&:first-child{
margin-top:0px; padding-top: 0px; border-top: none;
}
.comment-author-link{
font-weight: bold; color: $link-color;
a{
color: inherit;
&:hover{
color: $color1;
}
}
}
a{ padding: 0 0; font-weight: bold;
&:hover{ color: $color1;
}
}
}
}
}
&.widget_top_rated_products{
li{
.amount{
display: none;
}
}
}
&.widget_search{
.widget-title{
padding-bottom: 6px;
& + #searchform{ }
}
#searchform{
position: relative; margin-bottom: 5px;
&:before{
position: absolute; @include font-ionicons("\f4a4", 50px); font-size: 20px; @include transition(all 0.25s ease-out); right: 0; bottom: 0;
margin: 0 0; color: #FFF; background: $button-bg-color; @include border-radius(4px);
}
label.screen-reader-text{display: none;}
input#s{
width: 100%; padding: 0 25px; background: #f9f9f9; padding-left: 20px;
box-shadow: unset;
&:focus{ border-color: $base-border-color; }
}
input#searchsubmit{
font-size: 0px; padding: 0 0; border: none; height: 50px; width: 50px; position: absolute; right: 0px; bottom: 0; margin: 0 0; background: transparent;
}
&:hover{
&:before{
background: $color1;
}
}
}
}
/* RSS widget */
&.widget_rss{
.rsswidget{
img {
margin-top: -2px;
}
}
.rss-date,
cite{
color: $low-color;
display: block;
font-style: normal;
line-height: 1.615384615;
margin-bottom: 10px; margin-top: 3px;
}
.rss-date{ text-transform: uppercase; font-size: 0.8571em; }
cite{ font-style: italic; font-weight: bold; }
.rssSummary{
&:last-child {
margin-bottom: 2.1538461538em;
}
}
> ul{
> li {
padding: 15px 0 0; margin: 15px 0 0; border-top: 1px solid $line-border-color;
&:first-child{ margin-top: 0px; padding-top: 0px; border-top: none; }
}
}
li{
padding: 4px 0;
.rsswidget{
font-weight: bold; line-height: 1.4285; padding: 0;
&:hover{ color: $color1; }
}
&:last-child :last-child {
margin-bottom: 0;
}
}
> ul{
> li{
&:first-child{padding-top: 0px;}
&:last-child{ padding-bottom: 0px; }
}
}
}
&.widget_calendar{
#calendar_wrap{
border: none;
}
#wp-calendar,
table {
background: white;
border-color: $line-border-color;
border-width: 1px;
border-style: solid;
width: 100%;
margin-bottom: 20px;
caption{
padding: 0 0 5px;
}
td.label{
display: table-cell;
label{margin: 0 0;}
}
margin-bottom: 30px;
> thead > tr > th,
> tbody > tr > th,
> tfoot > tr > th{
border-color: $line-border-color; border-width: 1px 1px 0 0; border-style: solid; color: $color; vertical-align: middle;
padding: 8px 0; text-align: center;
}
> thead > tr > th{
background: #f7f7f7;
}
> thead > tr > td,
> tbody > tr > td,
> tfoot > tr > td{
border-color: $line-border-color; border-width: 1px 1px 0 0; border-style: solid; padding: 8px 0; text-align: center;
}
td {
a.color-myaccount {
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
&#today{
}
}
tfoot {
tr {
}
}
}
#wp-calendar{
margin-bottom: 0px;
}
#wp-calendar tbody td a{
@include inline-block();
padding: 0;
background: none;
cursor: pointer;
white-space: normal;
font-size: 100%;
border: none;
@include border-radius(100%);
@include transition(all 0.25s linear);
vertical-align: top;
&:focus,
&:hover{color: $color1; background: #FFF; }
}
#wp-calendar tfoot #prev,
#wp-calendar tfoot #next{
text-align: center;
a,
a:focus{
font-size: 100%; background: none; border-color: $line-border-color; color: inherit;
padding: 3px 15px; @include box-shadow(none);
}
a:hover{
color: #FFF; background: $color1; border-color: $color1;
}
}
}
&.widget_sp_image{
padding: 0;border:none; position: relative; overflow: hidden;
.widget-title{
display: none;
}
a{
img{
margin: 0;
}
}
a{
position: relative; display: inline-block; max-width: 100%; overflow: hidden; vertical-align: top;
@include transition(all 0.25s ease 0s);
&:before{
content: " "; top:0; left: 0; opacity: 0; position: absolute; width: 100%; height: 100%; display: block; opacity: 0;
visibility: hidden; background-color: rgba(0,0,0, 0.2); @include transition(0.25s ease-out);
}
&:hover{
&:before{
opacity: 1; visibility: visible;
}
}
}
}
}
ul.side-navigation{
@include ulclear();
margin-bottom: 0px;
padding: 25px 20px;
li{
padding: 8px 0;
&:first-child{ padding-top: 0px; border-top: none;}
&:last-child{ padding-bottom: 0px;}
&.current_page_item{
a{color: $color1;}
}
a{ position: relative; padding: 0 0 0 20px; color: inherit;
&:hover{
color: $color1;
}
&:before{
position: absolute; @include font-awesome5('\f121', 12px, 900); left: 0px;
top: 50%;
line-height: 1;
@include translate(0,-50%);
margin-top: -2px;
}
}
ul{
border-top: 1px solid $line-border-color; margin-top: 8px;
padding: 8px 0 0 15px;
}
}
}
// Widget_Recent_Post
.widget-posts{
@include ulclear();
.post-item{
margin-bottom: 30px; @include clearfix();
&:last-child{
margin-bottom: 0;
.post-img{
margin-bottom: 0;
}
}
.post-img{
a{
display: block;position: relative; float: left; max-width: 70px; margin-right: 15px; padding: 0 0;
&:before{
content: ""; position: absolute; background: rgba(0, 0, 0, 0.2); width: 100%; height: 100%; z-index: 1;
@include opacity(0); @include transition(0.2s ease-out);
@include transform(scale(0.6));
}
}
}
.post-title{
margin: -6px 0 5px;
a{
padding: 0 0; max-height: 48px; display: block; overflow: hidden;
&:hover{
color: $color1;
}
}
}
.post-date{color: #ccc;}
&:hover{
.post-img{
a{
&:before{
@include opacity(1); @include transform(scale(1));
}
}
}
}
}
}
.vc_wp_custommenu{
&.inline-menu{
.widget{
&.widget_nav_menu{ margin-bottom: 10px;
.menu{
> li{ display: inline-block; float: left; position: relative; padding: 0 12.5px;
a{
&:before{ display: none; }
&:hover{ color: $color1; padding: 0 0;}
}
&:first-child{
padding-left: 0;
&:before{ display: none; }
}
ul.sub-menu{ display: none; }
}
}
}
}
}
}