From 19d22cdcfb057f8be12f1b90758300e674344908 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Tue, 8 Mar 2016 13:20:34 -0500
Subject: [PATCH] Adapt to latest md changes

---
 NEWS                                          |  8 ++++-
 .../AdministrationUI/UIxAdministration.wox    | 12 ++++---
 .../UIxAdministrationAclEditor.wox            |  6 ++--
 .../ContactsUI/UIxContactEditorTemplate.wox   |  2 +-
 .../ContactsUI/UIxContactFoldersView.wox      | 19 ++++++-----
 .../ContactsUI/UIxContactViewTemplate.wox     |  8 ++---
 .../MailerUI/UIxMailFolderTemplate.wox        | 11 ++++---
 UI/Templates/MailerUI/UIxMailMainFrame.wox    | 15 +++++----
 UI/Templates/MailerUI/UIxMailPopupView.wox    |  2 +-
 UI/Templates/MailerUI/UIxMailViewTemplate.wox |  4 +--
 UI/Templates/MainUI/SOGoRootPage.wox          |  4 +--
 UI/Templates/PreferencesUI/UIxPreferences.wox |  8 +++--
 UI/Templates/SchedulerUI/UIxCalDayView.wox    |  2 +-
 UI/Templates/SchedulerUI/UIxCalMainView.wox   | 29 +++++++++-------
 UI/Templates/SchedulerUI/UIxCalMonthView.wox  |  2 +-
 .../SchedulerUI/UIxCalMulticolumnDayView.wox  |  2 +-
 UI/Templates/SchedulerUI/UIxCalWeekView.wox   |  2 +-
 UI/Templates/UIxSidenavToolbarTemplate.wox    |  2 +-
 UI/WebServerResources/angular-material        |  2 +-
 UI/WebServerResources/bower.json              |  5 +--
 .../js/Common/navController.js                | 16 ++++++---
 .../js/Common/sgFolderStylesheet.directive.js |  7 ++--
 .../js/Contacts/AddressBookController.js      |  9 +++--
 .../js/Mailer/MailboxController.js            | 10 ++++--
 .../js/Scheduler/CalendarListController.js    | 14 ++++++--
 .../components/autocomplete/autocomplete.scss | 11 -------
 .../scss/components/dialog/dialog.scss        |  1 +
 .../scss/components/input/input.scss          |  7 ++++
 .../scss/components/list/list.scss            | 23 ++++++++-----
 .../progressCircular/progress-circular.scss   |  5 ++-
 .../scss/components/sidenav/sidenav.scss      | 33 ++++++++++---------
 .../scss/components/subheader/subheader.scss  |  1 -
 .../scss/components/toolbar/toolbar.scss      |  6 ++--
 .../scss/core/layout-attributes.scss          |  5 +++
 .../scss/core/structure.scss                  |  4 +++
 .../scss/core/variables.scss                  |  3 ++
 UI/WebServerResources/scss/styles.scss        |  1 +
 .../scss/views/MailerUI.scss                  | 11 +++----
 UI/WebServerResources/scss/views/_view.scss   |  9 +++--
 39 files changed, 198 insertions(+), 123 deletions(-)
 create mode 100644 UI/WebServerResources/scss/core/layout-attributes.scss

diff --git a/NEWS b/NEWS
index e323e7314..56db81d98 100644
--- a/NEWS
+++ b/NEWS
@@ -1,3 +1,9 @@
+3.0.3 (2016-03-dd)
+------------------
+
+Enhancements
+ - [web] updated Angular Material to version 1.0.6
+
 3.0.2 (2016-03-04)
 ------------------
 
@@ -27,7 +33,7 @@ Enhancements
  - [eas] now support EAS MIME truncation
 
 Bug fixes
