@elastic/eui
Version:
Elastic UI Component Library
51 lines (50 loc) • 3.31 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 { euiDisabledSelector, highContrastModeStyles } from '../../../global_styling';
export var euiSplitButtonStyles = function euiSplitButtonStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
var primaryDisabledSelector = ".euiSplitButtonActionPrimary:is(".concat(euiDisabledSelector, ")");
var secondaryDisabledSelector = ".euiSplitButtonActionSecondary:is(".concat(euiDisabledSelector, ")");
var dividerSelector = ".euiSplitButton__divider";
return {
euiSplitButton: /*#__PURE__*/css("display:inline-flex;flex-wrap:nowrap;&:has(", primaryDisabledSelector, "):has(", secondaryDisabledSelector, "){", dividerSelector, "{", highContrastModeStyles(euiThemeContext, {
// When both buttons are disabled set as visual gap
none: "\n border-color: transparent;\n ",
// When both buttons are disabled set a disabled divider color
preferred: "\n border-color: ".concat(euiTheme.colors.borderBaseDisabled, ";\n ")
}), ";}};label:euiSplitButton;"),
// When both buttons are enabled set as visual gap
fill: /*#__PURE__*/css("&:not(:has(", primaryDisabledSelector, ")):not(\n :has(", secondaryDisabledSelector, ")\n ){", dividerSelector, "{border-color:transparent;}};label:fill;")
};
};
export var euiSplitButtonActionStyles = {
euiSplitButtonActionPrimary: process.env.NODE_ENV === "production" ? {
name: "12txneb-euiSplitButtonActionPrimary",
styles: "z-index:0;border-inline-end:none;border-start-end-radius:0;border-end-end-radius:0;label:euiSplitButtonActionPrimary;"
} : {
name: "12txneb-euiSplitButtonActionPrimary",
styles: "z-index:0;border-inline-end:none;border-start-end-radius:0;border-end-end-radius:0;label:euiSplitButtonActionPrimary;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
},
euiSplitButtonActionSecondary: process.env.NODE_ENV === "production" ? {
name: "5uh4vx-euiSplitButtonActionSecondary",
styles: "border-inline-start:none;border-start-start-radius:0;border-end-start-radius:0;label:euiSplitButtonActionSecondary;"
} : {
name: "5uh4vx-euiSplitButtonActionSecondary",
styles: "border-inline-start:none;border-start-start-radius:0;border-end-start-radius:0;label:euiSplitButtonActionSecondary;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
}
};
export var euiSplitButtonDividerStyles = function euiSplitButtonDividerStyles(euiThemeContext, color) {
var euiTheme = euiThemeContext.euiTheme;
return {
divider: /*#__PURE__*/css("border-inline-start:", euiTheme.border.width.thin, " solid ", color, ";;label:divider;")
};
};