@elastic/eui
Version:
Elastic UI Component Library
51 lines (49 loc) • 3.98 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 { euiShadowMedium } from '@elastic/eui-theme-common';
import { logicalCSS } from '../../global_styling';
import { disableFormControlHoverStyles } from '../form/form.styles';
export var euiDatePickerRangeStyles = function euiDatePickerRangeStyles() {
return {
euiDatePickerRange: /*#__PURE__*/css(".euiPopover,.react-datepicker__input-container,.euiDatePicker{", logicalCSS('height', '100%'), ";}.euiPopover{flex:1;};label:euiDatePickerRange;")
};
};
var _ref = process.env.NODE_ENV === "production" ? {
name: "bicgs9-noShadow",
styles: "background-color:transparent;label:noShadow;"
} : {
name: "bicgs9-noShadow",
styles: "background-color:transparent;label:noShadow;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
export var euiDatePickerRangeInlineStyles = function euiDatePickerRangeInlineStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
// Use a container query to stack date pickers vertically if the container is
// not wide enough to fit both. We need a fn for this to render two width queries,
// depending on whether time selection is being rendered or not
var containerQuery = function containerQuery(datePickerWidth) {
var delimiterWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;
return "\n display: block;\n container-type: inline-size;\n\n .euiFormControlLayout__childrenWrapper {\n /* Use static px widths for now, since render behavior comes from a third party library */\n @container (max-width: ".concat(datePickerWidth * 2 + delimiterWidth, "px) {\n /* Unset grid display */\n display: block !important;\n\n /* Center and point the default delimiter arrow downwards */\n .euiFormControlLayoutDelimited__delimiter .euiIcon {\n transform: rotate(90deg);\n margin-inline: auto;\n }\n }\n }");
};
return {
euiDatePickerRangeInline: /*#__PURE__*/css(".euiFormControlLayoutDelimited{", logicalCSS('height', 'auto'), " ", logicalCSS('width', 'fit-content'), " ", logicalCSS('max-width', '100%'), " border:none;padding:0;.euiFormControlLayout__childrenWrapper{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;align-items:stretch;background-color:transparent;}.euiFormControlLayoutIcons{justify-content:center;grid-column:1/span 3;", logicalCSS('height', 'auto'), " ", logicalCSS('padding-bottom', euiTheme.size.s), ";}&::after{display:none;}}.react-datepicker{position:relative;};label:euiDatePickerRangeInline;"),
responsive: /*#__PURE__*/css(containerQuery(268), ";;label:responsive;"),
responsiveWithTimeSelect: /*#__PURE__*/css(containerQuery(374), ";;label:responsiveWithTimeSelect;"),
shadow: /*#__PURE__*/css(".euiFormControlLayoutDelimited{", euiShadowMedium(euiThemeContext, {
borderAllInHighContrastMode: true
}), disableFormControlHoverStyles(), " .euiFormControlLayout__childrenWrapper{box-shadow:none;", disableFormControlHoverStyles(), ";}};label:shadow;"),
// Applied directly to EuiFormControlLayout so we can check if `disabled`
// and allow the disabled background-color to take precedence
formLayout: {
noShadow: _ref,
shadow: /*#__PURE__*/css("background-color:", euiTheme.colors.emptyShade, ";;label:shadow;")
}
};
};