LIL-702

web/src/components/FAQ.vue

@@ -1,11 +1,10 @@
 <template>
   <div class="faq">
     <div class="faq__item" v-for="faq in faqs" :class="{'faq__item_opened': faq.opened}">
-      <div class="faq__item-head">
+      <div class="faq__item-head" @click="open(faq)">
         <div class="faq__item-question">{{ faq.question }}</div>
         <div class="faq__item-opener">
-          <svg class="icon" :class="{'icon-arrow-up': faq.opened, 'icon-arrow-down': !faq.opened}"
-               @click="open(faq)">
+          <svg class="icon" :class="{'icon-arrow-up': faq.opened, 'icon-arrow-down': !faq.opened}">
             <use xlink:href="/static/img/sprite.svg#icon-arrow-down"></use>
           </svg>
         </div>
@@ -32,4 +31,20 @@
     }
 </script>
 
-<style></style>
+<style lang="sass">
+.faq
+  &__item-head
+    display: flex
+    background: #f8f8f8
+    padding: 7px 10px 5px
+    cursor: pointer
+  &__item-question
+    flex: 1
+  &__item-opener
+    margin-left: 10px
+    & .icon
+      width: 16px
+      height: 16px
+  &__item-answer
+    padding: 10px 10px
+</style>

web/src/sass/_common.sass

@@ -4502,20 +4502,3 @@ a
     background: $cyan
   &__preview.theme_violet2
     background: $viol2
-
-
-.faq
-  &__item-head
-    display: flex
-    background: #f8f8f8
-    padding: 7px 10px 5px
-  &__item-question
-    flex: 1
-  &__item-opener
-    margin-left: 10px
-    cursor: pointer
-    & .icon
-      width: 16px
-      height: 16px
-  &__item-answer
-    padding: 10px 10px