@elastic/eui
Version:
Elastic UI Component Library
29 lines (27 loc) • 2.44 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.euiSaturationStyles = void 0;
var _react = require("@emotion/react");
var _global_styling = require("../../global_styling");
/*
* 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 euiSaturationStyles = exports.euiSaturationStyles = function euiSaturationStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
var indicatorSize = euiTheme.size.m;
var borderRadius = (0, _global_styling.mathWithUnits)(euiTheme.border.radius.medium, function (x) {
return x / 2;
});
return {
euiSaturation: /*#__PURE__*/(0, _react.css)("z-index:3;position:relative;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('padding-bottom', '100%'), " border-radius:", borderRadius, ";touch-action:none;&:focus,&:focus-within{outline:none;.euiSaturation__indicator{outline:none;box-shadow:0 0 0 ", euiTheme.focus.width, " ", euiTheme.colors.primary, ";border-color:", euiTheme.colors.primary, ";}};label:euiSaturation;"),
euiSaturation__lightness: /*#__PURE__*/(0, _react.css)("position:absolute;inset:0;", (0, _global_styling.logicalCSS)('top', '-1px'), "border-radius:", borderRadius, ";background:linear-gradient(\n to right,\n rgba(255, 255, 255, 1),\n rgba(255, 255, 255, 0)\n );;label:euiSaturation__lightness;"),
euiSaturation__saturation: /*#__PURE__*/(0, _react.css)("position:absolute;inset:0;", (0, _global_styling.logicalCSS)('top', '-1px'), "border-radius:", borderRadius, ";background:linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));;label:euiSaturation__saturation;"),
euiSaturation__indicator: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalSizeCSS)(indicatorSize), " transform:translateX(-50%) translateY(-50%);border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.darkestShade, ";border-radius:100%;&::before{content:'';position:absolute;inset:0;border-radius:100%;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.lightestShade, ";};label:euiSaturation__indicator;")
};
};