@elastic/eui
Version:
Elastic UI Component Library
53 lines (50 loc) • 3.39 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 { euiShadowXSmall } from '@elastic/eui-theme-common';
import { logicalCSS } from '../../global_styling';
import { makeHighContrastColor } from '../../services';
export var euiHeaderVariables = function euiHeaderVariables(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
return {
height: euiTheme.size.xxxl,
childHeight: euiTheme.size.xxl,
padding: euiTheme.size.s
};
};
export var euiHeaderStyles = function euiHeaderStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
var _euiHeaderVariables = euiHeaderVariables(euiThemeContext),
height = _euiHeaderVariables.height,
padding = _euiHeaderVariables.padding;
return {
euiHeader: /*#__PURE__*/css("display:flex;justify-content:space-between;", logicalCSS('height', height), " ", logicalCSS('padding-horizontal', padding), " ", logicalCSS('border-bottom', euiTheme.border.thin), " ", euiShadowXSmall(euiThemeContext, {
border: 'none'
}), "&+.euiHeader{clip-path:polygon(0 0, 100% 0, 100% 100vh, 0 100vh);};label:euiHeader;"),
// Position
static: /*#__PURE__*/css("z-index:", Number(euiTheme.levels.header) - 1, ";position:relative;;label:static;"),
fixed: /*#__PURE__*/css("z-index:", Number(euiTheme.levels.header) + 1, ";position:fixed;", logicalCSS('top', 0), " ", logicalCSS('horizontal', 0), ";;label:fixed;"),
// Theme
default: /*#__PURE__*/css("background-color:", euiTheme.components.headerBackground, ";;label:default;"),
dark: /*#__PURE__*/css(euiHeaderDarkStyles(euiThemeContext), ";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
*/
var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
var backgroundColor = euiTheme.components.headerDarkBackground;
return "\n background-color: ".concat(backgroundColor, ";\n\n .euiHeaderLogo__text,\n .euiHeaderLink,\n .euiHeaderSectionItemButton {\n color: ").concat(euiTheme.colors.textGhost, ";\n }\n\n .euiHeaderLink-isActive {\n color: ").concat(makeHighContrastColor(euiTheme.colors.primary)(backgroundColor), ";\n }\n\n .euiHeaderLogo,\n .euiHeaderLink,\n .euiHeaderSectionItemButton {\n &:focus {\n background-color: ").concat(euiTheme.components.headerDarkSectionItemBackgroundFocus, ";\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 ");
};