Make iconButton round to display a more elegant ripple-effect

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()">

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>

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