(css) Improve buttons of sgToggleGrid directive

UI/Templates/SchedulerUI/UIxRecurrenceEditor.wox

@@ -91,7 +91,7 @@
         <md-radio-button value="byday">
           <var:string label:value="The"/>
         </md-radio-button>
-        <md-input-container class="md-no-flex">
+        <md-input-container>
           <md-select ng-model="editor.component.repeat.month.occurrence">
             <var:foreach list="monthlyRepeatList" item="item">
               <md-option var:value="valueForMonthlyRepeat"><var:string value="itemText"/></md-option>

UI/WebServerResources/js/Common/sgToggleGrid.directive.js

@@ -63,7 +63,7 @@
 
       for (i = 0; i < tiles.length; i++) {
         tile = angular.element(tiles[i]);
-        tile.addClass('iconButton');
+        tile.addClass('sg-icon-button');
         tile.find('figure').addClass('md-icon');
         tile.on('click', toggleClass);
       }

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

@@ -63,8 +63,8 @@ md-list md-list-item button.md-button.sg-icon-button {
   transition: $iconButton-transition;
   &:hover:not([disabled]),
   &:active {
-    background-color: transparent;
-    transform: scale($iconButton-hover-scale);
+    //background-color: transparent;
+    //transform: scale($iconButton-hover-scale);
   }
 }
 

UI/WebServerResources/scss/components/gridList/grid-list.scss

@@ -26,15 +26,16 @@
 // sgToggleGrid directive
 [sg-toggle-grid] {
   md-grid-tile {
-    border-radius: 5%;
-    &.iconButton {
-      &:hover {
-        background-color: sg-color($sogoBlue, 600);
-        color: #fff;
-        cursor: pointer;
-      }
+    &.sg-icon-button {
+      @extend .md-button;
+      // Overwrite some styles of .md-button
+      border: 1px solid sg-color($sogoBlue, 300);
+      border-radius: 5%;
+      color: sg-color($sogoBlue, 600);
+      min-height: auto;
+      position: absolute;
     }
-    &.sg-active, &.sg-active:hover {
+    &.sg-active {
       background-color: sg-color($sogoBlue, 300);
       color: #fff;
     }