Widget: GuidelinesList: Difference between revisions

Revision as of 15:03, 2 December 2022

Development version of the List of Guidelines.
Not ready for production!

@@ Line 117: / Line 117: @@
          }
-        .filter-wrapper h4 {
+         .filter-wrapper .filter-toggle {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-        }
-         .filter-wrapper .filter-toggle svg {
-            width: 1.5em;
-            height: 1.5em;
-            fill: var(--links-orange);
              cursor: pointer;
          }
-         .filter-wrapper.open .filter-toggle {
+         .filter-wrapper.open .plus.icon::after {
-             transform: rotate(180deg);
+             transform: rotate(0);
          }
@@ Line 884: / Line 875: @@
                  </div>
                  <div class="filter-wrapper">
-                     <h4>Covers Thematic <span class="filter-toggle"><svg>
+                     <h4 class="filter-toggle">Covers Thematic <div class="plus icon"></div></h4>
-                                <use href="#chevron-down" />
-                            </svg></span></h4>
                      <div class="filter-container">
                          <div class="filter-button-wrapper">
@@ Line 896: / Line 885: @@
                  </div>
                  <div class="filter-wrapper">
-                     <h4>Language<span class="filter-toggle"><svg>
+                     <h4 class="filter-toggle">Language <div class="plus icon"></div></h4>
-                                <use href="#chevron-down" />
-                            </svg></span></h4>
                      <div class="filter-container">
                          <div class="filter-button-wrapper">
@@ Line 908: / Line 895: @@
                  </div>
                  <div class="filter-wrapper">
-                     <h4>Disaster Management Phase<span class="filter-toggle"><svg>
+                     <h4 class="filter-toggle">Disaster Management Phase <div class="plus icon"></div></h4>
-                                <use href="#chevron-down" />
-                            </svg></span></h4>
                      <div class="filter-container">
                          <div class="filter-button-wrapper">
@@ Line 920: / Line 905: @@
                  </div>
                  <div class="filter-wrapper">
-                     <h4>Target Audience<span class="filter-toggle"><svg>
+                     <h4 class="filter-toggle">Target Audience <div class="plus icon"></div></h4>
-                                <use href="#chevron-down" />
-                            </svg></span></h4>
                      <div class="filter-container">
                          <div class="filter-button-wrapper">
@@ Line 932: / Line 915: @@
                  </div>
                  <div class="filter-wrapper">
-                     <h4>Audience Experience Level<span class="filter-toggle"><svg>
+                     <h4 class="filter-toggle">Audience Experience Level <div class="plus icon"></div></h4>
-                                <use href="#chevron-down" />
-                            </svg></span></h4>
                      <div class="filter-container">
                          <div class="filter-button-wrapper">
@@ Line 944: / Line 925: @@
                  </div>
                  <div class="filter-wrapper">
-                     <h4>Mentions Platforms <span class="filter-toggle"><svg>
+                     <h4 class="filter-toggle">Mentions Platforms <div class="plus icon"></div></h4>
-                                <use href="#chevron-down" />
-                            </svg></span></h4>
                      <div class="filter-container">
                          <div class="filter-button-wrapper">
@@ Line 956: / Line 935: @@
                  </div>
                  <div class="filter-wrapper">
-                     <h4>Mentions Techologies <span class="filter-toggle"><svg>
+                     <h4 class="filter-toggle">Mentions Techologies <div class="plus icon"></div></h4>
-                                <use href="#chevron-down" />
-                            </svg></span></h4>
                      <div class="filter-container">
                          <div class="filter-button-wrapper">