Merge pull request #3380 from fabrixxm/feature/frio/fixedaside2

Frio: better UX for aside bar

diff --cc view/theme/frio/css/style.css
index 01cab105bc4602d610923f2f6bffeede36188b1f,e787384eda6448b7a9d5fc11712467a3d427126e..8cc8997930ed7792b179cd26536b89fea4f1ba34
--- 1/view/theme/frio/css/style.css
--- 2/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@@ -98,8 -98,38 +98,38 @@@ blockquote 
  code {
      white-space: pre-wrap;
  }
 -.help-content-wrapper code {display: inline}
 +.help-content-wrapper code, .help-aside-wrapper code {display: inline}
  
+ /**
+  * mobile aside
+  */
+ @media screen and (max-width: 990px) {
+     aside{
+         position: fixed!important;
+         top: 0!important;
+         background-color: #fff;
+         width: 100%;
+         max-width: 300px;
+         height: 100%;
+         padding-top: 100px;
+         z-index: 10;
+     }
+     aside::before {
+         content: " ";
+         position: fixed;
+         display: block;
+         top: 0; left: 300px; right: 0; bottom: 0;
+         background-color: rgba(0,0,0,0.4);
+         opacity: 0;
+         transition: opacity 0.5s;
+     }
+     aside.canvas-slid::before {
+         opacity: 1;
+     }
+ 
+     /* prevent page scroll when the aside is opened **/
+     body.aside-out { overflow: hidden; }
+ }
  /*
  * standard page elements
  */