@elastic/eui
Version:
Elastic UI Component Library
44 lines (41 loc) • 3.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.euiDatePickerRangeStyles = exports.euiDatePickerRangeInlineStyles = void 0;
var _react = require("@emotion/react");
var _global_styling = require("../../global_styling");
var _mixins = require("../../themes/amsterdam/global_styling/mixins");
var _form = require("../form/form.styles");
/*
* 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 euiDatePickerRangeStyles = function euiDatePickerRangeStyles(euiThemeContext) {
var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
controlLayoutGroupInputHeight = _euiFormVariables.controlLayoutGroupInputHeight;
return {
euiDatePickerRange: /*#__PURE__*/(0, _react.css)(".euiFieldText.euiDatePicker{", (0, _global_styling.logicalCSS)('height', controlLayoutGroupInputHeight), ";};label:euiDatePickerRange;")
};
};
exports.euiDatePickerRangeStyles = euiDatePickerRangeStyles;
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__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " ", (0, _global_styling.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{", (0, _global_styling.logicalCSS)('height', 'auto'), ";}}.euiFormControlLayoutIcons{justify-content:center;grid-column:1/span 3;", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";}}.react-datepicker{position:relative;}.react-datepicker__time-list{padding:0;};label:inline;"),
responsive: /*#__PURE__*/(0, _react.css)(containerQuery(268), ";;label:responsive;"),
responsiveWithTimeSelect: /*#__PURE__*/(0, _react.css)(containerQuery(350), ";;label:responsiveWithTimeSelect;"),
shadow: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _mixins.euiShadowMedium)(euiThemeContext), " .euiFormControlLayout__childrenWrapper{background-color:", euiTheme.colors.emptyShade, ";}};label:shadow;")
};
};
exports.euiDatePickerRangeInlineStyles = euiDatePickerRangeInlineStyles;