Agregando diseño para nuevas secciones de FAQ, Glosario y Presentaciones

_src/scss/_variables.scss

@@ -5,6 +5,7 @@ $negro: #2e2f30;
 $primaryColor: #0094D4;
 $secondaryColor: #755293;
 $claro: #cccccc;
+$muyClaro: #f5f5f5;
 $tipo: rgb(51, 51, 51);
 $body: #ffffff;
 $hero-gradient-init: #3B76BA;

_src/scss/general/_content.scss

-
+.hash {
+    word-wrap: break-word;
+    word-break: break-all;
+}
 article{   
-    .hash {
-        word-wrap: break-word;
-        word-break: break-all;
-    }
+    
   .field--name-body{
     margin-bottom: 50px;
     p,h1,h2,h3,h4,ul,hr, .ajustar{        
@@ -142,4 +142,8 @@ main.main-content-inside{
 
 table[role="presentation"] img{
     margin: 0;
+}
+
+.tituloTabla{
+    font-weight: bold;
 }
\ No newline at end of file

_src/scss/general/_faq.scss

+.view-faq, .view-glosario{
+    .panel {
+        border: 0;
+        box-shadow: none;
+        .panel-heading{
+            padding: 0;
+            margin: 0;
+            background: transparent;            
+            
+            .panel-title{
+                font-size: 1em;
+                padding: 0;
+                margin: 0;
+                a{
+                    display: block;
+                    width: 100%;
+                    padding: 10px 15px;
+                    border-bottom: 1px solid $primaryColor;
+                    color: $primaryColor;
+                    position: relative;
+                    
+                    &:hover,&:focus{
+                        color: $primaryColor;
+                        border-bottom-color: $primaryColor;
+                        text-decoration: none;
+                    }
+                    .fa-chevron-down{
+                        position: absolute;
+                        right: 15px;
+                        top: 15px;
+                        transform: rotate(180deg);
+                        transition: all .2s ease;
+                    }
+                }
+                a.collapsed{
+                    color: $tipo;
+                    border-bottom-color: $muyClaro;
+                    &:hover,&:focus{
+                        color: $primaryColor;
+                        border-bottom-color: $primaryColor;
+                        text-decoration: none;
+                    }
+                    .fa-chevron-down{
+                        position: absolute;
+                        right: 15px;
+                        top: 15px;
+                        transform: rotate(0);
+                        transition: all .2s ease;
+                    }
+                }
+            }
+        }
+        .panel-heading + .panel-collapse > .panel-body {
+            border: 1px solid $primaryColor;
+            border-top: 0px;
+            border-bottom-left-radius: 4px;
+            border-bottom-right-radius: 4px;
+        }
+    }
+}
\ No newline at end of file

_src/scss/main.scss

@@ -9,3 +9,4 @@
 @import 'general/content';
 @import 'general/sumate';
 @import 'general/miembros';
+@import 'general/faq';

templates/views_bootstrap/views-bootstrap-accordion.html.twig

+<div id="{{ id }}" {{ attributes.addClass(classes) }}>
+  {% for key, row in rows -%}
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h4 class="panel-title">
+          <a class="accordion-toggle collapsed"
+             data-toggle="collapse"
+             data-parent="#{{ id }}"
+             href="#{{ id }}-collapse-{{ key }}">
+            {{row.title}}
+          </a>
+        </h4>
+      </div>
+
+      <div id="{{ id }}-collapse-{{ key }}" class="panel-collapse collapse">
+        <div class="panel-body">
+          {{row.content}}
+        </div>
+      </div>
+    </div>
+  {%- endfor %}
+</div>