- - [web] handle birthday dates before 1970
+ - [web] handle birthday dates before 1970 (#3567)
  - [web] safe-guarding against bogus value coming from the quick tables
  - [web] apply search filters when automatically reloading current mailbox (#3507)
  - [web] fixed virtual repeater when moving up in messages list
diff --git a/UI/Templates/AdministrationUI/UIxAdministration.wox b/UI/Templates/AdministrationUI/UIxAdministration.wox
index a579451ff..a2e71eb56 100644
--- a/UI/Templates/AdministrationUI/UIxAdministration.wox
+++ b/UI/Templates/AdministrationUI/UIxAdministration.wox
@@ -11,7 +11,10 @@
                               Administration.services.js, Preferences.services.js,
                               Contacts.services.js, Scheduler.services.js">
 
-  <main class="view layout-fill" ui-view="administration" layout="row" ng-controller="navController">
+  <main class="view"
+        layout="row" layout-fill="layout-fill"
+        ui-view="administration"
+        ng-controller="navController">
     <!-- administration -->
   </main>
 
@@ -30,7 +33,8 @@
       </md-content>
     </md-sidenav>
 
-    <section layout="column" class="layout-fill" ui-view="module"><!-- admin module --></section>
+    <section layout="column" layout-fill="layout-fill"
+             ui-view="module"><!-- admin module --></section>
 
   </script>
 
@@ -123,8 +127,8 @@
            layout="column" layout-align="start center"
            ng-class="{ 'sg-close': !app.selectedUser.selectedFolder }"
            ui-view="acl">
-        <md-content class="hide-xs md-flex layout-fill md-hue-1"
-                    layout="column" layout-align="center center">
+        <md-content class="hide-xs md-flex md-hue-1"
+                    layout="column" layout-align="center center" layout-fill="layout-fill">
           <div class="md-default-theme md-background md-fg md-hue-3 sg-md-title"><var:string label:value="No resource selected"/></div>
         </md-content>
       </div>
diff --git a/UI/Templates/AdministrationUI/UIxAdministrationAclEditor.wox b/UI/Templates/AdministrationUI/UIxAdministrationAclEditor.wox
index e8752fc11..a1413247c 100644
--- a/UI/Templates/AdministrationUI/UIxAdministrationAclEditor.wox
+++ b/UI/Templates/AdministrationUI/UIxAdministrationAclEditor.wox
@@ -6,9 +6,9 @@
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label"
     >
-  <div layout="column" class="layout-fill">
+  <div layout="column" layout-fill="layout-fill">
     <md-card>
-      <md-toolbar class="hide show-xs">
+      <md-toolbar class="hide show-xs" flex-none="flex-none">
         <div class="md-toolbar-tools">
           <md-button class="sg-icon-button"
                      label:aria-label="Close"
@@ -22,7 +22,7 @@
           </md-button>
         </div>
       </md-toolbar>
-      <md-toolbar>
+      <md-toolbar flex-none="flex-none">
         <div layout="row">
           <sg-avatar-image class="md-tile-left"
                            ng-show="acl.user.isGroup === 0"
diff --git a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
index 253b09408..8fe690509 100644
--- a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
@@ -7,7 +7,7 @@
 
   <div layout="column" class="layout-fill sg-reversible">
     <md-card style="overflow: hidden">
-      <md-card-actions flex="none" layout="row" layout-align="end center">
+      <md-card-actions flex-none="flex-none" layout="row" layout-align="end center">
         <md-button class="md-icon-button"
                    label:aria-label="Cancel"
                    ng-click="editor.cancel()">
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index cad0637bc..a74a26f37 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -14,7 +14,10 @@
     var contactFolders = <var:string value="contactFolders" const:escapeHTML="NO" />;
   </script>
 
-  <main class="view layout-fill" ui-view="addressbooks" layout="row" ng-controller="navController"><!-- addressbooks list --></main>
+  <main class="view"
+        layout="row" layout-fill="layout-fill"
+        ui-view="addressbooks"
+        ng-controller="navController"><!-- addressbooks list --></main>
 
   <!-- TEMPLATE SCRIPT WRAPPER -->
   <script type="text/ng-template" id="UIxContactFoldersView">
@@ -22,7 +25,7 @@
     <!-- Sidenav -->
     <md-sidenav class="md-sidenav-left md-whiteframe-z1" layout="column"
                 md-component-id="left" md-is-locked-open="isGtMedium"
-                ng-class="{ 'sg-closed': leftIsClose }">
+                ng-class="{ 'sg-close': leftIsClose }">
       <var:component className="UIxSidenavToolbarTemplate" />
       <md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
         <!-- User's addressbooks -->
@@ -183,7 +186,7 @@
       </md-content>
     </md-sidenav>
 
-    <section layout="column" class="layout-fill" ui-view="addressbook"><!-- contacts list --></section>
+    <section layout="column" layout-fill="layout-fill" ui-view="addressbook"><!-- contacts list --></section>
   </script>
 
   <script type="text/ng-template" id="addressbook">
@@ -197,7 +200,7 @@
 
         <!-- single-selection toolbar -->
         <md-toolbar class="md-accent md-hue-1"
-                    ng-show="addressbook.selectedFolder.$selectedCount() == 0">
+                    ng-hide="addressbook.mode.multiple">
           <!-- sort mode (default) -->
           <div class="md-toolbar-tools" ng-hide="addressbook.mode.search">
             <md-button class="sg-icon-button" label:aria-label="Search"
@@ -300,7 +303,7 @@
 
         <!-- multiple selection mode -->
         <md-toolbar class="md-whiteframe-z1 md-hue-1 sg-toolbar-secondary"
-                    ng-show="addressbook.selectedFolder.$selectedCount() > 0">
+                    ng-show="addressbook.mode.multiple">
           <div class="md-toolbar-tools">
             <md-button class="sg-icon-button" ng-click="addressbook.unselectCards()">
               <md-icon>arrow_back</md-icon>
@@ -430,12 +433,12 @@
         </md-content>
       </div>
 
-      <div id="detailView" class="view-detail md-default-theme md-background md-bg md-hue-1"
+      <div id="detailView" class="view-detail md-default-theme md-background md-bg md-hue-2"
            layout="column" layout-align="start center"
            ng-class="{ 'sg-close': !addressbook.selectedFolder.selectedCard }"
            ui-view="card">
-        <md-content class="hide-xs md-flex layout-fill md-hue-1"
-                    layout="column" layout-align="center center">
+        <md-content class="hide-xs md-flex md-hue-2"
+                    layout="column" layout-align="center center" layout-fill="layout-fill">
           <div class="md-default-theme md-background md-fg md-hue-3 sg-md-title"><var:string label:value="No contact selected"/></div>
         </md-content>
       </div>
diff --git a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
index e3fc3918b..4a22bab43 100644
--- a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
@@ -6,9 +6,9 @@
     xmlns:label="OGo:label">
 
   <div class="sg-reversible" ng-class="{ 'sg-flip': editor.showRawSource }">
-    <div layout="column" class="layout-fill sg-face">
+    <div class="sg-face" layout="column" layout-fill="layout-fill">
       <md-card>
-        <md-card-actions flex="none" layout="row" layout-align="end center">
+        <md-card-actions flex-none="flex-none" layout="row" layout-align="end center">
           <md-button class="sg-icon-button hide show-xs"
                      label:aria-label="Close"
                      ng-click="editor.close()">
@@ -182,9 +182,9 @@
         </md-card-content>
       </md-card>
     </div>
-    <div class="layout-fill sg-back" layout="column">
+    <div class="sg-back" layout="column" layout-fill="layout-fill">
       <md-card>
-        <md-card-actions flex="none" layout="row" layout-align="end center">
+        <md-card-actions flex-none="flex-none" layout="row" layout-align="end center">
           <md-button class="md-icon-button"
                      label:aria-label="Close"
                      ng-click="editor.toggleRawSource()">
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index aa2efc95b..e5e307dd9 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -7,7 +7,7 @@
 
     <!-- in virtual mailbox mode -->
     <md-toolbar class="md-whiteframe-z1"
-                ng-hide="!app.showingAdvancedSearch || mailbox.selectedFolder.$selectedCount() > 0">
+                ng-hide="!app.showingAdvancedSearch || mailbox.mode.multiple">
       <div class="md-toolbar-tools">
         <md-input-container class="md-flex">
           <label><var:string label:value="Search messages in"/></label>
@@ -60,7 +60,7 @@
     </md-toolbar>
     <!-- single-selection toolbars -->
     <md-toolbar class="md-accent md-hue-1"
-                ng-hide="app.showingAdvancedSearch || mailbox.selectedFolder.$selectedCount() > 0">
+                ng-hide="app.showingAdvancedSearch || mailbox.mode.multiple">
       <!-- sort mode (default) -->
       <div class="md-toolbar-tools" ng-hide="mailbox.mode.search">
         <md-button class="sg-icon-button" label:aria-label="Search"
@@ -145,7 +145,8 @@
     </md-toolbar>
 
     <!-- multiple-selection mode -->
-    <md-toolbar class="md-hue-1 sg-toolbar-secondary" ng-show="mailbox.selectedFolder.$selectedCount() > 0">
+    <md-toolbar class="md-hue-1 sg-toolbar-secondary"
+                ng-show="mailbox.mode.multiple">
       <div class="md-toolbar-tools">
         <md-button class="sg-icon-button" ng-click="mailbox.unselectMessages()">
           <md-icon>arrow_back</md-icon>
@@ -319,11 +320,11 @@
     </md-content>
   </div>
 
-  <div id="detailView" class="view-detail md-default-theme md-background md-bg md-hue-1"
+  <div id="detailView" class="view-detail md-default-theme md-background md-bg md-hue-2"
        layout="column" layout-align="start center"
        ng-class="{ 'sg-close': !mailbox.service.selectedFolder.selectedMessage }"
        ui-view="message">
-    <md-content class="hide-xs md-flex layout-fill md-hue-1"
+    <md-content class="hide-xs md-flex layout-fill md-hue-2"
                 layout="column" layout-align="center center">
       <div class="md-default-theme md-background md-fg md-hue-3 sg-md-title"><var:string label:value="No message selected"/></div>
     </md-content>
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index 77cde19a1..ffb2f3b83 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -22,14 +22,17 @@
       SHOULD be a main tag
       Templates script tag wrappers go next
   -->
-  <main class="view layout-fill" ui-view="mailboxes" layout="row" ng-controller="navController"><!-- mailboxes list --></main>
+  <main class="view"
+        layout="row" layout-fill="layout-fill"
+        ui-view="mailboxes"
+        ng-controller="navController"><!-- mailboxes list --></main>
 
   <script type="text/ng-template" id="UIxMailMainFrame">
 
     <!-- Sidenav -->
-    <md-sidenav class="md-sidenav-left md-whiteframe-z1 layout-fill" layout="column"
+    <md-sidenav class="md-sidenav-left md-whiteframe-z1" layout="column" layout-fill="layout-fill"
                 md-component-id="left" md-is-locked-open="isGtMedium"
-                ng-class="{ 'sg-closed': leftIsClose }">
+                ng-class="{ 'sg-close': leftIsClose }">
       <var:component className="UIxSidenavToolbarTemplate" />
       <md-content class="md-flex md-hue-2" layout="column" md-scroll-y="md-scroll-y">
         <section class="md-flex" layout="column"
@@ -174,12 +177,12 @@
       </md-content>
     </md-sidenav>
 
-    <section layout="column" class="layout-fill" ui-view="mailbox">
+    <section layout="column" layout-fill="layout-fill" ui-view="mailbox">
       <md-toolbar layout="row" layout-align="space-between center" class="toolbar-main">
         <var:component className="UIxTopnavToolbarTemplate"/>
       </md-toolbar>
-      <md-content class="md-flex layout-fill md-hue-1"
-                  layout="column" layout-align="center center">
+      <md-content class="md-flex md-hue-2"
+                  layout="column" layout-align="center center" layout-fill="layout-fill">
         <div class="md-default-theme md-background md-fg md-hue-3 sg-md-title">
           <var:string label:value="No mailbox selected"/>
         </div>
diff --git a/UI/Templates/MailerUI/UIxMailPopupView.wox b/UI/Templates/MailerUI/UIxMailPopupView.wox
index fa5b99439..b01147520 100644
--- a/UI/Templates/MailerUI/UIxMailPopupView.wox
+++ b/UI/Templates/MailerUI/UIxMailPopupView.wox
@@ -12,7 +12,7 @@
     const:jsFiles="Common.js, Preferences.services.js, Contacts.services.js, Scheduler.services.js, Mailer.app.popup.js, Mailer.services.js, vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/angular-file-upload.min.js">
 
   <main class="layout-fill" ng-controller="navController">
-    <div id="detailView" class="view-detail md-default-theme md-background md-bg md-hue-1"
+    <div id="detailView" class="view-detail md-default-theme md-background md-bg md-hue-2"
          layout="column" layout-align="start center"
          ui-view="message">
       <div class="sg-progress-circular-floating">
diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
index 07a0c0343..67661da1e 100644
--- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
@@ -10,7 +10,7 @@
   <div class="sg-reversible" ng-class="{ 'sg-flip': viewer.showRawSource }">
     <div layout="column" class="layout-fill sg-face">
       <md-card>
-        <md-card-actions flex="none" layout="row" layout-align="end center">
+        <md-card-actions flex-none="flex-none" layout="row" layout-align="end center">
           <md-button class="md-icon-button"
                      ng-if="isPopup"
                      label:aria-label="Close"
@@ -262,7 +262,7 @@
     </div>
     <div class="layout-fill sg-back" layout="column">
       <md-card>
-        <md-card-actions flex="none" layout="row" layout-align="end center">
+        <md-card-actions flex-none="flex-none" layout="row" layout-align="end center">
           <div class="md-flex"><!-- spacer --></div>
           <md-button class="md-icon-button"
                      label:aria-label="Close"
diff --git a/UI/Templates/MainUI/SOGoRootPage.wox b/UI/Templates/MainUI/SOGoRootPage.wox
index 77aefa9cb..e50f2d400 100644
--- a/UI/Templates/MainUI/SOGoRootPage.wox
+++ b/UI/Templates/MainUI/SOGoRootPage.wox
@@ -15,8 +15,8 @@
       MUST be the first html element after body
       SHOULD  be a main tag (with role="main")
   -->
-  <main class="view layout-fill layout-padding md-default-theme md-background md-hue-1 md-bg"
-        layout="row" layout-align="center start"
+  <main class="view layout-padding md-default-theme md-background md-hue-1 md-bg"
+        layout="row" layout-align="center start" layout-fill="layout-fill"
         ui-view="login"
         ng-controller="LoginController as app">
     <md-content class="ng-cloak md-whiteframe-z1"
diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index 5c2fd3013..75771a1d7 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -10,7 +10,9 @@
     title="title"
     const:jsFiles="Common.js, vendor/ng-sortable.js, Preferences.js, Preferences.services.js, Mailer.services.js, Contacts.services.js, vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js">
 
-  <main class="view layout-fill" ui-view="preferences" layout="row"
+  <main class="view"
+        layout="row" layout-fill="layout-fill"
+        ui-view="preferences"
         ng-controller="navController"><!-- preferences --> </main>
 
   <script type="text/javascript">
@@ -26,7 +28,7 @@
   <script type="text/ng-template" id="preferences.html">
     <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" layout="column"
                 md-component-id="left" md-is-locked-open="isGtMedium"
-                ng-class="{ 'sg-closed': leftIsClose }">
+                ng-class="{ 'sg-close': leftIsClose }">
       <var:component className="UIxSidenavToolbarTemplate" />
       <md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
         <md-list>
@@ -62,7 +64,7 @@
       </md-content>
     </md-sidenav>
 
-    <section  layout="column" class="layout-fill">
+    <section  layout="column" layout-fill="layout-fill">
 
       <!-- TOP RIGHT TOOLBAR -->
       <md-toolbar layout="row" layout-align="space-between start" class="md-tall">
diff --git a/UI/Templates/SchedulerUI/UIxCalDayView.wox b/UI/Templates/SchedulerUI/UIxCalDayView.wox
index 664367f74..4b17294f0 100644
--- a/UI/Templates/SchedulerUI/UIxCalDayView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalDayView.wox
@@ -8,7 +8,7 @@
     xmlns:label="OGo:label">
 
   <md-card>
-    <md-card-actions flex="none" layout="row" layout-align="start center">
+    <md-card-actions flex-none="flex-none" layout="row" layout-align="start center">
       <md-button class="md-icon-button"
                  label:aria-label="Previous Day"
                  var:date="prevDayQueryParameters.day"
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index 67f760311..90fe8771f 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -17,7 +17,10 @@
   </script>
   <var:component className="UIxCalendarSelector" />
 
-  <main class="view layout-fill" ui-view="calendars" layout="row" ng-controller="navController"><!-- calendars list --></main>
+  <main class="view"
+        layout="row" layout-fill="layout-fill"
+        ui-view="calendars"
+        ng-controller="navController"><!-- calendars list --></main>
 
   <script type="text/ng-template" id="UIxCalMainView">
     <!-- calendars colors -->
@@ -31,9 +34,9 @@
     <!-- Sidenav -->
     <md-sidenav class="md-sidenav-left md-whiteframe-z1" layout="column"
                 md-component-id="left" md-is-locked-open="isGtMedium"
-                ng-class="{ 'sg-closed': leftIsClose }">
+                ng-class="{ 'sg-close': leftIsClose }">
       <var:component className="UIxSidenavToolbarTemplate" />
-      <md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
+      <md-content class="md-flex md-hue-2" md-scroll-y="md-scroll-y">
         <!-- User's calendars -->
         <section class="sg-section-list">
           <md-subheader class="md-hue-2">
@@ -266,9 +269,9 @@
     </md-sidenav>
 
     <!-- Main section -->
-    <section layout="column" class="layout-fill"
+    <section layout="column" layout-fill="layout-fill"
              ng-controller="CalendarListController as list">
-      <md-toolbar layout="row" layout-align="space-between center" class="toolbar-main" >
+      <md-toolbar class="toolbar-main" flex-none="flex-none" layout="row" layout-align="space-between center">
         <var:component className="UIxTopnavToolbarTemplate" />
         <!-- <div class="sg-toolbar-group-2">
              <md-button class="sg-icon-button" label:aria-label="Search">
@@ -279,8 +282,8 @@
       <div layout="row" class="md-flex">
 
       <div class="view-list" layout="column">
-        <md-toolbar class="md-accent md-hue-1"
-                    ng-show="list.component.$selectedCount() == 0">
+        <md-toolbar class="md-accent md-hue-1" flex-none="flex-none"
+                    ng-hide="list.mode.multiple">
           <!-- sort/filter mode (default) -->
           <div class="md-toolbar-tools" layout="row" ng-hide="list.mode.search">
             <md-button class="sg-icon-button" label:aria-label="Search"
@@ -478,7 +481,8 @@
         </md-toolbar>
 
         <!-- multiple-selection mode -->
-        <md-toolbar class="md-whiteframe-z1 md-hue-1 sg-toolbar-secondary" ng-show="list.component.$selectedCount() > 0">
+        <md-toolbar class="md-whiteframe-z1 md-hue-1 sg-toolbar-secondary"
+                    ng-show="list.mode.multiple">
           <div class="md-toolbar-tools">
             <md-button class="sg-icon-button" ng-click="list.unselectComponents()">
               <md-icon>arrow_back</md-icon>
@@ -504,7 +508,7 @@
             <md-tab label:label="Events"
                     md-on-select="list.selectComponentType('events')">
               <md-subheader>
-                <span>{{list.component.$queryEvents.filterpopup | loc}}</span>
+                <span>{{list.filterpopup() | loc}}</span>
               </md-subheader>
               <md-list class="sg-section-list">
                 <md-list-item ng-repeat="event in list.component.$events"
@@ -514,7 +518,7 @@
                        label:aria-label="Toggle item"
                        ng-click="list.toggleComponentSelection($event, event)"
                        ng-switch="event.selected">
-                    <div class="md-avatar sg-avatar-selected"
+                    <div class="md-avatar sg-avatar-selected" ng-class="event.getClassName('fg')"
                          ng-switch-when="true"><!-- selected avatar --></div>
                     <div class="sg-color-chip" ng-class="event.getClassName('bg')"
                          ng-switch-when="false"><!-- calendar color --></div>
@@ -547,7 +551,7 @@
             <md-tab label:label="Tasks"
                     md-on-select="list.selectComponentType('tasks')">
               <md-subheader>
-                <span>{{list.component.$queryTasks.filterpopup | loc}}</span>
+                <span>{{list.filterpopup() | loc}}</span>
               </md-subheader>
               <md-list class="sg-section-list">
                 <md-list-item ng-repeat="task in list.component.$tasks"
@@ -600,7 +604,8 @@
           <md-icon>assignment_turned_in</md-icon>
         </md-button>
         </div>
-        <div id="detailView" class="view-detail hide-xs" layout="column" ui-view="calendarView">
+        <div id="detailView" class="view-detail hide-xs md-default-theme md-background md-bg md-hue-2"
+             layout="column" ui-view="calendarView">
           <!-- calendar view -->
         </div>
       </div>
diff --git a/UI/Templates/SchedulerUI/UIxCalMonthView.wox b/UI/Templates/SchedulerUI/UIxCalMonthView.wox
index 9489899aa..ea570931b 100644
--- a/UI/Templates/SchedulerUI/UIxCalMonthView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMonthView.wox
@@ -8,7 +8,7 @@
     xmlns:label="OGo:label">
 
   <md-card>
-    <md-card-actions flex="none" layout="row" layout-align="start center">
+    <md-card-actions flex-none="flex-none" layout="row" layout-align="start center">
       <md-button class="md-icon-button"
                  label:aria-label="Previous Month"
                  var:date="prevMonthQueryParameters.day"
diff --git a/UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox b/UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox
index c0f337c6a..b0b67fbe9 100644
--- a/UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox
@@ -8,7 +8,7 @@
     xmlns:label="OGo:label">
 
   <md-card>
-    <md-card-actions flex="none" layout="row" layout-align="start center">
+    <md-card-actions flex-none="flex-none" layout="row" layout-align="start center">
       <md-button class="md-icon-button"
                  label:aria-label="Previous Day"
                  var:date="prevDayQueryParameters.day"
diff --git a/UI/Templates/SchedulerUI/UIxCalWeekView.wox b/UI/Templates/SchedulerUI/UIxCalWeekView.wox
index eaba8db05..ac40fa063 100644
--- a/UI/Templates/SchedulerUI/UIxCalWeekView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalWeekView.wox
@@ -8,7 +8,7 @@
     xmlns:label="OGo:label">
 
   <md-card>
-    <md-card-actions flex="none" layout="row" layout-align="start center">
+    <md-card-actions flex-none="flex-none" layout="row" layout-align="start center">
       <md-button class="md-icon-button"
                  label:aria-label="Previous Week"
                  var:date="prevWeekQueryParameters.day"
diff --git a/UI/Templates/UIxSidenavToolbarTemplate.wox b/UI/Templates/UIxSidenavToolbarTemplate.wox
index df9ade88a..4c3af405c 100644
--- a/UI/Templates/UIxSidenavToolbarTemplate.wox
+++ b/UI/Templates/UIxSidenavToolbarTemplate.wox
@@ -4,7 +4,7 @@
     xmlns:var="http://www.skyrix.com/od/binding"
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label">
-  <md-toolbar class="sg-padded md-hue-2 md-tall" flex="none">
+  <md-toolbar class="sg-padded md-hue-2 md-tall" flex-none="flex-none">
     <sg-avatar-image class="md-tile-left"
                      sg-email="activeUser.email"
                      size="40"><!-- avatar --></sg-avatar-image>
diff --git a/UI/WebServerResources/angular-material b/UI/WebServerResources/angular-material
index 251534975..cd058284f 160000
--- a/UI/WebServerResources/angular-material
+++ b/UI/WebServerResources/angular-material
@@ -1 +1 @@
-Subproject commit 2515349755c6c829a6580005b04943e52633379d
+Subproject commit cd058284f52a8a17b342750d1b940f0c447edd47
diff --git a/UI/WebServerResources/bower.json b/UI/WebServerResources/bower.json
index 1458d0963..4ea5cce64 100644
--- a/UI/WebServerResources/bower.json
+++ b/UI/WebServerResources/bower.json
@@ -9,12 +9,9 @@
     "angular-sanitize": "1.4.x",
     "angular-ui-router": "latest",
     "angular-file-upload": "latest",
-    "angular-material": "v1.0.5",
+    "angular-material": "master",
     "lodash": "latest",
     "Sortable": "latest",
     "breakpoint-sass": ">=2.4.2"
-  },
-  "resolutions": {
-    "angular": "1.4.x"
   }
 }
