From ca1831271b6f52e16e4b22cd0924437b8c6d7d82 Mon Sep 17 00:00:00 2001
From: Benoit Favreault <benoit.favreault@gmail.com>
Date: Thu, 19 Mar 2015 05:45:42 -0400
Subject: [PATCH] Make iconButton round to display a more elegant ripple-effect

---
 UI/Templates/ContactsUI/UIxContactFoldersView.wox     |  2 +-
 UI/Templates/MailerUI/UIxMailFolderTemplate.wox       |  3 ---
 .../scss/components/button/_button.scss               | 11 ++++++++++-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 38ebea54a..40b5344dd 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -145,7 +145,7 @@
          sg-subscribe-on-select="subscribeToFolder">!- subscription dropdown -</div>
     -->
 <!-- Sidenav -->
-    <md-sidenav id="left-sidenav" class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" layout="column">
+    <md-sidenav id="left-sidenav" class="md-sidenav-left" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
       <md-toolbar class="md-tall" layout-align="start start">
         <div class="md-toolbar-tools" layout="row">
           <md-button class="iconButton sg-button-navicon" ng-click="openBottomSheet()">
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index 7ca0777db..64d100187 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -41,9 +41,6 @@
     </md-list>
   </md-content>
 
-
     <div layout="column" ui-view="message" md-component-id="right"><!-- message view --></div>
 
-
-
 </container>
diff --git a/UI/WebServerResources/scss/components/button/_button.scss b/UI/WebServerResources/scss/components/button/_button.scss
index baac60069..dcff837c8 100644
--- a/UI/WebServerResources/scss/components/button/_button.scss
+++ b/UI/WebServerResources/scss/components/button/_button.scss
@@ -58,9 +58,15 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
 // Classes
 .iconButton {
   padding: $iconButton-padding;
+  border-radius: 50%;
+  overflow: hidden;
+  // z-index provides a stacking context that prevent ripple-effect from overflowing
+  z-index: 1;
+  background-clip: content-box;
   background-color: transparent;
   color: inherit;
-  &:hover {
+  &:hover,
+  &:active {
     background-color: transparent;
     [class ^= md-icon],
     [class *= md-icon-] {
@@ -74,6 +80,9 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
     font-size: $iconButton-icon-size;
     transition: $iconButton-transition;
   }
+  .md-ripple-container {
+    border-radius: 50%;
+  }
 }
 // Icon-bars are for iconButtons, by default they're vertical and at the right
 // the modifier class is to reflect those values and leave place to other versions