@elastic/eui
Version:
Elastic UI Component Library
97 lines (96 loc) • 7.65 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 { euiCanAnimate, euiFontSize, euiTextTruncate, highContrastModeStyles, logicalCSS, mathWithUnits } from '../../../global_styling';
import { euiFormControlShowBackgroundLine, euiFormControlStyles, euiFormVariables } from '../form.styles';
var _ref = process.env.NODE_ENV === "production" ? {
name: "6h1iuq-euiFilePicker__clearButton",
styles: "pointer-events:auto;position:relative;label:euiFilePicker__clearButton;"
} : {
name: "6h1iuq-euiFilePicker__clearButton",
styles: "pointer-events:auto;position:relative;label:euiFilePicker__clearButton;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref2 = process.env.NODE_ENV === "production" ? {
name: "d8me89-euiFilePicker__rightIcon",
styles: "position:absolute;label:euiFilePicker__rightIcon;"
} : {
name: "d8me89-euiFilePicker__rightIcon",
styles: "position:absolute;label:euiFilePicker__rightIcon;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref3 = process.env.NODE_ENV === "production" ? {
name: "1j9s7hu-euiFilePicker__input",
styles: "position:absolute;inset:0;opacity:0;&:hover{cursor:pointer;}&:hover:disabled{cursor:not-allowed;}&:disabled{opacity:0;};label:euiFilePicker__input;"
} : {
name: "1j9s7hu-euiFilePicker__input",
styles: "position:absolute;inset:0;opacity:0;&:hover{cursor:pointer;}&:hover:disabled{cursor:not-allowed;}&:disabled{opacity:0;};label:euiFilePicker__input;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
export var euiFilePickerStyles = function euiFilePickerStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme,
highContrastMode = euiThemeContext.highContrastMode;
var formStyles = euiFormControlStyles(euiThemeContext);
var formVariables = euiFormVariables(euiThemeContext);
var _euiFontSize = euiFontSize(euiThemeContext, 's'),
fontSize = _euiFontSize.fontSize,
lineHeight = _euiFontSize.lineHeight;
return {
euiFilePicker: /*#__PURE__*/css("--euiFormControlLeftIconsCount:1;position:relative;border-radius:", formVariables.controlBorderRadius, ";&:has(input:focus){--euiFormControlStateColor:", formVariables.borderFocused, ";}&:hover{--euiFormControlStateColor:", highContrastMode ? euiTheme.border.color : euiTheme.colors.borderInteractiveFormsHoverProminent, ";--euiFormControlStateStyle:", highContrastMode ? 'solid' : 'dashed', ";}&:focus-within{", highContrastModeStyles(euiThemeContext, {
forced: "\n ".concat(euiFormControlShowBackgroundLine(euiThemeContext, formVariables.borderFocused), "\n ")
}), ";};label:euiFilePicker;"),
isDroppingFile: /*#__PURE__*/css("--euiFormControlStateColor:", euiTheme.colors.borderStrongSuccess, ";--euiFormControlStateStyle:", highContrastMode === 'forced' ? 'solid' : 'dashed', ";background-color:", euiTheme.components.forms.backgroundDropping, ";;label:isDroppingFile;"),
invalid: /*#__PURE__*/css("--euiFormControlStateColor:", formVariables.borderInvalid, ";&:hover{--euiFormControlStateColor:", formVariables.borderInvalidHovered, ";}", highContrastModeStyles(euiThemeContext, {
forced: "\n ".concat(euiFormControlShowBackgroundLine(euiThemeContext, formVariables.borderInvalid), "\n ")
}), ";;label:invalid;"),
hasFiles: /*#__PURE__*/css("--euiFormControlRightIconsCount:1;font-weight:", euiTheme.font.weight.bold, ";;label:hasFiles;"),
loading: /*#__PURE__*/css("--euiFormControlRightIconsCount:1;border-radius:", formVariables.controlCompressedBorderRadius, ";overflow:hidden;;label:loading;"),
// Skip the css() on the default width to avoid generating a className
formWidth: formStyles.formWidth,
fullWidth: /*#__PURE__*/css(formStyles.fullWidth, ";label:fullWidth;"),
// The input is an invisible dropzone / button
input: {
euiFilePicker__input: _ref3,
largeInteractive: /*#__PURE__*/css("&:hover,&:focus,.euiFilePicker-isDroppingFile &{&+.euiFilePicker__prompt{.euiFilePicker__promptText{", highContrastModeStyles(euiThemeContext, {
forced: "\n text-decoration: underline;\n "
}), ";}.euiFilePicker__icon{transform:scale(1.05);}}};label:largeInteractive;")
},
euiFilePicker__prompt: /*#__PURE__*/css("pointer-events:none;font-size:", fontSize, ";line-height:1;", euiTextTruncate(), " color:", euiTheme.colors.textParagraph, ";border:", euiTheme.border.width.thin, " var(--euiFormControlStateStyle, dashed) var(--euiFormControlStateColor, ", euiTheme.colors.borderBaseProminent, ");", euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
disabled: /*#__PURE__*/css(formStyles.disabled, "--euiFormControlStateColor:transparent;;label:disabled;"),
// Skip the css() on the default height to avoid generating a className
uncompressed: formStyles.uncompressed,
compressed: /*#__PURE__*/css(formStyles.compressed, ";label:compressed;"),
// Completely different rendering style from the normal form controls
large: {
large: /*#__PURE__*/css("padding-inline:", euiTheme.size.l, ";display:flex;flex-direction:column;align-items:center;justify-content:center;.euiFilePicker__promptText{", euiTextTruncate(), " line-height:", lineHeight, ";};label:large;"),
// Static heights so that surrounding contents don't shift around
uncompressed: "\n ".concat(logicalCSS('height', mathWithUnits(euiTheme.size.base, function (x) {
return x * 8;
})), "\n border-radius: ").concat(formVariables.controlBorderRadius, ";\n "),
compressed: /*#__PURE__*/css(logicalCSS('height', mathWithUnits(euiTheme.size.base, function (x) {
return x * 6.5;
})), " border-radius:", formVariables.controlCompressedBorderRadius, ";;label:compressed;")
},
icon: {
euiFilePicker__icon: /*#__PURE__*/css(";label:euiFilePicker__icon;"),
normal: /*#__PURE__*/css("position:absolute;", logicalCSS('top', 0), " ", logicalCSS('height', '100%'), ";;label:normal;"),
uncompressed: "\n ".concat(logicalCSS('left', euiTheme.size.m), "\n "),
compresssed: /*#__PURE__*/css(logicalCSS('left', euiTheme.size.s), " ", logicalCSS('width', euiTheme.size.m), ";;label:compresssed;"),
large: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.base), " ", euiCanAnimate, "{transition:transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";};label:large;")
},
rightIcon: {
euiFilePicker__rightIcon: _ref2,
uncompressed: "\n ".concat(logicalCSS('top', euiTheme.size.m), "\n ").concat(logicalCSS('right', euiTheme.size.m), "\n "),
compressed: /*#__PURE__*/css(logicalCSS('right', euiTheme.size.s), " ", logicalCSS('top', '50%'), " ", logicalCSS('margin-top', mathWithUnits(euiTheme.size.m, function (x) {
return x / -2;
})), ";;label:compressed;")
},
euiFilePicker__clearButton: _ref
};
};