office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
248 lines • 10.5 kB
JavaScript
define(["require", "exports", "../../Styling", "@uifabric/utilities"], function (require, exports, Styling_1, utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
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'
};
exports.getStyles = function (props) {
var className = props.className, titleLabelClassName = props.titleLabelClassName, theme = props.theme;
var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
var slideBoxActiveSectionStyles = !props.disabled && {
backgroundColor: theme.palette.themePrimary,
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
backgroundColor: 'Highlight'
},
_a)
};
var slideBoxInactiveSectionStyles = !props.disabled && {
backgroundColor: theme.palette.themeLight,
selectors: (_b = {},
_b[Styling_1.HighContrastSelector] = {
borderColor: 'Highlight'
},
_b)
};
var slideBoxActiveThumbStyles = !props.disabled && {
border: "2px solid " + theme.palette.themePrimary,
selectors: (_c = {},
_c[Styling_1.HighContrastSelector] = {
borderColor: 'Highlight'
},
_c)
};
return {
root: [
classNames.root,
{
userSelect: 'none'
},
props.vertical && {
marginRight: 8
}
].concat([!props.disabled ? classNames.enabled : undefined], [props.disabled ? classNames.disabled : undefined], [!props.vertical ? classNames.row : undefined], [props.vertical ? classNames.column : undefined], [
className
]),
titleLabel: [
{
padding: 0
},
titleLabelClassName
],
container: [
classNames.container,
{
display: 'flex',
flexWrap: 'nowrap',
alignItems: 'center'
},
props.vertical && {
flexDirection: 'column',
height: '100%',
textAlign: 'center',
margin: '8px 0'
}
],
slideBox: [
classNames.slideBox,
Styling_1.getFocusStyle(theme),
{
background: 'transparent',
border: 'none',
flexGrow: 1,
lineHeight: 28,
selectors: {
':active $activeSection': slideBoxActiveSectionStyles,
':hover $activeSection': slideBoxActiveSectionStyles,
':active $inactiveSection': slideBoxInactiveSectionStyles,
':hover $inactiveSection': slideBoxInactiveSectionStyles,
':active $thumb': slideBoxActiveThumbStyles,
':hover $thumb': slideBoxActiveThumbStyles,
$thumb: [
{
borderWidth: 2,
borderStyle: 'solid',
borderColor: theme.palette.neutralSecondary,
borderRadius: 10,
boxSizing: 'border-box',
background: theme.palette.white,
display: 'block',
width: 16,
height: 16,
position: 'absolute'
},
props.vertical
? {
left: -6,
margin: '0 auto',
transform: 'translateY(8px)'
}
: {
top: -6,
transform: utilities_1.getRTL() ? 'translateX(50%)' : 'translateX(-50%)'
},
props.showTransitions && {
transition: "left " + Styling_1.AnimationVariables.durationValue3 + " " + Styling_1.AnimationVariables.easeFunction1
},
props.disabled && {
borderColor: theme.palette.neutralTertiaryAlt,
selectors: (_d = {},
_d[Styling_1.HighContrastSelector] = {
borderColor: 'GrayText'
},
_d)
}
]
}
},
props.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
}
].concat([props.showValue ? classNames.showValue : undefined], [props.showTransitions ? classNames.showTransitions : undefined]),
thumb: [classNames.thumb],
line: [
classNames.line,
{
display: 'flex',
position: 'relative',
selectors: {
$lineContainer: [
{
borderRadius: 4,
boxSizing: 'border-box'
},
props.vertical
? {
width: 4,
height: '100%'
}
: {
height: 4,
width: '100%'
}
]
}
},
props.vertical
? {
height: '100%',
width: 4,
margin: '0 auto',
flexDirection: 'column-reverse'
}
: {
width: '100%'
}
],
lineContainer: [{}],
activeSection: [
classNames.activeSection,
{
background: theme.palette.neutralSecondary,
selectors: (_e = {},
_e[Styling_1.HighContrastSelector] = {
backgroundColor: 'WindowText'
},
_e)
},
props.showTransitions && {
transition: "width " + Styling_1.AnimationVariables.durationValue3 + " " + Styling_1.AnimationVariables.easeFunction1
},
props.disabled && {
background: theme.palette.neutralTertiaryAlt,
selectors: (_f = {},
_f[Styling_1.HighContrastSelector] = {
backgroundColor: 'GrayText',
borderColor: 'GrayText'
},
_f)
}
],
inactiveSection: [
classNames.inactiveSection,
{
background: theme.palette.neutralTertiaryAlt,
selectors: (_g = {},
_g[Styling_1.HighContrastSelector] = {
border: '1px solid WindowText'
},
_g)
},
props.showTransitions && {
transition: "width " + Styling_1.AnimationVariables.durationValue3 + " " + Styling_1.AnimationVariables.easeFunction1
},
props.disabled && {
background: theme.palette.neutralLight,
selectors: (_h = {},
_h[Styling_1.HighContrastSelector] = {
backgroundColor: 'GrayText',
borderColor: 'GrayText'
},
_h)
}
],
valueLabel: [
classNames.valueLabel,
{
flexShrink: 1,
width: 30,
lineHeight: '1' // using a string here meaning it's relative to the size of the font
},
props.vertical
? {
margin: '0 auto',
whiteSpace: 'nowrap',
width: 40
}
: {
margin: '0 8px',
whiteSpace: 'nowrap',
width: 40
}
]
};
var _a, _b, _c, _d, _e, _f, _g, _h;
};
});
//# sourceMappingURL=Slider.styles.js.map