@elastic/eui/lib/components/form/range/range_track.styles.js

Elastic UI Component Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.euiRangeTrackStyles = void 0;
var _react = require("@emotion/react");
var _high_contrast = require("../../../global_styling/functions/high_contrast");
var _range = require("./range.styles");
/*
 * 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.
 */

var euiRangeTrackStyles = exports.euiRangeTrackStyles = function euiRangeTrackStyles(euiThemeContext) {
  var range = (0, _range.euiRangeVariables)(euiThemeContext);
  return {
    // Base
    euiRangeTrack: /*#__PURE__*/(0, _react.css)("block-size:100%;flex-grow:1;position:relative;align-self:flex-start;&::after{content:'';display:block;position:absolute;inset-block-start:", range.trackTopPositionWithoutTicks, ";inset-inline-start:0;inline-size:", range.trackWidth, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
      none: "\n            background: ".concat(range.trackColor, ";\n            block-size: ").concat(range.trackHeight, ";\n          "),
      // Windows high contrast themes ignore background color, but will render borders
      forced: "\n            border-block-start: ".concat(range.trackHeight, " solid ").concat(range.trackColor, ";\n            opacity: 0.25;\n          ")
    }), " border-radius:", range.trackBorderRadius, ";};label:euiRangeTrack;"),
    hasTicks: /*#__PURE__*/(0, _react.css)("margin-inline-start:1em;margin-inline-end:1em;&::after{inset-block-start:", range.trackTopPositionWithTicks, ";};label:hasTicks;"),
    disabled: /*#__PURE__*/(0, _react.css)("opacity:", range.disabledOpacity, ";;label:disabled;"),
    hasLevels: /*#__PURE__*/(0, _react.css)(";label:hasLevels;")
  };
};