@elastic/eui
Version:
Elastic UI Component Library
86 lines (82 loc) • 7.16 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.euiSuperDatePickerStyles = exports._buttonStyles = void 0;
var _react = require("@emotion/react");
var _services = require("../../../services");
var _global_styling = require("../../../global_styling");
var _form = require("../../form/form.styles");
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.
*/
var _ref = process.env.NODE_ENV === "production" ? {
name: "1e4qgxg-euiSuperDatePicker__range",
styles: "flex-grow:1;overflow:hidden;label:euiSuperDatePicker__range;"
} : {
name: "1e4qgxg-euiSuperDatePicker__range",
styles: "flex-grow:1;overflow:hidden;label:euiSuperDatePicker__range;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme,
colorMode = euiThemeContext.colorMode;
var forms = (0, _form.euiFormVariables)(euiThemeContext);
var inputWidth = euiTheme.base * 30;
var buttonWidth = euiTheme.base * 7; // @see _button_display.styles.ts
var gap = euiTheme.size.s;
// Default restricted width
var restrictedWidth = (0, _global_styling.mathWithUnits)(gap, function (gap) {
return inputWidth + gap + buttonWidth;
});
// Set a sensible min-width for when width is auto
var minFormWidth = parseFloat(forms.maxWidth) / 2;
var autoMinWidth = (0, _global_styling.mathWithUnits)(gap, function (gap) {
return minFormWidth + gap + buttonWidth;
});
// Needs updating colors
var needsUpdatingBackgroundColor = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.success, 0.7) : (0, _services.tint)(euiTheme.colors.success, 0.9);
var needsUpdatingTextColor = (0, _services.makeHighContrastColor)(euiTheme.colors.success)(needsUpdatingBackgroundColor);
return {
euiSuperDatePicker: /*#__PURE__*/(0, _react.css)("display:flex;gap:", gap, ";", (0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiSuperDatePicker;"),
widths: {
restricted: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', restrictedWidth), ";;label:restricted;"),
full: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";;label:full;"),
auto: /*#__PURE__*/(0, _react.css)("display:inline-flex;", (0, _global_styling.logicalCSS)('min-width', "min(".concat(autoMinWidth, ", 100%)")), " ", (0, _global_styling.logicalCSS)('width', 'auto'), ";;label:auto;")
},
// Special rendering cases that override all permutations of the above widths
noUpdateButton: {
// Skipping css`` and using the `label` key instead to reduce repeat Emotion generated classNames
restricted: "\n label: noUpdateButton;\n ".concat((0, _global_styling.logicalCSS)('width', "".concat(inputWidth, "px")), ";\n "),
auto: "\n label: noUpdateButton;\n ".concat((0, _global_styling.logicalCSS)('min-width', "min(".concat(minFormWidth, "px, 100%)")), ";\n "),
full: "\n label: noUpdateButton;\n "
},
isAutoRefreshOnly: {
// display: block over flex is required to have the nested .euiPopover wrap expand to the wrapper width
restricted: "\n label: isAutoRefreshOnly;\n display: block;\n ".concat((0, _global_styling.logicalCSS)('width', forms.maxWidth), "\n "),
auto: "\n label: isAutoRefreshOnly;\n ",
full: "\n label: isAutoRefreshOnly;\n display: block;\n "
},
// isQuickSelectOnly forces `width` to be `auto`
isQuickSelectOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), ".euiFormControlLayout__prepend{", (0, _global_styling.logicalCSS)('max-width', 'none'), ";};label:isQuickSelectOnly;"),
euiSuperDatePicker__range: _ref,
euiSuperDatePicker__rangeInput: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.logicalCSS)('width', 'auto'), ";;label:euiSuperDatePicker__rangeInput;"),
euiSuperDatePicker__prettyFormat: /*#__PURE__*/(0, _react.css)(_buttonStyles(euiThemeContext), " text-align:start;;label:euiSuperDatePicker__prettyFormat;"),
// Form states
states: {
euiSuperDatePicker__formControlLayout: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " box-shadow:none;};label:euiSuperDatePicker__formControlLayout;"),
default: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.primary, ";background-size:100% 100%;};label:default;"),
disabled: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _form.euiFormControlDisabledStyles)(euiThemeContext), ";};label:disabled;"),
invalid: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.dangerText, ";background-color:", forms.backgroundColor, ";", (0, _form.euiFormControlInvalidStyles)(euiThemeContext), ";};label:invalid;"),
needsUpdating: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " background-color:inherit;box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.success, ";background-size:100% 100%;};label:needsUpdating;")
}
};
};
var _buttonStyles = exports._buttonStyles = function _buttonStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
return /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:inherit;background-color:inherit;&:disabled{cursor:not-allowed;}");
};