244 lines
6.9 KiB
SCSS
244 lines
6.9 KiB
SCSS
@import 'variables', 'mixin';
|
|
|
|
/**
|
|
* Table of Contents:
|
|
|
|
* 1.0 - ul
|
|
* 2.0 - widget_product_categories
|
|
* 3.0 - widget-posts
|
|
*/
|
|
|
|
|
|
.sidebar {
|
|
.widget {
|
|
margin: 0 0 50px;
|
|
|
|
.tagcloud {
|
|
a {
|
|
font-size: 14px !important;
|
|
border: 1px solid black;
|
|
padding: 4px;
|
|
transition: $transition !important;
|
|
background-image: unset;
|
|
color: #000 !important;
|
|
|
|
&:hover {
|
|
background: #000 !important;
|
|
background-image: unset;
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-title {
|
|
font-size: 20px;
|
|
line-height: 20px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 40px;
|
|
position: relative;
|
|
font-weight: bold;
|
|
letter-spacing: 2px;
|
|
|
|
&:before {
|
|
content: "";
|
|
@include absolute(40px, auto, 0, 0);
|
|
background: $primary-color;
|
|
width: 50px;
|
|
height: 3px;
|
|
}
|
|
}
|
|
|
|
ul.menu {
|
|
li {
|
|
padding-left: 25px;
|
|
width: fit-content;
|
|
position: relative;
|
|
transition: $transition;
|
|
|
|
a {
|
|
border-top: unset;
|
|
font-size: 16px;
|
|
padding: 9px 10px 9px 0;
|
|
background-image: unset;
|
|
transition: $transition;
|
|
}
|
|
|
|
&:hover {
|
|
padding-left: 35px;
|
|
|
|
a {
|
|
font-weight: bold;
|
|
color: #000;
|
|
}
|
|
|
|
&:before {
|
|
width: 25px;
|
|
}
|
|
}
|
|
|
|
&:before {
|
|
content: "";
|
|
@include absolute(0, auto, 0, 0);
|
|
width: 15px;
|
|
height: 1px;
|
|
color: #000;
|
|
border-bottom: 1px solid black;
|
|
background: unset !important;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
transition: $transition;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 1.0 - ul */
|
|
>ul {
|
|
border-bottom: 1px solid $border-color;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
a {
|
|
display: block;
|
|
border-top: 1px solid $border-color;
|
|
padding: 9px 10px;
|
|
color: $body-color;
|
|
line-height: 1.5;
|
|
|
|
&:hover {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
display: block;
|
|
border-left: 1px dashed $border-color;
|
|
margin-left: 15px;
|
|
}
|
|
}
|
|
|
|
select {
|
|
@extend .form-select;
|
|
}
|
|
}
|
|
|
|
|
|
/* 2.0 - widget_product_categories */
|
|
.widget_product_categories {
|
|
&#woocommerce_product_categories-2 {
|
|
@include media-max(sm) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&#woocommerce_product_categories-3 {
|
|
@include media-min(sm) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.cat-parent {
|
|
position: relative;
|
|
pointer-events: none;
|
|
|
|
&:after {
|
|
content: '';
|
|
@include absolute(0, 0, 0);
|
|
width: 30px;
|
|
cursor: pointer;
|
|
z-index: 2;
|
|
pointer-events: auto;
|
|
background-position: right 12px top 16px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
>a {
|
|
padding-right: 30px;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
>ul {
|
|
display: none;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
&.active {
|
|
&:after {
|
|
color: $primary-color;
|
|
transform: rotate(180deg);
|
|
background-position: left 12px bottom 16px;
|
|
}
|
|
}
|
|
|
|
&.current-cat,
|
|
&.current-cat-parent {
|
|
&:after {
|
|
color: $primary-color;
|
|
transform: rotate(180deg);
|
|
background-position: left 12px bottom 16px;
|
|
cursor: default;
|
|
}
|
|
|
|
>ul {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.current-cat,
|
|
.current-cat-parent {
|
|
>a {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
|
|
.cat-item-none {
|
|
border-top: 1px solid $border-color;
|
|
padding: 9px 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* 3.0 - widget-posts */
|
|
.widget-posts__list {
|
|
.widget-post {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&:not(:first-child) {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
&__img-link {
|
|
width: 70px;
|
|
min-width: 70px;
|
|
margin-right: 15px;
|
|
@include css3(transition, $transition);
|
|
|
|
&:hover {
|
|
@include css3(opacity, .75);
|
|
}
|
|
}
|
|
|
|
&__date {
|
|
font-size: $body-font-size - 2px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
&__h {
|
|
margin: 0;
|
|
font-size: $body-font-size;
|
|
font-weight: $header-font-weight;
|
|
line-height: 25px;
|
|
|
|
a {
|
|
color: $header-color;
|
|
@extend %link-color;
|
|
}
|
|
}
|
|
}
|
|
} |