Viewing File: /home/maglabs/etascom/wp-content/themes/agenzio/assets/scss/widgets.scss
// Sidebar
//--------------------------------------------------
@media #{$min-xl} {
.pxl-sidebar-sticky {
position: -webkit-sticky;
position: sticky;
top: 40px;
}
.admin-bar .pxl-sidebar-sticky {
top: 72px;
}
}
.widget .widget-title, .pxl-widget-title, .comments-title, .comment-reply-title {
font-family: Outfit;
font-size: 24px;
font-style: normal;
font-weight: 500;
letter-spacing: -0.48px;
margin-bottom: 43px;
color: $link_color;
@media (max-width: 575px) {
margin-bottom: 30px;
}
}
.pxl-sidebar-area {
.pxl-sidebar-sticky {
padding-left: 20px;
@media (max-width: 1199px) {
padding-left: 0;
}
}
.widget {
margin-bottom: 52px;
@include border-radius(0);
font-size: 0;
margin-top: 5px;
&:last-child {
margin-bottom: 0;
}
.widget-title {
font-size: 20px;
font-style: normal;
font-weight: 500;
margin-bottom: 29px;
border-bottom: 1px solid #DEDEDE;
letter-spacing: 0.03px;
padding-bottom: 21px;
position: relative;
&:before {
content: '';
position: absolute;
width: 30px;
height: 1px;
background-color: $primary_color;
bottom: -1px;
left: 0;
}
}
}
}
.pxl-sidebar-left {
.pxl-sidebar-sticky {
padding-left: 0px;
padding-right: 20px;
@media (max-width: 1199px) {
padding-right: 0;
}
}
}
.widget_search {
.searchform-wrap {
position: relative;
}
.search-submit{
height: 54px;
width: 54px;
font-weight: 700;
background-color: $primary_color;
@include transition(all 300ms linear 0ms);
top: 50%;
right: 0;
@include border-radius(0);
padding: 0;
position: absolute;
color: #fff;
z-index: 1;
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.05);
&:before, &:after {
display: none;
}
i {
line-height: 1;
background-color: unset;
color: #fff;
font-size: 14px;
}
&:hover {
i {
color: #fff;
}
}
}
.search-field, .wp-block-search__input {
background-color: #F6F6F6;
padding-left: 20px;
height: 54px;
@include border-radius(0);
color: rgba(#232323,0.3);
border: 1px solid #F6F6F6;
padding-right: 57px;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
&:focus {
border-color: $primary_color;
+ .search-submit {
border-color: $primary_color;
}
}
}
}
.widget_product_categories,
.widget_categories,
.widget_nav_menu,
.widget_pages,
.widget_archive,
.widget_meta,
.widget_recent_entries {
ul {
list-style: none;
margin-bottom: 0;
padding: 0;
li {
margin-bottom: 15px;
a {
font-family: Outfit;
font-size: 14px;
font-style: normal;
font-weight: 500;
color: $link_color;
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
padding-left: 30px;
@include transition(all 300ms linear 0ms);
@media (max-width: 1199px) {
font-size: 14px;
}
@media (max-width: 480px) {
font-size: 13px;
}
&:before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid #DEDEDE;
transform: translateY(-50%);
opacity: 1;
@include transition(all 0.3s);
}
&:after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 16px;
height: 16px;
border-radius: 50%;
border: 4px solid $primary_color;
transform: translateY(-50%);
@include transition(all 0.3s);
opacity: 0;
}
}
.pxl-count {
font-family: Outfit;
font-size: 14px;
font-style: normal;
font-weight: 400;
position: absolute;
text-align: center;
color: #666;
right: 0;
top: 50%;
transform: translate(0, -50%);
@include transition(all 300ms linear 0ms);
@media (max-width: 1199px) {
font-size: 16px;
}
@media (max-width: 480px) {
font-size: 14px;
}
}
&:first-child > a {
border-top: none;
}
&.current-menu-item > a, &.current-cat > a, &.current-cat-parent > a, > a:hover {
color: $link_color;
&:before {
opacity: 0;
}
&:after {
opacity: 1;
}
.pxl-count {
color: $link_color;
}
}
.sub-menu, .children {
margin-top: 15px;
}
.children {
border: none;
padding: 0;
padding-left: 15px;
}
> .sub-menu {
border: none;
padding: 0;
padding-left: 15px;
> li {
> a {
padding-left: 30px;
}
> .sub-menu > li {
> a {
padding-left: 30px;
}
> .sub-menu > li {
> a {
padding-left: 30px;
}
> .sub-menu > li {
> a {
padding-left: 30px;
}
> .sub-menu > li {
> a {
padding-left: 30px;
}
> .sub-menu > li {
> a {
padding-left: 30px;
}
> .sub-menu > li {
> a {
padding-left: 30px;
}
> .sub-menu > li {
> a {
padding-left: 30px;
}
> .sub-menu > li {
> a {
padding-left: 30px;
}
> .sub-menu > li {
> a {
padding-left: 30px;
}
}
}
}
}
}
}
}
}
}
}
}
}
> li:last-child {
margin-bottom: 0;
}
}
}
.widget_tag_cloud {
.tagcloud {
display: flex;
flex-wrap: wrap;
}
a {
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
padding: 4px 15px;
color: $link_color;
@include border-radius(0px);
background-color: #fff;
border: 1px solid #dedede;
margin: 5px;
&:last-child {
margin-right: 0;
}
&:hover {
color: #fff;
border-color: $primary_color;
background-color: $primary_color;
}
}
}
.widget_pxl_recent_posts {
.pxl--items {
.pxl--item {
display: inline-flex;
align-items: center;
margin-bottom: 26px;
@include transition(all 0.3s);
width: 100%;
position: relative;
&:last-child {
margin-bottom: 0;
}
.pxl-item--img {
min-width: 80px;
margin-right: 20px;
@include transition(all 0.3s);
position: relative;
background-color: #D9D9D9;
img {
mix-blend-mode: luminosity;
@include transition(mix-blend-mode 0.3s ease);
}
}
.pxl-item--holder {
.pxl-item--date {
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
text-transform: capitalize;
color: $secondary_color;
margin-bottom: 5px;
display: inline-flex;
align-items: center;
i {
color: $link_color;
}
}
.pxl-item--title {
font-family: Outfit;
font-size: 14px;
font-style: normal;
font-weight: 500;
margin-bottom: 0;
line-height: 1.4;
@media (max-width: 480px) {
font-size: 16px;
}
a {
@include transition(all 0.3s);
}
}
}
&:hover {
.pxl-item--img {
img {
mix-blend-mode: normal;
}
}
}
}
}
}
.widget_pxl_elementor_box {
position: relative;
overflow: hidden;
padding: 15px 15px 6px 15px;
background-color: #d9d9d9;
&:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url(../img/banner-box-img.jpg);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
mix-blend-mode: luminosity;
}
&:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(154deg, rgba(#fff, 0.00) 29.87%, $primary_color 67.45%);
}
.elementor {
position: relative;
z-index: 1;
}
.widget-title {
display: none;
}
}
.gallery {
margin: -10px -5px 0 -5px !important;
display: flex;
flex-wrap: wrap;
.gallery-item {
padding: 0 5px !important;
margin: 24px 0 0 !important;
img {
border: none !important;
}
}
&.gallery-columns-2 .gallery-item {
width: 50% !important;
}
&.gallery-columns-3 .gallery-item {
width: 33.33% !important;
}
&.gallery-columns-4 .gallery-item {
width: 25% !important;
}
&.gallery-columns-5 .gallery-item {
width: 20% !important;
}
}
#pxl-content-main {
.gallery {
margin: -5px -12px 38px -12px !important;
.gallery-item {
padding: 0 12px !important;
margin: 24px 0 0 !important;
}
}
}
.widget_media_gallery, .elementor-widget-wp-widget-media_gallery, .elementor-widget-image-gallery {
.gallery {
margin: -10px -5px 0 -5px;
.gallery-item {
padding: 0 5px;
margin-top: 10px !important;
margin-bottom: 0;
img {
@include border-radius(0px);
width: 100%;
border: none !important;
}
a {
display: block;
position: relative;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(#000, 0.67);
@include transition(all 250ms linear 0ms);
opacity: 0;
z-index: 1;
}
&:after {
content: "\f12c";
font-size: 15px;
font-family: "Caseicon";
color: rgba(#fff, 1);
z-index: 2;
position: absolute;
left: 50%;
top: 50%;
@include transform(translate(-50%, -50%));
@include transition(all 250ms linear 0ms);
opacity: 0;
font-weight: 400;
}
&:hover {
&:before, &:after {
opacity: 1;
}
}
}
}
}
}
.elementor-lightbox {
.swiper-container {
.elementor-lightbox-image {
width: auto;
height: auto;
}
.swiper-slide {
background-color: transparent;
}
}
}
.pxl-gallery {
margin: -8px -15px 30px -15px;
display: flex;
flex-wrap: wrap;
img {
width: 100%;
}
.pxl--item {
padding: 30px 15px 0 15px;
}
.pxl--item-inner {
@include border-radius(6px);
overflow: hidden;
position: relative;
&.video-active:before {
@extend .pxl-spill;
background-color: rgba(#1b1b1b, 0.5);
}
.pxl-btn-video {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
z-index: 99;
}
}
&.gallery-2-columns .pxl--item {
width: 50%;
@media #{$max-xs} {
width: 100%;
}
}
&.gallery-3-columns .pxl--item {
width: 33.33%;
@media #{$max-xs} {
width: 100%;
}
}
&.gallery-4-columns .pxl--item {
width: 25%;
@media #{$max-sm} {
width: 50%;
}
@media #{$max-xs} {
width: 100%;
}
}
&.gallery-5-columns .pxl--item {
width: 20%;
@media #{$max-sm} {
width: 50%;
}
@media #{$max-xs} {
width: 100%;
}
}
&.masonry-style1 {
.pxl--item-inner {
@include border-radius(0px);
}
}
}
.calendar_wrap {
caption {
margin-bottom: 10px;
}
}
.widget_recent_comments {
ul, ol {
list-style: none;
font-size: 14px;
line-height: 24px;
color: #080808;
font-weight: 500;
font-family: Outfit;
@extend .ft-theme-default;
a {
color: inherit;
&:hover {
color: $primary_color;
}
}
li + li {
margin-top: 18px;
}
}
}
.widget_rss {
.rss-widget-title {
color: inherit;
}
ul, ol {
margin: 0;
list-style: none;
}
.rsswidget {
display: block;
font-size: 14px;
line-height: 24px;
color: $link_color;
font-weight: 500;
font-family: Outfit;
@extend .ft-theme-default;
&:hover {
color: $primary_color;
}
}
.rss-date {
font-size: 12px;
display: block;
margin-top: 4px;
margin-bottom: 10px;
}
li + li {
margin-top: 5px;
}
cite {
display: block;
margin-top: 4px;
color: $primary_color;
}
}
.widget_block {
ul, ol {
margin-bottom: 0;
padding: 0;
list-style: none;
}
.wp-block-search__label, .wp-block-group__inner-container > h2 {
font-size: 20px;
font-style: normal;
font-weight: 500;
margin-bottom: 29px;
border-bottom: 1px solid #dedede;
letter-spacing: 0.03px;
padding-bottom: 21px;
position: relative;
display: block;
color: $link_color;
&:before {
content: '';
position: absolute;
width: 30px;
height: 1px;
background-color: $primary_color;
bottom: -1px;
left: 0;
}
}
.wp-block-latest-posts__list, .wp-block-latest-comments {
font-size: 14px;
line-height: 1.4;
color: #080808;
font-weight: 500;
font-family: Outfit;
@extend .ft-theme-default;
a {
color: inherit;
&:hover {
color: $primary_color;
}
}
li + li {
margin-top: 18px;
}
}
.wp-block-latest-comments {
color: #666;
a {
color: #080808;
&:hover {
color: $primary_color;
}
}
}
&.widget_search {
.wp-block-search__inside-wrapper {
position: relative;
.wp-block-search__button {
height: 54px;
width: 54px;
font-weight: 700;
background-color: $primary_color;
top: 50%;
right: 0;
padding: 0;
position: absolute;
color: #fff;
z-index: 1;
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
padding: 0;
line-height: 54px;
z-index: 1;
font-size: 0px;
@include box-shadow(none);
&:before {
content: "\f12c";
font-family: Caseicon;
font-size: 14px;
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
&:hover {
border-color: $primary_color;
background-color: $primary_color;
color: #fff;
}
}
.wp-block-search__input {
border-color: #ececf0;
color: #222222;
padding-left: 15px;
}
}
}
}
.widget_archive .nice-select ul.list {
max-width: 320px;
}
.wp-calendar-table {
background-color: #fff;
}
.pxl-wg-categories {
margin: -20px -10px 0 -10px;
display: flex;
flex-wrap: wrap;
.pxl-category {
padding: 0 10px;
margin-top: 20px;
}
.pxl-category--inner {
min-height: 90px;
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
overflow: hidden;
@media #{$max-xs} {
min-height: 120px;
}
&:before {
content: '';
@extend .pxl-spill;
background-color: rgba(#000, 0.36);
z-index: 12;
}
a {
@extend .pxl-spill;
z-index: 99;
}
span {
color: #fff;
font-size: 16px;
font-weight: 700;
@extend .ft-theme-default;
position: relative;
z-index: 88;
}
.pxl-category--img {
z-index: 11;
@extend .pxl-spill;
@include transition(all 0.5s ease);
transform: scale(1.01,1.01);
}
&:hover .pxl-category--img {
-webkit-transform: scale(1.07,1.07);
transform: scale(1.07,1.07);
}
}
&.columns-2 .pxl-category {
width: 50%;
@media #{$max-xs} {
width: 100%;
}
}
}
.pxl-contact-info-widget {
border-radius: 5px;
overflow: hidden;
position: relative;
z-index: 1;
text-align: center;
padding: 62px 30px;
font-weight: 500;
color: rgba(#fff, 0.8);
.pxl-phone--number {
margin-bottom: 16px;
color: #fff;
font-size: 34px;
font-weight: 800;
@extend .ft-theme-default;
@media #{$max-lg} {
font-size: 28px;
}
}
.pxl-item--icon {
height: 62px;
width: 62px;
background-color: red;
border-radius: 62px;
font-size: 34px;
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
margin-bottom: 23px;
&:before {
content: '';
background-color: #020626;
position: absolute;
top: 3px;
right: 3px;
bottom: 3px;
left: 3px;
border-radius: 100%;
z-index: -1;
}
@extend .bg-gradient;
i {
@extend .text-gradient;
&.active {
animation: pxl_zigzag 0.8s ease-out infinite;
-webkit-animation: pxl_zigzag 0.8s ease-out infinite;
}
}
}
.pxl-phone--link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
}
&:before {
z-index: -1;
@extend .pxl-spill;
background-color: rgba(#020626, 0.85);
}
}
body.rtl {
.widget {
.widget-title {
padding-left: 0;
padding-right: 42px;
&:before {
left: auto;
right: 0;
}
}
}
}
Back to Directory
File Manager