Suspendisse efficitur nisl quis felis finibus, sed hendrerit felis dictum. Vestibulum non tempor orci. Sed a nulla imperdiet augue commodo maximus vitae at leo..
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-tax-guides {
background-repeat: no-repeat;
background-position: left bottom;
color: $white;
border-top: 1px solid $border-grey;
border-bottom: 1px solid $border-grey;
background-blend-mode: screen;
padding: $grid-gutter-width 0;
background-image: linear-gradient(180deg, #552E91 0%, #2AACE2 100%);
@include bp($md) {
padding: 0;
background-image: url(/wp-content/themes/moore-global/assets/images/tax-guides-block-bg.png), var(--primary-gradient);
}
&__content {
padding-right: 0;
p {
color: $white;
}
@include bp($xl) {
padding-right: 20%;
}
h2,h3,h4,h5,h6 {
--text-color: var(--white);
}
}
&__content, &__list {
padding-top: 8px;
@include bp($md) {
padding-top: rem-calc(100);
padding-left: $container-spacing-desktop;
}
@include bp($xxl) {
padding-left: 0;
}
}
.section-name__heading {
color: $white;
}
#tax-guide-search {
@include search-input-transparent;
margin-top: 2rem;
&::placeholder {
color: rgba(255, 255, 255, 0.4);
}
}
&__list {
min-height: 500px;
padding-top: $grid-gutter-width;
@include bp($md) {
padding-top: rem-calc(100);
min-height: 720px;
padding-bottom: rem-calc(100);
}
@include bp($lg) {
padding-left: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
max-height: 520px;
overflow-y: scroll;
overflow-x: hidden;
padding-right: 5px;
// Custom scrollbar styles
&::-webkit-scrollbar {
width: 2px; // Width of the scrollbar
height: 2px;
}
&::-webkit-scrollbar-track {
background: transparent; // Background of the scrollbar track
}
&::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.5); // Color of the scrollbar thumb
}
&::-webkit-scrollbar-thumb:hover {
background: darken($primary-blue, 10%); // Darker color on hover
}
}
&-item {
margin-bottom: rem-calc(12);
display: flex;
&:last-of-type {
margin-bottom: 0;
}
a, .no-results {
display:flex;
background: rgba(2, 33, 46, 0.2);
padding: $grid-gutter-width;
backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.1);
flex-direction: column;
color: $white;
text-decoration: none;
width: 100%;
align-items: center;
cursor: pointer;
position: relative;
@include bp($sm) {
flex-direction: row;
}
&:after {
content: '';
background-image: url(/wp-content/themes/moore-global/assets/icons/white-arrow-right.svg);
width: 16px;
height: 26px;
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
right: 1rem;
top: 50%;
margin-top: -16px;
transition: all 0.3s ease-in-out;
@include bp($xl) {
right: 36px;
}
}
&:hover {
&:after {
margin-right: -16px;
}
}
h4 {
font-size: 11px;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 0;
}
h3{
font-size: $heading-4;
margin-bottom: 0;
@include bp($lg) {
font-size: $heading-8;
}
@include bp($xl) {
font-size: $heading-4;
}
}
}
&:last-child {
margin-bottom: 0;
}
.no-results {
cursor: default;
&:after {
display: none;
}
}
&-heading {
padding-right: 10px;
margin-bottom: 1rem;
h3,h4 {
--text-color: var(--white);
}
@include bp($sm) {
margin-bottom: 0;
}
@include bp($md) {
padding-right: 1rem;
}
}
&-content {
span {
display: block;
margin-bottom: 5px;
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
&:last-child {
margin-bottom: 0;
}
}
}
&-content, &-heading {
width: 100%;
@include bp($md) {
min-width: 50%;
}
}
&-content {
@include bp($sm) {
min-width: 55%;
}
}
&-heading {
@include bp($sm) {
min-width: 45%;
}
}
}
}
}
class TaxGuides {
block;
constructor(block) {
this.block = block;
this.searchInput = this.block.querySelector('#tax-guide-search');
this.init();
}
init() {
this.onSearch();
}
onSearch() {
this.searchInput.addEventListener('keyup', (e) => {
const searchValue = e.target.value.toLowerCase();
const listItems = this.block.querySelectorAll('.block-tax-guides__list-item');
let hasVisibleItems = false; // Track if any items are visible
listItems.forEach(item => {
const country = item.getAttribute('data-country').toLowerCase();
if (country.includes(searchValue)) {
item.style.display = 'block';
hasVisibleItems = true; // At least one item is visible
} else {
item.style.display = 'none';
}
});
// Show or hide the no-results message based on visibility
this.block.querySelector('[data-country="no-results"]').style.display = hasVisibleItems ? 'none' : 'block';
})
}
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.block-tax-guides').forEach((block) => {
new TaxGuides(block);
})
});
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/tax-guides",
"title": "Tax Guides",
"description": "Example block to be used as a template",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-tax-guides.php"
},
"supports": {
"anchor": true,
"align": false,
"color": {
"background": false,
"text": false,
"gradients": false
},
"spacing": {
"padding": [
"top",
"bottom"
],
"margin": [
"top",
"bottom"
]
}
},
"example": {
"attributes": {
"mode": "preview",
"data": {
"heading_type": "h2",
"heading_text": "Example - Tax Guides",
"content": "This is some example content to represent what the content will look like"
}
}
},
"style": ["file:../../assets/css/tax-guides/block-tax-guides.css"],
"viewScript": ["tax-guides"]
}