How to modify Angular Material's md-fab-speed-dial spacing? - css

Question

After reimplementing the fab speed dial based on the demo presneted on angular material, I've managed to set the position, but I can't seem to figure out how to setup the spacing between the dials.
They're really close to eachother. I've tried setting the margin and padding, but in the button, but it doesn't seem to be right, because it applies even in close mode, whereas intended only to be set in open mode.
Link to codepen demo of my code
HTML
<div ng-controller="DemoCtrl as demo" layout="column" ng-cloak="" class="fabSpeedDialdemoBasicUsage" ng-app="MyApp">
<div style="position: fixed; bottom: 15px; right: 50%" >
<md-fab-speed-dial md-open="demo.isOpen" md-direction="up"
class="md-fling" ng-cloak>
<md-fab-trigger >
<md-button aria-label="menu" class="md-fab md-warn" ng-style="navIconStyle" >
<md-icon md-svg-src="img/icons/menu.svg"></md-icon>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button ng-repeat="button in demo.pageButtons" class="md-fab md-raised md-icon-button "
aria-label="{{button.label}}" style="background-color:orange;margin-top:10px;">
<md-icon md-svg-icon="{{button.icon}}"></md-icon>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</div>
</div>
JS
(function() {
'use strict';
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('DemoCtrl', function() {
this.pageButtons =
[
{
icon: "img/icons/menu.svg",
label: "News"
},
{
icon: "img/icons/menu.svg",
label: "Schedule"
},
{
icon: "img/icons/menu.svg",
label: "Home"
}
]
});
})();

Answer 1

You can create a ng-style that corresponds to an array of styles
Since we're focused on the speed dial, the open state and close state depends on directive's argument md-open, which here is assigned by isOpen.
So when isOpen = true, then we can set 10px padding, otherwise if close, then set padding to false, and make it 0px. We can do this by creating an array of those two css styles. Then cast the boolean value of isOpen state with an integer, so the array of style corresponds accordingly.
In Html's md-button tag
ng-style="navIconStyle[navController.isOpen ? 1 : 0]"
In Js controller
$scope.navIconStyle =
[
{
"margin-bottom" : "0px"
},
{
"margin-bottom" : "10px"
}
]

Answer 2

I tried adding ng-style, but it seems that Angular Material framework overwrites the style while expanding. I ended up adding a separate class and using ng-class attribute.
ng-class="{'spaced': demo.isOpen }"
And define the class as below. Use appropriate side of margin based on where FAB is opening. My case, menu was configured to open on left, so I set margin on right.
.md-button.md-fab.md-mini.spaced {
margin-right: 8px !important;
}