office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
250 lines • 12.4 kB
JavaScript
define(["require", "exports", "tslib", "../../Styling"], function (require, exports, tslib_1, Styling_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var GlobalClassNames = {
root: 'ms-Dropdown-container',
label: 'ms-Dropdown-label',
dropdown: 'ms-Dropdown',
title: 'ms-Dropdown-title',
caretDownWrapper: 'ms-Dropdown-caretDownWrapper',
caretDown: 'ms-Dropdown-caretDown',
callout: 'ms-Dropdown-callout',
panel: 'ms-Dropdown-panel',
dropdownItems: 'ms-Dropdown-items',
dropdownItem: 'ms-Dropdown-item',
dropdownDivider: 'ms-Dropdown-divider',
dropdownOptionText: 'ms-Dropdown-optionText',
dropdownItemHeader: 'ms-Dropdown-header',
titleIsPlaceHolder: 'ms-Dropdown-titleIsPlaceHolder',
titleHasError: 'ms-Dropdown-title--hasError'
};
var DROPDOWN_HEIGHT = 32;
var DROPDOWN_ITEMHEIGHT = 32;
var highContrastAdjustMixin = {
// highContrastAdjust mixin
'@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white)': {
MsHighContrastAdjust: 'none'
}
};
var highContrastItemAndTitleStateMixin = {
selectors: tslib_1.__assign((_a = {}, _a[Styling_1.HighContrastSelector] = {
backgroundColor: 'Highlight',
borderColor: 'Highlight',
color: 'HighlightText',
selectors: {
':hover': {
color: 'HighlightText' // overrides the hover styling for buttons that are also selected
}
}
}, _a), highContrastAdjustMixin)
};
var highContrastBorderState = {
selectors: (_b = {},
_b[Styling_1.HighContrastSelector] = {
borderColor: 'Highlight'
},
_b)
};
exports.getStyles = function (props) {
var theme = props.theme, hasError = props.hasError, className = props.className, isOpen = props.isOpen, disabled = props.disabled, required = props.required, isRenderingPlaceholder = props.isRenderingPlaceholder, panelClassName = props.panelClassName, calloutClassName = props.calloutClassName;
if (!theme) {
throw new Error('theme is undefined or null in base Dropdown getStyles function.');
}
var globalClassnames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
var palette = theme.palette, semanticColors = theme.semanticColors;
var rootHoverFocusActiveSelectorNeutralDarkMixin = {
color: palette.neutralDark
};
var rootHoverFocusActiveSelectorBodySubtextMixin = {
color: semanticColors.bodySubtext
};
var borderColorError = {
borderColor: semanticColors.errorText
};
var dropdownItemStyle = [
globalClassnames.dropdownItem,
{
backgroundColor: 'transparent',
boxSizing: 'border-box',
cursor: 'pointer',
display: 'block',
padding: '4px 16px',
width: '100%',
minHeight: DROPDOWN_ITEMHEIGHT,
lineHeight: 20,
height: 'auto',
position: 'relative',
border: '1px solid transparent',
wordWrap: 'break-word',
overflowWrap: 'break-word',
textAlign: 'left'
}
];
var dropdownItemSelected = dropdownItemStyle.concat([
{
backgroundColor: palette.neutralQuaternaryAlt,
color: palette.black
},
highContrastItemAndTitleStateMixin
]);
var dropdownItemDisabled = dropdownItemStyle.concat([
{
color: semanticColors.disabledText,
cursor: 'default'
}
]);
return {
root: globalClassnames.root,
label: globalClassnames.label,
dropdown: [
globalClassnames.dropdown,
Styling_1.normalize,
tslib_1.__assign({}, theme.fonts.medium, { color: palette.neutralPrimary, position: 'relative', outline: 0, userSelect: 'none', selectors: (_a = {},
_a['&:hover .' + globalClassnames.title] = [
!disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
{ borderColor: palette.neutralDark },
highContrastBorderState
],
_a['&:focus .' + globalClassnames.title] = [
!disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
{ borderColor: palette.themePrimary },
highContrastItemAndTitleStateMixin
],
_a['&:active .' + globalClassnames.title] = [
!disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
{ borderColor: palette.themeDark },
highContrastBorderState
],
_a['&:hover .' + globalClassnames.caretDown] = !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
_a['&:focus .' + globalClassnames.caretDown] = [
!disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
{ selectors: tslib_1.__assign((_b = {}, _b[Styling_1.HighContrastSelector] = { color: 'HighlightText' }, _b), highContrastAdjustMixin) }
],
_a['&:active .' + globalClassnames.caretDown] = !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
_a['&:hover .' + globalClassnames.titleIsPlaceHolder] = rootHoverFocusActiveSelectorBodySubtextMixin,
_a['&:focus .' + globalClassnames.titleIsPlaceHolder] = rootHoverFocusActiveSelectorBodySubtextMixin,
_a['&:active .' + globalClassnames.titleIsPlaceHolder] = rootHoverFocusActiveSelectorBodySubtextMixin,
_a['&:hover .' + globalClassnames.titleHasError] = borderColorError,
_a['&:active .' + globalClassnames.titleHasError] = borderColorError,
_a['&:focus .' + globalClassnames.titleHasError] = borderColorError,
_a) }),
className,
isOpen && 'is-open',
disabled && 'is-disabled',
required && 'is-required'
],
title: [
globalClassnames.title,
Styling_1.normalize,
{
backgroundColor: semanticColors.inputBackground,
borderWidth: 1,
borderStyle: 'solid',
borderColor: semanticColors.inputBorder,
cursor: 'pointer',
display: 'block',
height: DROPDOWN_HEIGHT,
lineHeight: DROPDOWN_HEIGHT - 2,
padding: "0 " + DROPDOWN_HEIGHT + "px 0 12px",
position: 'relative',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
},
isRenderingPlaceholder && [globalClassnames.titleIsPlaceHolder, { color: semanticColors.inputPlaceholderText }],
hasError && [globalClassnames.titleHasError, borderColorError],
disabled && {
backgroundColor: semanticColors.disabledBackground,
border: 'none',
color: semanticColors.disabledText,
cursor: 'default',
selectors: (_c = {}, _c[Styling_1.HighContrastSelector] = { border: '1px solid GrayText', color: 'GrayText' }, _c)
}
],
caretDownWrapper: [
globalClassnames.caretDownWrapper,
{
position: 'absolute',
top: 1,
right: 12,
height: DROPDOWN_HEIGHT,
lineHeight: DROPDOWN_HEIGHT - 2 // height minus the border
}
],
caretDown: [
globalClassnames.caretDown,
{ color: palette.neutralSecondary, fontSize: Styling_1.FontSizes.small, pointerEvents: 'none' },
disabled && { color: semanticColors.disabledText, selectors: (_d = {}, _d[Styling_1.HighContrastSelector] = { color: 'GrayText' }, _d) }
],
errorMessage: tslib_1.__assign({ color: semanticColors.errorText }, theme.fonts.small, { paddingTop: 5 }),
callout: [
globalClassnames.callout,
{
boxShadow: '0 0 2px 0 rgba(0,0,0,0.2)',
border: "1px solid " + palette.neutralLight
},
calloutClassName
],
panel: [
globalClassnames.panel,
{
// #5689: use subcomponentstyles when panel is converted to use js styling.
selectors: {
'& .ms-Panel-main': {
// Force drop shadow even under medium breakpoint
boxShadow: '-30px 0px 30px -30px rgba(0,0,0,0.2)'
},
'& .ms-Panel-contentInner': { padding: '0 0 20px' }
}
},
panelClassName
],
dropdownItemsWrapper: { selectors: { '&:focus': { outline: 0 } } },
dropdownItems: [globalClassnames.dropdownItems, { display: 'block' }],
dropdownItem: dropdownItemStyle.concat([
{
selectors: (_e = {},
_e[Styling_1.HighContrastSelector] = {
borderColor: 'Window'
},
_e['&:hover'] = {
color: 'inherit'
},
_e['&:focus'] = {
backgroundColor: semanticColors.listItemBackgroundHovered
},
_e['&:active'] = {
backgroundColor: semanticColors.listHeaderBackgroundHovered,
color: palette.black
},
_e)
}
]),
dropdownItemSelected: dropdownItemSelected,
dropdownItemDisabled: dropdownItemDisabled,
dropdownItemSelectedAndDisabled: [dropdownItemSelected, dropdownItemDisabled, { backgroundColor: 'transparent' }],
dropdownDivider: [globalClassnames.dropdownDivider, { height: 1, backgroundColor: semanticColors.bodyDivider }],
dropdownOptionText: [
globalClassnames.dropdownOptionText,
{
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
minWidth: 0,
maxWidth: '100%',
wordWrap: 'break-word',
overflowWrap: 'break-word',
margin: '1px'
}
],
dropdownItemHeader: [
globalClassnames.dropdownItemHeader,
tslib_1.__assign({}, theme.fonts.medium, { fontWeight: Styling_1.FontWeights.semibold, color: semanticColors.menuHeader, background: 'none', backgroundColor: 'transparent', border: 'none', height: DROPDOWN_ITEMHEIGHT, lineHeight: DROPDOWN_ITEMHEIGHT, cursor: 'default', padding: '0px 16px', userSelect: 'none', textAlign: 'left' })
],
subComponentStyles: { label: { root: { display: 'inline-block' } } }
};
var _a, _b, _c, _d, _e;
};
var _a, _b;
});
//# sourceMappingURL=Dropdown.styles.js.map