File: /home/madepabj/hc-cosmetics.com/wp-content/themes/dbea/assets/scss/theme/_wp_block.scss
/***************************************************
scss file: assets/scss/theme/_wp_block.scss
+ Override style for some .wp-block
****************************************************/
abbr[title], abbr[data-original-title]{
border-bottom: none;
}
.wp-block-table{
&.is-style-stripes{
td,th{
border-color: $base-border-color;
}
border-bottom: none;
}
}
.wp-caption{max-width: 100%; border: none; padding: 5px 0 0;
&.alignleft{
margin: 3px 25px 15px 0;
}
&.alignright{
margin: 3px 0 15px 25px;
}
&.alignnone{
margin: 3px 0 15px 0;
}
p.wp-caption-text{
padding: 5px 0;
}
}
.wp-block-image{
figure{
&.alignleft{
margin: 8px 20px 10px 0;
}
&.alignright{
margin: 8px 0 10px 20px;
}
&.alignnone{
margin: 8px 0 10px 0;
}
}
p.wp-caption-text{
padding: 5px 0;
}
figcaption{ font-size: 0.8571em; color: $low-color; }
}
.wp-block-gallery{
margin-bottom: 18px; margin-top: 18px;
.blocks-gallery-item{
padding: 0;
}
}
.wpb_text_column img.alignleft{
margin: 5px 15px 5px 0;
}
figure.alignnone,
figure.alignright,
figure.alignleft{
margin-bottom: 0px;
figcaption{
padding: 5px 0 0; margin: 0; font-size: 0.8571em; text-align: center; color: $low-color;
}
}
#wp-calendar,
table {
background: white;
border-color: $base-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;}
}
> thead > tr > th,
> tbody > tr > th,
> tfoot > tr > th{
border-color: $base-border-color; border-width: 1px 1px 0 0; border-style: solid; color: $link-color; vertical-align: middle;
@media(min-width: $screen-phone){ padding: 12px 20px; }
}
> thead > tr > th{
background: #f7f7f7;
}
> thead > tr > td,
> tbody > tr > td,
> tfoot > tr > td{
border-color: $base-border-color; border-width: 1px 1px 0 0; border-style: solid;
@media(min-width: $screen-phone){ padding: 12px 20px; }
}
td {
a.color-myaccount {
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
&#today{
color: $link-color;
a{
color: $link-color; font-weight: bold;
&:hover{ color: $color1; }
}
}
}
tfoot {
tr {
}
}
}
.wp-calendar-nav{
a{ font-weight: bold; text-decoration: none; }
.wp-calendar-nav-prev{ float: left; margin: 5px 0 0 10px; }
.wp-calendar-nav-next{ float: right; margin: 5px 10px 0 0; }
}
#wp-calendar{
margin-bottom: 0px;
}
#wp-calendar tbody td a{
@include inline-block();
padding: 0;
background: transparent;
cursor: pointer;
white-space: normal;
font-size: 100%;
border: none;
@include border-radius(100%);
@include transition(all 0.25s linear);
vertical-align: top;
font-weight: bold;
color: $link-color; text-decoration: none;
&: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: $base-border-color; color: inherit;
padding: 3px 15px; @include box-shadow(none);
}
}
.wp-block-button__link{
&:hover{ background-color: $color1; border-color: $color1; color: #FFF; }
}
.wp-block-cover-image.has-background-dim:not(.has-background-gradient),
.wp-block-cover-image .wp-block-cover__gradient-background,
.wp-block-cover.has-background-dim:not(.has-background-gradient),
.wp-block-cover .wp-block-cover__gradient-background{
color: #FFF;
}
.wp-block-gallery{
.blocks-gallery-grid,
.blocks-gallery-grid,
.wp-block-gallery,
.wp-block-gallery{
margin-bottom: -16px;
}
}
// Widget Block
.widget.widget_block{
// Title
> .wp-block-group > .wp-block-group__inner-container {
> h1, > h2, > h3, > h4 {
font-size: 1.5em; line-height: 1.1; text-transform: uppercase; margin-bottom: 21px;
display: flex; align-items: center;
&:after{ content: ""; flex: 1; margin-left: 20px; height: 1px; background: $line-border-color; }
}
}
// Recent comment
ol.wp-block-latest-comments{
padding-left: 0px; margin-bottom: 0;
li{
position: relative; padding: 10px 0 0; margin: 10px 0 0; border-top: 1px dashed $base-border-color; line-height: inherit;
&:before{ @include font-ionicons('\f3fc', 14px); font-size: 17px; text-align: left; margin-right: 6px; margin-top: 6px; float: left; }
&:first-child{
margin-top:0px; padding-top: 0px; border-top: none;
}
> article{ display: inline; line-height: inherit; }
.wp-block-latest-comments__comment-author{
color: inherit; font-weight: normal;
&:hover{ color: $color1;
}
}
a{ padding: 0 0; font-weight: bold;
&:hover{ color: $color1;
}
}
}
}
// Latest post
ul.wp-block-latest-posts{
li{
position: relative; padding: 10px 0 0; margin: 10px 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%); }
}
}
}
// Archive
.wp-block-archives{
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; }
}
}
}
}
// Categories
.wp-block-categories{
li{
position: relative; padding: 3px 0px; margin: 0; @include clearfix();
&:last-child{
border-bottom: none;
}
&:first-child{ border-top: none; padding-top: 0; }
.count{ color: $low-color; }
> a{
padding: 0 3px 0 0; float: left; color: $link-color;
&:before{
@include font-ionicons('\f139', 13px); font-size: 16px; margin-top: -3px; margin-right: 6px; text-align: left; vertical-align: middle;
color: $color; @include transition(all 0.25s ease-out 0s);
}
&:hover{ color: $color1;
&:before{ color: inherit; }
}
}
}
}
}
.widget_block.widget_search {
.wp-block-search__label{ font-weight: bold; margin: 0 0 10px;}
form.wp-block-search{
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.wp-block-search__input{
width: 100%; padding: 0 25px; background: #f9f9f9; padding-left: 20px;
box-shadow: unset;
&:focus{ border-color: $base-border-color; }
}
button.wp-block-search__button {
font-size: 0px; padding: 0 0; border: none; height: 20px; width: 20px; position: absolute; right: 15px; bottom: calc(25px - 10px); margin: 0 0; background: transparent;
}
&:hover{
&:before{
background: $color1;
}
}
}
}