folders beta 1

web/themes/custom/materiotheme/assets/dist/main.css

@@ -1182,10 +1182,12 @@ main[role="main"] {
       display: flex;
       flex-direction: row-reverse; }
       main[role="main"] > .scroller > .wrapper #content-left {
-        flex-basis: 218px;
+        flex-basis: 205px;
         flex-shrink: 0; }
         main[role="main"] > .scroller > .wrapper #content-left > * {
-          width: 100%; }
+          width: 100%;
+          box-sizing: border-box;
+          padding: 0.5em 13px; }
       main[role="main"] > .scroller > .wrapper #content-center {
         flex-basis: 110%; }
 
@@ -1303,10 +1305,11 @@ header[role="banner"] {
       position: absolute;
       right: 0;
       top: 1.7em;
-      box-sizing: content-box; }
+      box-sizing: content-box;
+      z-index: 30; }
     header[role="banner"] #user-flags:hover ul {
       transition-delay: 0s;
-      max-height: 12em;
+      max-height: 50em;
       padding: 1em 1em;
       box-shadow: 0 0 10px #ccc; }
     header[role="banner"] #user-flags li {
@@ -1460,7 +1463,8 @@ aside.messages {
   #content-left .flag-collection > header {
     display: flex;
     flex-direction: row;
-    justify-content: space-between; }
+    justify-content: space-between;
+    padding-bottom: 13px; }
     #content-left .flag-collection > header .mdi-close {
       cursor: pointer;
       align-self: flex-end; }
@@ -1468,13 +1472,20 @@ aside.messages {
     margin: 0 0 13px 0;
     padding: 0; }
     #content-left .flag-collection > ul > li article.card.minicard {
-      width: 100%; }
+      width: 170px;
+      height: 100px;
+      margin: auto; }
       #content-left .flag-collection > ul > li article.card.minicard > header {
         padding: 0.3em 0.3em 0.1em; }
         #content-left .flag-collection > ul > li article.card.minicard > header h1 {
           margin: 0; }
       #content-left .flag-collection > ul > li article.card.minicard > nav.tools {
-        padding: 0 0.2em; }
+        top: auto;
+        bottom: 0;
+        padding: 0 0.2em;
+        background: transparent; }
+        #content-left .flag-collection > ul > li article.card.minicard > nav.tools .mdi.unflag {
+          cursor: pointer; }
 
 article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__label {
   font-size: 3.5em;
@@ -1681,10 +1692,12 @@ article.card {
     top: 0;
     right: 0;
     z-index: 21;
-    width: 1em;
+    width: 15px;
     background-color: #fff;
     box-sizing: content-box;
-    padding: 0.3em 0.1em; }
+    padding: 0.3em 0.1em;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out; }
     article.card nav.tools > * {
       overflow: visible;
       position: relative; }
@@ -1695,11 +1708,26 @@ article.card {
         position: absolute;
         top: 0px;
         right: 100%;
-        width: 5em;
-        box-sizing: content-box;
+        width: 180px;
+        box-sizing: border-box;
         padding: 0.3em;
         background-color: #fff;
-        box-shadow: -2px 3px 4px rgba(0, 0, 0, 0.2); }
+        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; }
+      article.card nav.tools > *:hover .tool-content {
+        transition: all 0.3s ease-in-out;
+        opacity: 1;
+        max-height: 195px;
+        max-width: 200px; }
+    article.card nav.tools .tool.flags .tool-content ul {
+      display: flex;
+      flex-flow: row wrap; }
+      article.card nav.tools .tool.flags .tool-content ul li {
+        padding: 0 0.5em 0 0; }
     article.card nav.tools .tool.flags span.flag {
       cursor: pointer;
       font-size: 0.756em;
@@ -1707,6 +1735,8 @@ article.card {
       transition: color 0.3s ease-in-out; }
       article.card nav.tools .tool.flags span.flag:hover, article.card nav.tools .tool.flags span.flag.isActive {
         color: #1a1a1a; }
+  article.card:hover nav.tools {
+    opacity: 1; }
   article.card section.images {
     position: relative; }
     article.card section.images, article.card section.images * {