@elastic/eui
Version:
Elastic UI Component Library
36 lines (34 loc) • 3.3 kB
JavaScript
/*
* 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 { logicalCSS } from '../../global_styling';
import { euiShadowMedium } from '../../themes/amsterdam/global_styling/mixins';
import { euiFormVariables } from '../form/form.styles';
export var euiDatePickerRangeStyles = function euiDatePickerRangeStyles(euiThemeContext) {
var _euiFormVariables = euiFormVariables(euiThemeContext),
controlLayoutGroupInputHeight = _euiFormVariables.controlLayoutGroupInputHeight;
return {
euiDatePickerRange: /*#__PURE__*/css(".euiFieldText.euiDatePicker{", logicalCSS('height', controlLayoutGroupInputHeight), ";};label:euiDatePickerRange;")
};
};
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 & > .euiText > [data-icon-type='sortRight'] {\n transform: rotate(90deg);\n margin-inline: auto;\n }\n }\n }");
};
return {
inline: /*#__PURE__*/css(".euiFormControlLayoutDelimited{", logicalCSS('height', 'auto'), " ", logicalCSS('width', 'fit-content'), " ", logicalCSS('max-width', '100%'), " background-color:transparent;box-shadow:none;padding:0;.euiFormControlLayout__childrenWrapper{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;align-items:stretch;background-color:transparent;}&.euiFormControlLayout--group{&>*,.euiFormControlLayoutDelimited__delimiter{", logicalCSS('height', 'auto'), ";}}.euiFormControlLayoutIcons{justify-content:center;grid-column:1/span 3;", logicalCSS('height', 'auto'), " ", logicalCSS('padding-bottom', euiTheme.size.s), ";}}.react-datepicker{position:relative;}.react-datepicker__time-list{padding:0;};label:inline;"),
responsive: /*#__PURE__*/css(containerQuery(268), ";;label:responsive;"),
responsiveWithTimeSelect: /*#__PURE__*/css(containerQuery(350), ";;label:responsiveWithTimeSelect;"),
shadow: /*#__PURE__*/css(".euiFormControlLayoutDelimited{", euiShadowMedium(euiThemeContext), " .euiFormControlLayout__childrenWrapper{background-color:", euiTheme.colors.emptyShade, ";}};label:shadow;")
};
};