` container.
*
* This container is used by the TabsController to show/hide the active tab's content view. This synchronization is
* automatically managed by the internal TabsController whenever the tab selection changes. Selection changes can
* be initiated via data binding changes, programmatic invocation, or user gestures.
*
* @param {string=} label Optional attribute to specify a simple string as the tab label
* @param {boolean=} disabled If present, disabled tab selection.
* @param {expression=} md-on-deselect Expression to be evaluated after the tab has been de-selected.
* @param {expression=} md-on-select Expression to be evaluated after the tab has been selected.
* @param {boolean=} md-active When true, sets the active tab. Note: There can only be one active tab at a time.
*
*
* @usage
*
*
*
* My Tab content
*
*
*
*
* My Tab content
*
*
*
* Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
* totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
* dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
* sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
*
*
*
*
*
*/
angular
.module('material.components.tabs')
.directive('mdTab', MdTab);
function MdTab () {
return {
require: '^?mdTabs',
terminal: true,
compile: function (element, attr) {
var label = element.find('md-tab-label'),
body = element.find('md-tab-body');
if (label.length == 0) {
label = angular.element('
');
if (attr.label) label.text(attr.label);
else label.append(element.contents());
if (body.length == 0) {
var contents = element.contents().detach();
body = angular.element('
');
body.append(contents);
}
}
element.append(label);
if (body.html()) element.append(body);
return postLink;
},
scope: {
active: '=?mdActive',
disabled: '=?ngDisabled',
select: '&?mdOnSelect',
deselect: '&?mdOnDeselect'
}
};
function postLink (scope, element, attr, ctrl) {
if (!ctrl) return;
var index = ctrl.getTabElementIndex(element),
body = element.find('md-tab-body').eq(0).remove(),
label = element.find('md-tab-label').eq(0).remove(),
data = ctrl.insertTab({
scope: scope,
parent: scope.$parent,
index: index,
element: element,
template: body.html(),
label: label.html()
}, index);
scope.select = scope.select || angular.noop;
scope.deselect = scope.deselect || angular.noop;
scope.$watch('active', function (active) { if (active) ctrl.select(data.getIndex()); });
scope.$watch('disabled', function () { ctrl.refreshIndex(); });
scope.$watch(
function () {
return ctrl.getTabElementIndex(element);
},
function (newIndex) {
data.index = newIndex;
ctrl.updateTabOrder();
}
);
scope.$on('$destroy', function () { ctrl.removeTab(data); });
}
}
})();
(function(){
"use strict";
angular
.module('material.components.tabs')
.directive('mdTabItem', MdTabItem);
function MdTabItem () {
return {
require: '^?mdTabs',
link: function link (scope, element, attr, ctrl) {
if (!ctrl) return;
ctrl.attachRipple(scope, element);
}
};
}
})();
(function(){
"use strict";
angular
.module('material.components.tabs')
.directive('mdTabLabel', MdTabLabel);
function MdTabLabel () {
return { terminal: true };
}
})();
(function(){
"use strict";
angular.module('material.components.tabs')
.directive('mdTabScroll', MdTabScroll);
function MdTabScroll ($parse) {
return {
restrict: 'A',
compile: function ($element, attr) {
var fn = $parse(attr.mdTabScroll, null, true);
return function ngEventHandler (scope, element) {
element.on('mousewheel', function (event) {
scope.$apply(function () { fn(scope, { $event: event }); });
});
};
}
}
}
MdTabScroll.$inject = ["$parse"];
})();
(function(){
"use strict";
angular
.module('material.components.tabs')
.controller('MdTabsController', MdTabsController);
/**
* @ngInject
*/
function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipple,
$mdUtil, $animateCss, $attrs, $compile, $mdTheming) {
// define private properties
var ctrl = this,
locked = false,
elements = getElements(),
queue = [],
destroyed = false,
loaded = false;
// define one-way bindings
defineOneWayBinding('stretchTabs', handleStretchTabs);
// define public properties with change handlers
defineProperty('focusIndex', handleFocusIndexChange, ctrl.selectedIndex || 0);
defineProperty('offsetLeft', handleOffsetChange, 0);
defineProperty('hasContent', handleHasContent, false);
defineProperty('maxTabWidth', handleMaxTabWidth, getMaxTabWidth());
defineProperty('shouldPaginate', handleShouldPaginate, false);
// define boolean attributes
defineBooleanAttribute('noInkBar', handleInkBar);
defineBooleanAttribute('dynamicHeight', handleDynamicHeight);
defineBooleanAttribute('noPagination');
defineBooleanAttribute('swipeContent');
defineBooleanAttribute('noDisconnect');
defineBooleanAttribute('autoselect');
defineBooleanAttribute('centerTabs', handleCenterTabs, false);
defineBooleanAttribute('enableDisconnect');
// define public properties
ctrl.scope = $scope;
ctrl.parent = $scope.$parent;
ctrl.tabs = [];
ctrl.lastSelectedIndex = null;
ctrl.hasFocus = false;
ctrl.lastClick = true;
ctrl.shouldCenterTabs = shouldCenterTabs();
// define public methods
ctrl.updatePagination = $mdUtil.debounce(updatePagination, 100);
ctrl.redirectFocus = redirectFocus;
ctrl.attachRipple = attachRipple;
ctrl.insertTab = insertTab;
ctrl.removeTab = removeTab;
ctrl.select = select;
ctrl.scroll = scroll;
ctrl.nextPage = nextPage;
ctrl.previousPage = previousPage;
ctrl.keydown = keydown;
ctrl.canPageForward = canPageForward;
ctrl.canPageBack = canPageBack;
ctrl.refreshIndex = refreshIndex;
ctrl.incrementIndex = incrementIndex;
ctrl.getTabElementIndex = getTabElementIndex;
ctrl.updateInkBarStyles = $mdUtil.debounce(updateInkBarStyles, 100);
ctrl.updateTabOrder = $mdUtil.debounce(updateTabOrder, 100);
init();
/**
* Perform initialization for the controller, setup events and watcher(s)
*/
function init () {
ctrl.selectedIndex = ctrl.selectedIndex || 0;
compileTemplate();
configureWatchers();
bindEvents();
$mdTheming($element);
$mdUtil.nextTick(function () {
updateHeightFromContent();
adjustOffset();
updateInkBarStyles();
ctrl.tabs[ ctrl.selectedIndex ] && ctrl.tabs[ ctrl.selectedIndex ].scope.select();
loaded = true;
updatePagination();
});
}
/**
* Compiles the template provided by the user. This is passed as an attribute from the tabs
* directive's template function.
*/
function compileTemplate () {
var template = $attrs.$mdTabsTemplate,
element = angular.element(elements.data);
element.html(template);
$compile(element.contents())(ctrl.parent);
delete $attrs.$mdTabsTemplate;
}
/**
* Binds events used by the tabs component.
*/
function bindEvents () {
angular.element($window).on('resize', handleWindowResize);
$scope.$on('$destroy', cleanup);
}
/**
* Configure watcher(s) used by Tabs
*/
function configureWatchers () {
$scope.$watch('$mdTabsCtrl.selectedIndex', handleSelectedIndexChange);
}
/**
* Creates a one-way binding manually rather than relying on Angular's isolated scope
* @param key
* @param handler
*/
function defineOneWayBinding (key, handler) {
var attr = $attrs.$normalize('md-' + key);
if (handler) defineProperty(key, handler);
$attrs.$observe(attr, function (newValue) { ctrl[ key ] = newValue; });
}
/**
* Defines boolean attributes with default value set to true. (ie. md-stretch-tabs with no value
* will be treated as being truthy)
* @param key
* @param handler
*/
function defineBooleanAttribute (key, handler) {
var attr = $attrs.$normalize('md-' + key);
if (handler) defineProperty(key, handler);
if ($attrs.hasOwnProperty(attr)) updateValue($attrs[attr]);
$attrs.$observe(attr, updateValue);
function updateValue (newValue) {
ctrl[ key ] = newValue !== 'false';
}
}
/**
* Remove any events defined by this controller
*/
function cleanup () {
destroyed = true;
angular.element($window).off('resize', handleWindowResize);
}
// Change handlers
/**
* Toggles stretch tabs class and updates inkbar when tab stretching changes
* @param stretchTabs
*/
function handleStretchTabs (stretchTabs) {
angular.element(elements.wrapper).toggleClass('md-stretch-tabs', shouldStretchTabs());
updateInkBarStyles();
}
function handleCenterTabs (newValue) {
ctrl.shouldCenterTabs = shouldCenterTabs();
}
function handleMaxTabWidth (newWidth, oldWidth) {
if (newWidth !== oldWidth) {
$mdUtil.nextTick(ctrl.updateInkBarStyles);
}
}
function handleShouldPaginate (newValue, oldValue) {
if (newValue !== oldValue) {
ctrl.maxTabWidth = getMaxTabWidth();
ctrl.shouldCenterTabs = shouldCenterTabs();
$mdUtil.nextTick(function () {
ctrl.maxTabWidth = getMaxTabWidth();
adjustOffset(ctrl.selectedIndex);
});
}
}
/**
* Add/remove the `md-no-tab-content` class depending on `ctrl.hasContent`
* @param hasContent
*/
function handleHasContent (hasContent) {
$element[ hasContent ? 'removeClass' : 'addClass' ]('md-no-tab-content');
}
/**
* Apply ctrl.offsetLeft to the paging element when it changes
* @param left
*/
function handleOffsetChange (left) {
var newValue = ctrl.shouldCenterTabs ? '' : '-' + left + 'px';
angular.element(elements.paging).css($mdConstant.CSS.TRANSFORM, 'translate3d(' + newValue + ', 0, 0)');
$scope.$broadcast('$mdTabsPaginationChanged');
}
/**
* Update the UI whenever `ctrl.focusIndex` is updated
* @param newIndex
* @param oldIndex
*/
function handleFocusIndexChange (newIndex, oldIndex) {
if (newIndex === oldIndex) return;
if (!elements.tabs[ newIndex ]) return;
adjustOffset();
redirectFocus();
}
/**
* Update the UI whenever the selected index changes. Calls user-defined select/deselect methods.
* @param newValue
* @param oldValue
*/
function handleSelectedIndexChange (newValue, oldValue) {
if (newValue === oldValue) return;
ctrl.selectedIndex = getNearestSafeIndex(newValue);
ctrl.lastSelectedIndex = oldValue;
ctrl.updateInkBarStyles();
updateHeightFromContent();
adjustOffset(newValue);
$scope.$broadcast('$mdTabsChanged');
ctrl.tabs[ oldValue ] && ctrl.tabs[ oldValue ].scope.deselect();
ctrl.tabs[ newValue ] && ctrl.tabs[ newValue ].scope.select();
}
function getTabElementIndex(tabEl){
var tabs = $element[0].getElementsByTagName('md-tab');
return Array.prototype.indexOf.call(tabs, tabEl[0]);
}
/**
* Queues up a call to `handleWindowResize` when a resize occurs while the tabs component is
* hidden.
*/
function handleResizeWhenVisible () {
// if there is already a watcher waiting for resize, do nothing
if (handleResizeWhenVisible.watcher) return;
// otherwise, we will abuse the $watch function to check for visible
handleResizeWhenVisible.watcher = $scope.$watch(function () {
// since we are checking for DOM size, we use $mdUtil.nextTick() to wait for after the DOM updates
$mdUtil.nextTick(function () {
// if the watcher has already run (ie. multiple digests in one cycle), do nothing
if (!handleResizeWhenVisible.watcher) return;
if ($element.prop('offsetParent')) {
handleResizeWhenVisible.watcher();
handleResizeWhenVisible.watcher = null;
handleWindowResize();
}
}, false);
});
}
// Event handlers / actions
/**
* Handle user keyboard interactions
* @param event
*/
function keydown (event) {
switch (event.keyCode) {
case $mdConstant.KEY_CODE.LEFT_ARROW:
event.preventDefault();
incrementIndex(-1, true);
break;
case $mdConstant.KEY_CODE.RIGHT_ARROW:
event.preventDefault();
incrementIndex(1, true);
break;
case $mdConstant.KEY_CODE.SPACE:
case $mdConstant.KEY_CODE.ENTER:
event.preventDefault();
if (!locked) ctrl.selectedIndex = ctrl.focusIndex;
break;
}
ctrl.lastClick = false;
}
/**
* Update the selected index and trigger a click event on the original `md-tab` element in order
* to fire user-added click events.
* @param index
*/
function select (index) {
if (!locked) ctrl.focusIndex = ctrl.selectedIndex = index;
ctrl.lastClick = true;
// nextTick is required to prevent errors in user-defined click events
$mdUtil.nextTick(function () {
ctrl.tabs[ index ].element.triggerHandler('click');
}, false);
}
/**
* When pagination is on, this makes sure the selected index is in view.
* @param event
*/
function scroll (event) {
if (!ctrl.shouldPaginate) return;
event.preventDefault();
ctrl.offsetLeft = fixOffset(ctrl.offsetLeft - event.wheelDelta);
}
/**
* Slides the tabs over approximately one page forward.
*/
function nextPage () {
var viewportWidth = elements.canvas.clientWidth,
totalWidth = viewportWidth + ctrl.offsetLeft,
i, tab;
for (i = 0; i < elements.tabs.length; i++) {
tab = elements.tabs[ i ];
if (tab.offsetLeft + tab.offsetWidth > totalWidth) break;
}
ctrl.offsetLeft = fixOffset(tab.offsetLeft);
}
/**
* Slides the tabs over approximately one page backward.
*/
function previousPage () {
var i, tab;
for (i = 0; i < elements.tabs.length; i++) {
tab = elements.tabs[ i ];
if (tab.offsetLeft + tab.offsetWidth >= ctrl.offsetLeft) break;
}
ctrl.offsetLeft = fixOffset(tab.offsetLeft + tab.offsetWidth - elements.canvas.clientWidth);
}
/**
* Update size calculations when the window is resized.
*/
function handleWindowResize () {
ctrl.lastSelectedIndex = ctrl.selectedIndex;
ctrl.offsetLeft = fixOffset(ctrl.offsetLeft);
$mdUtil.nextTick(function () {
ctrl.updateInkBarStyles();
updatePagination();
});
}
function handleInkBar (hide) {
angular.element(elements.inkBar).toggleClass('ng-hide', hide);
}
/**
* Toggle dynamic height class when value changes
* @param value
*/
function handleDynamicHeight (value) {
$element.toggleClass('md-dynamic-height', value);
}
/**
* Remove a tab from the data and select the nearest valid tab.
* @param tabData
*/
function removeTab (tabData) {
if (destroyed) return;
var selectedIndex = ctrl.selectedIndex,
tab = ctrl.tabs.splice(tabData.getIndex(), 1)[ 0 ];
refreshIndex();
// when removing a tab, if the selected index did not change, we have to manually trigger the
// tab select/deselect events
if (ctrl.selectedIndex === selectedIndex) {
tab.scope.deselect();
ctrl.tabs[ ctrl.selectedIndex ] && ctrl.tabs[ ctrl.selectedIndex ].scope.select();
}
$mdUtil.nextTick(function () {
updatePagination();
ctrl.offsetLeft = fixOffset(ctrl.offsetLeft);
});
}
/**
* Create an entry in the tabs array for a new tab at the specified index.
* @param tabData
* @param index
* @returns {*}
*/
function insertTab (tabData, index) {
var hasLoaded = loaded;
var proto = {
getIndex: function () { return ctrl.tabs.indexOf(tab); },
isActive: function () { return this.getIndex() === ctrl.selectedIndex; },
isLeft: function () { return this.getIndex() < ctrl.selectedIndex; },
isRight: function () { return this.getIndex() > ctrl.selectedIndex; },
shouldRender: function () { return !ctrl.noDisconnect || this.isActive(); },
hasFocus: function () {
return !ctrl.lastClick
&& ctrl.hasFocus && this.getIndex() === ctrl.focusIndex;
},
id: $mdUtil.nextUid()
},
tab = angular.extend(proto, tabData);
if (angular.isDefined(index)) {
ctrl.tabs.splice(index, 0, tab);
} else {
ctrl.tabs.push(tab);
}
processQueue();
updateHasContent();
$mdUtil.nextTick(function () {
updatePagination();
// if autoselect is enabled, select the newly added tab
if (hasLoaded && ctrl.autoselect) $mdUtil.nextTick(function () {
$mdUtil.nextTick(function () { select(ctrl.tabs.indexOf(tab)); });
});
});
return tab;
}
// Getter methods
/**
* Gathers references to all of the DOM elements used by this controller.
* @returns {{}}
*/
function getElements () {
var elements = {};
// gather tab bar elements
elements.wrapper = $element[ 0 ].getElementsByTagName('md-tabs-wrapper')[ 0 ];
elements.data = $element[ 0 ].getElementsByTagName('md-tab-data')[ 0 ];
elements.canvas = elements.wrapper.getElementsByTagName('md-tabs-canvas')[ 0 ];
elements.paging = elements.canvas.getElementsByTagName('md-pagination-wrapper')[ 0 ];
elements.tabs = elements.paging.getElementsByTagName('md-tab-item');
elements.dummies = elements.canvas.getElementsByTagName('md-dummy-tab');
elements.inkBar = elements.paging.getElementsByTagName('md-ink-bar')[ 0 ];
// gather tab content elements
elements.contentsWrapper = $element[ 0 ].getElementsByTagName('md-tabs-content-wrapper')[ 0 ];
elements.contents = elements.contentsWrapper.getElementsByTagName('md-tab-content');
return elements;
}
/**
* Determines whether or not the left pagination arrow should be enabled.
* @returns {boolean}
*/
function canPageBack () {
return ctrl.offsetLeft > 0;
}
/**
* Determines whether or not the right pagination arrow should be enabled.
* @returns {*|boolean}
*/
function canPageForward () {
var lastTab = elements.tabs[ elements.tabs.length - 1 ];
return lastTab && lastTab.offsetLeft + lastTab.offsetWidth > elements.canvas.clientWidth +
ctrl.offsetLeft;
}
/**
* Determines if the UI should stretch the tabs to fill the available space.
* @returns {*}
*/
function shouldStretchTabs () {
switch (ctrl.stretchTabs) {
case 'always':
return true;
case 'never':
return false;
default:
return !ctrl.shouldPaginate
&& $window.matchMedia('(max-width: 600px)').matches;
}
}
/**
* Determines if the tabs should appear centered.
* @returns {string|boolean}
*/
function shouldCenterTabs () {
return ctrl.centerTabs && !ctrl.shouldPaginate;
}
/**
* Determines if pagination is necessary to display the tabs within the available space.
* @returns {boolean}
*/
function shouldPaginate () {
if (ctrl.noPagination || !loaded) return false;
var canvasWidth = $element.prop('clientWidth');
angular.forEach(elements.dummies, function (tab) { canvasWidth -= tab.offsetWidth; });
return canvasWidth < 0;
}
/**
* Finds the nearest tab index that is available. This is primarily used for when the active
* tab is removed.
* @param newIndex
* @returns {*}
*/
function getNearestSafeIndex (newIndex) {
if (newIndex === -1) return -1;
var maxOffset = Math.max(ctrl.tabs.length - newIndex, newIndex),
i, tab;
for (i = 0; i <= maxOffset; i++) {
tab = ctrl.tabs[ newIndex + i ];
if (tab && (tab.scope.disabled !== true)) return tab.getIndex();
tab = ctrl.tabs[ newIndex - i ];
if (tab && (tab.scope.disabled !== true)) return tab.getIndex();
}
return newIndex;
}
// Utility methods
/**
* Defines a property using a getter and setter in order to trigger a change handler without
* using `$watch` to observe changes.
* @param key
* @param handler
* @param value
*/
function defineProperty (key, handler, value) {
Object.defineProperty(ctrl, key, {
get: function () { return value; },
set: function (newValue) {
var oldValue = value;
value = newValue;
handler && handler(newValue, oldValue);
}
});
}
/**
* Updates whether or not pagination should be displayed.
*/
function updatePagination () {
if (!shouldStretchTabs()) updatePagingWidth();
ctrl.maxTabWidth = getMaxTabWidth();
ctrl.shouldPaginate = shouldPaginate();
}
function updatePagingWidth() {
var width = 1;
angular.forEach(elements.dummies, function (element) { width += element.offsetWidth; });
angular.element(elements.paging).css('width', width + 'px');
}
function getMaxTabWidth () {
return $element.prop('clientWidth');
}
/**
* Re-orders the tabs and updates the selected and focus indexes to their new positions.
* This is triggered by `tabDirective.js` when the user's tabs have been re-ordered.
*/
function updateTabOrder () {
var selectedItem = ctrl.tabs[ ctrl.selectedIndex ],
focusItem = ctrl.tabs[ ctrl.focusIndex ];
ctrl.tabs = ctrl.tabs.sort(function (a, b) {
return a.index - b.index;
});
ctrl.selectedIndex = ctrl.tabs.indexOf(selectedItem);
ctrl.focusIndex = ctrl.tabs.indexOf(focusItem);
}
/**
* This moves the selected or focus index left or right. This is used by the keydown handler.
* @param inc
*/
function incrementIndex (inc, focus) {
var newIndex,
key = focus ? 'focusIndex' : 'selectedIndex',
index = ctrl[ key ];
for (newIndex = index + inc;
ctrl.tabs[ newIndex ] && ctrl.tabs[ newIndex ].scope.disabled;
newIndex += inc) {}
if (ctrl.tabs[ newIndex ]) {
ctrl[ key ] = newIndex;
}
}
/**
* This is used to forward focus to dummy elements. This method is necessary to avoid aniation
* issues when attempting to focus an item that is out of view.
*/
function redirectFocus () {
elements.dummies[ ctrl.focusIndex ].focus();
}
/**
* Forces the pagination to move the focused tab into view.
*/
function adjustOffset (index) {
if (index == null) index = ctrl.focusIndex;
if (!elements.tabs[ index ]) return;
if (ctrl.shouldCenterTabs) return;
var tab = elements.tabs[ index ],
left = tab.offsetLeft,
right = tab.offsetWidth + left;
ctrl.offsetLeft = Math.max(ctrl.offsetLeft, fixOffset(right - elements.canvas.clientWidth + 32 * 2));
ctrl.offsetLeft = Math.min(ctrl.offsetLeft, fixOffset(left));
}
/**
* Iterates through all queued functions and clears the queue. This is used for functions that
* are called before the UI is ready, such as size calculations.
*/
function processQueue () {
queue.forEach(function (func) { $mdUtil.nextTick(func); });
queue = [];
}
/**
* Determines if the tab content area is needed.
*/
function updateHasContent () {
var hasContent = false;
angular.forEach(ctrl.tabs, function (tab) {
if (tab.template) hasContent = true;
});
ctrl.hasContent = hasContent;
}
/**
* Moves the indexes to their nearest valid values.
*/
function refreshIndex () {
ctrl.selectedIndex = getNearestSafeIndex(ctrl.selectedIndex);
ctrl.focusIndex = getNearestSafeIndex(ctrl.focusIndex);
}
/**
* Calculates the content height of the current tab.
* @returns {*}
*/
function updateHeightFromContent () {
if (!ctrl.dynamicHeight) return $element.css('height', '');
if (!ctrl.tabs.length) return queue.push(updateHeightFromContent);
var tabContent = elements.contents[ ctrl.selectedIndex ],
contentHeight = tabContent ? tabContent.offsetHeight : 0,
tabsHeight = elements.wrapper.offsetHeight,
newHeight = contentHeight + tabsHeight,
currentHeight = $element.prop('offsetHeight');
// Adjusts calculations for when the buttons are bottom-aligned since this relies on absolute
// positioning. This should probably be cleaned up if a cleaner solution is possible.
if ($element.attr('md-align-tabs') === 'bottom') {
currentHeight -= tabsHeight;
newHeight -= tabsHeight;
// Need to include bottom border in these calculations
if ($element.attr('md-border-bottom') !== undefined) ++currentHeight;
}
if (currentHeight === newHeight) return;
// Lock during animation so the user can't change tabs
locked = true;
var fromHeight = { height: currentHeight + 'px' },
toHeight = { height: newHeight + 'px' };
// Set the height to the current, specific pixel height to fix a bug on iOS where the height
// first animates to 0, then back to the proper height causing a visual glitch
$element.css(fromHeight);
// Animate the height from the old to the new
$animateCss($element, {
from: fromHeight,
to: toHeight,
easing: 'cubic-bezier(0.35, 0, 0.25, 1)',
duration: 0.5
}).start().done(function () {
// Then (to fix the same iOS issue as above), disable transitions and remove the specific
// pixel height so the height can size with browser width/content changes, etc.
$element.css({
transition: 'none',
height: ''
});
// In the next tick, re-allow transitions (if we do it all at once, $element.css is "smart"
// enough to batch it for us instead of doing it immediately, which undoes the original
// transition: none)
$mdUtil.nextTick(function() {
$element.css('transition', '');
});
// And unlock so tab changes can occur
locked = false;
});
}
/**
* Repositions the ink bar to the selected tab.
* @returns {*}
*/
function updateInkBarStyles () {
if (!elements.tabs[ ctrl.selectedIndex ]) {
angular.element(elements.inkBar).css({ left: 'auto', right: 'auto' });
return;
}
if (!ctrl.tabs.length) return queue.push(ctrl.updateInkBarStyles);
// if the element is not visible, we will not be able to calculate sizes until it is
// we should treat that as a resize event rather than just updating the ink bar
if (!$element.prop('offsetParent')) return handleResizeWhenVisible();
var index = ctrl.selectedIndex,
totalWidth = elements.paging.offsetWidth,
tab = elements.tabs[ index ],
left = tab.offsetLeft,
right = totalWidth - left - tab.offsetWidth,
tabWidth;
if (ctrl.shouldCenterTabs) {
tabWidth = Array.prototype.slice.call(elements.tabs).reduce(function (value, element) {
return value + element.offsetWidth;
}, 0);
if (totalWidth > tabWidth) $mdUtil.nextTick(updateInkBarStyles, false);
}
updateInkBarClassName();
angular.element(elements.inkBar).css({ left: left + 'px', right: right + 'px' });
}
/**
* Adds left/right classes so that the ink bar will animate properly.
*/
function updateInkBarClassName () {
var newIndex = ctrl.selectedIndex,
oldIndex = ctrl.lastSelectedIndex,
ink = angular.element(elements.inkBar);
if (!angular.isNumber(oldIndex)) return;
ink
.toggleClass('md-left', newIndex < oldIndex)
.toggleClass('md-right', newIndex > oldIndex);
}
/**
* Takes an offset value and makes sure that it is within the min/max allowed values.
* @param value
* @returns {*}
*/
function fixOffset (value) {
if (!elements.tabs.length || !ctrl.shouldPaginate) return 0;
var lastTab = elements.tabs[ elements.tabs.length - 1 ],
totalWidth = lastTab.offsetLeft + lastTab.offsetWidth;
value = Math.max(0, value);
value = Math.min(totalWidth - elements.canvas.clientWidth, value);
return value;
}
/**
* Attaches a ripple to the tab item element.
* @param scope
* @param element
*/
function attachRipple (scope, element) {
var options = { colorElement: angular.element(elements.inkBar) };
$mdTabInkRipple.attach(scope, element, options);
}
}
MdTabsController.$inject = ["$scope", "$element", "$window", "$mdConstant", "$mdTabInkRipple", "$mdUtil", "$animateCss", "$attrs", "$compile", "$mdTheming"];
})();
(function(){
"use strict";
/**
* @ngdoc directive
* @name mdTabs
* @module material.components.tabs
*
* @restrict E
*
* @description
* The `
` directive serves as the container for 1..n `` child directives to produces a Tabs components.
* In turn, the nested `` directive is used to specify a tab label for the **header button** and a [optional] tab view
* content that will be associated with each tab button.
*
* Below is the markup for its simplest usage:
*
*
*
*
*
*
*
*
*
* Tabs supports three (3) usage scenarios:
*
* 1. Tabs (buttons only)
* 2. Tabs with internal view content
* 3. Tabs with external view content
*
* **Tab-only** support is useful when tab buttons are used for custom navigation regardless of any other components, content, or views.
* **Tabs with internal views** are the traditional usages where each tab has associated view content and the view switching is managed internally by the Tabs component.
* **Tabs with external view content** is often useful when content associated with each tab is independently managed and data-binding notifications announce tab selection changes.
*
* Additional features also include:
*
* * Content can include any markup.
* * If a tab is disabled while active/selected, then the next tab will be auto-selected.
*
* ### Explanation of tab stretching
*
* Initially, tabs will have an inherent size. This size will either be defined by how much space is needed to accommodate their text or set by the user through CSS. Calculations will be based on this size.
*
* On mobile devices, tabs will be expanded to fill the available horizontal space. When this happens, all tabs will become the same size.
*
* On desktops, by default, stretching will never occur.
*
* This default behavior can be overridden through the `md-stretch-tabs` attribute. Here is a table showing when stretching will occur:
*
* `md-stretch-tabs` | mobile | desktop
* ------------------|-----------|--------
* `auto` | stretched | ---
* `always` | stretched | stretched
* `never` | --- | ---
*
* @param {integer=} md-selected Index of the active/selected tab
* @param {boolean=} md-no-ink If present, disables ink ripple effects.
* @param {boolean=} md-no-ink-bar If present, disables the selection ink bar.
* @param {string=} md-align-tabs Attribute to indicate position of tab buttons: `bottom` or `top`; default is `top`
* @param {string=} md-stretch-tabs Attribute to indicate whether or not to stretch tabs: `auto`, `always`, or `never`; default is `auto`
* @param {boolean=} md-dynamic-height When enabled, the tab wrapper will resize based on the contents of the selected tab
* @param {boolean=} md-center-tabs When enabled, tabs will be centered provided there is no need for pagination
* @param {boolean=} md-no-pagination When enabled, pagination will remain off
* @param {boolean=} md-swipe-content When enabled, swipe gestures will be enabled for the content area to jump between tabs
* @param {boolean=} md-no-disconnect If your tab content has background tasks (ie. event listeners), you will want to include this to prevent the scope from being disconnected
* @param {boolean=} md-autoselect When present, any tabs added after the initial load will be automatically selected
*
* @usage
*
*
*
*
*
* {{tab.title}}
*
*
*
* {{tab.content}}
*
*
*
*
*
*/
angular
.module('material.components.tabs')
.directive('mdTabs', MdTabs);
function MdTabs () {
return {
scope: {
selectedIndex: '=?mdSelected'
},
template: function (element, attr) {
attr[ "$mdTabsTemplate" ] = element.html();
return '' +
' ' +
' ' +
' ' +
' ' +
' ' +
' ' +
' ' +
' ' +
' ' +
' ' +
' ' +
' ' +
' ' +
' ' +
' ' +
'
' +
' ' +
' ' +
' ' +
' ' +
' ' +
' ' +
'';
},
controller: 'MdTabsController',
controllerAs: '$mdTabsCtrl',
bindToController: true
};
}
})();
(function(){
"use strict";
angular
.module('material.components.tabs')
.directive('mdTabsTemplate', MdTabsTemplate);
function MdTabsTemplate ($compile, $mdUtil) {
return {
restrict: 'A',
link: link,
scope: {
template: '=mdTabsTemplate',
connected: '=?mdConnectedIf',
compileScope: '=mdScope'
},
require: '^?mdTabs'
};
function link (scope, element, attr, ctrl) {
if (!ctrl) return;
var compileScope = ctrl.enableDisconnect ? scope.compileScope.$new() : scope.compileScope;
element.html(scope.template);
$compile(element.contents())(compileScope);
element.on('DOMSubtreeModified', function () {
ctrl.updatePagination();
ctrl.updateInkBarStyles();
});
return $mdUtil.nextTick(handleScope);
function handleScope () {
scope.$watch('connected', function (value) { value === false ? disconnect() : reconnect(); });
scope.$on('$destroy', reconnect);
}
function disconnect () {
if (ctrl.enableDisconnect) $mdUtil.disconnectScope(compileScope);
}
function reconnect () {
if (ctrl.enableDisconnect) $mdUtil.reconnectScope(compileScope);
}
}
}
MdTabsTemplate.$inject = ["$compile", "$mdUtil"];
})();
(function(){
angular.module("material.core").constant("$MD_THEME_CSS", "md-autocomplete.md-THEME_NAME-theme { background: '{{background-50}}'; } md-autocomplete.md-THEME_NAME-theme[disabled] { background: '{{background-100}}'; } md-autocomplete.md-THEME_NAME-theme button md-icon path { fill: '{{background-600}}'; } md-autocomplete.md-THEME_NAME-theme button:after { background: '{{background-600-0.3}}'; }.md-autocomplete-suggestions-container.md-THEME_NAME-theme { background: '{{background-50}}'; } .md-autocomplete-suggestions-container.md-THEME_NAME-theme li { color: '{{background-900}}'; } .md-autocomplete-suggestions-container.md-THEME_NAME-theme li .highlight { color: '{{background-600}}'; } .md-autocomplete-suggestions-container.md-THEME_NAME-theme li:hover, .md-autocomplete-suggestions-container.md-THEME_NAME-theme li.selected { background: '{{background-200}}'; }md-backdrop { background-color: '{{background-900-0.0}}'; } md-backdrop.md-opaque.md-THEME_NAME-theme { background-color: '{{background-900-1.0}}'; }a.md-button.md-THEME_NAME-theme:not([disabled]):hover, .md-button.md-THEME_NAME-theme:not([disabled]):hover { background-color: '{{background-500-0.2}}'; }a.md-button.md-THEME_NAME-theme:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme:not([disabled]).md-focused { background-color: '{{background-500-0.2}}'; }a.md-button.md-THEME_NAME-theme:not([disabled]).md-icon-button:hover, .md-button.md-THEME_NAME-theme:not([disabled]).md-icon-button:hover { background-color: transparent; }a.md-button.md-THEME_NAME-theme.md-fab, .md-button.md-THEME_NAME-theme.md-fab { background-color: '{{accent-color}}'; color: '{{accent-contrast}}'; } a.md-button.md-THEME_NAME-theme.md-fab md-icon, .md-button.md-THEME_NAME-theme.md-fab md-icon { color: '{{accent-contrast}}'; } a.md-button.md-THEME_NAME-theme.md-fab:not([disabled]):hover, .md-button.md-THEME_NAME-theme.md-fab:not([disabled]):hover { background-color: '{{accent-color}}'; } a.md-button.md-THEME_NAME-theme.md-fab:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-fab:not([disabled]).md-focused { background-color: '{{accent-A700}}'; }a.md-button.md-THEME_NAME-theme.md-primary, .md-button.md-THEME_NAME-theme.md-primary { color: '{{primary-color}}'; } a.md-button.md-THEME_NAME-theme.md-primary.md-raised, a.md-button.md-THEME_NAME-theme.md-primary.md-fab, .md-button.md-THEME_NAME-theme.md-primary.md-raised, .md-button.md-THEME_NAME-theme.md-primary.md-fab { color: '{{primary-contrast}}'; background-color: '{{primary-color}}'; } a.md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]) md-icon, a.md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]) md-icon, .md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]) md-icon, .md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]) md-icon { color: '{{primary-contrast}}'; } a.md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]):hover, a.md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]):hover, .md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]):hover, .md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]):hover { background-color: '{{primary-color}}'; } a.md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]).md-focused, a.md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]).md-focused { background-color: '{{primary-600}}'; } a.md-button.md-THEME_NAME-theme.md-primary:not([disabled]) md-icon, .md-button.md-THEME_NAME-theme.md-primary:not([disabled]) md-icon { color: '{{primary-color}}'; }a.md-button.md-THEME_NAME-theme.md-fab, .md-button.md-THEME_NAME-theme.md-fab { background-color: '{{accent-color}}'; color: '{{accent-contrast}}'; } a.md-button.md-THEME_NAME-theme.md-fab:not([disabled]) .md-icon, .md-button.md-THEME_NAME-theme.md-fab:not([disabled]) .md-icon { color: '{{accent-contrast}}'; } a.md-button.md-THEME_NAME-theme.md-fab:not([disabled]):hover, .md-button.md-THEME_NAME-theme.md-fab:not([disabled]):hover { background-color: '{{accent-color}}'; } a.md-button.md-THEME_NAME-theme.md-fab:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-fab:not([disabled]).md-focused { background-color: '{{accent-A700}}'; }a.md-button.md-THEME_NAME-theme.md-raised, .md-button.md-THEME_NAME-theme.md-raised { color: '{{background-contrast}}'; background-color: '{{background-50}}'; } a.md-button.md-THEME_NAME-theme.md-raised:not([disabled]) .md-icon, .md-button.md-THEME_NAME-theme.md-raised:not([disabled]) .md-icon { color: '{{background-contrast}}'; } a.md-button.md-THEME_NAME-theme.md-raised:not([disabled]):hover, .md-button.md-THEME_NAME-theme.md-raised:not([disabled]):hover { background-color: '{{background-50}}'; } a.md-button.md-THEME_NAME-theme.md-raised:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-raised:not([disabled]).md-focused { background-color: '{{background-200}}'; }a.md-button.md-THEME_NAME-theme.md-warn, .md-button.md-THEME_NAME-theme.md-warn { color: '{{warn-color}}'; } a.md-button.md-THEME_NAME-theme.md-warn.md-raised, a.md-button.md-THEME_NAME-theme.md-warn.md-fab, .md-button.md-THEME_NAME-theme.md-warn.md-raised, .md-button.md-THEME_NAME-theme.md-warn.md-fab { color: '{{warn-contrast}}'; background-color: '{{warn-color}}'; } a.md-button.md-THEME_NAME-theme.md-warn.md-raised:not([disabled]) md-icon, a.md-button.md-THEME_NAME-theme.md-warn.md-fab:not([disabled]) md-icon, .md-button.md-THEME_NAME-theme.md-warn.md-raised:not([disabled]) md-icon, .md-button.md-THEME_NAME-theme.md-warn.md-fab:not([disabled]) md-icon { color: '{{warn-contrast}}'; } a.md-button.md-THEME_NAME-theme.md-warn.md-raised:not([disabled]):hover, a.md-button.md-THEME_NAME-theme.md-warn.md-fab:not([disabled]):hover, .md-button.md-THEME_NAME-theme.md-warn.md-raised:not([disabled]):hover, .md-button.md-THEME_NAME-theme.md-warn.md-fab:not([disabled]):hover { background-color: '{{warn-color}}'; } a.md-button.md-THEME_NAME-theme.md-warn.md-raised:not([disabled]).md-focused, a.md-button.md-THEME_NAME-theme.md-warn.md-fab:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-warn.md-raised:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-warn.md-fab:not([disabled]).md-focused { background-color: '{{warn-700}}'; } a.md-button.md-THEME_NAME-theme.md-warn:not([disabled]) md-icon, .md-button.md-THEME_NAME-theme.md-warn:not([disabled]) md-icon { color: '{{warn-color}}'; }a.md-button.md-THEME_NAME-theme.md-accent, .md-button.md-THEME_NAME-theme.md-accent { color: '{{accent-color}}'; } a.md-button.md-THEME_NAME-theme.md-accent.md-raised, a.md-button.md-THEME_NAME-theme.md-accent.md-fab, .md-button.md-THEME_NAME-theme.md-accent.md-raised, .md-button.md-THEME_NAME-theme.md-accent.md-fab { color: '{{accent-contrast}}'; background-color: '{{accent-color}}'; } a.md-button.md-THEME_NAME-theme.md-accent.md-raised:not([disabled]) md-icon, a.md-button.md-THEME_NAME-theme.md-accent.md-fab:not([disabled]) md-icon, .md-button.md-THEME_NAME-theme.md-accent.md-raised:not([disabled]) md-icon, .md-button.md-THEME_NAME-theme.md-accent.md-fab:not([disabled]) md-icon { color: '{{accent-contrast}}'; } a.md-button.md-THEME_NAME-theme.md-accent.md-raised:not([disabled]):hover, a.md-button.md-THEME_NAME-theme.md-accent.md-fab:not([disabled]):hover, .md-button.md-THEME_NAME-theme.md-accent.md-raised:not([disabled]):hover, .md-button.md-THEME_NAME-theme.md-accent.md-fab:not([disabled]):hover { background-color: '{{accent-color}}'; } a.md-button.md-THEME_NAME-theme.md-accent.md-raised:not([disabled]).md-focused, a.md-button.md-THEME_NAME-theme.md-accent.md-fab:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-accent.md-raised:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-accent.md-fab:not([disabled]).md-focused { background-color: '{{accent-700}}'; } a.md-button.md-THEME_NAME-theme.md-accent:not([disabled]) md-icon, .md-button.md-THEME_NAME-theme.md-accent:not([disabled]) md-icon { color: '{{accent-color}}'; }a.md-button.md-THEME_NAME-theme[disabled], a.md-button.md-THEME_NAME-theme.md-raised[disabled], a.md-button.md-THEME_NAME-theme.md-fab[disabled], a.md-button.md-THEME_NAME-theme.md-accent[disabled], a.md-button.md-THEME_NAME-theme.md-warn[disabled], .md-button.md-THEME_NAME-theme[disabled], .md-button.md-THEME_NAME-theme.md-raised[disabled], .md-button.md-THEME_NAME-theme.md-fab[disabled], .md-button.md-THEME_NAME-theme.md-accent[disabled], .md-button.md-THEME_NAME-theme.md-warn[disabled] { color: '{{foreground-3}}'; cursor: not-allowed; } a.md-button.md-THEME_NAME-theme[disabled] md-icon, a.md-button.md-THEME_NAME-theme.md-raised[disabled] md-icon, a.md-button.md-THEME_NAME-theme.md-fab[disabled] md-icon, a.md-button.md-THEME_NAME-theme.md-accent[disabled] md-icon, a.md-button.md-THEME_NAME-theme.md-warn[disabled] md-icon, .md-button.md-THEME_NAME-theme[disabled] md-icon, .md-button.md-THEME_NAME-theme.md-raised[disabled] md-icon, .md-button.md-THEME_NAME-theme.md-fab[disabled] md-icon, .md-button.md-THEME_NAME-theme.md-accent[disabled] md-icon, .md-button.md-THEME_NAME-theme.md-warn[disabled] md-icon { color: '{{foreground-3}}'; }a.md-button.md-THEME_NAME-theme.md-raised[disabled], a.md-button.md-THEME_NAME-theme.md-fab[disabled], .md-button.md-THEME_NAME-theme.md-raised[disabled], .md-button.md-THEME_NAME-theme.md-fab[disabled] { background-color: '{{foreground-4}}'; }a.md-button.md-THEME_NAME-theme[disabled], .md-button.md-THEME_NAME-theme[disabled] { background-color: transparent; }md-bottom-sheet.md-THEME_NAME-theme { background-color: '{{background-50}}'; border-top-color: '{{background-300}}'; } md-bottom-sheet.md-THEME_NAME-theme.md-list md-list-item { color: '{{foreground-1}}'; } md-bottom-sheet.md-THEME_NAME-theme .md-subheader { background-color: '{{background-50}}'; } md-bottom-sheet.md-THEME_NAME-theme .md-subheader { color: '{{foreground-1}}'; }md-card.md-THEME_NAME-theme { background-color: '{{background-color}}'; border-radius: 2px; } md-card.md-THEME_NAME-theme .md-card-image { border-radius: 2px 2px 0 0; }md-checkbox.md-THEME_NAME-theme .md-ripple { color: '{{accent-600}}'; }md-checkbox.md-THEME_NAME-theme.md-checked .md-ripple { color: '{{background-600}}'; }md-checkbox.md-THEME_NAME-theme.md-checked.md-focused .md-container:before { background-color: '{{accent-color-0.26}}'; }md-checkbox.md-THEME_NAME-theme .md-ink-ripple { color: '{{foreground-2}}'; }md-checkbox.md-THEME_NAME-theme.md-checked .md-ink-ripple { color: '{{accent-color-0.87}}'; }md-checkbox.md-THEME_NAME-theme .md-icon { border-color: '{{foreground-2}}'; }md-checkbox.md-THEME_NAME-theme.md-checked .md-icon { background-color: '{{accent-color-0.87}}'; }md-checkbox.md-THEME_NAME-theme.md-checked .md-icon:after { border-color: '{{background-200}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary .md-ripple { color: '{{primary-600}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-ripple { color: '{{background-600}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary .md-ink-ripple { color: '{{foreground-2}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-ink-ripple { color: '{{primary-color-0.87}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary .md-icon { border-color: '{{foreground-2}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-icon { background-color: '{{primary-color-0.87}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked.md-focused .md-container:before { background-color: '{{primary-color-0.26}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-icon:after { border-color: '{{background-200}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn .md-ripple { color: '{{warn-600}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn .md-ink-ripple { color: '{{foreground-2}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked .md-ink-ripple { color: '{{warn-color-0.87}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn .md-icon { border-color: '{{foreground-2}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked .md-icon { background-color: '{{warn-color-0.87}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked.md-focused:not([disabled]) .md-container:before { background-color: '{{warn-color-0.26}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked .md-icon:after { border-color: '{{background-200}}'; }md-checkbox.md-THEME_NAME-theme[disabled] .md-icon { border-color: '{{foreground-3}}'; }md-checkbox.md-THEME_NAME-theme[disabled].md-checked .md-icon { background-color: '{{foreground-3}}'; }md-checkbox.md-THEME_NAME-theme[disabled] .md-label { color: '{{foreground-3}}'; }md-content.md-THEME_NAME-theme { color: '{{foreground-1}}'; background-color: '{{background-color}}'; }md-dialog.md-THEME_NAME-theme { border-radius: 4px; background-color: '{{background-color}}'; } md-dialog.md-THEME_NAME-theme.md-content-overflow .md-actions { border-top-color: '{{foreground-4}}'; }md-chips.md-THEME_NAME-theme .md-chips { box-shadow: 0 1px '{{background-300}}'; } md-chips.md-THEME_NAME-theme .md-chips.md-focused { box-shadow: 0 2px '{{primary-color}}'; }md-chips.md-THEME_NAME-theme .md-chip { background: '{{background-300}}'; color: '{{background-800}}'; } md-chips.md-THEME_NAME-theme .md-chip.md-focused { background: '{{primary-color}}'; color: '{{primary-contrast}}'; } md-chips.md-THEME_NAME-theme .md-chip.md-focused md-icon { color: '{{primary-contrast}}'; }md-chips.md-THEME_NAME-theme md-chip-remove .md-button md-icon path { fill: '{{background-500}}'; }.md-contact-suggestion span.md-contact-email { color: '{{background-400}}'; }/** Theme styles for mdCalendar. */.md-calendar.md-THEME_NAME-theme { color: '{{foreground-1}}'; } .md-calendar.md-THEME_NAME-theme tr:last-child td { border-bottom-color: '{{background-200}}'; }.md-THEME_NAME-theme .md-calendar-day-header { background: '{{background-hue-1}}'; color: '{{foreground-1}}'; }.md-THEME_NAME-theme .md-calendar-date.md-calendar-date-today .md-calendar-date-selection-indicator { border: 1px solid '{{primary-500}}'; }.md-THEME_NAME-theme .md-calendar-date.md-calendar-date-today.md-calendar-date-disabled { color: '{{primary-500-0.6}}'; }.md-THEME_NAME-theme .md-calendar-date.md-focus .md-calendar-date-selection-indicator { background: '{{background-hue-1}}'; }.md-THEME_NAME-theme .md-calendar-date-selection-indicator:hover { background: '{{background-hue-1}}'; }.md-THEME_NAME-theme .md-calendar-date.md-calendar-selected-date .md-calendar-date-selection-indicator, .md-THEME_NAME-theme .md-calendar-date.md-focus.md-calendar-selected-date .md-calendar-date-selection-indicator { background: '{{primary-500}}'; color: '{{primary-500-contrast}}'; border-color: transparent; }.md-THEME_NAME-theme .md-calendar-date-disabled, .md-THEME_NAME-theme .md-calendar-month-label-disabled { color: '{{foreground-3}}'; }/** Theme styles for mdDatepicker. */md-datepicker.md-THEME_NAME-theme { background: '{{background-color}}'; }.md-THEME_NAME-theme .md-datepicker-input { color: '{{background-contrast}}'; background: '{{background-color}}'; } .md-THEME_NAME-theme .md-datepicker-input::-webkit-input-placeholder, .md-THEME_NAME-theme .md-datepicker-input::-moz-placeholder, .md-THEME_NAME-theme .md-datepicker-input:-moz-placeholder, .md-THEME_NAME-theme .md-datepicker-input:-ms-input-placeholder { color: '{{foreground-3}}'; }.md-THEME_NAME-theme .md-datepicker-input-container { border-bottom-color: '{{background-300}}'; } .md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-focused { border-bottom-color: '{{primary-500}}'; } .md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-invalid { border-bottom-color: '{{warn-500}}'; }.md-THEME_NAME-theme .md-datepicker-calendar-pane { border-color: '{{background-300}}'; }.md-THEME_NAME-theme .md-datepicker-triangle-button .md-datepicker-expand-triangle { border-top-color: '{{foreground-3}}'; }.md-THEME_NAME-theme .md-datepicker-triangle-button:hover .md-datepicker-expand-triangle { border-top-color: '{{foreground-2}}'; }.md-THEME_NAME-theme .md-datepicker-open .md-datepicker-calendar-icon { fill: '{{primary-500}}'; }.md-THEME_NAME-theme .md-datepicker-calendar, .md-THEME_NAME-theme .md-datepicker-input-mask-opaque { background: '{{background-color}}'; }md-divider.md-THEME_NAME-theme { border-top-color: '{{foreground-4}}'; }md-icon.md-THEME_NAME-theme { color: '{{foreground-2}}'; } md-icon.md-THEME_NAME-theme.md-primary { color: '{{primary-color}}'; } md-icon.md-THEME_NAME-theme.md-accent { color: '{{accent-color}}'; } md-icon.md-THEME_NAME-theme.md-warn { color: '{{warn-color}}'; }md-input-container.md-THEME_NAME-theme .md-input { color: '{{foreground-1}}'; border-color: '{{foreground-4}}'; text-shadow: '{{foreground-shadow}}'; } md-input-container.md-THEME_NAME-theme .md-input::-webkit-input-placeholder, md-input-container.md-THEME_NAME-theme .md-input::-moz-placeholder, md-input-container.md-THEME_NAME-theme .md-input:-moz-placeholder, md-input-container.md-THEME_NAME-theme .md-input:-ms-input-placeholder { color: '{{foreground-3}}'; }md-input-container.md-THEME_NAME-theme > md-icon { color: '{{foreground-1}}'; }md-input-container.md-THEME_NAME-theme label, md-input-container.md-THEME_NAME-theme .md-placeholder { text-shadow: '{{foreground-shadow}}'; color: '{{foreground-3}}'; }md-input-container.md-THEME_NAME-theme ng-messages :not(.md-char-counter), md-input-container.md-THEME_NAME-theme [ng-messages] :not(.md-char-counter), md-input-container.md-THEME_NAME-theme ng-message :not(.md-char-counter), md-input-container.md-THEME_NAME-theme data-ng-message :not(.md-char-counter), md-input-container.md-THEME_NAME-theme x-ng-message :not(.md-char-counter), md-input-container.md-THEME_NAME-theme [ng-message] :not(.md-char-counter), md-input-container.md-THEME_NAME-theme [data-ng-message] :not(.md-char-counter), md-input-container.md-THEME_NAME-theme [x-ng-message] :not(.md-char-counter), md-input-container.md-THEME_NAME-theme [ng-message-exp] :not(.md-char-counter), md-input-container.md-THEME_NAME-theme [data-ng-message-exp] :not(.md-char-counter), md-input-container.md-THEME_NAME-theme [x-ng-message-exp] :not(.md-char-counter) { color: '{{warn-500}}'; }md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-has-value label { color: '{{foreground-2}}'; }md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused .md-input { border-color: '{{primary-500}}'; }md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused label { color: '{{primary-500}}'; }md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused md-icon { color: '{{primary-500}}'; }md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-accent .md-input { border-color: '{{accent-500}}'; }md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-accent label { color: '{{accent-500}}'; }md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-warn .md-input { border-color: '{{warn-500}}'; }md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-warn label { color: '{{warn-500}}'; }md-input-container.md-THEME_NAME-theme.md-input-invalid .md-input { border-color: '{{warn-500}}'; }md-input-container.md-THEME_NAME-theme.md-input-invalid.md-input-focused label { color: '{{warn-500}}'; }md-input-container.md-THEME_NAME-theme.md-input-invalid ng-message, md-input-container.md-THEME_NAME-theme.md-input-invalid data-ng-message, md-input-container.md-THEME_NAME-theme.md-input-invalid x-ng-message, md-input-container.md-THEME_NAME-theme.md-input-invalid [ng-message], md-input-container.md-THEME_NAME-theme.md-input-invalid [data-ng-message], md-input-container.md-THEME_NAME-theme.md-input-invalid [x-ng-message], md-input-container.md-THEME_NAME-theme.md-input-invalid [ng-message-exp], md-input-container.md-THEME_NAME-theme.md-input-invalid [data-ng-message-exp], md-input-container.md-THEME_NAME-theme.md-input-invalid [x-ng-message-exp], md-input-container.md-THEME_NAME-theme.md-input-invalid .md-char-counter { color: '{{warn-500}}'; }md-input-container.md-THEME_NAME-theme .md-input[disabled], [disabled] md-input-container.md-THEME_NAME-theme .md-input { border-bottom-color: transparent; color: '{{foreground-3}}'; background-image: linear-gradient(to right, '{{foreground-3}}' 0%, '{{foreground-3}}' 33%, transparent 0%); background-image: -ms-linear-gradient(left, transparent 0%, '{{foreground-3}}' 100%); }md-list.md-THEME_NAME-theme md-list-item.md-2-line .md-list-item-text h3, md-list.md-THEME_NAME-theme md-list-item.md-2-line .md-list-item-text h4, md-list.md-THEME_NAME-theme md-list-item.md-3-line .md-list-item-text h3, md-list.md-THEME_NAME-theme md-list-item.md-3-line .md-list-item-text h4 { color: '{{foreground-1}}'; }md-list.md-THEME_NAME-theme md-list-item.md-2-line .md-list-item-text p, md-list.md-THEME_NAME-theme md-list-item.md-3-line .md-list-item-text p { color: '{{foreground-2}}'; }md-list.md-THEME_NAME-theme .md-proxy-focus.md-focused div.md-no-style { background-color: '{{background-100}}'; }md-list.md-THEME_NAME-theme md-list-item > .md-avatar-icon { background-color: '{{foreground-3}}'; color: '{{background-color}}'; }md-list.md-THEME_NAME-theme md-list-item > md-icon { color: '{{foreground-2}}'; } md-list.md-THEME_NAME-theme md-list-item > md-icon.md-highlight { color: '{{primary-color}}'; } md-list.md-THEME_NAME-theme md-list-item > md-icon.md-highlight.md-accent { color: '{{accent-color}}'; }md-list.md-THEME_NAME-theme md-list-item button { background-color: '{{background-color}}'; } md-list.md-THEME_NAME-theme md-list-item button.md-button:not([disabled]):hover { background-color: '{{background-color}}'; }md-menu-content.md-THEME_NAME-theme { background-color: '{{background-color}}'; } md-menu-content.md-THEME_NAME-theme md-menu-divider { background-color: '{{foreground-4}}'; }md-menu-bar.md-THEME_NAME-theme > button.md-button { color: '{{foreground-2}}'; border-radius: 2px; }md-menu-bar.md-THEME_NAME-theme md-menu.md-open > button, md-menu-bar.md-THEME_NAME-theme md-menu > button:focus { outline: none; background: '{{background-200}}'; }md-menu-bar.md-THEME_NAME-theme.md-open:not(.md-keyboard-mode) md-menu:hover > button { background-color: '{{ background-500-0.2}}'; }md-menu-bar.md-THEME_NAME-theme:not(.md-keyboard-mode):not(.md-open) md-menu button:hover, md-menu-bar.md-THEME_NAME-theme:not(.md-keyboard-mode):not(.md-open) md-menu button:focus { background: transparent; }md-menu-content.md-THEME_NAME-theme .md-menu > .md-button:after { color: '{{foreground-2}}'; }md-menu-content.md-THEME_NAME-theme .md-menu.md-open > .md-button { background-color: '{{ background-500-0.2}}'; }md-toolbar.md-THEME_NAME-theme.md-menu-toolbar { background-color: '{{background-color}}'; color: '{{foreground-1}}'; } md-toolbar.md-THEME_NAME-theme.md-menu-toolbar md-toolbar-filler { background-color: '{{primary-color}}'; color: '{{primary-contrast}}'; } md-toolbar.md-THEME_NAME-theme.md-menu-toolbar md-toolbar-filler md-icon { color: '{{primary-contrast}}'; }md-progress-circular.md-THEME_NAME-theme { background-color: transparent; } md-progress-circular.md-THEME_NAME-theme .md-inner .md-gap { border-top-color: '{{primary-color}}'; border-bottom-color: '{{primary-color}}'; } md-progress-circular.md-THEME_NAME-theme .md-inner .md-left .md-half-circle, md-progress-circular.md-THEME_NAME-theme .md-inner .md-right .md-half-circle { border-top-color: '{{primary-color}}'; } md-progress-circular.md-THEME_NAME-theme .md-inner .md-right .md-half-circle { border-right-color: '{{primary-color}}'; } md-progress-circular.md-THEME_NAME-theme .md-inner .md-left .md-half-circle { border-left-color: '{{primary-color}}'; } md-progress-circular.md-THEME_NAME-theme.md-warn .md-inner .md-gap { border-top-color: '{{warn-color}}'; border-bottom-color: '{{warn-color}}'; } md-progress-circular.md-THEME_NAME-theme.md-warn .md-inner .md-left .md-half-circle, md-progress-circular.md-THEME_NAME-theme.md-warn .md-inner .md-right .md-half-circle { border-top-color: '{{warn-color}}'; } md-progress-circular.md-THEME_NAME-theme.md-warn .md-inner .md-right .md-half-circle { border-right-color: '{{warn-color}}'; } md-progress-circular.md-THEME_NAME-theme.md-warn .md-inner .md-left .md-half-circle { border-left-color: '{{warn-color}}'; } md-progress-circular.md-THEME_NAME-theme.md-accent .md-inner .md-gap { border-top-color: '{{accent-color}}'; border-bottom-color: '{{accent-color}}'; } md-progress-circular.md-THEME_NAME-theme.md-accent .md-inner .md-left .md-half-circle, md-progress-circular.md-THEME_NAME-theme.md-accent .md-inner .md-right .md-half-circle { border-top-color: '{{accent-color}}'; } md-progress-circular.md-THEME_NAME-theme.md-accent .md-inner .md-right .md-half-circle { border-right-color: '{{accent-color}}'; } md-progress-circular.md-THEME_NAME-theme.md-accent .md-inner .md-left .md-half-circle { border-left-color: '{{accent-color}}'; }md-progress-linear.md-THEME_NAME-theme .md-container { background-color: '{{primary-100}}'; }md-progress-linear.md-THEME_NAME-theme .md-bar { background-color: '{{primary-color}}'; }md-progress-linear.md-THEME_NAME-theme.md-warn .md-container { background-color: '{{warn-100}}'; }md-progress-linear.md-THEME_NAME-theme.md-warn .md-bar { background-color: '{{warn-color}}'; }md-progress-linear.md-THEME_NAME-theme.md-accent .md-container { background-color: '{{accent-100}}'; }md-progress-linear.md-THEME_NAME-theme.md-accent .md-bar { background-color: '{{accent-color}}'; }md-progress-linear.md-THEME_NAME-theme[md-mode=buffer].md-warn .md-bar1 { background-color: '{{warn-100}}'; }md-progress-linear.md-THEME_NAME-theme[md-mode=buffer].md-warn .md-dashed:before { background: radial-gradient('{{warn-100}}' 0%, '{{warn-100}}' 16%, transparent 42%); }md-progress-linear.md-THEME_NAME-theme[md-mode=buffer].md-accent .md-bar1 { background-color: '{{accent-100}}'; }md-progress-linear.md-THEME_NAME-theme[md-mode=buffer].md-accent .md-dashed:before { background: radial-gradient('{{accent-100}}' 0%, '{{accent-100}}' 16%, transparent 42%); }md-radio-button.md-THEME_NAME-theme .md-off { border-color: '{{foreground-2}}'; }md-radio-button.md-THEME_NAME-theme .md-on { background-color: '{{accent-color-0.87}}'; }md-radio-button.md-THEME_NAME-theme.md-checked .md-off { border-color: '{{accent-color-0.87}}'; }md-radio-button.md-THEME_NAME-theme.md-checked .md-ink-ripple { color: '{{accent-color-0.87}}'; }md-radio-button.md-THEME_NAME-theme .md-container .md-ripple { color: '{{accent-600}}'; }md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-primary .md-on, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-primary .md-on, md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-primary .md-on, md-radio-button.md-THEME_NAME-theme:not([disabled]).md-primary .md-on { background-color: '{{primary-color-0.87}}'; }md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-primary .md-checked .md-off, md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-primary.md-checked .md-off, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-primary .md-checked .md-off, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-off, md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-primary .md-checked .md-off, md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-primary.md-checked .md-off, md-radio-button.md-THEME_NAME-theme:not([disabled]).md-primary .md-checked .md-off, md-radio-button.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-off { border-color: '{{primary-color-0.87}}'; }md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-primary .md-checked .md-ink-ripple, md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-primary.md-checked .md-ink-ripple, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-primary .md-checked .md-ink-ripple, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-ink-ripple, md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-primary .md-checked .md-ink-ripple, md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-primary.md-checked .md-ink-ripple, md-radio-button.md-THEME_NAME-theme:not([disabled]).md-primary .md-checked .md-ink-ripple, md-radio-button.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-ink-ripple { color: '{{primary-color-0.87}}'; }md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-primary .md-container .md-ripple, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-primary .md-container .md-ripple, md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-primary .md-container .md-ripple, md-radio-button.md-THEME_NAME-theme:not([disabled]).md-primary .md-container .md-ripple { color: '{{primary-600}}'; }md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-warn .md-on, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-warn .md-on, md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-warn .md-on, md-radio-button.md-THEME_NAME-theme:not([disabled]).md-warn .md-on { background-color: '{{warn-color-0.87}}'; }md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-warn .md-checked .md-off, md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-warn.md-checked .md-off, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-warn .md-checked .md-off, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked .md-off, md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-warn .md-checked .md-off, md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-warn.md-checked .md-off, md-radio-button.md-THEME_NAME-theme:not([disabled]).md-warn .md-checked .md-off, md-radio-button.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked .md-off { border-color: '{{warn-color-0.87}}'; }md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-warn .md-checked .md-ink-ripple, md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-warn.md-checked .md-ink-ripple, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-warn .md-checked .md-ink-ripple, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked .md-ink-ripple, md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-warn .md-checked .md-ink-ripple, md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-warn.md-checked .md-ink-ripple, md-radio-button.md-THEME_NAME-theme:not([disabled]).md-warn .md-checked .md-ink-ripple, md-radio-button.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked .md-ink-ripple { color: '{{warn-color-0.87}}'; }md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-warn .md-container .md-ripple, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-warn .md-container .md-ripple, md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-warn .md-container .md-ripple, md-radio-button.md-THEME_NAME-theme:not([disabled]).md-warn .md-container .md-ripple { color: '{{warn-600}}'; }md-radio-group.md-THEME_NAME-theme[disabled], md-radio-button.md-THEME_NAME-theme[disabled] { color: '{{foreground-3}}'; } md-radio-group.md-THEME_NAME-theme[disabled] .md-container .md-off, md-radio-button.md-THEME_NAME-theme[disabled] .md-container .md-off { border-color: '{{foreground-3}}'; } md-radio-group.md-THEME_NAME-theme[disabled] .md-container .md-on, md-radio-button.md-THEME_NAME-theme[disabled] .md-container .md-on { border-color: '{{foreground-3}}'; }md-radio-group.md-THEME_NAME-theme .md-checked .md-ink-ripple { color: '{{accent-color-0.26}}'; }md-radio-group.md-THEME_NAME-theme.md-primary .md-checked:not([disabled]) .md-ink-ripple, md-radio-group.md-THEME_NAME-theme .md-checked:not([disabled]).md-primary .md-ink-ripple { color: '{{primary-color-0.26}}'; }md-radio-group.md-THEME_NAME-theme .md-checked.md-primary .md-ink-ripple { color: '{{warn-color-0.26}}'; }md-radio-group.md-THEME_NAME-theme.md-focused:not(:empty) .md-checked .md-container:before { background-color: '{{accent-color-0.26}}'; }md-radio-group.md-THEME_NAME-theme.md-focused:not(:empty) .md-checked:not([disabled]).md-primary .md-container:before { background-color: '{{primary-color-0.26}}'; }md-radio-group.md-THEME_NAME-theme.md-focused:not(:empty) .md-checked.md-primary .md-container:before { background-color: '{{warn-color-0.26}}'; }md-select.md-THEME_NAME-theme[disabled] .md-select-value { border-bottom-color: transparent; background-image: linear-gradient(to right, '{{foreground-3}}' 0%, '{{foreground-3}}' 33%, transparent 0%); background-image: -ms-linear-gradient(left, transparent 0%, '{{foreground-3}}' 100%); }md-select.md-THEME_NAME-theme .md-select-value { border-bottom-color: '{{foreground-4}}'; } md-select.md-THEME_NAME-theme .md-select-value.md-select-placeholder { color: '{{foreground-3}}'; }md-select.md-THEME_NAME-theme.ng-invalid.ng-dirty .md-select-value { color: '{{warn-500}}' !important; border-bottom-color: '{{warn-500}}' !important; }md-select.md-THEME_NAME-theme:not([disabled]):focus .md-select-value { border-bottom-color: '{{primary-color}}'; color: '{{ foreground-1 }}'; } md-select.md-THEME_NAME-theme:not([disabled]):focus .md-select-value.md-select-placeholder { color: '{{ foreground-1 }}'; }md-select.md-THEME_NAME-theme:not([disabled]):focus.md-accent .md-select-value { border-bottom-color: '{{accent-color}}'; }md-select.md-THEME_NAME-theme:not([disabled]):focus.md-warn .md-select-value { border-bottom-color: '{{warn-color}}'; }md-select.md-THEME_NAME-theme[disabled] .md-select-value { color: '{{foreground-3}}'; } md-select.md-THEME_NAME-theme[disabled] .md-select-value.md-select-placeholder { color: '{{foreground-3}}'; }md-select-menu.md-THEME_NAME-theme md-option[disabled] { color: '{{foreground-3}}'; }md-select-menu.md-THEME_NAME-theme md-optgroup { color: '{{foreground-2}}'; } md-select-menu.md-THEME_NAME-theme md-optgroup md-option { color: '{{foreground-1}}'; }md-select-menu.md-THEME_NAME-theme md-option[selected] { color: '{{primary-500}}'; } md-select-menu.md-THEME_NAME-theme md-option[selected]:focus { color: '{{primary-600}}'; } md-select-menu.md-THEME_NAME-theme md-option[selected].md-accent { color: '{{accent-500}}'; } md-select-menu.md-THEME_NAME-theme md-option[selected].md-accent:focus { color: '{{accent-600}}'; }md-select-menu.md-THEME_NAME-theme md-option:focus:not([selected]) { background: '{{background-200}}'; }md-sidenav.md-THEME_NAME-theme { background-color: '{{background-color}}'; }md-slider.md-THEME_NAME-theme .md-track { background-color: '{{foreground-3}}'; }md-slider.md-THEME_NAME-theme .md-track-ticks { background-color: '{{foreground-4}}'; }md-slider.md-THEME_NAME-theme .md-focus-thumb { background-color: '{{foreground-2}}'; }md-slider.md-THEME_NAME-theme .md-focus-ring { background-color: '{{accent-color}}'; }md-slider.md-THEME_NAME-theme .md-disabled-thumb { border-color: '{{background-color}}'; }md-slider.md-THEME_NAME-theme.md-min .md-thumb:after { background-color: '{{background-color}}'; }md-slider.md-THEME_NAME-theme .md-track.md-track-fill { background-color: '{{accent-color}}'; }md-slider.md-THEME_NAME-theme .md-thumb:after { border-color: '{{accent-color}}'; background-color: '{{accent-color}}'; }md-slider.md-THEME_NAME-theme .md-sign { background-color: '{{accent-color}}'; } md-slider.md-THEME_NAME-theme .md-sign:after { border-top-color: '{{accent-color}}'; }md-slider.md-THEME_NAME-theme .md-thumb-text { color: '{{accent-contrast}}'; }md-slider.md-THEME_NAME-theme.md-warn .md-focus-ring { background-color: '{{warn-color}}'; }md-slider.md-THEME_NAME-theme.md-warn .md-track.md-track-fill { background-color: '{{warn-color}}'; }md-slider.md-THEME_NAME-theme.md-warn .md-thumb:after { border-color: '{{warn-color}}'; background-color: '{{warn-color}}'; }md-slider.md-THEME_NAME-theme.md-warn .md-sign { background-color: '{{warn-color}}'; } md-slider.md-THEME_NAME-theme.md-warn .md-sign:after { border-top-color: '{{warn-color}}'; }md-slider.md-THEME_NAME-theme.md-warn .md-thumb-text { color: '{{warn-contrast}}'; }md-slider.md-THEME_NAME-theme.md-primary .md-focus-ring { background-color: '{{primary-color}}'; }md-slider.md-THEME_NAME-theme.md-primary .md-track.md-track-fill { background-color: '{{primary-color}}'; }md-slider.md-THEME_NAME-theme.md-primary .md-thumb:after { border-color: '{{primary-color}}'; background-color: '{{primary-color}}'; }md-slider.md-THEME_NAME-theme.md-primary .md-sign { background-color: '{{primary-color}}'; } md-slider.md-THEME_NAME-theme.md-primary .md-sign:after { border-top-color: '{{primary-color}}'; }md-slider.md-THEME_NAME-theme.md-primary .md-thumb-text { color: '{{primary-contrast}}'; }md-slider.md-THEME_NAME-theme[disabled] .md-thumb:after { border-color: '{{foreground-3}}'; }md-slider.md-THEME_NAME-theme[disabled]:not(.md-min) .md-thumb:after { background-color: '{{foreground-3}}'; }.md-subheader.md-THEME_NAME-theme { color: '{{ foreground-2-0.23 }}'; background-color: '{{background-color}}'; } .md-subheader.md-THEME_NAME-theme.md-primary { color: '{{primary-color}}'; } .md-subheader.md-THEME_NAME-theme.md-accent { color: '{{accent-color}}'; } .md-subheader.md-THEME_NAME-theme.md-warn { color: '{{warn-color}}'; }md-switch.md-THEME_NAME-theme .md-ink-ripple { color: '{{background-500}}'; }md-switch.md-THEME_NAME-theme .md-thumb { background-color: '{{background-50}}'; }md-switch.md-THEME_NAME-theme .md-bar { background-color: '{{background-500}}'; }md-switch.md-THEME_NAME-theme.md-checked .md-ink-ripple { color: '{{accent-color}}'; }md-switch.md-THEME_NAME-theme.md-checked .md-thumb { background-color: '{{accent-color}}'; }md-switch.md-THEME_NAME-theme.md-checked .md-bar { background-color: '{{accent-color-0.5}}'; }md-switch.md-THEME_NAME-theme.md-checked.md-focused .md-thumb:before { background-color: '{{accent-color-0.26}}'; }md-switch.md-THEME_NAME-theme.md-checked.md-primary .md-ink-ripple { color: '{{primary-color}}'; }md-switch.md-THEME_NAME-theme.md-checked.md-primary .md-thumb { background-color: '{{primary-color}}'; }md-switch.md-THEME_NAME-theme.md-checked.md-primary .md-bar { background-color: '{{primary-color-0.5}}'; }md-switch.md-THEME_NAME-theme.md-checked.md-primary.md-focused .md-thumb:before { background-color: '{{primary-color-0.26}}'; }md-switch.md-THEME_NAME-theme.md-checked.md-warn .md-ink-ripple { color: '{{warn-color}}'; }md-switch.md-THEME_NAME-theme.md-checked.md-warn .md-thumb { background-color: '{{warn-color}}'; }md-switch.md-THEME_NAME-theme.md-checked.md-warn .md-bar { background-color: '{{warn-color-0.5}}'; }md-switch.md-THEME_NAME-theme.md-checked.md-warn.md-focused .md-thumb:before { background-color: '{{warn-color-0.26}}'; }md-switch.md-THEME_NAME-theme[disabled] .md-thumb { background-color: '{{background-400}}'; }md-switch.md-THEME_NAME-theme[disabled] .md-bar { background-color: '{{foreground-4}}'; }md-tabs.md-THEME_NAME-theme md-tabs-wrapper { background-color: transparent; border-color: '{{foreground-4}}'; }md-tabs.md-THEME_NAME-theme .md-paginator md-icon { color: '{{primary-color}}'; }md-tabs.md-THEME_NAME-theme md-ink-bar { color: '{{accent-color}}'; background: '{{accent-color}}'; }md-tabs.md-THEME_NAME-theme .md-tab { color: '{{foreground-2}}'; } md-tabs.md-THEME_NAME-theme .md-tab[disabled], md-tabs.md-THEME_NAME-theme .md-tab[disabled] md-icon { color: '{{foreground-3}}'; } md-tabs.md-THEME_NAME-theme .md-tab.md-active, md-tabs.md-THEME_NAME-theme .md-tab.md-active md-icon, md-tabs.md-THEME_NAME-theme .md-tab.md-focused, md-tabs.md-THEME_NAME-theme .md-tab.md-focused md-icon { color: '{{primary-color}}'; } md-tabs.md-THEME_NAME-theme .md-tab.md-focused { background: '{{primary-color-0.1}}'; } md-tabs.md-THEME_NAME-theme .md-tab .md-ripple-container { color: '{{accent-100}}'; }md-tabs.md-THEME_NAME-theme.md-accent > md-tabs-wrapper { background-color: '{{accent-color}}'; } md-tabs.md-THEME_NAME-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]) { color: '{{accent-100}}'; } md-tabs.md-THEME_NAME-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-tabs.md-THEME_NAME-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused { color: '{{accent-contrast}}'; } md-tabs.md-THEME_NAME-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused { background: '{{accent-contrast-0.1}}'; } md-tabs.md-THEME_NAME-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-ink-bar { color: '{{primary-600-1}}'; background: '{{primary-600-1}}'; }md-tabs.md-THEME_NAME-theme.md-primary > md-tabs-wrapper { background-color: '{{primary-color}}'; } md-tabs.md-THEME_NAME-theme.md-primary > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]) { color: '{{primary-100}}'; } md-tabs.md-THEME_NAME-theme.md-primary > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-tabs.md-THEME_NAME-theme.md-primary > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused { color: '{{primary-contrast}}'; } md-tabs.md-THEME_NAME-theme.md-primary > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused { background: '{{primary-contrast-0.1}}'; }md-tabs.md-THEME_NAME-theme.md-warn > md-tabs-wrapper { background-color: '{{warn-color}}'; } md-tabs.md-THEME_NAME-theme.md-warn > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]) { color: '{{warn-100}}'; } md-tabs.md-THEME_NAME-theme.md-warn > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-tabs.md-THEME_NAME-theme.md-warn > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused { color: '{{warn-contrast}}'; } md-tabs.md-THEME_NAME-theme.md-warn > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused { background: '{{warn-contrast-0.1}}'; }md-toolbar > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper { background-color: '{{primary-color}}'; } md-toolbar > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]) { color: '{{primary-100}}'; } md-toolbar > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-toolbar > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused { color: '{{primary-contrast}}'; } md-toolbar > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused { background: '{{primary-contrast-0.1}}'; }md-toolbar.md-accent > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper { background-color: '{{accent-color}}'; } md-toolbar.md-accent > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]) { color: '{{accent-100}}'; } md-toolbar.md-accent > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-toolbar.md-accent > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused { color: '{{accent-contrast}}'; } md-toolbar.md-accent > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused { background: '{{accent-contrast-0.1}}'; } md-toolbar.md-accent > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-ink-bar { color: '{{primary-600-1}}'; background: '{{primary-600-1}}'; }md-toolbar.md-warn > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper { background-color: '{{warn-color}}'; } md-toolbar.md-warn > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]) { color: '{{warn-100}}'; } md-toolbar.md-warn > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-toolbar.md-warn > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused { color: '{{warn-contrast}}'; } md-toolbar.md-warn > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused { background: '{{warn-contrast-0.1}}'; }md-toast.md-THEME_NAME-theme { background-color: #323232; color: '{{background-50}}'; } md-toast.md-THEME_NAME-theme .md-button { color: '{{background-50}}'; } md-toast.md-THEME_NAME-theme .md-button.md-highlight { color: '{{primary-A200}}'; } md-toast.md-THEME_NAME-theme .md-button.md-highlight.md-accent { color: '{{accent-A200}}'; } md-toast.md-THEME_NAME-theme .md-button.md-highlight.md-warn { color: '{{warn-A200}}'; }md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) { background-color: '{{primary-color}}'; color: '{{primary-contrast}}'; } md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) md-icon { color: '{{primary-contrast}}'; } md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) .md-button { color: '{{primary-contrast}}'; } md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar).md-accent { background-color: '{{accent-color}}'; color: '{{accent-contrast}}'; } md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar).md-warn { background-color: '{{warn-color}}'; color: '{{warn-contrast}}'; }md-tooltip.md-THEME_NAME-theme { color: '{{background-A100}}'; } md-tooltip.md-THEME_NAME-theme .md-background { background-color: '{{foreground-2}}'; }");
})();
})(window, window.angular);