@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
67 lines • 2.75 kB
JavaScript
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var baseTokens = function (props, theme) {
return {
contentPadding: '8px 10px',
minWidth: 0
};
};
var expandedTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
backgroundColor: semanticColors.buttonBackgroundPressed,
backgroundColorHovered: semanticColors.buttonBackgroundPressed,
backgroundColorPressed: semanticColors.buttonBackgroundPressed,
color: semanticColors.buttonTextPressed,
colorHovered: semanticColors.buttonTextPressed,
colorPressed: semanticColors.buttonTextPressed
};
};
var primaryExpandedTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
backgroundColor: semanticColors.primaryButtonBackgroundPressed,
backgroundColorHovered: semanticColors.primaryButtonBackgroundPressed,
backgroundColorPressed: semanticColors.primaryButtonBackgroundPressed,
color: semanticColors.primaryButtonTextPressed,
colorHovered: semanticColors.primaryButtonTextPressed,
colorPressed: semanticColors.primaryButtonTextPressed
};
};
exports.MenuButtonTokens = function (props, theme) { return [
baseTokens,
props.expanded && expandedTokens,
props.primary && props.expanded && primaryExpandedTokens
]; };
exports.MenuButtonStyles = function (props, theme, tokens) {
var className = props.className;
return {
button: [
{
backgroundColor: tokens.backgroundColor,
color: tokens.color,
minWidth: tokens.minWidth,
selectors: {
':hover': {
backgroundColor: tokens.backgroundColorHovered,
color: tokens.colorHovered
},
':hover:active': {
backgroundColor: tokens.backgroundColorPressed,
color: tokens.colorPressed
},
'> *': {
padding: tokens.contentPadding
}
}
},
className
],
menuIcon: {
paddingTop: '3px'
}
};
};
});
//# sourceMappingURL=MenuButton.styles.js.map