antd/es/slider/style/index.js

An enterprise-class UI design language and React components implementation

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import { TinyColor } from '@ctrl/tinycolor';
import { genComponentStyleHook, mergeToken } from '../../theme';
import { resetComponent } from '../../style'; // =============================== Base ===============================

var genBaseStyle = function genBaseStyle(token) {
  var _$concat, _hover, _disabled, _extends2;

  var componentCls = token.componentCls,
      controlSize = token.controlSize,
      dotSize = token.dotSize,
      marginFull = token.marginFull,
      marginPart = token.marginPart,
      colorFillContentHover = token.colorFillContentHover,
      antCls = token.antCls;
  return _defineProperty({}, componentCls, _extends(_extends({}, resetComponent(token)), (_extends2 = {
    position: 'relative',
    height: controlSize,
    margin: "".concat(marginPart, "px ").concat(marginFull, "px"),
    padding: 0,
    cursor: 'pointer',
    touchAction: 'none'
  }, _defineProperty(_extends2, "&-vertical", {
    margin: "".concat(marginFull, "px ").concat(marginPart, "px")
  }), _defineProperty(_extends2, "".concat(componentCls, "-rail"), {
    position: 'absolute',
    backgroundColor: token.colorFillTertiary,
    borderRadius: token.controlRadiusXS,
    transition: "background-color ".concat(token.motionDurationFast)
  }), _defineProperty(_extends2, "".concat(componentCls, "-track"), {
    position: 'absolute',
    backgroundColor: token.colorPrimaryBorder,
    borderRadius: token.controlRadiusXS,
    transition: "background-color ".concat(token.motionDurationFast)
  }), _defineProperty(_extends2, "".concat(componentCls, "-handle"), (_$concat = {
    position: 'absolute',
    width: token.handleSize,
    height: token.handleSize
  }, _defineProperty(_$concat, "".concat(componentCls, "-dragging"), {
    zIndex: 1
  }), _defineProperty(_$concat, '&::before', {
    content: '""',
    position: 'absolute',
    insetInlineStart: 0,
    insetBlockStart: 0,
    width: token.handleSize + token.handleLineWidth * 2,
    height: token.handleSize + token.handleLineWidth * 2,
    backgroundColor: 'transparent'
  }), _defineProperty(_$concat, '&::after', {
    content: '""',
    position: 'absolute',
    insetBlockStart: 0,
    insetInlineStart: 0,
    width: token.handleSize,
    height: token.handleSize,
    backgroundColor: token.colorBgContainer,
    outline: "".concat(token.handleLineWidth, "px solid ").concat(token.colorPrimaryBorder),
    borderRadius: '50%',
    cursor: 'pointer',
    transition: "\n            inset-inline-start ".concat(token.motionDurationFast, ",\n            inset-block-start ").concat(token.motionDurationFast, ",\n            width ").concat(token.motionDurationFast, ",\n            height ").concat(token.motionDurationFast, ",\n            outline ").concat(token.motionDurationFast, "\n          ")
  }), _defineProperty(_$concat, '&:hover, &:active, &:focus-visible', {
    '&::before': {
      insetInlineStart: (token.handleSize - token.handleSizeHover) / 2,
      insetBlockStart: (token.handleSize - token.handleSizeHover) / 2,
      width: token.handleSizeHover + token.handleLineWidthHover * 2,
      height: token.handleSizeHover + token.handleLineWidthHover * 2
    },
    '&::after': {
      outlineWidth: token.handleLineWidthHover,
      outlineColor: token.colorPrimary,
      width: token.handleSizeHover,
      height: token.handleSizeHover,
      insetInlineStart: (token.handleSize - token.handleSizeHover) / 2,
      insetBlockStart: (token.handleSize - token.handleSizeHover) / 2
    }
  }), _$concat)), _defineProperty(_extends2, '&:hover', (_hover = {}, _defineProperty(_hover, "".concat(componentCls, "-rail"), {
    backgroundColor: token.colorFillSecondary
  }), _defineProperty(_hover, "".concat(componentCls, "-track"), {
    backgroundColor: token.colorPrimaryBorderHover
  }), _defineProperty(_hover, "".concat(componentCls, "-dot"), {
    borderColor: colorFillContentHover
  }), _defineProperty(_hover, "".concat(componentCls, "-handle").concat(antCls, "-tooltip-open::after"), {
    outlineColor: token.colorPrimary
  }), _defineProperty(_hover, "\n          ".concat(componentCls, "-handle::after,\n          ").concat(componentCls, "-dot-active\n        "), {
    borderColor: token.colorPrimary,
    outlineColor: token.colorPrimary
  }), _hover)), _defineProperty(_extends2, "".concat(componentCls, "-mark"), {
    position: 'absolute',
    fontSize: token.fontSize
  }), _defineProperty(_extends2, "".concat(componentCls, "-mark-text"), {
    position: 'absolute',
    display: 'inline-block',
    color: token.colorTextDescription,
    textAlign: 'center',
    wordBreak: 'keep-all',
    cursor: 'pointer',
    userSelect: 'none',
    '&-active': {
      color: token.colorText
    }
  }), _defineProperty(_extends2, "".concat(componentCls, "-step"), {
    position: 'absolute',
    background: 'transparent',
    pointerEvents: 'none'
  }), _defineProperty(_extends2, "".concat(componentCls, "-dot"), {
    position: 'absolute',
    width: dotSize,
    height: dotSize,
    backgroundColor: token.colorBgContainer,
    border: "".concat(token.handleLineWidth, "px solid ").concat(token.colorSplit),
    borderRadius: '50%',
    cursor: 'pointer',
    transition: "border-color ".concat(token.motionDurationSlow),
    '&-active': {
      borderColor: token.colorPrimaryBorder
    }
  }), _defineProperty(_extends2, '&&-disabled', (_disabled = {
    cursor: 'not-allowed'
  }, _defineProperty(_disabled, "".concat(componentCls, "-rail"), {
    backgroundColor: "".concat(token.colorFillSecondary, " !important")
  }), _defineProperty(_disabled, "".concat(componentCls, "-track"), {
    backgroundColor: "".concat(token.colorTextDisabled, " !important")
  }), _defineProperty(_disabled, "\n          ".concat(componentCls, "-handle::after,\n          ").concat(componentCls, "-dot\n        "), {
    backgroundColor: token.colorBgContainer,
    borderColor: token.colorTextDisabled,
    outlineColor: new TinyColor(token.colorTextDisabled).onBackground(token.colorBgContainer).toHexString(),
    boxShadow: 'none',
    cursor: 'not-allowed'
  }), _defineProperty(_disabled, "".concat(componentCls, "-handle::after"), {
    width: token.handleSize,
    height: token.handleSize,
    outlineWidth: token.handleLineWidth,
    insetInlineStart: 0,
    insetBlockStart: 0
  }), _defineProperty(_disabled, "\n          ".concat(componentCls, "-mark-text,\n          ").concat(componentCls, "-dot\n        "), {
    cursor: "not-allowed !important"
  }), _disabled)), _extends2)));
}; // ============================ Horizontal ============================


