@elastic/eui
Version:
Elastic UI Component Library
62 lines (59 loc) • 4.23 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 { makeHighContrastColor } from '../../services';
import { euiBreakpoint, logicalShorthandCSS, euiFocusRing, euiCanAnimate, mathWithUnits } from '../../global_styling/';
import { euiTitle } from '../title/title.styles';
import { euiStepVariables } from './step.styles';
var _ref = process.env.NODE_ENV === "production" ? {
name: "b86pnw-disabled",
styles: "cursor:not-allowed;label:disabled;"
} : {
name: "b86pnw-disabled",
styles: "cursor:not-allowed;label:disabled;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
export var euiStepHorizontalStyles = function euiStepHorizontalStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
var euiStep = euiStepVariables(euiTheme);
/**
* 1. Ensure the connecting lines stays behind the number
* 2. Make the content of each step align to the top, even if the steps are of varying heights,
* e.g. due to some of their titles wrapping to multiple lines
*/
var _generateStepSizeAndInset = function _generateStepSizeAndInset(stepNumberSize) {
return /*#__PURE__*/css("&::before,&::after{inline-size:calc(50% - (", stepNumberSize, " / 2));inset-block-start:", mathWithUnits([euiTheme.size.l, stepNumberSize], function (x, y) {
return x + y / 2;
}), ";}");
};
return {
euiStepHorizontal: /*#__PURE__*/css(logicalShorthandCSS('padding', "".concat(euiTheme.size.l, " ").concat(euiTheme.size.base, " ").concat(euiTheme.size.base)), " display:flex;flex-direction:column;align-items:center;justify-content:flex-start;cursor:pointer;position:relative;inline-size:100%;&::before,&::after{content:'';position:absolute;background-color:", euiTheme.border.color, ";block-size:", euiTheme.border.width.thick, ";z-index:", euiTheme.levels.content, ";}&::before{inset-inline-start:0;}&::after{inset-inline-end:0;};label:euiStepHorizontal;"),
// Adjust the size of the step number and connecting lines based on size
m: _generateStepSizeAndInset(euiStep.numberSize),
s: _generateStepSizeAndInset(euiStep.numberXSSize),
xs: _generateStepSizeAndInset(euiStep.numberXXSSize),
// Note: these selectors must be nested because focus/hover state
// is on the parent container, but affects specific children
enabled: /*#__PURE__*/css("&:focus,&:hover{.euiStepHorizontal__title{text-decoration:underline;}}&:focus{outline:none;.euiStepHorizontal__number{", euiFocusRing(euiThemeContext), ";}.euiStepHorizontal__number:not(:focus-visible){outline:", euiTheme.focus.width, " solid ", euiTheme.colors.darkestShade, ";}};label:enabled;"),
disabled: _ref
};
};
export var euiStepHorizontalNumberStyles = function euiStepHorizontalNumberStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
return {
euiStepHorizontal__number: /*#__PURE__*/css("position:relative;z-index:", Number(euiTheme.levels.content) + 1, ";", euiCanAnimate, "{transition:all ", euiTheme.animation.fast, " ease-in-out;};label:euiStepHorizontal__number;")
};
};
export var euiStepHorizontalTitleStyles = function euiStepHorizontalTitleStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
return {
euiStepHorizontal__title: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xs'), " margin-block-start:", euiTheme.size.s, ";font-weight:", euiTheme.font.weight.bold, ";text-align:center;", euiBreakpoint(euiThemeContext, ['xs', 's']), "{display:none;};label:euiStepHorizontal__title;"),
disabled: /*#__PURE__*/css("color:", makeHighContrastColor(euiTheme.colors.disabledText)(euiTheme.colors.body), ";;label:disabled;")
};
};