office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
239 lines • 8.48 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
var Utilities_1 = require("../../Utilities");
var _getDisabledStyles = Utilities_1.memoizeFunction(function (theme) {
var semanticColors = theme.semanticColors;
var SpinButtonTextColorDisabled = semanticColors.disabledText;
var SpinButtonBackgroundColorDisabled = semanticColors.disabledBackground;
return {
backgroundColor: SpinButtonBackgroundColorDisabled,
borderColor: 'transparent',
pointerEvents: 'none',
cursor: 'default',
color: SpinButtonTextColorDisabled,
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
color: 'GrayText'
},
_a)
};
var _a;
});
exports.getArrowButtonStyles = Utilities_1.memoizeFunction(function (theme, isUpArrow, customSpecificArrowStyles) {
var palette = theme.palette;
var ArrowButtonTextColor = palette.neutralPrimary;
var ArrowButtonTextColorPressed = palette.white;
var ArrowButtonBackgroundHovered = palette.neutralLight;
var ArrowButtonBackgroundPressed = palette.themePrimary;
var defaultArrowButtonStyles = {
root: {
outline: 'none',
display: 'block',
height: '50%',
width: '14px',
paddingTop: '0',
paddingRight: '0',
paddingBottom: '0',
paddingLeft: '0',
backgroundColor: 'transparent',
textAlign: 'center',
cursor: 'default',
color: ArrowButtonTextColor
},
rootHovered: {
backgroundColor: ArrowButtonBackgroundHovered
},
rootChecked: {
backgroundColor: ArrowButtonBackgroundPressed,
color: ArrowButtonTextColorPressed,
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
backgroundColor: 'Highlight',
color: 'HighlightText'
},
_a)
},
rootPressed: {
backgroundColor: ArrowButtonBackgroundPressed,
color: ArrowButtonTextColorPressed,
selectors: (_b = {},
_b[Styling_1.HighContrastSelector] = {
backgroundColor: 'Highlight',
color: 'HighlightText'
},
_b)
},
rootDisabled: {
opacity: 0.5,
selectors: (_c = {},
_c[Styling_1.HighContrastSelector] = {
color: 'GrayText',
opacity: 1,
},
_c)
},
icon: {
fontSize: '6px',
marginTop: '0',
marginRight: '0',
marginBottom: '0',
marginLeft: '0'
}
};
// No specific styles needed as of now.
var defaultUpArrowButtonStyles = {};
var defaultDownArrowButtonStyles = {};
return Styling_1.concatStyleSets(defaultArrowButtonStyles, isUpArrow ? defaultUpArrowButtonStyles : defaultDownArrowButtonStyles, customSpecificArrowStyles);
var _a, _b, _c;
});
exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles) {
var fonts = theme.fonts, palette = theme.palette, semanticColors = theme.semanticColors;
var SpinButtonRootBorderColor = palette.neutralTertiaryAlt;
var SpinButtonRootBorderColorHovered = palette.neutralSecondary;
var SpinButtonRootBorderColorFocused = palette.themePrimary;
var SpinButtonTextColorDisabled = palette.neutralTertiaryAlt;
var SpinButtonInputTextColor = palette.neutralPrimary;
var SpinButtonInputTextColorSelected = palette.white;
var SpinButtonInputBackgroundColorSelected = palette.themePrimary;
var SpinButtonIconDisabledColor = semanticColors.disabledText;
var defaultStyles = {
root: {
outline: 'none',
fontSize: Styling_1.FontSizes.medium,
width: '100%',
minWidth: '86px',
paddingTop: '2px',
paddingRight: '2px',
paddingBottom: '2px',
paddingLeft: '2px',
},
labelWrapper: {
display: 'inline-flex'
},
labelWrapperStart: {
float: 'left',
marginRight: '10px'
},
labelWrapperEnd: {
float: 'right',
marginLeft: '10px'
},
labelWrapperTop: {
marginBottom: '10px'
},
labelWrapperBottom: {
marginTop: '10px'
},
icon: {
paddingTop: '2px',
paddingRight: '5px',
paddingBottom: '2px',
paddingLeft: '5px',
fontSize: '20px'
},
iconDisabled: {
color: SpinButtonIconDisabledColor
},
label: {
pointerEvents: 'none',
paddingTop: '2px',
paddingRight: '0',
paddingBottom: '2px',
paddingLeft: '0',
},
labelDisabled: {
cursor: 'default',
color: SpinButtonTextColorDisabled,
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
color: 'GrayText'
},
_a)
},
spinButtonWrapper: {
display: 'flex',
height: '26px',
minWidth: '86px',
borderWidth: '1px',
borderStyle: 'solid',
borderColor: SpinButtonRootBorderColor,
},
spinButtonWrapperTopBottom: {
width: '100%'
},
spinButtonWrapperHovered: {
borderColor: SpinButtonRootBorderColorHovered,
outline: '2px dashed transparent',
selectors: (_b = {},
_b[Styling_1.HighContrastSelector] = {
borderColor: 'Highlight'
},
_b)
},
spinButtonWrapperFocused: {
borderColor: SpinButtonRootBorderColorFocused,
outline: '2px dashed transparent',
selectors: (_c = {},
_c[Styling_1.HighContrastSelector] = {
borderColor: 'Highlight'
},
_c)
},
spinButtonWrapperDisabled: _getDisabledStyles(theme),
input: {
boxSizing: 'border-box',
boxShadow: 'none',
borderStyle: 'none',
marginTop: '0',
marginRight: '0',
marginBottom: '0',
marginLeft: '0',
fontSize: Styling_1.FontSizes.medium,
color: SpinButtonInputTextColor,
height: '100%',
paddingTop: '3px',
paddingRight: '3px',
paddingBottom: '4px',
paddingLeft: '4px',
outline: '0',
textOverflow: 'ellipsis',
display: 'block',
float: 'left',
width: 'calc(100% - 14px)',
minWidth: '72px',
overflow: 'hidden',
cursor: 'text',
userSelect: 'text'
},
inputTextSelected: {
backgroundColor: SpinButtonInputBackgroundColorSelected,
color: SpinButtonInputTextColorSelected,
selectors: (_d = {},
_d[Styling_1.HighContrastSelector] = {
backgroundColor: 'Highlight',
borderColor: 'Highlight',
color: 'HighlightText',
},
_d)
},
inputDisabled: _getDisabledStyles(theme),
arrowButtonsContainer: {
outline: 'none',
fontSize: '12px',
display: 'block',
float: 'left',
height: '100%',
cursor: 'default',
paddingTop: '0',
paddingRight: '0',
paddingBottom: '0',
paddingLeft: '0',
boxSizing: 'border-box'
},
arrowButtonsContainerDisabled: _getDisabledStyles(theme),
};
return Styling_1.concatStyleSets(defaultStyles, customStyles);
var _a, _b, _c, _d;
});
//# sourceMappingURL=SpinButton.styles.js.map