@fluentui/react
Version:
Reusable React components for building web experiences.
317 lines • 13.7 kB
JavaScript
define(["require", "exports", "tslib", "@fluentui/style-utilities", "@fluentui/utilities"], function (require, exports, tslib_1, style_utilities_1, utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = void 0;
var GlobalClassNames = {
root: 'ms-Slider',
enabled: 'ms-Slider-enabled',
disabled: 'ms-Slider-disabled',
row: 'ms-Slider-row',
column: 'ms-Slider-column',
container: 'ms-Slider-container',
slideBox: 'ms-Slider-slideBox',
line: 'ms-Slider-line',
thumb: 'ms-Slider-thumb',
activeSection: 'ms-Slider-active',
inactiveSection: 'ms-Slider-inactive',
valueLabel: 'ms-Slider-value',
showValue: 'ms-Slider-showValue',
showTransitions: 'ms-Slider-showTransitions',
zeroTick: 'ms-Slider-zeroTick',
};
var getStyles = function (props) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
var className = props.className, titleLabelClassName = props.titleLabelClassName, theme = props.theme, vertical = props.vertical, disabled = props.disabled, showTransitions = props.showTransitions, showValue = props.showValue, ranged = props.ranged;
var semanticColors = theme.semanticColors, palette = theme.palette;
var classNames = (0, style_utilities_1.getGlobalClassNames)(GlobalClassNames, theme);
/** Tokens:
* The word "active" in the token refers to the selected section of the slider
* The word "inactive" in the token refers to the unselected section of the slider */
var pressedActiveSectionColor = semanticColors.inputBackgroundCheckedHovered;
var hoveredActiveSectionColor = semanticColors.inputBackgroundChecked;
var hoveredPressedinactiveSectionColor = palette.neutralSecondaryAlt;
var restActiveSectionColor = palette.neutralPrimary;
var restInactiveSectionColor = palette.neutralSecondaryAlt;
var disabledActiveSectionColor = semanticColors.disabledText;
var disabledInactiveSectionColor = semanticColors.disabledBackground;
var thumbBackgroundColor = semanticColors.inputBackground;
var thumbBorderColor = semanticColors.smallInputBorder;
var thumbDisabledBorderColor = semanticColors.disabledBorder;
var slideBoxActiveSectionStyles = !disabled && {
backgroundColor: pressedActiveSectionColor,
selectors: (_a = {},
_a[style_utilities_1.HighContrastSelector] = {
backgroundColor: 'Highlight',
},
_a),
};
var slideBoxInactiveSectionStyles = !disabled && {
backgroundColor: hoveredPressedinactiveSectionColor,
selectors: (_b = {},
_b[style_utilities_1.HighContrastSelector] = {
borderColor: 'Highlight',
},
_b),
};
var slideHoverSectionStyles = !disabled && {
backgroundColor: hoveredActiveSectionColor,
selectors: (_c = {},
_c[style_utilities_1.HighContrastSelector] = {
backgroundColor: 'Highlight',
},
_c),
};
var slideBoxActiveThumbStyles = !disabled && {
border: "2px solid ".concat(pressedActiveSectionColor),
selectors: (_d = {},
_d[style_utilities_1.HighContrastSelector] = {
borderColor: 'Highlight',
},
_d),
};
var slideBoxActiveZeroTickStyles = !props.disabled && {
backgroundColor: semanticColors.inputPlaceholderBackgroundChecked,
selectors: (_e = {},
_e[style_utilities_1.HighContrastSelector] = {
backgroundColor: 'Highlight',
},
_e),
};
return {
root: tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray([
classNames.root,
theme.fonts.medium,
{
userSelect: 'none',
},
vertical && {
marginRight: 8,
}
], [!disabled ? classNames.enabled : undefined], false), [disabled ? classNames.disabled : undefined], false), [!vertical ? classNames.row : undefined], false), [vertical ? classNames.column : undefined], false), [
className,
], false),
titleLabel: [
{
padding: 0,
},
titleLabelClassName,
],
container: [
classNames.container,
{
display: 'flex',
flexWrap: 'nowrap',
alignItems: 'center',
},
vertical && {
flexDirection: 'column',
height: '100%',
textAlign: 'center',
margin: '8px 0',
},
],
slideBox: tslib_1.__spreadArray(tslib_1.__spreadArray([
classNames.slideBox,
!ranged && (0, style_utilities_1.getFocusStyle)(theme),
{
background: 'transparent',
border: 'none',
flexGrow: 1,
lineHeight: 28,
display: 'flex',
alignItems: 'center',
selectors: (_f = {},
_f[":active .".concat(classNames.activeSection)] = slideBoxActiveSectionStyles,
_f[":hover .".concat(classNames.activeSection)] = slideHoverSectionStyles,
_f[":active .".concat(classNames.inactiveSection)] = slideBoxInactiveSectionStyles,
_f[":hover .".concat(classNames.inactiveSection)] = slideBoxInactiveSectionStyles,
_f[":active .".concat(classNames.thumb)] = slideBoxActiveThumbStyles,
_f[":hover .".concat(classNames.thumb)] = slideBoxActiveThumbStyles,
_f[":active .".concat(classNames.zeroTick)] = slideBoxActiveZeroTickStyles,
_f[":hover .".concat(classNames.zeroTick)] = slideBoxActiveZeroTickStyles,
_f[style_utilities_1.HighContrastSelector] = {
forcedColorAdjust: 'none',
},
_f),
},
vertical
? {
height: '100%',
width: 28,
padding: '8px 0', // Make room for thumb at bottom of line
}
: {
height: 28,
width: 'auto',
padding: '0 8px', // Make room for thumb at ends of line
}
], [showValue ? classNames.showValue : undefined], false), [showTransitions ? classNames.showTransitions : undefined], false),
thumb: [
classNames.thumb,
ranged && (0, style_utilities_1.getFocusStyle)(theme, { inset: -4 }),
{
borderWidth: 2,
borderStyle: 'solid',
borderColor: thumbBorderColor,
borderRadius: 10,
boxSizing: 'border-box',
background: thumbBackgroundColor,
display: 'block',
width: 16,
height: 16,
position: 'absolute',
},
vertical
? {
left: -6,
margin: '0 auto',
transform: 'translateY(8px)',
}
: {
top: -6,
transform: (0, utilities_1.getRTL)(theme) ? 'translateX(50%)' : 'translateX(-50%)',
},
showTransitions && {
transition: "left ".concat(style_utilities_1.AnimationVariables.durationValue3, " ").concat(style_utilities_1.AnimationVariables.easeFunction1),
},
disabled && {
borderColor: thumbDisabledBorderColor,
selectors: (_g = {},
_g[style_utilities_1.HighContrastSelector] = {
borderColor: 'GrayText',
},
_g),
},
],
line: [
classNames.line,
{
display: 'flex',
position: 'relative',
},
vertical
? {
height: '100%',
width: 4,
margin: '0 auto',
flexDirection: 'column-reverse',
}
: {
width: '100%',
},
],
lineContainer: [
{
borderRadius: 4,
boxSizing: 'border-box',
},
vertical
? {
width: 4,
height: '100%',
}
: {
height: 4,
width: '100%',
},
],
activeSection: [
classNames.activeSection,
{
background: restActiveSectionColor,
selectors: (_h = {},
_h[style_utilities_1.HighContrastSelector] = {
backgroundColor: 'WindowText',
},
_h),
},
showTransitions && {
transition: "width ".concat(style_utilities_1.AnimationVariables.durationValue3, " ").concat(style_utilities_1.AnimationVariables.easeFunction1),
},
disabled && {
background: disabledActiveSectionColor,
selectors: (_j = {},
_j[style_utilities_1.HighContrastSelector] = {
backgroundColor: 'GrayText',
borderColor: 'GrayText',
},
_j),
},
],
inactiveSection: [
classNames.inactiveSection,
{
background: restInactiveSectionColor,
selectors: (_k = {},
_k[style_utilities_1.HighContrastSelector] = {
border: '1px solid WindowText',
},
_k),
},
showTransitions && {
transition: "width ".concat(style_utilities_1.AnimationVariables.durationValue3, " ").concat(style_utilities_1.AnimationVariables.easeFunction1),
},
disabled && {
background: disabledInactiveSectionColor,
selectors: (_l = {},
_l[style_utilities_1.HighContrastSelector] = {
borderColor: 'GrayText',
},
_l),
},
],
zeroTick: [
classNames.zeroTick,
{
position: 'absolute',
background: semanticColors.disabledBorder,
selectors: (_m = {},
_m[style_utilities_1.HighContrastSelector] = {
backgroundColor: 'WindowText',
},
_m),
},
props.disabled && {
background: semanticColors.disabledBackground,
selectors: (_o = {},
_o[style_utilities_1.HighContrastSelector] = {
backgroundColor: 'GrayText',
},
_o),
},
props.vertical
? {
width: '16px',
height: '1px',
transform: (0, utilities_1.getRTL)(theme) ? 'translateX(6px)' : 'translateX(-6px)',
}
: {
width: '1px',
height: '16px',
transform: 'translateY(-6px)',
},
],
valueLabel: [
classNames.valueLabel,
{
flexShrink: 1,
width: 30,
lineHeight: '1', // using a string here meaning it's relative to the size of the font
},
vertical
? {
margin: '0 auto',
whiteSpace: 'nowrap',
width: 40,
}
: {
margin: '0 8px',
whiteSpace: 'nowrap',
width: 40,
},
],
};
};
exports.getStyles = getStyles;
});
//# sourceMappingURL=Slider.styles.js.map