refactor(docs-evergreen): Re-sking FAQ accordions (segmentio#1282)

* refactor(docs-evergreen): Re-sking FAQ accordions * Update _accordion.scss Co-authored-by: Klaudia <[email protected]>
Topsort · Dec 7, 2020 · 955e4be · 955e4be
1 parent 9cb78b3
commit 955e4be
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/_plugins/jekyll-faq.rb b/_plugins/jekyll-faq.rb
@@ -14,8 +14,8 @@ def render(context)
       <div class="accordion__heading" data-ref="accordion[trigger]">
         <%= key.split("|")[0] %>
         <div class="accordion__icon">
-          <svg width="10" height="6" xmlns="http://www.w3.org/2000/svg">
-            <path d="M1.36.27l-.72.7L5 5.39 9.36.97l-.72-.7L5 3.97z" fill-rule="nonzero"/>
+          <svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.87 4.17s.01 0 0 0l-3.5-4A.498.498 0 004 0c-.15 0-.28.07-.37.17l-3.5 4A.495.495 0 00.5 5h7a.495.495 0 00.37-.83z" fill="#8F95B2"/>
           </svg>
         </div>
       </div>

diff --git a/src/_includes/components/faq.html b/src/_includes/components/faq.html
@@ -11,7 +11,9 @@ <h3>{{ item[0] }}</h3>
         <div class="accordion__heading" data-ref="accordion[trigger]">
           {{ itemEl.title }}
           <div class="accordion__icon">
-            {% include icons/symbols/caret-down.svg %}
+            <svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M7.87 4.17s.01 0 0 0l-3.5-4A.498.498 0 004 0c-.15 0-.28.07-.37.17l-3.5 4A.495.495 0 00.5 5h7a.495.495 0 00.37-.83z" fill="#8F95B2"/>
+            </svg>
           </div>
         </div>
         <div class="accordion__body" data-ref="accordion[body]">

diff --git a/src/_sass/components/_accordion.scss b/src/_sass/components/_accordion.scss
@@ -5,16 +5,16 @@
     margin-top: 25px;
 
     & + & {
-      border-top: 1px solid rgba(color(secondary), 0.16);
+      border-top: 1px solid color(gray-300);
       margin-top: 0;
     }
   }
 
   &__heading {
     padding-right: 20px;
-    font-size: 15px;
+    font-size: 16px;
     font-weight: 500;
-    color: color(secondary);
+    color: color(gray-800);
     line-height: 1.71;
     position: relative;
     margin: 17px 0;
@@ -35,15 +35,16 @@
   }
 
   &__link {
-    text-decoration: underline;
-    font-weight: 500;
-    display: block;
+    display: inline-block;
     margin-top: 7px;
+    font-size: 14px;
+    font-weight: 500;
+    text-decoration: underline;
   }
 
   &__icon {
     width: 10px;
-    color: rgba(color(secondary-dark), 0.5);
+    color: color(gray-600);
     position: absolute;
     top: 50%;
     right: 0;