refactored modale : accordion

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -45,15 +45,12 @@ import { mapState } from 'vuex'
 import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
 import 'theme/assets/styles/main.scss'
 
-// import prettyBytes from 'vuejs/plugins/prettyBytes'
-// Vue.use(prettyBytes)
-
-// Vue.filter('prettyBytes', function (value) {
-//   if (!value) return ''
-//   value = value.toString()
-//   return value + 'Mb'
-// })
+import VueSimpleAccordion from 'vue-simple-accordion';
+import 'vue-simple-accordion/dist/vue-simple-accordion.css';
 
+Vue.use(VueSimpleAccordion, {
+  // ... Options go here
+});
 
 (function (Drupal, drupalSettings, drupalDecoupled) {
   const MaterioTheme = function () {

web/themes/custom/materiotheme/assets/styles/base/_colors.scss

@@ -1,6 +1,8 @@
 $transparent-bg: rgba(255,255,255, 0.95);
 $transparent-bg-blk: rgba(0,0,0, 0.75);
 
+$color-main-text: #1A1A1A;
+
 $color-base:#69cdcf;
 $color-showrooms:#50aa3c;
 $color-blabla:#9458aa;

web/themes/custom/materiotheme/assets/styles/base/_reset.scss

@@ -1,5 +1,6 @@
 body {
 	background: white;
+	color:$color-main-text;
 }
 
 a{

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -1180,6 +1180,35 @@ article.card{
         }
 
       }
+      .vsa-list{
+        padding:0;
+        border: none;
+        --vsa-heading-padding: 0 0;
+        --vsa-content-padding: 0 0 0.5em;
+        --vsa-default-icon-size: 0.2;
+        --vsa-border-width: 0;
+        --vsa-text-color: #{$color-main-text};
+        --vsa-highlight-color: #fff;
+        --vsa-bg-color: #fff;
+
+        .vsa-item__trigger:focus .vsa-item__trigger__icon--is-default::after, .vsa-item__trigger:focus .vsa-item__trigger__icon--is-default::before, .vsa-item__trigger:hover .vsa-item__trigger__icon--is-default::after, .vsa-item__trigger:hover .vsa-item__trigger__icon--is-default::before {
+            background-color: var(--vsa-text-color);
+        }
+        .vsa-item{
+          .vsa-item__heading{
+            button.vsa-item__trigger{
+              height:2em;
+              &:hover,
+              &:focus{
+                  color: var(--vsa-text-color);
+              }
+            }
+          }
+          .vsa-item__content{
+
+          }
+        }
+      }
       section.linked-materials{
         >ul{
           display: flex;
@@ -1220,8 +1249,25 @@ article.card{
           }
         }
       }
-      section.tool.industriels{
-        div.tool-content{
+      // section.tool.industriels{
+      //   div.tool-content{
+      //     display: flex;
+      //     flex-flow: row;
+      //     >section{
+      //       flex: 0 0 50%;
+      //       h2{
+      //         margin:0;
+      //         font-size: 1em;
+      //         line-height: 0.6;
+      //       }
+      //       p{
+      //         margin: 0;
+      //         font-size: 0.882em;
+      //       }
+      //     }
+      //   }
+      // }
+      section.industriels{
           display: flex;
           flex-flow: row;
           >section{
@@ -1236,7 +1282,6 @@ article.card{
               font-size: 0.882em;
             }
           }
-        }
       }
       section.attachments{
         a{