Stefan Hacker
317 lines
13 KiB
JavaScript
317 lines
13 KiB
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
|