From 5247200bf0054c1dedbc764582802988c69ab95e Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Fri, 24 Apr 2015 08:52:20 -0400
Subject: [PATCH] (css) Improve lists and subheaders components

---
 .../scss/components/button/button.scss         | 13 +++++++------
 .../scss/components/list/list.scss             | 16 ++++++++--------
 .../scss/components/sidenav/sidenav.scss       | 10 ----------
 .../scss/components/subheader/subheader.scss   | 18 +++++++++++++-----
 .../scss/views/ContactsUI.scss                 |  4 ++--
 5 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/UI/WebServerResources/scss/components/button/button.scss b/UI/WebServerResources/scss/components/button/button.scss
index bd5cc75d3..2f1860a34 100644
--- a/UI/WebServerResources/scss/components/button/button.scss
+++ b/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')
diff --git a/UI/WebServerResources/scss/components/list/list.scss b/UI/WebServerResources/scss/components/list/list.scss
index fad31d853..ad2a222fb 100644
--- a/UI/WebServerResources/scss/components/list/list.scss
+++ b/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.
diff --git a/UI/WebServerResources/scss/components/sidenav/sidenav.scss b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
index 367168deb..c3ad2afd2 100644
--- a/UI/WebServerResources/scss/components/sidenav/sidenav.scss
+++ b/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;
-    }
   }
 }
diff --git a/UI/WebServerResources/scss/components/subheader/subheader.scss b/UI/WebServerResources/scss/components/subheader/subheader.scss
index 3e5b08f11..8b03fe99d 100644
--- a/UI/WebServerResources/scss/components/subheader/subheader.scss
+++ b/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;
diff --git a/UI/WebServerResources/scss/views/ContactsUI.scss b/UI/WebServerResources/scss/views/ContactsUI.scss
index 0739e0384..8aaee82b0 100644
--- a/UI/WebServerResources/scss/views/ContactsUI.scss
+++ b/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
 }