(css) Adapt to latest md changes

UI/WebServerResources/bower.json

@@ -9,7 +9,7 @@
     "angular-sanitize": "1.4.x",
     "angular-ui-router": "latest",
     "angular-file-upload": "latest",
-    "angular-material": "master",
+    "angular-material": ">v1.1.0-rc2-master",
     "lodash": "latest",
     "Sortable": "latest",
     "breakpoint-sass": ">=2.4.2"

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

@@ -12,11 +12,6 @@ md-sidenav md-list .md-button {
   }
 }
 
-.view-list md-list .md-button {
-  // Gain some space in lists
-  padding-right: 0;
-}
-
 // Expandable button for a collapsable list
 .sg-expandable {
     width: 100%;

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

@@ -18,18 +18,7 @@ $sg-avatar-width: 40px;
 $sg-color-chip-width: 16px;
 
 md-list-item {
-  &.md-with-secondary {
-    &.md-accent.md-bg {
-      .md-button {
-        // List items with a secondary button must have a transparent background when highlighted
-        // in order to honor the contrast color
-        background-color: transparent;
-      }
-    }
-  }
-
   ._md-list-item-inner {
-    flex-grow: 1; // use all column space
     overflow: hidden;
 
     // Gain some space since we want small list items
@@ -261,10 +250,10 @@ sg-avatar-image {
 .md-avatar:before,
 .md-avatar md-icon,
 sg-avatar-image md-icon,
-.sg-avatar-list {
+sg-avatar-image md-icon.material-icons {
+  color: rgba(0, 0, 0, 0.26);
   font-family: 'Material Icons';
   font-size: $sg-avatar-width;
-  color: rgba(0, 0, 0, 0.26);
 }
 .sg-avatar-list {
   &:before {

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

@@ -1,24 +1,11 @@
 /// subheader.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 @import 'extends';
 
-.md-subheader {
-  margin-right: 0;
-}
-
-.md-subheader {
-  .md-subheader-inner {
-    padding: 0 0 0 $layout-gutter-width;
-  }
-}
-md-tab-content {
-  .md-subheader {
-    .md-subheader-inner {
-      padding-left: $layout-gutter-width/2;
-    }
-  }
-}
-
 .sg-md-subheader {
+  &--icon-button ._md-subheader-inner {
+    padding: ($subheader-padding - ($icon-button-height - $subheader-font-size)/2) $baseline-grid;
+    padding-left: $subheader-padding;
+  }
   &--fixed {
     position: fixed;
     z-index: auto;

UI/WebServerResources/scss/views/_view.scss

@@ -52,17 +52,18 @@ $listView-width: grid-step(6) !global;
   z-index: ($z-index-view - 1);
   min-width: ($listView-width - ($pitch * 2));
 
-  // With Material, when a button inside a md-list uses the class md-secondary, it has an absolute position on the
-  // right side of the list item. Since we define the avatar as the secondary button, we must move it to the left
-  // side of the list item and add some padding to the main button (.md-no-style).
+  // With Material, when a button inside a md-list uses the class md-secondary, it is moved inside a container
+  // on the right side of the list item. Since we define the avatar as the secondary button, we must move it to
+  // the left side of the list item.
   .md-with-secondary {
-    ._md-no-style {
-      min-height: $baseline-grid * 7; // 56px
-      padding-left: 40 + $baseline-grid * 2 !important; // 56px
+    ._md-list-item-inner {
+      padding-left: $baseline-grid;
     }
     ._md-secondary-container {
-      left: $baseline-grid * 2;
-      right: initial;
+      order: -1; // move secondary container to the left
+    }
+    .md-secondary {
+      margin: 0;
       padding: 0;
     }
   }