office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
223 lines • 7.97 kB
JavaScript
import { FontSizes, concatStyleSets, HighContrastSelector } from '../../Styling';
import { memoizeFunction } from '../../Utilities';
var _getDisabledStyles = 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[HighContrastSelector] = {
color: 'GrayText'
},
_a)
};
var _a;
});
export var getArrowButtonStyles = memoizeFunction(function (theme, isUpArrow, customSpecificArrowStyles) {
var semanticColors = theme.semanticColors;
var ArrowButtonTextColor = semanticColors.buttonText;
var ArrowButtonTextColorHovered = semanticColors.buttonTextHovered;
var ArrowButtonTextColorPressed = semanticColors.buttonTextChecked;
var ArrowButtonBackgroundHovered = semanticColors.buttonBackgroundHovered;
var ArrowButtonBackgroundPressed = semanticColors.buttonBackgroundChecked;
var defaultArrowButtonStyles = {
root: {
outline: 'none',
display: 'block',
height: '50%',
width: '14px',
padding: '0',
backgroundColor: 'transparent',
textAlign: 'center',
cursor: 'default',
color: ArrowButtonTextColor
},
rootHovered: {
backgroundColor: ArrowButtonBackgroundHovered,
color: ArrowButtonTextColorHovered
},
rootChecked: {
backgroundColor: ArrowButtonBackgroundPressed,
color: ArrowButtonTextColorPressed,
selectors: (_a = {},
_a[HighContrastSelector] = {
backgroundColor: 'Highlight',
color: 'HighlightText'
},
_a)
},
rootPressed: {
backgroundColor: ArrowButtonBackgroundPressed,
color: ArrowButtonTextColorPressed,
selectors: (_b = {},
_b[HighContrastSelector] = {
backgroundColor: 'Highlight',
color: 'HighlightText'
},
_b)
},
rootDisabled: {
opacity: 0.5,
selectors: (_c = {},
_c[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 concatStyleSets(defaultArrowButtonStyles, isUpArrow ? defaultUpArrowButtonStyles : defaultDownArrowButtonStyles, customSpecificArrowStyles);
var _a, _b, _c;
});
export var getStyles = memoizeFunction(function (theme, customStyles) {
var palette = theme.palette, semanticColors = theme.semanticColors;
var SpinButtonRootBorderColor = semanticColors.inputBorder;
var SpinButtonRootBorderColorHovered = semanticColors.inputBorderHovered;
var SpinButtonRootBorderColorFocused = semanticColors.inputFocusBorderAlt;
var SpinButtonTextColorDisabled = semanticColors.disabledText;
var SpinButtonInputTextColor = semanticColors.bodyText;
var SpinButtonInputTextColorSelected = palette.white;
var SpinButtonInputBackgroundColorSelected = palette.themePrimary;
var SpinButtonIconDisabledColor = semanticColors.disabledText;
var defaultStyles = {
root: {
outline: 'none',
fontSize: FontSizes.medium,
width: '100%',
minWidth: '86px'
},
labelWrapper: {
display: 'inline-flex'
},
labelWrapperStart: {
float: 'left',
marginRight: '10px'
},
labelWrapperEnd: {
float: 'right',
marginLeft: '10px'
},
labelWrapperTop: {
marginBottom: '10px'
},
labelWrapperBottom: {
marginTop: '10px'
},
icon: {
padding: '2px 5px',
fontSize: '20px'
},
iconDisabled: {
color: SpinButtonIconDisabledColor
},
label: {
pointerEvents: 'none',
padding: '2px 0'
},
labelDisabled: {
cursor: 'default',
color: SpinButtonTextColorDisabled,
selectors: (_a = {},
_a[HighContrastSelector] = {
color: 'GrayText'
},
_a)
},
spinButtonWrapper: {
display: 'flex',
boxSizing: 'border-box',
height: '32px',
minWidth: '86px',
borderWidth: '1px',
borderStyle: 'solid',
borderColor: SpinButtonRootBorderColor
},
spinButtonWrapperTopBottom: {
width: '100%'
},
spinButtonWrapperHovered: {
borderColor: SpinButtonRootBorderColorHovered,
outline: '2px dashed transparent',
selectors: (_b = {},
_b[HighContrastSelector] = {
borderColor: 'Highlight',
outline: 'none'
},
_b)
},
spinButtonWrapperFocused: {
borderColor: SpinButtonRootBorderColorFocused,
outline: '2px dashed transparent',
selectors: (_c = {},
_c[HighContrastSelector] = {
borderColor: 'Highlight',
outline: 'none'
},
_c)
},
spinButtonWrapperDisabled: _getDisabledStyles(theme),
input: {
boxSizing: 'border-box',
boxShadow: 'none',
borderStyle: 'none',
marginTop: '0',
marginRight: '0',
marginBottom: '0',
marginLeft: '0',
fontSize: FontSizes.medium,
color: SpinButtonInputTextColor,
height: '100%',
padding: '0 12px',
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[HighContrastSelector] = {
backgroundColor: 'Highlight',
borderColor: 'Highlight',
color: 'HighlightText'
},
_d)
},
inputDisabled: _getDisabledStyles(theme),
arrowButtonsContainer: {
outline: 'none',
fontSize: '12px',
display: 'block',
float: 'left',
height: '100%',
cursor: 'default',
padding: '0',
boxSizing: 'border-box'
},
arrowButtonsContainerDisabled: _getDisabledStyles(theme)
};
return concatStyleSets(defaultStyles, customStyles);
var _a, _b, _c, _d;
});
//# sourceMappingURL=SpinButton.styles.js.map