@elastic/eui
Version:
Elastic UI Component Library
66 lines (62 loc) • 5.76 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.euiHeaderVariables = exports.euiHeaderStyles = void 0;
var _react = require("@emotion/react");
var _mixins = require("../../themes/amsterdam/global_styling/mixins");
var _global_styling = require("../../global_styling");
var _services = require("../../services");
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 euiHeaderVariables = function euiHeaderVariables(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
return {
height: euiTheme.size.xxxl,
childHeight: euiTheme.size.xxl
};
};
exports.euiHeaderVariables = euiHeaderVariables;
var euiHeaderStyles = function euiHeaderStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme,
colorMode = euiThemeContext.colorMode;
var _euiHeaderVariables = euiHeaderVariables(euiThemeContext),
height = _euiHeaderVariables.height;
// Curated border color to fade into the shadow without looking too much like a border
// It adds separation between the header and flyout
var borderColor = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.emptyShade, 0.35) : (0, _services.shade)(euiTheme.border.color, 0.03);
return {
euiHeader: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:space-between;", (0, _global_styling.logicalCSS)('height', height), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " ", (0, _mixins.euiShadowSmall)(euiThemeContext), ";;label:euiHeader;"),
// Position
static: /*#__PURE__*/(0, _react.css)("z-index:", Number(euiTheme.levels.header) - 1, ";position:relative;;label:static;"),
fixed: /*#__PURE__*/(0, _react.css)("z-index:", euiTheme.levels.header, ";position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('horizontal', 0), " &+[data-fixed-header]{", (0, _global_styling.logicalCSS)('top', height), ";};label:fixed;"),
// Theme
default: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(borderColor)), ";;label:default;"),
dark: /*#__PURE__*/(0, _react.css)(euiHeaderDarkStyles(euiThemeContext, borderColor), ";label:dark;")
};
};
/**
* The `dark` header is (currently) a bit of a special case. We don't
* actually want to use <EuiThemeProvider colorMode="dark"> inside it
* because that will affect popovers and `SelectableSitewideTemplate`
* as well, which we do not necessarily want to do (?)
*
* It's also possible that the dark header will go away or become unused
* by Kibana in the near future, at which point we can remove this
*/
exports.euiHeaderStyles = euiHeaderStyles;
var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext, defaultBorderColor) {
var euiTheme = euiThemeContext.euiTheme,
colorMode = euiThemeContext.colorMode;
var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
controlPlaceholderText = _euiFormVariables.controlPlaceholderText;
var backgroundColor = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.lightestShade, 0.5) : (0, _services.shade)(euiTheme.colors.darkestShade, 0.28);
var borderColor = colorMode === 'DARK' ? defaultBorderColor : backgroundColor;
return "\n background-color: ".concat(backgroundColor, ";\n ").concat((0, _global_styling.logicalCSS)('border-bottom-color', borderColor), "\n\n .euiHeaderLogo__text,\n .euiHeaderLink,\n .euiHeaderSectionItemButton {\n color: ").concat(euiTheme.colors.ghost, ";\n }\n\n .euiHeaderLink-isActive {\n color: ").concat((0, _services.makeHighContrastColor)(euiTheme.colors.primary)(backgroundColor), ";\n }\n\n .euiHeaderSectionItem {\n &::after {\n background-color: ").concat(colorMode === 'DARK' ? euiTheme.colors.lightestShade : euiTheme.colors.darkShade, ";\n }\n }\n\n .euiHeaderLogo,\n .euiHeaderLink,\n .euiHeaderSectionItemButton {\n &:focus {\n background-color: ").concat((0, _services.shade)(euiTheme.colors.primary, 0.5), ";\n }\n }\n\n .euiHeaderSectionItemButton__notification--badge {\n box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n }\n\n .euiHeaderSectionItemButton__notification--dot {\n stroke: ").concat(backgroundColor, ";\n }\n\n .euiSelectableTemplateSitewide .euiFormControlLayout {\n background-color: transparent;\n\n &--group,\n input {\n box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, "\n ").concat((0, _services.transparentize)(euiTheme.colors.ghost, 0.3), ";\n }\n\n &:not(:focus-within) {\n /* Increase contrast of filled text to be more than placeholder text */\n color: ").concat(euiTheme.colors.ghost, ";\n\n input {\n /* Increase contrast of placeholder text */\n &::placeholder {\n color: ").concat((0, _services.makeHighContrastColor)(controlPlaceholderText, 8)(backgroundColor), ";\n }\n\n /* Inherit color from form control layout */\n color: inherit;\n background-color: transparent;\n }\n\n .euiFormControlLayout__append {\n background-color: transparent;\n color: inherit;\n }\n }\n }\n ");
};