Merge pull request #111 from findify/FI-8037-liquid-review-css-prefixes

Fi 8037 liquid review css prefixes
findify · Sep 18, 2024 · 7391759 · 7391759
2 parents 5185c24 + 77b5ee3
commit 7391759
Show file tree

Hide file tree

Showing 40 changed files with 914 additions and 890 deletions.
diff --git a/assets/findify-autocomplete.css b/assets/findify-autocomplete.css
diff --git a/assets/findify-autocomplete.js b/assets/findify-autocomplete.js
@@ -102,9 +102,9 @@ const initFindifyAutocompleteEvents = () => {
       isEscape ||
       !document
         .querySelector('.findify-autocomplete')
-        .className.includes('hidden')
+        .className.includes('findify-hidden')
     ) {
-      document.querySelector('.findify-autocomplete').className += ' hidden';
+      document.querySelector('.findify-autocomplete').className += ' findify-hidden';
       activeInput?.parentNode?.querySelector('button[type="submit"]')?.focus();
     }
     document.removeEventListener(`keydown`, initTrapFocus);
@@ -152,7 +152,7 @@ const initFindifyAutocompleteEvents = () => {
       '.findify-autocomplete'
     ).className;
     document.querySelector('.findify-autocomplete').className =
-      autocompleteClassName.replace(' hidden', '');
+      autocompleteClassName.replace(' findify-hidden', '');
     document
       .querySelector('.findify-close-autocomplete')
       ?.addEventListener('click', (e) => closeAutocomplete(e));

