Issue 4925 - Create accordion component for Help Center

static/scss/components/_accordion.scss

 // This file is part of help.eyeo.com.
 // Copyright (C) 2017 Eyeo GmbH
 //
 // help.eyeo.com is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
 //
 // help.eyeo.com is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 14 matching lines @@
 {
   display: block;
   border: 0;
   border-bottom: 1px solid $gray;
   background-color: $gray-light;
   padding: $sm;
   width: 100%;
   text-align: left;
   font: inherit;
   font-weight: $bold-weight;
+  cursor: pointer;
+  outline: none;
 }
 
 [dir="rtl"] .accordion-toggle-button
 {
   text-align: right;
+}
+
+.accordion-toggle-button:hover,
+.accordion-toggle-button:focus
+{
+  background-color: $gray-medium;
 }
 
 .accordion-heading:last-of-type .accordion-toggle-button[aria-expanded="false"]
 {
   border-bottom: 0;
 }
 
 .accordion-toggle-button img
 {
   height: 0.6em;
   margin-right: 0.6em;
 }
 
 [dir="rtl"] .accordion-toggle-button img
 {
   transform: rotate(180deg);

[ire, 2017/09/18 10:08:11]

transforms aren't supported by IE8 (http://caniuse.com/#feat=transforms2d) .
AFAIK it's still undecided if IE8 is supported by the Help Center

   margin-right: 0;
   margin-left: 0.6em;
 }
 
 .accordion-toggle-button[aria-expanded="false"] img
 {
   transform: rotate(90deg);
 }
 
 .accordion-body
 {
   padding: $sm;
   border-bottom: 1px solid $gray;
+  background-color: $white;
 }
 
 .accordion-body:last-of-type
 {
   border-bottom: 0;
 }