@elastic/eui
Version:
Elastic UI Component Library
82 lines (81 loc) • 5.06 kB
JavaScript
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/*
* 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 { logicalCSS, logicalCSSWithFallback, euiFontSize, mathWithUnits } from '../../../global_styling';
import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast';
import { euiRangeVariables } from './range.styles';
var tickStyles = function tickStyles(euiThemeContext, range) {
var euiTheme = euiThemeContext.euiTheme;
return "\n position: absolute;\n ".concat(logicalCSS('top', 0), ";\n block-size: ").concat(range.tickHeight, ";\n ").concat(highContrastModeStyles(euiThemeContext, {
none: "\n inline-size: ".concat(range.tickWidth, ";\n background-color: ").concat(range.tickColor, ";\n "),
// Windows high contrast themes ignore background color but render borders
forced: logicalCSS('border-left', "".concat(range.tickWidth, " solid ").concat(range.tickColor))
}), "\n border-radius: ").concat(euiTheme.border.radius.small, ";\n ");
};
var _ref3 = process.env.NODE_ENV === "production" ? {
name: "1sbhdc4-euiRangeTicks",
styles: "position:absolute;inset-inline:0;display:flex;label:euiRangeTicks;"
} : {
name: "1sbhdc4-euiRangeTicks",
styles: "position:absolute;inset-inline:0;display:flex;label:euiRangeTicks;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
export var euiRangeTicksStyles = function euiRangeTicksStyles(euiThemeContext) {
var range = euiRangeVariables(euiThemeContext);
return {
// Base
euiRangeTicks: _ref3,
isCustom: /*#__PURE__*/css("inset-inline:", mathWithUnits(range.thumbWidth, function (x) {
return x / 8;
}), ";;label:isCustom;"),
// compressed and non-compressed styles
regular: /*#__PURE__*/css("block-size:", mathWithUnits([range.height, range.thumbHeight], function (x, y) {
return x - y;
}), ";inset-block-start:", range.thumbHeight, ";;label:regular;"),
compressed: /*#__PURE__*/css("block-size:", mathWithUnits([range.compressedHeight, range.trackBottomPositionWithTicks], function (x, y) {
return x - y;
}), ";inset-block-start:", mathWithUnits([range.thumbHeight, range.trackHeight], function (x, y) {
return x - (x - y) / 2;
}), ";;label:compressed;")
};
};
var _ref = process.env.NODE_ENV === "production" ? {
name: "jgvly2-isMax",
styles: "transform:translateX(0);.euiRangeTick__pseudo{inset-inline-end:0;};label:isMax;"
} : {
name: "jgvly2-isMax",
styles: "transform:translateX(0);.euiRangeTick__pseudo{inset-inline-end:0;};label:isMax;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref2 = process.env.NODE_ENV === "production" ? {
name: "1nx14mu-isMin",
styles: "transform:translateX(0);.euiRangeTick__pseudo{inset-inline-start:0;};label:isMin;"
} : {
name: "1nx14mu-isMin",
styles: "transform:translateX(0);.euiRangeTick__pseudo{inset-inline-start:0;};label:isMin;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
export var euiRangeTickStyles = function euiRangeTickStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
var range = euiRangeVariables(euiThemeContext);
return {
// Base
euiRangeTick: /*#__PURE__*/css(logicalCSSWithFallback('overflow-x', 'hidden'), " ", logicalCSSWithFallback('overflow-y', 'hidden'), " text-overflow:ellipsis;font-size:", euiFontSize(euiThemeContext, 'xs').fontSize, ";position:absolute;transform:translateX(-50%);&:disabled{cursor:not-allowed;}&:enabled:hover,&:focus{color:", range.focusColor, ";};label:euiRangeTick;"),
// compressed and non-compressed styles
compressed: /*#__PURE__*/css(logicalCSS('padding-top', euiTheme.size.s), " &::before{", logicalCSS('margin-top', euiTheme.size.xxs), ";};label:compressed;"),
regular: /*#__PURE__*/css(logicalCSS('padding-top', euiTheme.size.m), ";;label:regular;"),
selected: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.medium, ";color:", range.focusColor, ";;label:selected;"),
isCustom: /*#__PURE__*/css(logicalCSSWithFallback('overflow-x', 'hidden'), ";;label:isCustom;"),
// Tick marks can use either a ::before pseudo element or a span __pseudo node
hasPseudoTickMark: /*#__PURE__*/css("&::before{", tickStyles(euiThemeContext, range), " content:'';inset-inline-start:calc(50% - ", range.thumbBorderWidth, ");};label:hasPseudoTickMark;"),
euiRangeTick__pseudo: /*#__PURE__*/css(tickStyles(euiThemeContext, range), ";;label:euiRangeTick__pseudo;"),
isMin: _ref2,
isMax: _ref
};
};