Utilizing Angular Material design components across my entire website for a cohesive look and feel. (Angular Material Design)
A custom theme has been crafted:
$mdThemingProvider.theme('default')
.primaryPalette('red', {
'default': '700',
'hue-1': '100',
'hue-2': '600',
'hue-3': 'A100'
})
.accentPalette('light-blue');
Struggling to locate the CSS necessary to define a badge, resorting to using Bootstrap's version which is overriding my custom theme.
How can this be resolved? Perhaps there's an alternative within material design CSS that I am unaware of?
Current setup: https://i.sstatic.net/2ke9M.png
Corresponding HTML:
<div class="md-block" layout layout-align="center center">
<div flex="20" layout layout-align="center center">
<span class="md-body-1">Poll interval in days</span>
</div>
<md-slider class="md-primary" flex ng-model="client.PollIntervalInDays" step="1" min="1" max="100" aria-label="rating">
</md-slider>
<div flex="20" layout layout-align="center center">
<h2><span class="label label-pill label-danger">{{client.PollIntervalInDays}}</span></h2>
</div>
</div>
Issue arises with mismatched colors between md-primary and label-danger. Attempts to apply md-primary directly on the span have proved futile.
Any suggestions or solutions?