diff --git a/UI/WebServerResources/js/Common/navController.js b/UI/WebServerResources/js/Common/navController.js
index 934de0961..f1c8fdce6 100644
--- a/UI/WebServerResources/js/Common/navController.js
+++ b/UI/WebServerResources/js/Common/navController.js
@@ -29,11 +29,17 @@
     }, window.currentDay.secondsBeforeTomorrow * 1000);
 
     $scope.toggleLeft = function() {
-      $scope.leftIsClose = leftIsClose();
-      $mdSidenav('left').toggle()
-        .then(function () {
-          $log.debug("toggle left is done");
-        });
+      if ($scope.isGtMedium) {
+        // Left sidenav is toggled while sidenav is locked open; bypass $mdSidenav
+        $scope.leftIsClose = !$scope.leftIsClose;
+      }
+      else {
+        $scope.leftIsClose = leftIsClose();
+        $mdSidenav('left').toggle()
+          .then(function () {
+            $log.debug("toggle left is done");
+          });
+      }
     };
     $scope.toggleRight = function() {
       $mdSidenav('right').toggle()
diff --git a/UI/WebServerResources/js/Common/sgFolderStylesheet.directive.js b/UI/WebServerResources/js/Common/sgFolderStylesheet.directive.js
index 09ca78ad7..a1fe8db1f 100644
--- a/UI/WebServerResources/js/Common/sgFolderStylesheet.directive.js
+++ b/UI/WebServerResources/js/Common/sgFolderStylesheet.directive.js
@@ -42,7 +42,8 @@
         '    color: {{ cssCtrl.contrast(cssCtrl.ngModel.color) }} !important;',
         '  }',
         // Set the contrast color of input labels
-        '  .bg-folder{{ cssCtrl.ngModel.id }} label {',
+        '  .bg-folder{{ cssCtrl.ngModel.id }} label,',
+        '  .bg-folder{{ cssCtrl.ngModel.id }} .md-input {',
         '    color: {{ cssCtrl.contrast(cssCtrl.ngModel.color) }} !important;',
         '    opacity: 0.8;',
         '  }',
@@ -56,10 +57,10 @@
         '    border-color: {{ cssCtrl.ngModel.color }} !important;',
         '  }',
         /* Checkbox color */
-        '  .checkbox-folder{{ cssCtrl.ngModel.id }} .md-icon {',
+        '  .checkbox-folder{{ cssCtrl.ngModel.id }} ._md-icon {',
         '    background-color: {{ cssCtrl.ngModel.color }} !important;',
         '  }',
-        '  .checkbox-folder{{ cssCtrl.ngModel.id }}.md-checked .md-icon:after {',
+        '  .checkbox-folder{{ cssCtrl.ngModel.id }}.md-checked ._md-icon:after {',
         '    border-color: {{ cssCtrl.contrast(cssCtrl.ngModel.color) }} !important;',
         '  }',
         '</style>'
diff --git a/UI/WebServerResources/js/Contacts/AddressBookController.js b/UI/WebServerResources/js/Contacts/AddressBookController.js
index b0a61d87b..9440c480a 100644
--- a/UI/WebServerResources/js/Contacts/AddressBookController.js
+++ b/UI/WebServerResources/js/Contacts/AddressBookController.js
@@ -29,7 +29,7 @@
     vm.newMessage = newMessage;
     vm.newMessageWithSelectedCards = newMessageWithSelectedCards;
     vm.newMessageWithRecipient = newMessageWithRecipient;
-    vm.mode = { search: false };
+    vm.mode = { search: false, multiple: 0 };
     
     function selectCard(card) {
       $state.go('app.addressbook.card.view', {addressbookId: stateAddressbook.id, cardId: card.id});
@@ -37,6 +37,7 @@
     
     function toggleCardSelection($event, card) {
       card.selected = !card.selected;
+      vm.mode.multiple += card.selected? 1 : -1;
       $event.preventDefault();
       $event.stopPropagation();
     }
@@ -84,7 +85,10 @@
     }
 
     function unselectCards() {
-      _.forEach(vm.selectedFolder.$cards, function(card) { card.selected = false; });
+      _.forEach(vm.selectedFolder.$cards, function(card) {
+        card.selected = false;
+      });
+      vm.mode.multiple = 0;
     }
     
     function confirmDeleteSelectedCards() {
@@ -116,6 +120,7 @@
       _.forEach(vm.selectedFolder.$cards, function(card) {
         card.selected = true;
       });
+      vm.mode.multiple = vm.selectedFolder.$cards.length;
     }
 
     function sort(field) {
diff --git a/UI/WebServerResources/js/Mailer/MailboxController.js b/UI/WebServerResources/js/Mailer/MailboxController.js
index 7251a50cc..e6de0536c 100644
--- a/UI/WebServerResources/js/Mailer/MailboxController.js
+++ b/UI/WebServerResources/js/Mailer/MailboxController.js
@@ -34,7 +34,7 @@
     vm.sortedBy = sortedBy;
     vm.cancelSearch = cancelSearch;
     vm.newMessage = newMessage;
-    vm.mode = { search: false };
+    vm.mode = { search: false, multiple: 0 };
 
     function selectMessage(message) {
       if (Mailbox.$virtualMode)
@@ -45,12 +45,16 @@
 
     function toggleMessageSelection($event, message) {
       message.selected = !message.selected;
+      vm.mode.multiple += message.selected? 1 : -1;
       $event.preventDefault();
       $event.stopPropagation();
     }
 
     function unselectMessages() {
-      _.forEach(vm.selectedFolder.$messages, function(message) { message.selected = false; });
+      _.forEach(vm.selectedFolder.$messages, function(message) {
+        message.selected = false;
+      });
+      vm.mode.multiple = 0;
     }
 
     function confirmDeleteSelectedMessages() {
@@ -96,6 +100,7 @@
     function unselectMessage(message, index) {
       // Unselect current message and cleverly load the next message
       var nextMessage, previousMessage, nextIndex = index;
+      vm.mode.multiple = vm.selectedFolder.$selectedCount();
       if (message) {
         if (Mailbox.$virtualMode) {
           $state.go('mail.account.virtualMailbox');
@@ -158,6 +163,7 @@
       var i = 0, length = vm.selectedFolder.$messages.length;
       for (; i < length; i++)
         vm.selectedFolder.$messages[i].selected = true;
+      vm.mode.multiple = length;
     }
 
     function markSelectedMessagesAsFlagged() {
diff --git a/UI/WebServerResources/js/Scheduler/CalendarListController.js b/UI/WebServerResources/js/Scheduler/CalendarListController.js
index 9602c2d35..0b18bab74 100644
--- a/UI/WebServerResources/js/Scheduler/CalendarListController.js
+++ b/UI/WebServerResources/js/Scheduler/CalendarListController.js
@@ -21,13 +21,14 @@
     vm.openEvent = openEvent;
     vm.openTask = openTask;
     vm.newComponent = newComponent;
+    vm.filterpopup = filterpopup;
     vm.filter = filter;
     vm.filteredBy = filteredBy;
     vm.sort = sort;
     vm.sortedBy = sortedBy;
     vm.reload = reload;
     vm.cancelSearch = cancelSearch;
-    vm.mode = { search: false };
+    vm.mode = { search: false, multiple: 0 };
 
     // Select list based on user's settings
     Preferences.ready().then(function() {
@@ -59,17 +60,22 @@
     }
 
     function unselectComponents() {
-      _.forEach(Component['$' + vm.componentType], function(component) { component.selected = false; });
+      _.forEach(Component['$' + vm.componentType], function(component) {
+        component.selected = false;
+      });
+      vm.mode.multiple = 0;
     }
 
     function selectAll() {
       _.forEach(Component['$' + vm.componentType], function(component) {
         component.selected = true;
       });
+      vm.mode.multiple = Component['$' + vm.componentType].length;
     }
 
     function toggleComponentSelection($event, component) {
       component.selected = !component.selected;
+      vm.mode.multiple += component.selected? 1 : -1;
       $event.preventDefault();
       $event.stopPropagation();
     }
@@ -282,6 +288,10 @@
       }
     }
 
+    function filterpopup() {
+      return Component['$query' + vm.componentType.capitalize()].filterpopup;
+    }
+
     function filter(filterpopup) {
       Component.$filter(vm.componentType, { filterpopup: filterpopup });
     }
diff --git a/UI/WebServerResources/scss/components/autocomplete/autocomplete.scss b/UI/WebServerResources/scss/components/autocomplete/autocomplete.scss
index bdc4e353e..dc2795602 100644
--- a/UI/WebServerResources/scss/components/autocomplete/autocomplete.scss
+++ b/UI/WebServerResources/scss/components/autocomplete/autocomplete.scss
@@ -6,14 +6,3 @@
     right: $baseline-grid*2;
   }
 }
-
-md-autocomplete {
-  &.sg-input-no-message {
-    &[md-floating-label] {
-      md-input-container {
-        // See .md-input-has-messages
-        padding-bottom: $input-container-padding;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/dialog/dialog.scss b/UI/WebServerResources/scss/components/dialog/dialog.scss
index 415393a35..1c82b4bb4 100644
--- a/UI/WebServerResources/scss/components/dialog/dialog.scss
+++ b/UI/WebServerResources/scss/components/dialog/dialog.scss
@@ -20,6 +20,7 @@ body.popup {
 }
 
 md-dialog {
+  background-color: white !important;
   md-dialog-content {
     &.sg-dialog-message {
       // Prepare content to receive a "close" button on the right
diff --git a/UI/WebServerResources/scss/components/input/input.scss b/UI/WebServerResources/scss/components/input/input.scss
index c106b2dee..d7353792b 100644
--- a/UI/WebServerResources/scss/components/input/input.scss
+++ b/UI/WebServerResources/scss/components/input/input.scss
@@ -25,6 +25,13 @@ md-input-container .bgroup {
   left-margin: -1.25em;
 }
 
+md-autocomplete .sg-input-no-message [md-floating-label] {
+  md-input-container {
+    // See .md-input-has-messages
+    padding-bottom: $input-container-padding;
+  }
+}
+
 .PseudoField input {
   flex: 1;
   order: 2;
diff --git a/UI/WebServerResources/scss/components/list/list.scss b/UI/WebServerResources/scss/components/list/list.scss
index 6d5093b00..2026e3650 100644
--- a/UI/WebServerResources/scss/components/list/list.scss
+++ b/UI/WebServerResources/scss/components/list/list.scss
@@ -28,7 +28,7 @@ md-list-item {
     }
   }
 
-  .md-list-item-inner {
+  ._md-list-item-inner {
     flex-grow: 1; // use all column space
     overflow: hidden;
 
@@ -71,14 +71,20 @@ md-list-item {
   }
 
   md-list-item {
-    .md-button {
+    // Gain some space on the right side of the folder icon
+    ._md-list-item-inner > md-icon:first-child,
+    ._md-list-item-inner > md-checkbox:first-child {
+      margin-right: $bl * 2;
+    }
+
+    .md-button,
+    &.md-clickable {
       margin: 0;
       transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function;
     }
-    // Gain some space on the right side of the folder icon
-    .md-list-item-inner > md-icon:first-child,
-    .md-list-item-inner > md-checkbox:first-child {
-      margin-right: $bl * 2;
+
+    &.md-clickable:hover {
+      background-color: rgba(158,158,158,0.2);
     }
   }
 }
@@ -123,9 +129,9 @@ div.md-tile-left {
 
 .sg-section-list {
   md-list-item {
-    &.md-button-wrap {
+    &._md-button-wrap {
       > .md-button:first-child {
-        .md-list-item-inner {
+        ._md-list-item-inner {
           // Expect the container to include a sg-tile-icons
           padding-right: 0px;
         }
@@ -264,6 +270,7 @@ sg-avatar-image md-icon,
 }
 .sg-avatar-selected {
   &:before {
+    color: inherit;
     content: "\e5ca"; // check
   }
 }
diff --git a/UI/WebServerResources/scss/components/progressCircular/progress-circular.scss b/UI/WebServerResources/scss/components/progressCircular/progress-circular.scss
index 04a7504e6..4de74ba94 100644
--- a/UI/WebServerResources/scss/components/progressCircular/progress-circular.scss
+++ b/UI/WebServerResources/scss/components/progressCircular/progress-circular.scss
@@ -13,6 +13,9 @@
   bottom: auto;
   background-color: white;
   border-radius: 50%;
-  //padding: $baseline-grid/2;
+  padding: $baseline-grid/2;
   box-shadow: $whiteframe-shadow-3dp;
+  md-progress-circular {
+    display: block;
+  }
 }
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/sidenav/sidenav.scss b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
index 7567a45b7..bffbc882c 100644
--- a/UI/WebServerResources/scss/components/sidenav/sidenav.scss
+++ b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
@@ -1,25 +1,28 @@
 /// sidenav.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
-@import "extends";
-$sidenav-default-width: (4 * $pitch);
+
+$sidenav-desktop-width: (4 * $pitch);
 $sidenav-min-space: $pitch;
 //$sidenav-right-width: (8 * $pitch);
 
-md-sidenav {
-  &.md-locked-open {
-    @include from(md) {
-      @include flex-col(md, 4, 1, 0);
-      // Custom representation of a closed sidenav where the sidenav is pushed to the left;
-      // Used in in "locked open" mode.
-      &.sg-closed.md-sidenav-left {
-        transform: translateX(-100%);
-        margin-right: -20vw; // See views/_views.scss
-      }
-    }
-  }
-}
+@import "extends";
 
 md-sidenav {
   overflow: inherit;
+
+  &._md-locked-open {
+    @include from(md) {
+      @include flex-col($breakpoint: md, $nb: 4, $grow: 1, $shrink: 0);
+      // Custom representation of a closed sidenav where the sidenav is pushed to the left;
+      // Used in in "locked open" mode.
+      &.md-sidenav-left {
+        transition: $swift-ease-out;
+        &.sg-close {
+          margin-right: -20vw; // See views/_views.scss
+          transform: translateX(-100%);
+        }
+      }
+    }
+  }
 }
 
 // MAIN SIDENAV, actually to the left
diff --git a/UI/WebServerResources/scss/components/subheader/subheader.scss b/UI/WebServerResources/scss/components/subheader/subheader.scss
index 2b4d761fd..483aaccb5 100644
--- a/UI/WebServerResources/scss/components/subheader/subheader.scss
+++ b/UI/WebServerResources/scss/components/subheader/subheader.scss
@@ -3,7 +3,6 @@
 
 .md-subheader {
   margin-right: 0;
-  line-height: $touch-zone-width;
 }
 
 .md-subheader {
diff --git a/UI/WebServerResources/scss/components/toolbar/toolbar.scss b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
index 85d2612d0..971d1785f 100644
--- a/UI/WebServerResources/scss/components/toolbar/toolbar.scss
+++ b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
@@ -16,14 +16,16 @@ md-toolbar {
   z-index: $z-index-toolbar;
   // dirty fix to override angular-material botchy typography
   font-size: 1em !important;
+  // No transition when switching toolbars
+  transition-duration: 0s;
 }
 
-// Colors transition when changing folder in dialogs
+// Colors transition when changing folder color in dialogs
 md-dialog {
   md-toolbar,
   md-toolbar .md-input,
   md-toolbar md-input-container.md-input-has-value label,
-  md-toolbar md-input-container label:not(.md-no-float),
+  md-toolbar md-input-container.md-input-has-value label:not(.md-no-float),
   md-toolbar md-icon {
     transition: background-color $swift-ease-out-duration $swift-ease-out-timing-function,
     color $swift-ease-out-duration $swift-ease-out-timing-function;
diff --git a/UI/WebServerResources/scss/core/layout-attributes.scss b/UI/WebServerResources/scss/core/layout-attributes.scss
new file mode 100644
index 000000000..8782602f0
--- /dev/null
+++ b/UI/WebServerResources/scss/core/layout-attributes.scss
@@ -0,0 +1,5 @@
+/// layout-attributes.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
+
+// Import from sources for extends
+// -------------------------------
+@import "../../angular-material/src/core/services/layout/layout-attributes";
diff --git a/UI/WebServerResources/scss/core/structure.scss b/UI/WebServerResources/scss/core/structure.scss
index ac41b6f66..cb7af4279 100644
--- a/UI/WebServerResources/scss/core/structure.scss
+++ b/UI/WebServerResources/scss/core/structure.scss
@@ -56,4 +56,8 @@ html * {
   @extend .md-padding;
   background-color: white;
   margin-bottom: $mg/2;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/core/variables.scss b/UI/WebServerResources/scss/core/variables.scss
index 373f03e84..19505025d 100644
--- a/UI/WebServerResources/scss/core/variables.scss
+++ b/UI/WebServerResources/scss/core/variables.scss
@@ -96,6 +96,9 @@ $slicer-breakpoint-names: 'xs' 'sm' 'md' 'lg' 'xl';
 
 $media-pointer: (pointer fine);
 
+// Button
+$button-left-right-padding: rem(0.600);
+
 // Icon
 $icon-size: rem(2.400) !default;
 
diff --git a/UI/WebServerResources/scss/styles.scss b/UI/WebServerResources/scss/styles.scss
index 5eb117959..c8b6b6c61 100755
--- a/UI/WebServerResources/scss/styles.scss
+++ b/UI/WebServerResources/scss/styles.scss
@@ -19,6 +19,7 @@
 // fixme : refactor all this to meet our practices
 // ------------------------------------------------------------------------------
 @import 'core/mixins';
+@import 'core/layout-attributes';
 @import 'core/structure';
 @import 'core/layout';
 @import 'core/typography';
diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss
index 33293886d..28554c378 100644
--- a/UI/WebServerResources/scss/views/MailerUI.scss
+++ b/UI/WebServerResources/scss/views/MailerUI.scss
@@ -5,7 +5,7 @@
   padding-bottom: $baseline-grid;
   padding: 0 $baseline-grid*2 $baseline-grid $baseline-grid*2;
   text-align: center;
-  md-progress-linear > .md-container {
+  md-progress-linear > ._md-container {
     height: 2px;
   }
 }
@@ -67,7 +67,7 @@ md-sidenav {
   md-checkbox {
     &.sg-folder {
       // Show checkbox as a "closed" folder when unchecked and "opened" folder when checked
-      .md-container:after {
+      ._md-container:after {
         color: rgba(0,0,0,0.54);
         font-family: 'Material Icons';
         font-size: 24px;
@@ -77,14 +77,14 @@ md-sidenav {
         width: 1em;
         height: 1em;
       }
-      .md-icon {
+      ._md-icon {
         border-width: 0;
       }
       &.md-checked {
-        .md-container:after {
+        ._md-container:after {
           content: "\e2c8";
         }
-        .md-icon {
+        ._md-icon {
           background-color: initial;
           &:after {
             border-style: none;
@@ -94,7 +94,6 @@ md-sidenav {
     }
   }
   .sg-item-name {
-    line-height: 6 * $baseline-grid; // $list-item-height, 48px
     &:focus {
       outline: none;
     }
diff --git a/UI/WebServerResources/scss/views/_view.scss b/UI/WebServerResources/scss/views/_view.scss
index 1bd012f88..89f80fbb6 100644
--- a/UI/WebServerResources/scss/views/_view.scss
+++ b/UI/WebServerResources/scss/views/_view.scss
@@ -56,11 +56,11 @@ $listView-width: grid-step(6) !global;
   // 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).
   .md-with-secondary {
-    .md-no-style {
+    ._md-no-style {
       min-height: $baseline-grid * 7; // 56px
-      padding-left: 40 + $baseline-grid * 3;
+      padding-left: 40 + $baseline-grid * 2 !important; // 56px
     }
-    .md-secondary-container {
+    ._md-secondary-container {
       left: $baseline-grid * 2;
       right: initial;
       padding: 0;
@@ -92,6 +92,9 @@ $listView-width: grid-step(6) !global;
       min-height: 0;
     }
   }
+  md-card {
+    background-color: white;
+  }
 
   // On small screens, the view slides from the right and takes all screen place.
   // Expected Display Steps: