Improve lists in sidenav

- the ripple effect is now visible when clicking on list items;
- the fab icon has been moved over the items list;
- colorized the checkboxes of the calendars list.

UI/WebServerResources/scss/components/button/button.scss

@@ -152,16 +152,10 @@ md-toolbar .md-toolbar-tools .iconButton:last-child,
   // flex might stretch or squize fab bottons
   min-width: $button-fab-width;
   min-height: $button-fab-height;
-  // this is a temporary fix, see comment in variables
-  padding: $mg;
-  margin-right: $mg;
-  // this is to positioned the button on the toolbar's edge
-  transform: translate3d(0, -50%, 0);
 
   &:hover {
-    transform: translate3d(0, -49%, 0);
-    [class ^= md-icon],
-    [class *= md-icon-] {
+    [class^=md-icon],
+    [class*=md-icon-] {
       transform: scale($iconButton-hover-scale);
     }
   }

UI/WebServerResources/scss/components/list/list.scss

@@ -25,6 +25,7 @@
 md-list {
   .sg-item-name {
     font-size: sg-size(button);
+    max-width: 75%; // leave some place for a secondary button
     text-transform: initial;
     overflow: hidden;
     text-align: left;
@@ -33,6 +34,13 @@ md-list {
   }
 }
 
+// Add some padding to the first icon in a list item
+.md-list-item-inner {
+  > i:first-child {
+    padding-right: $mg;
+  }
+}
+
 // The right tile for a list item.
 // ----------------------------------------------------------------------------
 .md-tile-right {

UI/WebServerResources/scss/components/sidenav/sidenav.scss

@@ -50,7 +50,7 @@ md-sidenav {
 // ---------------------------------------
 $i: 1;
 @while $i < 12 {
-  md-item-content .sg-child-level-#{$i} { padding-left: 2em * $i; }
+  md-list-item .sg-child-level-#{$i} { padding-left: $mg * $i; }
   $i: $i + 1;
 }