(css) Improve lists and subheaders components

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

@@ -21,7 +21,7 @@ md-sidenav md-list .md-button {
 }
 
 .md-sidenav-left .md-button [class^="md-icon"] {
-  margin-right: 1em;
+  //margin-right: 1em;
 }
 md-sidenav .md-button.iconButton.sg-button-navicon [class^="md-icon"] {
   margin: 0;
@@ -66,7 +66,7 @@ $button-fab-height: 56px;
   // z-index provides a stacking context that prevent ripple-effect from overflowing
   z-index: 1;
   overflow: hidden;
-  padding: $iconButton-padding 0;
+  //padding: $iconButton-padding 0;
   border-radius: 50%;
   color: inherit;
   min-width: $iconButton-size;
@@ -76,18 +76,19 @@ $button-fab-height: 56px;
   &:active {
     background-color: transparent;
 
-    [class ^= md-icon],
-    [class *= md-icon-] {
+    [class^=md-icon],
+    [class*=md-icon-] {
       transform: scale($iconButton-hover-scale);
     }
   }
 
-  [class ^= md-icon],
-  [class *= md-icon-] {
+  [class^=md-icon],
+  [class*=md-icon-] {
     padding: $iconButton-icon-padding;
     color: currentColor;
     font-size: $iconButton-icon-size;
     transition: $iconButton-transition;
+    vertical-align: middle;
   }
   .md-icon-arrow-back {
     font-size: sg-size('headline')

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

@@ -23,14 +23,14 @@
 
 // List item label
 md-list {
-    .sg-item-name {
-      font-size: sg-size(button);
-      text-transform: initial;
-      overflow: hidden;
-      text-align: left;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
+  .sg-item-name {
+    font-size: sg-size(button);
+    text-transform: initial;
+    overflow: hidden;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 
 // The right tile for a list item.

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

@@ -80,15 +80,5 @@ $i: 1;
     &.sg-loading {
       color: sg-color($sogoBlue, 200);
     }
-    .sg-item-name, .md-label {
-      font-size: sg-size(button);
-      overflow: hidden;
-      text-align: left;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .md-label {
-      display: inline;
-    }
   }
 }

UI/WebServerResources/scss/components/subheader/subheader.scss

@@ -1,11 +1,19 @@
-/// subheader.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
+/// subheader.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 @import 'extends';
 
+.md-subheader {
+  .md-subheader-inner {
+    padding: 0 0 0 $layout-gutter-width;
+  }
+}
+
 .sg-md-subheader {
-  position: fixed;
-  z-index: auto;
-  padding: $baseline-grid $baseline-grid $baseline-grid $layout-gutter-width;
-  background-color: transparent;
+  &--fixed {
+    position: fixed;
+    z-index: auto;
+    padding: $baseline-grid $baseline-grid $baseline-grid $layout-gutter-width;
+    background-color: transparent;
+  }
   &--static {
     position: static;
     z-index: auto;

UI/WebServerResources/scss/views/ContactsUI.scss

@@ -1,6 +1,6 @@
-/// ContactsUI.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
+/// ContactsUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 
-[id = "contactsList"] .sg-md-subheader {
+[id="contactsList"] .sg-md-subheader {
   transform: translateY(-100%); // Compensate the container top-margin
 }