var genDirectionStyle = function genDirectionStyle(token, horizontal) {
  var _$concat2, _$concat5, _$concat6, _ref2;

  var componentCls = token.componentCls,
      railSize = token.railSize,
      controlSize = token.controlSize,
      handleSize = token.handleSize,
      dotSize = token.dotSize;
  var railPadding = horizontal ? 'paddingBlock' : 'paddingInline';
  var full = horizontal ? 'width' : 'height';
  var part = horizontal ? 'height' : 'width';
  var handlePos = horizontal ? 'insetBlockStart' : 'insetInlineStart';
  var markInset = horizontal ? 'top' : 'insetInlineStart';
  return _ref2 = {}, _defineProperty(_ref2, railPadding, railSize), _defineProperty(_ref2, part, controlSize), _defineProperty(_ref2, "".concat(componentCls, "-rail"), (_$concat2 = {}, _defineProperty(_$concat2, full, '100%'), _defineProperty(_$concat2, part, railSize), _$concat2)), _defineProperty(_ref2, "".concat(componentCls, "-track"), _defineProperty({}, part, railSize)), _defineProperty(_ref2, "".concat(componentCls, "-handle"), _defineProperty({}, handlePos, (controlSize - handleSize) / 2)), _defineProperty(_ref2, "".concat(componentCls, "-mark"), (_$concat5 = {
    // Reset all
    insetInlineStart: 0,
    top: 0
  }, _defineProperty(_$concat5, markInset, handleSize), _defineProperty(_$concat5, full, '100%'), _$concat5)), _defineProperty(_ref2, "".concat(componentCls, "-step"), (_$concat6 = {
    // Reset all
    insetInlineStart: 0,
    top: 0
  }, _defineProperty(_$concat6, markInset, railSize), _defineProperty(_$concat6, full, '100%'), _defineProperty(_$concat6, part, railSize), _$concat6)), _defineProperty(_ref2, "".concat(componentCls, "-dot"), _defineProperty({
    position: 'absolute'
  }, handlePos, (railSize - dotSize) / 2)), _ref2;
}; // ============================ Horizontal ============================


var genHorizontalStyle = function genHorizontalStyle(token) {
  var componentCls = token.componentCls,
      marginPartWithMark = token.marginPartWithMark;
  return _defineProperty({}, "".concat(componentCls, "-horizontal"), _extends(_extends({}, genDirectionStyle(token, true)), _defineProperty({}, "&".concat(componentCls, "-with-marks"), {
    marginBottom: marginPartWithMark
  })));
}; // ============================= Vertical =============================


var genVerticalStyle = function genVerticalStyle(token) {
  var componentCls = token.componentCls;
  return _defineProperty({}, "".concat(componentCls, "-vertical"), _extends(_extends({}, genDirectionStyle(token, false)), {
    height: '100%'
  }));
}; // ============================== Export ==============================


export default genComponentStyleHook('Slider', function (token) {
  var sliderToken = mergeToken(token, {
    marginPart: (token.controlHeight - token.controlSize) / 2,
    marginFull: token.controlSize / 2,
    marginPartWithMark: token.controlHeightLG - token.controlSize
  });
  return [genBaseStyle(sliderToken), genHorizontalStyle(sliderToken), genVerticalStyle(sliderToken)];
}, function (token) {
  // Handle line width is always width-er 1px
  var increaseHandleWidth = 1;
  var controlSize = token.controlHeightLG / 4;
  var controlSizeHover = token.controlHeightSM / 2;
  var handleLineWidth = token.lineWidth + increaseHandleWidth;
  var handleLineWidthHover = token.lineWidth + increaseHandleWidth * 3;
  return {
    controlSize: controlSize,
    railSize: controlSize / 3,
    handleSize: controlSize,
    handleSizeHover: controlSizeHover,
    dotSize: controlSize / 3 * 2,
    handleLineWidth: handleLineWidth,
    handleLineWidthHover: handleLineWidthHover
  };
});