diff --git a/assets/findify-content-card.css b/assets/findify-content-card.css
@@ -1,10 +1,10 @@
-.adapt-content-img {
+.findify-adapt-content-img {
   width: 100%;
   aspect-ratio: 2/1;
   object-fit: cover;
 }
 
-.content-fallback-img {
+.findify-content-fallback-img {
   background: #f9f9f9;
   display: flex;
   justify-content: center;

diff --git a/assets/findify-content-tabs.css b/assets/findify-content-tabs.css
@@ -26,7 +26,7 @@
 .findify-tab:disabled > label {
   color: #c0c0c0;
 }
-.findify-tab.active {
+.findify-tab.findify-active {
   pointer-events: none;
   color: var(--findify-text-color);
   cursor: default;

diff --git a/assets/findify-content-tabs.js b/assets/findify-content-tabs.js
@@ -25,10 +25,10 @@ const initFindifyTabsEvents = () => {
     }
     tabs = document.querySelectorAll(selectors.tab);
     for (i = 0; i < tabs.length; i++) {
-      tabs[i].className = tabs[i].className.replace(" active", "");
+      tabs[i].className = tabs[i].className.replace(" findify-active", "");
     }
     document.getElementById(selectors.id(tab_id)).style.display = "block";
-    event.currentTarget.className += " active";
+    event.currentTarget.className += " findify-active";
   };
 
   const init = () => {

diff --git a/assets/findify-content.js b/assets/findify-content.js
@@ -143,7 +143,7 @@ const initFindifyContentEvents = () => {
 
      const initPagination = () => {
       const links = document.querySelectorAll(
-        `#${id}-content .pagination__item.link`
+        `#${id}-content .findify-pagination__item.link`
       );
 
       links.forEach((link) =>

diff --git a/assets/findify-filter-breadcrumb.css b/assets/findify-filter-breadcrumb.css
@@ -13,7 +13,7 @@
   background: unset;
 }
 
-.findify-filters-breadcrumbs-show-more.open svg {
+.findify-filters-breadcrumbs-show-more.findify-open svg {
   transform: rotate(180deg);
 }
 
@@ -22,8 +22,8 @@
   width: 100px;
 }
 
-.findify-filters-breadcrumb-item .solid-circle,
-.findify-filters-breadcrumb-item .circle-with-label {
+.findify-filters-breadcrumb-item .findify-solid-circle,
+.findify-filters-breadcrumb-item .findify-circle-with-label {
   height: 25px;
   width: 25px;
 }

diff --git a/assets/findify-filter.css b/assets/findify-filter.css
@@ -28,38 +28,38 @@
 #findify-filters-price .findify-filters--body-container{
   margin-top: 10px;
 }
-.price-input-container { 
+.findify-price-input-container { 
   width: 100%; 
   margin-top: 10px;
   padding: 0 10px;
 } 
 
-.price-input .price-field { 
+.findify-price-input .findify-price-field { 
   display: flex; 
   margin-bottom: 22px; 
 } 
 
-.price-field span { 
+.findify-price-field span { 
     margin-right: 10px; 
     margin-top: 6px; 
     font-size: 17px; 
 } 
 
-.price-field input { 
+.findify-price-field input { 
     font-size: 15px; 
     font-family: "DM Sans", sans-serif; 
     border-radius: 9px; 
     border: 0px;  
     width: 100%;
 } 
-.price-field input.min-input{
+.findify-price-field input.findify-min-input{
   text-align: left;
 }
-.price-field input.max-input{
+.findify-price-field input.findify-max-input{
   text-align: right;
 }
 
-.price-input { 
+.findify-price-input { 
   display: flex;
   width: 100%; 
   font-size: 19px; 
@@ -75,18 +75,18 @@ input::-webkit-inner-spin-button {
     margin: 0; 
 } 
 
-.slider-container { 
+.findify-slider-container { 
     width: 100%; 
 } 
 
-.slider-container { 
+.findify-slider-container { 
     height: 6px; 
     position: relative; 
     background: #e4e4e4; 
     border-radius: 5px; 
 } 
 
-.slider-container .price-slider { 
+.findify-slider-container .findify-price-slider { 
     height: 100%; 
     left: 0; 
     right: 0; 
@@ -95,11 +95,11 @@ input::-webkit-inner-spin-button {
     background: #01940b; 
 } 
 
-.range-input { 
+.findify-range-input { 
     position: relative; 
 } 
 
-.range-input input { 
+.findify-range-input input { 
     position: absolute; 
     width: 100%; 
     height: 5px; 
@@ -133,7 +133,7 @@ button {
 }
 
 /* SECTION - HEADER & BODY EXPAND */
-.findify-search-section.filters-horizontal .findify-filters-body{
+.findify-search-section.findify-filters-horizontal .findify-filters-body{
   position: absolute;
   z-index: 3;
   background: #fff;
@@ -161,10 +161,10 @@ button {
   width: 260px;
   position: relative;
 }
-.findify-filters-wrapper.absolute{
+.findify-filters-wrapper.findify-absolute{
   position: absolute;
 }
-.findify-filters-wrapper.fixed{
+.findify-filters-wrapper.findify-fixed{
   position: fixed;
   top: 0;
   z-index: 3;
@@ -353,14 +353,14 @@ button {
 /* ENDSECTION */
 
 /* SECTION - Color filter */
-.body-wrapper-layout-color {
+.findify-body-wrapper-layout-color {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
   padding: 0 12px 0 10px;
 }
 
-.body-wrapper-layout-color_with_label {
+.findify-body-wrapper-layout-color_with_label {
   display: flex;
   flex-direction: column;
   gap: 3px;
@@ -371,12 +371,12 @@ button {
   align-items: center;
 }
 
-.solid-circle {
+.findify-solid-circle {
   height: 35px;
   width: 35px;
 }
 
-.circle-with-label {
+.findify-circle-with-label {
   height: 30px;
   width: 30px;
 }
@@ -389,7 +389,7 @@ button {
 
 /* ENDSECTION */
 
-.findify-filters-sidebar.open {
+.findify-filters-sidebar.findify-open {
   display: flex;
   width: 260px
 }
@@ -445,19 +445,19 @@ button {
     justify-content: unset;
   }
   /* Ellipsis for mobile, increase with maximum */
-  .findify-filters-checkbox-item-value > span:not(.solid-circle),
-  .findify-filters--checkbox-nested-value > span:not(.solid-circle) {
+  .findify-filters-checkbox-item-value > span:not(.findify-solid-circle),
+  .findify-filters--checkbox-nested-value > span:not(.findify-solid-circle) {
     width: 250px;
   }
 }
 
 /* SECTION - Price range filter */
-.price-range-container {
+.findify-price-range-container {
   display: flex;
   justify-content: space-between;
   padding: 5px 12px 0 10px;
 }
-.price-range-content {
+.findify-price-range-content {
   display: flex;
   gap: 5px;
 }
@@ -470,7 +470,7 @@ button {
   background: #fff;
 }
 
-.price-range-input {
+.findify-price-range-input {
   box-shadow: none;
   max-width: 50px;
   height: 30px;
@@ -484,14 +484,14 @@ button {
 }
 
 /* Chrome, Safari, Edge, Opera */
-.price-range-input::-webkit-outer-spin-button,
-.price-range-input::-webkit-inner-spin-button {
+.findify-price-range-input::-webkit-outer-spin-button,
+.findify-price-range-input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
 /* Firefox */
-.price-range-input[type="number"] {
+.findify-price-range-input[type="number"] {
   -moz-appearance: textfield;
 }
 

diff --git a/assets/findify-grid.css b/assets/findify-grid.css
@@ -1,30 +1,30 @@
-.findify-search-section.filters-right .desktop{
+.findify-search-section.findify-filters-right .findify-desktop{
   overflow: hidden;
 }
-.findify-search-section.filters-right .desktop .findify-search-header-toolbar,
-.findify-search-section.filters-right .findify-search-main{
+.findify-search-section.findify-filters-right .findify-desktop .findify-search-header-toolbar,
+.findify-search-section.findify-filters-right .findify-search-main{
   flex-direction: row-reverse;
 }
-.findify-search-section.filters-right .findify-search-main {
+.findify-search-section.findify-filters-right .findify-search-main {
   flex-direction: row-reverse;
 }
 @media (min-width: 768px) {
-  .findify-search-section.filters-horizontal .findify-search-main{
+  .findify-search-section.findify-filters-horizontal .findify-search-main{
     flex-wrap: wrap;
   }
-  .findify-search-section.filters-horizontal .findify-filters-sidebar.open{
+  .findify-search-section.findify-filters-horizontal .findify-filters-sidebar.findify-open{
     width: 100%;
     flex-wrap: wrap;
   }
-  .findify-search-section.filters-horizontal .findify-filters-wrapper{
+  .findify-search-section.findify-filters-horizontal .findify-filters-wrapper{
     width: 100%;
     flex-direction: row;
     flex-wrap: wrap;
     max-width: 1100px;
   }
-  .findify-search-section.filters-horizontal #shopify-section-findify-filter-group{
-    min-width: 210px;
-    max-width: 210px;
+  .findify-search-section.findify-filters-horizontal #shopify-section-findify-filter-group{
+    min-width: 220px;
+    max-width: 220px;
   }
 }
 
@@ -138,7 +138,7 @@ b {
   color: var(--findify-text-color);
 }
 
-.hidden {
+.findify-hidden {
   display: none !important;
 }
 
@@ -147,10 +147,10 @@ b {
     display: none;
   }
 
-  .findify-search-section.filters-drawer .findify-search-header.mobile{
+  .findify-search-section.findify-filters-drawer .findify-search-header.findify-mobile{
     display: block;
   }
-  .findify-search-header.mobile {
+  .findify-search-header.findify-mobile {
     display: none;
   }
 
@@ -164,7 +164,7 @@ b {
 }
 
 @media (max-width: 768px) {
-  .findify-search-header.desktop {
+  .findify-search-header.findify-desktop {
     display: none;
   }
 

diff --git a/assets/findify-lazy-loading-pagination.js b/assets/findify-lazy-loading-pagination.js
@@ -78,7 +78,7 @@ const initFindifyLazyLoadingPagination = (
     }
     if (showLoadMoreButton) {
       const nextBtnElement = document.getElementById(selectors.nextBtn);
-      nextBtnElement.classList.toggle('hidden');
+      nextBtnElement.classList.toggle('findify-hidden');
     }
   };