big refactoring, opening flagcollection (folder) on the left of main-content

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

@@ -395,11 +395,55 @@ aside.messages{
 // | (__/ _ \ ' \  _/ -_) ' \  _|___| |__/ -_)  _|  _|
 //  \___\___/_||_\__\___|_||_\__|   |____\___|_|  \__|
 #content-left{
+  z-index: 5;
+  box-sizing: content-box;
   max-width:1px;
   overflow-x: hidden;
   transition: all 0.3s ease-in-out;
   &.opened{
     max-width: 500px;
+    padding: 0.3em;
+  }
+  >*{
+    box-sizing: border-box;
+    background-color: #fff;
+    box-shadow: -2px 0px 4px rgba(0, 0, 0, 0.2);
+    padding: 0.5em;
+  }
+  .flag-collection{
+    >header{
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      h3{
+        // flex-basis: calc(100% - 1em);
+      }
+      .mdi-close{
+        // display: block;
+        // flex-basis: 1em;
+        cursor:pointer;
+        align-self: flex-end;
+      }
+    }
+    >ul{
+      >li{
+        margin:0 0 $column_goutiere 0;
+        padding:0;
+        article.card.minicard{
+          width:100%;
+
+          >header{
+            padding: 0.3em 0.3em 0.1em;
+            h1{
+              margin:0;
+            }
+          }
+          >nav.tools{
+            padding:0 0.2em;
+          }
+        }
+      }
+    }
   }
 }
 
@@ -663,6 +707,9 @@ article.card{
   &.article{
     width:$column_width*2 + $column_goutiere; height:$card_height;
   }
+  &.minicard{
+    height:100px;
+  }
   // &.card-small{
   //   width:100px; height:140px;
   // }