folders beta 1

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

@@ -102,11 +102,13 @@ main[role="main"]{
       display: flex;
       flex-direction: row-reverse;
       #content-left{
-        flex-basis: $column_width+$column_goutiere;
+        flex-basis: $column_width;
         flex-shrink: 0;
         // width:$column_width*2+$column_goutiere;
         >*{
           width:100%;
+          box-sizing: border-box;
+          padding:0.5em $column_goutiere;
         }
       }
       #content-center{

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

@@ -9,3 +9,6 @@ $column_width: 205px;
 $column_goutiere: 13px;
 
 $card_height: 295px;
+
+$minicard_width: 170px;
+$minicard_height: 100px;

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

@@ -164,11 +164,12 @@ header[role="banner"]{
       right:0;
       top:1.7em;
       box-sizing: content-box;
+      z-index: 30;
     }
     &:hover{
       ul{
         transition-delay: 0s;
-        max-height:12em;
+        max-height:50em;
         padding:1em 1em;
         box-shadow: 0 0 10px #ccc;
       }
@@ -415,6 +416,7 @@ aside.messages{
       display: flex;
       flex-direction: row;
       justify-content: space-between;
+      padding-bottom: $column_goutiere;
       h3{
         // flex-basis: calc(100% - 1em);
       }
@@ -430,8 +432,9 @@ aside.messages{
         margin:0 0 $column_goutiere 0;
         padding:0;
         article.card.minicard{
-          width:100%;
-
+          width:$minicard_width;
+          height:$minicard_height;
+          margin:auto;
           >header{
             padding: 0.3em 0.3em 0.1em;
             h1{
@@ -439,7 +442,13 @@ aside.messages{
             }
           }
           >nav.tools{
+            top: auto;
+            bottom: 0;
             padding:0 0.2em;
+            background:transparent;
+            .mdi.unflag{
+              cursor: pointer;
+            }
           }
         }
       }
@@ -752,7 +761,8 @@ article.card{
     top: 0;
     right: 0;
     z-index: 21;
-    width: 1em;
+    $toolbar_width: 15px;
+    width: $toolbar_width;
     background-color: #fff;
     box-sizing: content-box;
     padding: 0.3em 0.1em;
@@ -767,14 +777,36 @@ article.card{
         position: absolute;
         top: 0px;
         right: 100%;
-        width: 5em;
-        box-sizing: content-box;
+        // width: 5em;
+        width: $column_width - $toolbar_width - 10px;
+        box-sizing: border-box;
         padding: 0.3em;
         background-color: #fff;
         box-shadow: -2px 3px 4px rgba(0, 0, 0, 0.2);
+        opacity: 0;
+        max-height: 0; max-width:0;
+        overflow: hidden;
+        transition: all 0.2s ease-in-out;
+      }
+      &:hover{
+        .tool-content{
+          transition: all 0.3s ease-in-out;
+          opacity: 1;
+          max-height: 195px;
+          max-width:200px;
+        }
       }
     }
     .tool.flags{
+      .tool-content{
+        ul{
+          display: flex;
+          flex-flow: row wrap;
+          li{
+            padding:0 0.5em 0 0;
+          }
+        }
+      }
       span.flag{
         cursor: pointer;
         font-size: 0.756em;
@@ -785,6 +817,13 @@ article.card{
         }
       }
     }
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
+  &:hover{
+    nav.tools{
+      opacity:1;
+    }
   }
   section.images{
     position: relative;