@fluentui/react-northstar/dist/commonjs/themes/teams/components/Slider/sliderStyles.js

A themable React component library.

"use strict";

exports.__esModule = true;
exports.sliderStyles = void 0;
var _Slider = require("../../../../components/Slider/Slider");
var _getBorderFocusStyles = require("../../getBorderFocusStyles");
var selectors = {
  WEBKIT_THUMB: '::-webkit-slider-thumb',
  MOZ_THUMB: '::-moz-range-thumb',
  MS_FILL_LOWER: '::-ms-fill-lower',
  MS_FILL_UPPER: '::-ms-fill-upper',
  MS_THUMB: '::-ms-thumb'
};
var getCommonSlotStyles = function getCommonSlotStyles(p, v) {
  return {
    cursor: 'pointer',
    pointerEvents: 'none',
    position: 'absolute',
    border: 0,
    height: v.railHeight,
    marginTop: "calc(" + v.height + " / 2 - " + v.railHeight + " / 2)"
  };
};

// this selector is used to identify the thumb slot from a previous sibling
var thumbFromPreviousSiblingSelector = "&+ ." + _Slider.sliderSlotClassNames.thumb;
var getFluidStyles = function getFluidStyles(p) {
  return p.fluid && !p.vertical && {
    width: '100%'
  };
};
var sliderStyles = {
  root: function root(_ref) {
    var p = _ref.props,
      v = _ref.variables;
    return Object.assign({
      height: v.height
    }, p.disabled && {
      pointerEvents: 'none'
    }, p.vertical && {
      height: v.length,
      width: v.height
    }, getFluidStyles(p));
  },
  input: function input(_ref2) {
    var _Object$assign, _active, _focus, _focusVisible;
    var p = _ref2.props,
      v = _ref2.variables,
      siteVariables = _ref2.theme.siteVariables;
    var activeThumbStyles = {
      height: v.activeThumbHeight,
      width: v.activeThumbWidth,
      background: v.activeThumbColor,
      marginTop: "calc(" + v.height + " / 2  - " + v.activeThumbHeight + " / 2)",
      marginLeft: "calc(-" + v.activeThumbWidth + " / 2)"
    };
    var borderFocusStyles = (0, _getBorderFocusStyles.getBorderFocusStyles)({
      variables: siteVariables,
      borderPadding: v.thumbBorderPadding
    });
    var thumbStyles = {
      border: 0,
      width: '1px'
    };
    return Object.assign((_Object$assign = {
      WebkitAppearance: 'none',
      cursor: 'pointer',
      height: '100%',
      width: '100%',
      margin: 0,
      padding: 0,
      opacity: 0
    }, _Object$assign[selectors.WEBKIT_THUMB] = Object.assign({}, thumbStyles, {
      '-webkit-appearance': 'none'
    }), _Object$assign[selectors.MOZ_THUMB] = thumbStyles, _Object$assign[selectors.MS_THUMB] = Object.assign({}, thumbStyles, {
      marginTop: "calc(-" + v.thumbHeight + " / 2)"
    }), _Object$assign[selectors.MS_FILL_LOWER] = {
      display: 'none'
    }, _Object$assign[selectors.MS_FILL_UPPER] = {
      display: 'none'
    }, _Object$assign), getFluidStyles(p), {
      ':active': (_active = {}, _active[thumbFromPreviousSiblingSelector] = activeThumbStyles, _active),
      ':focus': (_focus = {
        outline: 0
      }, _focus[thumbFromPreviousSiblingSelector] = borderFocusStyles[':focus'], _focus),
      ':focus-visible': (_focusVisible = {}, _focusVisible[thumbFromPreviousSiblingSelector] = Object.assign({}, borderFocusStyles[':focus-visible'], activeThumbStyles), _focusVisible)
    });
  },
  inputWrapper: function inputWrapper(_ref3) {
    var p = _ref3.props,
      v = _ref3.variables;
    var transformOriginValue = "calc(" + v.length + " / 2)";
    return Object.assign({
      position: 'relative',
      display: 'inline-block',
      height: v.height,
      width: v.length
    }, p.vertical && {
      transform: 'rotate(-90deg)',
      transformOrigin: transformOriginValue + " " + transformOriginValue
    }, getFluidStyles(p));
  },
  rail: function rail(_ref4) {
    var p = _ref4.props,
      v = _ref4.variables;
    return Object.assign({
      width: '100%',
      background: v.railColor
    }, getCommonSlotStyles(p, v), p.disabled && {
      background: v.disabledRailColor
    });
  },
  track: function track(_ref5) {
    var p = _ref5.props,
      v = _ref5.variables;
    return Object.assign({
      background: v.trackColor
    }, getCommonSlotStyles(p, v), p.disabled && {
      background: v.disabledTrackColor
    });
  },
  thumb: function thumb(_ref6) {
    var p = _ref6.props,
      v = _ref6.variables;
    return Object.assign({
      border: 0,
      borderRadius: '100%',
      cursor: 'pointer',
      pointerEvents: 'none',
      position: 'absolute',
      background: v.thumbColor,
      height: v.thumbHeight,
      width: v.thumbWidth,
      marginTop: "calc(" + v.height + " / 2  - " + v.thumbHeight + " / 2)",
      marginLeft: "calc(-" + v.thumbWidth + " / 2)"
    }, p.disabled && {
      background: v.disabledThumbColor
    });
  }
};
exports.sliderStyles = sliderStyles;
//# sourceMappingURL=sliderStyles.js.map