Breaking change: Solves icon positioning within filter button

minvws · Aug 8, 2024 · 71a32b6 · 71a32b6
1 parent 85a34f1
commit 71a32b6
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 27 deletions.
diff --git a/docs/src/routes/(docs)/components/filter/+page.svelte b/docs/src/routes/(docs)/components/filter/+page.svelte
@@ -305,7 +305,9 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
         <h3>Benodigd</h3>
         <ul>

diff --git a/manon/filter-variables.scss b/manon/filter-variables.scss
@@ -35,13 +35,4 @@
   --filter-button-icon-font-family: var(--icon-font-family);
   --filter-button-icon-font-size: var(--icon-font-size);
   --filter-button-icon-font-weight: bold;
-
-  /* To center text within the button set the line-height to 1 */
-  --filter-button-icon-line-height: 1;
-
-  /* content on the button when the menu is collapsed */
-  --filter-button-icon-before-open-content: "⯆";
-
-  /* content on the button when the menu is expanded */
-  --filter-button-icon-before-close-content: "⯅";
 }
diff --git a/manon/filter.scss b/manon/filter.scss
@@ -45,23 +45,8 @@
       font-size: var(--filter-button-font-size);
       min-width: 0;
 
-      &::after {
-        font-family: var(--filter-button-icon-font-family, inherit);
-        line-height: var(--filter-button-icon-line-height);
-        font-size: var(--filter-button-icon-font-size, inherit);
-        font-weight: var(--filter-button-icon-font-weight, inherit);
-      }
-
-      &[aria-expanded="true"] {
-        &::after {
-          content: var(--filter-button-icon-before-close-content);
-        }
-      }
-
-      &[aria-expanded="false"] {
-        &::after {
-          content: var(--filter-button-icon-before-open-content);
-        }
+      span.icon {
+        order: var(--filter-button-icon-order);
       }
     }
   }