@elastic/eui
Version:
Elastic UI Component Library
44 lines (43 loc) • 2.91 kB
JavaScript
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import { css } from '@emotion/react';
import { euiFontSize, mathWithUnits } from '../../../global_styling';
import { _popoverArrowStyles } from '../../../services/popover';
import { euiRangeVariables } from './range.styles';
export var euiRangeTooltipStyles = function euiRangeTooltipStyles(euiThemeContext) {
var range = euiRangeVariables(euiThemeContext);
return {
// Base
euiRangeTooltip: /*#__PURE__*/css("display:block;position:absolute;inset-inline-start:0;inset-block:0;inline-size:calc(100% - ", range.thumbWidth, ");margin-inline-start:", mathWithUnits(range.thumbWidth, function (x) {
return x / 2;
}), ";pointer-events:none;z-index:", range.thumbZIndex, ";;label:euiRangeTooltip;")
};
};
export var euiRangeTooltipValueStyles = function euiRangeTooltipValueStyles(euiThemeContext) {
var range = euiRangeVariables(euiThemeContext);
var euiTheme = euiThemeContext.euiTheme,
colorMode = euiThemeContext.colorMode,
highContrastMode = euiThemeContext.highContrastMode;
var toolTipBackgroundColor = euiTheme.components.tooltipBackground;
var borderColor = highContrastMode || colorMode === 'DARK' ? euiTheme.border.color : 'transparent';
var arrowSize = euiTheme.size.m;
var arrowOffset = euiTheme.size.l;
var arrowStyles = _popoverArrowStyles(euiThemeContext, arrowSize);
return {
euiRangeTooltip__value: /*#__PURE__*/css("position:absolute;inset-block-start:50%;max-inline-size:", mathWithUnits(euiTheme.size.base, function (x) {
return x * 16;
}), ";padding-block:", euiTheme.size.xxs, ";padding-inline:", euiTheme.size.s, ";transform:translateY(-50%);", euiFontSize(euiThemeContext, 's'), " color:", euiTheme.colors.textGhost, ";background-color:", toolTipBackgroundColor, ";border:", euiTheme.border.width.thin, " solid ", borderColor, ";border-radius:", euiTheme.border.radius.small, ";&::before{content:'';", arrowStyles._arrowStyles, " inset-block-start:50%;margin-block-start:", mathWithUnits(arrowSize, function (x) {
return x / -2;
}), ";background-color:inherit;border:inherit;};label:euiRangeTooltip__value;"),
left: /*#__PURE__*/css("margin-inline-end:", arrowOffset, ";&::before{", arrowStyles.positions.left, " inset-inline-start:100%;};label:left;"),
right: /*#__PURE__*/css("margin-inline-start:", arrowOffset, ";&::before{", arrowStyles.positions.right, " inset-inline-end:100%;};label:right;"),
hasTicks: /*#__PURE__*/css("inset-block-start:", mathWithUnits(range.thumbWidth, function (x) {
return x / 2;
}), ";;label:hasTicks;")
};
};