@grafana/ui/dist/esm/components/Slider/styles.mjs.map

Grafana Components Library

{"version":3,"file":"styles.mjs","sources":["../../../../src/components/Slider/styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\nimport { css as cssCore } from '@emotion/react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport 'rc-slider/assets/index.css';\n\nexport const getStyles = (theme: GrafanaTheme2, isHorizontal: boolean, hasMarks = false) => {\n  const { spacing } = theme;\n  const railColor = theme.colors.border.strong;\n  const trackColor = theme.colors.primary.main;\n  const handleColor = theme.colors.primary.main;\n  const blueOpacity = theme.colors.primary.transparent;\n  const hoverStyle = `box-shadow: 0px 0px 0px 6px ${blueOpacity}`;\n\n  return {\n    container: css({\n      width: '100%',\n      margin: isHorizontal ? 'inherit' : spacing(1, 3, 1, 1),\n      paddingBottom: isHorizontal && hasMarks ? theme.spacing(1) : 'inherit',\n      height: isHorizontal ? 'auto' : '100%',\n    }),\n    // can't write this as an object since it needs to overwrite rc-slider styles\n    // object syntax doesn't support kebab case keys\n    // eslint-disable-next-line @emotion/syntax-preference\n    slider: css`\n      .rc-slider {\n        display: flex;\n        flex-grow: 1;\n        margin-left: 7px; // half the size of the handle to align handle to the left on 0 value\n      }\n      .rc-slider-mark {\n        top: ${theme.spacing(1.75)};\n      }\n      .rc-slider-mark-text {\n        color: ${theme.colors.text.disabled};\n        font-size: ${theme.typography.bodySmall.fontSize};\n      }\n      .rc-slider-mark-text-active {\n        color: ${theme.colors.text.primary};\n      }\n      .rc-slider-handle {\n        border: none;\n        background-color: ${handleColor};\n        box-shadow: ${theme.shadows.z1};\n        cursor: pointer;\n        opacity: 1;\n      }\n\n      .rc-slider-handle:hover,\n      .rc-slider-handle:active,\n      .rc-slider-handle-click-focused:focus {\n        ${hoverStyle};\n      }\n\n      // The triple class names is needed because that's the specificity used in the source css :(\n      .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging,\n      .rc-slider-handle:focus-visible {\n        box-shadow: 0 0 0 5px ${theme.colors.text.primary};\n      }\n\n      .rc-slider-dot,\n      .rc-slider-dot-active {\n        background-color: ${theme.colors.text.primary};\n        border-color: ${theme.colors.text.primary};\n      }\n\n      .rc-slider-track {\n        background-color: ${trackColor};\n      }\n      .rc-slider-rail {\n        background-color: ${railColor};\n        cursor: pointer;\n      }\n    `,\n    /** Global component from @emotion/core doesn't accept computed classname string returned from css from emotion.\n     * It accepts object containing the computed name and flattened styles returned from css from @emotion/core\n     * */\n    tooltip: cssCore`\n      body {\n        .rc-slider-tooltip {\n          cursor: grab;\n          user-select: none;\n          z-index: ${theme.zIndex.tooltip};\n        }\n\n        .rc-slider-tooltip-inner {\n          color: ${theme.colors.text.primary};\n          background-color: transparent !important;\n          border-radius: 0;\n          box-shadow: none;\n        }\n\n        .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {\n          display: none;\n        }\n\n        .rc-slider-tooltip-placement-top {\n          padding: 0;\n        }\n      }\n    `,\n    sliderInput: css({\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      width: '100%',\n    }),\n    sliderInputVertical: css({\n      flexDirection: 'column',\n      height: '100%',\n\n      '.rc-slider': {\n        margin: 0,\n        order: 2,\n      },\n    }),\n    sliderInputField: css({\n      marginLeft: theme.spacing(3),\n      input: {\n        textAlign: 'center',\n      },\n    }),\n    sliderInputFieldVertical: css({\n      margin: `0 0 ${theme.spacing(3)} 0`,\n      order: 1,\n    }),\n  };\n};\n"],"names":["cssCore"],"mappings":"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"}