Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Trying to add more flexibility to elements css in angular-material
(function () {
"use strict";
var _theme;
angular
.module('mdColors',['mdColors'])
.config(['$mdThemingProvider', function($mdThemingProvider){
_theme = $mdThemingProvider.theme();
}])
.directive('mdStyleColor', ['$mdColorPalette',
function ($mdColorPalette) {
return {
restrict: 'A',
scope: { mdStyleColor: '=' },
link: function (scope, element, attrs) {
for (var p in scope.mdStyleColor) {
if (scope.mdStyleColor.hasOwnProperty(p)) {
var themeColors = _theme.colors;
var split = (scope.mdStyleColor[p] || '').split('.');
if (split.length < 2) split.unshift('primary');
var hueR = split[1] || 'hue-1'; // 'hue-1'
var colorR = split[0] || 'primary'; // 'warn'
// Absolute color: 'orange'
var colorA = themeColors[colorR] ?
themeColors[colorR].name : colorR;
// Absolute Hue: '500'
var hueA =
themeColors[colorR] ?
themeColors[colorR].hues[hueR] || hueR :
hueR;
var colorValue = $mdColorPalette[colorA][hueA] ?
$mdColorPalette[colorA][hueA].value :
$mdColorPalette[colorA]['500'].value;
element.css(p, 'rgb('+colorValue.join(',')+')');
}
}
}
}
}]);
}());
@petarjs
Copy link

petarjs commented Oct 16, 2015

Could you add some usage examples, please? :)

@leocaseiro
Copy link

leocaseiro commented Mar 17, 2016

He posted here

<md-button md-style-color="{'background-color': 'hue-1'}">My Button</md-button>
<md-button md-style-color="{'background-color': '100'}">My Button</md-button>
<md-button md-style-color="{'background-color': 'warn.hue-3'}">My Button</md-button>
<md-button md-style-color="{'background-color': 'accent.400'}">My Button</md-button>
<md-button md-style-color="{'background-color': 'green.900'}">My Button</md-button>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment