@veeqo/ui 13.12.0 → 13.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Slider/components/SliderHandle/SliderHandle.cjs +3 -1
- package/dist/components/Slider/components/SliderHandle/SliderHandle.cjs.map +1 -1
- package/dist/components/Slider/components/SliderHandle/SliderHandle.js +3 -1
- package/dist/components/Slider/components/SliderHandle/SliderHandle.js.map +1 -1
- package/dist/components/Slider/components/SliderHandle/SliderHandle.module.scss.cjs +2 -2
- package/dist/components/Slider/components/SliderHandle/SliderHandle.module.scss.cjs.map +1 -1
- package/dist/components/Slider/components/SliderHandle/SliderHandle.module.scss.js +2 -2
- package/dist/components/Slider/components/SliderHandle/SliderHandle.module.scss.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var buildClassnames = require('../../../../utils/buildClassnames.cjs');
|
|
5
5
|
var SliderHandle_module = require('./SliderHandle.module.scss.cjs');
|
|
6
|
+
var Text = require('../../../Text/Text.cjs');
|
|
6
7
|
|
|
7
8
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
8
9
|
|
|
@@ -15,7 +16,8 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
|
15
16
|
const SliderHandle = React__default.default.forwardRef(({ horizontalPosition, value, min, max, disabled, isActive, showLabel, className, ariaLabel, ariaLabelledBy, onMouseDown, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, }, ref) => {
|
|
16
17
|
const positionStyle = { left: `${horizontalPosition}%` };
|
|
17
18
|
return (React__default.default.createElement(React__default.default.Fragment, null,
|
|
18
|
-
showLabel && (React__default.default.createElement("div", { className: SliderHandle_module.valueLabel, style: positionStyle, "data-testid": "slider-value-label" },
|
|
19
|
+
showLabel && (React__default.default.createElement("div", { className: SliderHandle_module.valueLabel, style: positionStyle, "data-testid": "slider-value-label" },
|
|
20
|
+
React__default.default.createElement(Text.Text, null, value))),
|
|
19
21
|
React__default.default.createElement("div", { ref: ref, role: "slider", "aria-orientation": "horizontal", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: buildClassnames.buildClassnames([SliderHandle_module.slider, className]), style: positionStyle, "data-disabled": disabled, "data-active": isActive, "data-testid": "slider-handle", tabIndex: disabled ? -1 : 0, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-disabled": disabled, onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown })));
|
|
20
22
|
});
|
|
21
23
|
SliderHandle.displayName = 'SliderHandle';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderHandle.cjs","sources":["../../../../../src/components/Slider/components/SliderHandle/SliderHandle.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\nimport styles from './SliderHandle.module.scss';\nimport { SliderHandleProps } from './types';\n\n/**\n * Slider handle component that renders the draggable handle and optional value label.\n * Positioned dynamically based on the slider value.\n */\nexport const SliderHandle = React.forwardRef<HTMLDivElement, SliderHandleProps>(\n (\n {\n horizontalPosition,\n value,\n min,\n max,\n disabled,\n isActive,\n showLabel,\n className,\n ariaLabel,\n ariaLabelledBy,\n onMouseDown,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n onKeyDown,\n },\n ref,\n ) => {\n const positionStyle = { left: `${horizontalPosition}%` };\n\n return (\n <>\n {showLabel && (\n <div className={styles.valueLabel} style={positionStyle} data-testid=\"slider-value-label\">\n {value}
|
|
1
|
+
{"version":3,"file":"SliderHandle.cjs","sources":["../../../../../src/components/Slider/components/SliderHandle/SliderHandle.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\nimport styles from './SliderHandle.module.scss';\nimport { SliderHandleProps } from './types';\nimport { Text } from '../../../Text';\n\n/**\n * Slider handle component that renders the draggable handle and optional value label.\n * Positioned dynamically based on the slider value.\n */\nexport const SliderHandle = React.forwardRef<HTMLDivElement, SliderHandleProps>(\n (\n {\n horizontalPosition,\n value,\n min,\n max,\n disabled,\n isActive,\n showLabel,\n className,\n ariaLabel,\n ariaLabelledBy,\n onMouseDown,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n onKeyDown,\n },\n ref,\n ) => {\n const positionStyle = { left: `${horizontalPosition}%` };\n\n return (\n <>\n {showLabel && (\n <div className={styles.valueLabel} style={positionStyle} data-testid=\"slider-value-label\">\n <Text>{value}</Text>\n </div>\n )}\n <div\n ref={ref}\n role=\"slider\"\n aria-orientation=\"horizontal\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n className={buildClassnames([styles.slider, className])}\n style={positionStyle}\n data-disabled={disabled}\n data-active={isActive}\n data-testid=\"slider-handle\"\n tabIndex={disabled ? -1 : 0}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n aria-disabled={disabled}\n onMouseDown={onMouseDown}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n />\n </>\n );\n },\n);\n\nSliderHandle.displayName = 'SliderHandle';\n"],"names":["React","styles","Text","buildClassnames"],"mappings":";;;;;;;;;;;AAMA;;;AAGG;MACU,YAAY,GAAGA,sBAAK,CAAC,UAAU,CAC1C,CACE,EACE,kBAAkB,EAClB,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,GACV,EACD,GAAG,KACD;IACF,MAAM,aAAa,GAAG,EAAE,IAAI,EAAE,CAAG,EAAA,kBAAkB,CAAG,CAAA,CAAA,EAAE;AAExD,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;AACG,QAAA,SAAS,KACRA,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,mBAAM,CAAC,UAAU,EAAE,KAAK,EAAE,aAAa,iBAAc,oBAAoB,EAAA;AACvF,YAAAD,sBAAA,CAAA,aAAA,CAACE,SAAI,EAAA,IAAA,EAAE,KAAK,CAAQ,CAChB,CACP;AACD,QAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACI,kBAAA,EAAA,YAAY,EACjB,YAAA,EAAA,SAAS,qBACJ,cAAc,EAC/B,SAAS,EAAEG,+BAAe,CAAC,CAACF,mBAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EACtD,KAAK,EAAE,aAAa,EAAA,eAAA,EACL,QAAQ,EAAA,aAAA,EACV,QAAQ,EACT,aAAA,EAAA,eAAe,EAC3B,QAAQ,EAAE,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAA,eAAA,EACZ,GAAG,EACH,eAAA,EAAA,GAAG,EACH,eAAA,EAAA,KAAK,mBACL,QAAQ,EACvB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,CAAA,CACD;AAEP,CAAC;AAGH,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
import { buildClassnames } from '../../../../utils/buildClassnames.js';
|
|
3
3
|
import styles from './SliderHandle.module.scss.js';
|
|
4
|
+
import { Text } from '../../../Text/Text.js';
|
|
4
5
|
|
|
5
6
|
/**
|
|
6
7
|
* Slider handle component that renders the draggable handle and optional value label.
|
|
@@ -9,7 +10,8 @@ import styles from './SliderHandle.module.scss.js';
|
|
|
9
10
|
const SliderHandle = React__default.forwardRef(({ horizontalPosition, value, min, max, disabled, isActive, showLabel, className, ariaLabel, ariaLabelledBy, onMouseDown, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, }, ref) => {
|
|
10
11
|
const positionStyle = { left: `${horizontalPosition}%` };
|
|
11
12
|
return (React__default.createElement(React__default.Fragment, null,
|
|
12
|
-
showLabel && (React__default.createElement("div", { className: styles.valueLabel, style: positionStyle, "data-testid": "slider-value-label" },
|
|
13
|
+
showLabel && (React__default.createElement("div", { className: styles.valueLabel, style: positionStyle, "data-testid": "slider-value-label" },
|
|
14
|
+
React__default.createElement(Text, null, value))),
|
|
13
15
|
React__default.createElement("div", { ref: ref, role: "slider", "aria-orientation": "horizontal", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: buildClassnames([styles.slider, className]), style: positionStyle, "data-disabled": disabled, "data-active": isActive, "data-testid": "slider-handle", tabIndex: disabled ? -1 : 0, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-disabled": disabled, onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown })));
|
|
14
16
|
});
|
|
15
17
|
SliderHandle.displayName = 'SliderHandle';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderHandle.js","sources":["../../../../../src/components/Slider/components/SliderHandle/SliderHandle.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\nimport styles from './SliderHandle.module.scss';\nimport { SliderHandleProps } from './types';\n\n/**\n * Slider handle component that renders the draggable handle and optional value label.\n * Positioned dynamically based on the slider value.\n */\nexport const SliderHandle = React.forwardRef<HTMLDivElement, SliderHandleProps>(\n (\n {\n horizontalPosition,\n value,\n min,\n max,\n disabled,\n isActive,\n showLabel,\n className,\n ariaLabel,\n ariaLabelledBy,\n onMouseDown,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n onKeyDown,\n },\n ref,\n ) => {\n const positionStyle = { left: `${horizontalPosition}%` };\n\n return (\n <>\n {showLabel && (\n <div className={styles.valueLabel} style={positionStyle} data-testid=\"slider-value-label\">\n {value}
|
|
1
|
+
{"version":3,"file":"SliderHandle.js","sources":["../../../../../src/components/Slider/components/SliderHandle/SliderHandle.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\nimport styles from './SliderHandle.module.scss';\nimport { SliderHandleProps } from './types';\nimport { Text } from '../../../Text';\n\n/**\n * Slider handle component that renders the draggable handle and optional value label.\n * Positioned dynamically based on the slider value.\n */\nexport const SliderHandle = React.forwardRef<HTMLDivElement, SliderHandleProps>(\n (\n {\n horizontalPosition,\n value,\n min,\n max,\n disabled,\n isActive,\n showLabel,\n className,\n ariaLabel,\n ariaLabelledBy,\n onMouseDown,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n onKeyDown,\n },\n ref,\n ) => {\n const positionStyle = { left: `${horizontalPosition}%` };\n\n return (\n <>\n {showLabel && (\n <div className={styles.valueLabel} style={positionStyle} data-testid=\"slider-value-label\">\n <Text>{value}</Text>\n </div>\n )}\n <div\n ref={ref}\n role=\"slider\"\n aria-orientation=\"horizontal\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n className={buildClassnames([styles.slider, className])}\n style={positionStyle}\n data-disabled={disabled}\n data-active={isActive}\n data-testid=\"slider-handle\"\n tabIndex={disabled ? -1 : 0}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n aria-disabled={disabled}\n onMouseDown={onMouseDown}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n />\n </>\n );\n },\n);\n\nSliderHandle.displayName = 'SliderHandle';\n"],"names":["React"],"mappings":";;;;;AAMA;;;AAGG;MACU,YAAY,GAAGA,cAAK,CAAC,UAAU,CAC1C,CACE,EACE,kBAAkB,EAClB,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,GACV,EACD,GAAG,KACD;IACF,MAAM,aAAa,GAAG,EAAE,IAAI,EAAE,CAAG,EAAA,kBAAkB,CAAG,CAAA,CAAA,EAAE;AAExD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;AACG,QAAA,SAAS,KACRA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,KAAK,EAAE,aAAa,iBAAc,oBAAoB,EAAA;AACvF,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,IAAA,EAAE,KAAK,CAAQ,CAChB,CACP;AACD,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACI,kBAAA,EAAA,YAAY,EACjB,YAAA,EAAA,SAAS,qBACJ,cAAc,EAC/B,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EACtD,KAAK,EAAE,aAAa,EAAA,eAAA,EACL,QAAQ,EAAA,aAAA,EACV,QAAQ,EACT,aAAA,EAAA,eAAe,EAC3B,QAAQ,EAAE,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAA,eAAA,EACZ,GAAG,EACH,eAAA,EAAA,GAAG,EACH,eAAA,EAAA,KAAK,mBACL,QAAQ,EACvB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,CAAA,CACD;AAEP,CAAC;AAGH,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"slider":"
|
|
5
|
+
___$insertStyle("._slider_1wjvc_1 {\n position: absolute;\n top: calc((var(--slider-size) - var(--track-height)) / 2);\n width: var(--slider-size);\n height: var(--slider-size);\n background: white;\n border: var(--border-size) solid var(--colors-secondary-blue-base);\n border-radius: var(--radius-full);\n cursor: pointer;\n pointer-events: auto;\n transform: translateX(-50%);\n box-sizing: border-box;\n}\n\n._slider_1wjvc_1[data-active=true] {\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n._slider_1wjvc_1:focus-visible {\n outline: none;\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n._slider_1wjvc_1[data-disabled=true] {\n border-color: var(--colors-neutral-grey-base);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n._valueLabel_1wjvc_30 {\n position: absolute;\n top: calc(var(--sizes-7) * -1);\n transform: translateX(-50%);\n background: var(--colors-secondary-blue-base);\n padding: var(--sizes-1) var(--sizes-2);\n border-radius: var(--sizes-1);\n white-space: nowrap;\n line-height: 1;\n}\n._valueLabel_1wjvc_30 span {\n color: var(--colors-neutral-grey-lightest);\n}");
|
|
6
|
+
var styles = {"slider":"_slider_1wjvc_1","valueLabel":"_valueLabel_1wjvc_30"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=SliderHandle.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderHandle.module.scss.cjs","sources":["../../../../../src/components/Slider/components/SliderHandle/SliderHandle.module.scss"],"sourcesContent":[".slider {\n position: absolute;\n top: calc((var(--slider-size) - var(--track-height)) / 2);\n width: var(--slider-size);\n height: var(--slider-size);\n background: white;\n border: var(--border-size) solid var(--colors-secondary-blue-base);\n border-radius: var(--radius-full);\n cursor: pointer;\n pointer-events: auto;\n transform: translateX(-50%);\n}\n\n.slider[data-active='true'] {\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n.slider:focus-visible {\n outline: none;\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n.slider[data-disabled='true'] {\n border-color: var(--colors-neutral-grey-base);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.valueLabel {\n position: absolute;\n top: calc(var(--sizes-7) * -1);\n transform: translateX(-50%);\n background: var(--colors-secondary-blue-base);\n
|
|
1
|
+
{"version":3,"file":"SliderHandle.module.scss.cjs","sources":["../../../../../src/components/Slider/components/SliderHandle/SliderHandle.module.scss"],"sourcesContent":[".slider {\n position: absolute;\n top: calc((var(--slider-size) - var(--track-height)) / 2);\n width: var(--slider-size);\n height: var(--slider-size);\n background: white;\n border: var(--border-size) solid var(--colors-secondary-blue-base);\n border-radius: var(--radius-full);\n cursor: pointer;\n pointer-events: auto;\n transform: translateX(-50%);\n box-sizing: border-box;\n}\n\n.slider[data-active='true'] {\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n.slider:focus-visible {\n outline: none;\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n.slider[data-disabled='true'] {\n border-color: var(--colors-neutral-grey-base);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.valueLabel {\n position: absolute;\n top: calc(var(--sizes-7) * -1);\n transform: translateX(-50%);\n background: var(--colors-secondary-blue-base);\n padding: var(--sizes-1) var(--sizes-2);\n border-radius: var(--sizes-1);\n white-space: nowrap;\n line-height: 1;\n\n span {\n color: var(--colors-neutral-grey-lightest);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,0oCAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"slider":"
|
|
3
|
+
insertStyle("._slider_1wjvc_1 {\n position: absolute;\n top: calc((var(--slider-size) - var(--track-height)) / 2);\n width: var(--slider-size);\n height: var(--slider-size);\n background: white;\n border: var(--border-size) solid var(--colors-secondary-blue-base);\n border-radius: var(--radius-full);\n cursor: pointer;\n pointer-events: auto;\n transform: translateX(-50%);\n box-sizing: border-box;\n}\n\n._slider_1wjvc_1[data-active=true] {\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n._slider_1wjvc_1:focus-visible {\n outline: none;\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n._slider_1wjvc_1[data-disabled=true] {\n border-color: var(--colors-neutral-grey-base);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n._valueLabel_1wjvc_30 {\n position: absolute;\n top: calc(var(--sizes-7) * -1);\n transform: translateX(-50%);\n background: var(--colors-secondary-blue-base);\n padding: var(--sizes-1) var(--sizes-2);\n border-radius: var(--sizes-1);\n white-space: nowrap;\n line-height: 1;\n}\n._valueLabel_1wjvc_30 span {\n color: var(--colors-neutral-grey-lightest);\n}");
|
|
4
|
+
var styles = {"slider":"_slider_1wjvc_1","valueLabel":"_valueLabel_1wjvc_30"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=SliderHandle.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderHandle.module.scss.js","sources":["../../../../../src/components/Slider/components/SliderHandle/SliderHandle.module.scss"],"sourcesContent":[".slider {\n position: absolute;\n top: calc((var(--slider-size) - var(--track-height)) / 2);\n width: var(--slider-size);\n height: var(--slider-size);\n background: white;\n border: var(--border-size) solid var(--colors-secondary-blue-base);\n border-radius: var(--radius-full);\n cursor: pointer;\n pointer-events: auto;\n transform: translateX(-50%);\n}\n\n.slider[data-active='true'] {\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n.slider:focus-visible {\n outline: none;\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n.slider[data-disabled='true'] {\n border-color: var(--colors-neutral-grey-base);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.valueLabel {\n position: absolute;\n top: calc(var(--sizes-7) * -1);\n transform: translateX(-50%);\n background: var(--colors-secondary-blue-base);\n
|
|
1
|
+
{"version":3,"file":"SliderHandle.module.scss.js","sources":["../../../../../src/components/Slider/components/SliderHandle/SliderHandle.module.scss"],"sourcesContent":[".slider {\n position: absolute;\n top: calc((var(--slider-size) - var(--track-height)) / 2);\n width: var(--slider-size);\n height: var(--slider-size);\n background: white;\n border: var(--border-size) solid var(--colors-secondary-blue-base);\n border-radius: var(--radius-full);\n cursor: pointer;\n pointer-events: auto;\n transform: translateX(-50%);\n box-sizing: border-box;\n}\n\n.slider[data-active='true'] {\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n.slider:focus-visible {\n outline: none;\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n.slider[data-disabled='true'] {\n border-color: var(--colors-neutral-grey-base);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.valueLabel {\n position: absolute;\n top: calc(var(--sizes-7) * -1);\n transform: translateX(-50%);\n background: var(--colors-secondary-blue-base);\n padding: var(--sizes-1) var(--sizes-2);\n border-radius: var(--sizes-1);\n white-space: nowrap;\n line-height: 1;\n\n span {\n color: var(--colors-neutral-grey-lightest);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,0oCAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA;;;;"}
|