IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Theme: Updates Alert design and licence warning hook (#32930)

Browse Source 
* Theme: Updates Alert design and licence warning hook

* Updated snapshot

* Updated design

* Updated
This commit is contained in:
Torkel Ödegaard 2021-04-13 18:00:55 +02:00 committed by GitHub
parent 12ceff407b
commit b0c6cad637
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 194 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/grafana-data/src/themes/createPalette.ts
View File

@ -1,5 +1,5 @@
import { merge } from 'lodash';
import { darken, emphasize, getContrastRatio, lighten } from './colorManipulator';
import { alpha, darken, emphasize, getContrastRatio, lighten } from './colorManipulator';
import { colors } from './colors';
import { DeepPartial, ThemePaletteColor } from './types';
@ -75,8 +75,8 @@ class DarkPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
mode: ThemePaletteMode = 'dark';
text = {
primary: 'rgba(255, 255, 255, 0.75)',
secondary: 'rgba(255, 255, 255, 0.50)',
primary: 'rgba(255, 255, 255, 0.77)',
secondary: 'rgba(255, 255, 255, 0.55)',
disabled: 'rgba(255, 255, 255, 0.35)',
link: colors.blueDarkText,
maxContrast: colors.white,
@ -188,7 +188,6 @@ class LightPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
divider = 'rgba(0, 2, 78, 0.07)';
border0 = this.layer1;
border1 = 'rgba(0, 2, 78, 0.20)';
border2 = 'rgba(0, 2, 78, 0.30)';
@ -246,11 +245,14 @@ export function createPalette(palette: ThemePaletteInput): ThemePalette {
color.text = color.main;
}
if (!color.border) {
color.text = color.text;
color.border = color.text;
}
if (!color.shade) {
color.shade = base.mode === 'light' ? darken(color.main, tonalOffset) : lighten(color.main, tonalOffset);
}
if (!color.transparent) {
color.transparent = base.mode === 'light' ? alpha(color.main, 0.08) : alpha(color.main, 0.15);
}
if (!color.contrastText) {
color.contrastText = getContrastText(color.main);
}

8
packages/grafana-data/src/themes/createShadows.ts
View File

@ -22,9 +22,9 @@ function createDarkShadow(...px: number[]) {
}
function createLightShadow(...px: number[]) {
const shadowKeyUmbraOpacity = 0.2;
const shadowKeyPenumbraOpacity = 0.14;
const shadowAmbientShadowOpacity = 0.12;
const shadowKeyUmbraOpacity = 0.15;
const shadowKeyPenumbraOpacity = 0.1;
const shadowAmbientShadowOpacity = 0.1;
return [
`${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0,0,0,${shadowKeyUmbraOpacity})`,
@ -50,6 +50,6 @@ export function createShadows(palette: ThemePalette): ThemeShadows {
z1: createLightShadow(0, 1, 1, -1, 0, 1, 2, 0, 0, 1, 3, 0),
z2: createLightShadow(0, 2, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0),
z3: createLightShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0),
z4: createLightShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2),
z4: createLightShadow(0, 5, 5, -5, 0, 8, 10, 1, 0, 3, 14, 2),
};
}

7
packages/grafana-ui/src/components/Alert/Alert.story.tsx
View File

@ -36,12 +36,17 @@ export const Examples: Story<Props> = ({ severity, title, buttonContent }) => {
buttonContent={<span>{buttonContent}</span>}
onRemove={action('Remove button clicked')}
>
Child content that includes some alert details, like maybe what actually happened.
<VerticalGroup>
<div>Child content that includes some alert details, like maybe what actually happened.</div>
</VerticalGroup>
</Alert>
</StoryExample>
<StoryExample name="No dismiss">
<Alert title={title} severity={severity} />
</StoryExample>
<StoryExample name="Elevated alert used for absolute positioned alerts">
<Alert title={title} severity={severity} elevated />
</StoryExample>
<StoryExample name="Severities">
<VerticalGroup>
{severities.map((severity) => (

99
packages/grafana-ui/src/components/Alert/Alert.tsx
View File

@ -5,7 +5,8 @@ import { selectors } from '@grafana/e2e-selectors';
import { useTheme } from '../../themes';
import { Icon } from '../Icon/Icon';
import { IconName } from '../../types/icon';
import { getColorsFromSeverity } from '../../utils/colors';
import { IconButton } from '../IconButton/IconButton';
import { Button } from '../Button/Button';
export type AlertVariant = 'success' | 'warning' | 'error' | 'info';
@ -15,14 +16,8 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
onRemove?: (event: React.MouseEvent) => void;
severity?: AlertVariant;
children?: ReactNode;
/** Custom component or text for alert button */
buttonContent?: ReactNode | string;
/** @deprecated */
/** Deprecated use onRemove instead */
onButtonClick?: (event: React.MouseEvent) => void;
/** @deprecated */
/** Deprecated use buttonContent instead */
buttonText?: string;
elevated?: boolean;
buttonContent?: React.ReactNode | string;
}
function getIconFromSeverity(severity: AlertVariant): string {
@ -40,9 +35,9 @@ function getIconFromSeverity(severity: AlertVariant): string {
}
export const Alert: FC<Props> = React.forwardRef<HTMLDivElement, Props>(
({ title, buttonText, onButtonClick, onRemove, children, buttonContent, severity = 'error', ...restProps }, ref) => {
({ title, onRemove, children, buttonContent, elevated, severity = 'error', ...restProps }, ref) => {
const theme = useTheme();
const styles = getStyles(theme, severity, !!buttonContent);
const styles = getStyles(theme, severity, elevated);
return (
<div ref={ref} className={styles.alert} aria-label={selectors.components.Alert.alert(severity)} {...restProps}>
@ -54,15 +49,18 @@ export const Alert: FC<Props> = React.forwardRef<HTMLDivElement, Props>(
{children && <div>{children}</div>}
</div>
{/* If onRemove is specified, giving preference to onRemove */}
{onRemove ? (
<button type="button" className={styles.close} onClick={onRemove}>
{buttonContent || <Icon name="times" size="lg" />}
</button>
) : onButtonClick ? (
<button type="button" className="btn btn-outline-danger" onClick={onButtonClick}>
{buttonText}
</button>
) : null}
{onRemove && !buttonContent && (
<div className={styles.close}>
<IconButton name="times" onClick={onRemove} size="lg" />
</div>
)}
{onRemove && buttonContent && (
<div className={styles.buttonWrapper}>
<Button variant="secondary" onClick={onRemove}>
{buttonContent}
</Button>
</div>
)}
</div>
);
}
@ -70,54 +68,65 @@ export const Alert: FC<Props> = React.forwardRef<HTMLDivElement, Props>(
Alert.displayName = 'Alert';
const getStyles = (theme: GrafanaTheme, severity: AlertVariant, outline: boolean) => {
const { white } = theme.palette;
const severityColors = getColorsFromSeverity(severity, theme);
const background = css`
background: linear-gradient(90deg, ${severityColors[0]}, ${severityColors[0]});
`;
const getStyles = (theme: GrafanaTheme, severity: AlertVariant, elevated?: boolean) => {
const color = theme.v2.palette[severity];
return {
alert: css`
flex-grow: 1;
padding: 15px 20px;
margin-bottom: ${theme.spacing.xs};
margin-bottom: ${theme.v2.spacing(0.5)};
position: relative;
color: ${white};
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
border-radius: ${theme.border.radius.md};
border-radius: ${theme.v2.shape.borderRadius()};
display: flex;
flex-direction: row;
align-items: center;
${background}
align-items: stretch;
background: ${theme.v2.palette.layer2};
box-shadow: ${elevated ? theme.v2.shadows.z4 : theme.v2.shadows.z1};
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: ${theme.v2.palette.layer1};
z-index: -1;
}
`,
icon: css`
padding: 0 ${theme.spacing.md} 0 0;
padding: ${theme.v2.spacing(2, 3)};
background: ${color.main};
color: ${color.contrastText};
display: flex;
align-items: center;
justify-content: center;
width: 35px;
`,
title: css`
font-weight: ${theme.typography.weight.semibold};
font-weight: ${theme.v2.typography.fontWeightMedium};
color: ${theme.v2.palette.text.primary};
`,
body: css`
color: ${theme.v2.palette.text.secondary};
padding: ${theme.v2.spacing(2)};
flex-grow: 1;
margin: 0 ${theme.spacing.md} 0 0;
display: flex;
flex-direction: column;
justify-content: center;
overflow-wrap: break-word;
word-break: break-word;
a {
color: ${white};
text-decoration: underline;
}
`,
close: css`
buttonWrapper: css`
padding: ${theme.v2.spacing(1)};
background: none;
display: flex;
align-items: center;
border: ${outline ? `1px solid ${white}` : 'none'};
border-radius: ${theme.border.radius.sm};
`,
close: css`
padding: ${theme.v2.spacing(1)};
background: none;
align-items: center;
display: flex;
`,
};
};

8
packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx
View File

@ -17,13 +17,13 @@ export const AlphaNotice: FC<Props> = ({ state, text, className }) => {
const styles = cx(
className,
css`
background: linear-gradient(to bottom, ${theme.palette.blue85}, ${theme.palette.blue77});
color: ${theme.palette.gray7};
background: ${theme.v2.palette.primary.transparent};
color: ${theme.v2.palette.text.secondary};
white-space: nowrap;
border-radius: 3px;
text-shadow: none;
font-size: 13px;
padding: 4px 8px;
font-size: ${theme.v2.typography.size.sm};
padding: 0 8px;
cursor: help;
display: inline-block;
`

5
packages/grafana-ui/src/components/IconButton/IconButton.tsx
View File

@ -7,6 +7,7 @@ import { useTheme } from '../../themes/ThemeContext';
import { GrafanaTheme } from '@grafana/data';
import { Tooltip } from '../Tooltip/Tooltip';
import { TooltipPlacement } from '../Tooltip/PopoverController';
import { focusCss } from '../../themes/mixins';
export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
/** Name of the icon **/
@ -97,6 +98,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme, size: IconSize) => {
transition-property: transform, opacity;
}
&:focus {
${focusCss(theme)}
}
&:hover {
color: ${theme.colors.linkHover};

110
packages/grafana-ui/src/components/InfoBox/InfoBox.tsx
View File

@ -8,7 +8,6 @@ import { AlertVariant } from '../Alert/Alert';
import panelArtDark from './panelArt_dark.svg';
import panelArtLight from './panelArt_light.svg';
import { stylesFactory, useTheme } from '../../themes';
import { getColorsFromSeverity } from '../../utils/colors';
export interface InfoBoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
children: React.ReactNode;
@ -57,61 +56,66 @@ export const InfoBox = React.memo(
);
InfoBox.displayName = 'InfoBox';
const getInfoBoxStyles = stylesFactory((theme: GrafanaTheme, severity: AlertVariant) => ({
wrapper: css`
position: relative;
padding: ${theme.spacing.md};
background-color: ${theme.colors.bg2};
border-top: 3px solid ${getColorsFromSeverity(severity, theme)[0]};
margin-bottom: ${theme.spacing.md};
flex-grow: 1;
color: ${theme.colors.textSemiWeak};
const getInfoBoxStyles = stylesFactory((theme: GrafanaTheme, severity: AlertVariant) => {
const color = theme.v2.palette[severity];
code {
font-size: ${theme.typography.size.sm};
background-color: ${theme.colors.bg1};
color: ${theme.colors.text};
border: 1px solid ${theme.colors.border2};
border-radius: 4px;
}
return {
wrapper: css`
position: relative;
padding: ${theme.spacing.md};
background-color: ${theme.colors.bg2};
border-left: 3px solid ${color.border};
margin-bottom: ${theme.spacing.md};
flex-grow: 1;
color: ${theme.colors.textSemiWeak};
box-shadow: ${theme.v2.shadows.z1};
p:last-child {
margin-bottom: 0;
}
code {
font-size: ${theme.typography.size.sm};
background-color: ${theme.colors.bg1};
color: ${theme.colors.text};
border: 1px solid ${theme.colors.border2};
border-radius: 4px;
}
&--max-lg {
max-width: ${theme.breakpoints.lg};
}
`,
wrapperBranded: css`
padding: ${theme.spacing.md};
border-radius: ${theme.border.radius.md};
position: relative;
z-index: 0;
p:last-child {
margin-bottom: 0;
}
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(${theme.isLight ? panelArtLight : panelArtDark});
&--max-lg {
max-width: ${theme.breakpoints.lg};
}
`,
wrapperBranded: css`
padding: ${theme.spacing.md};
border-radius: ${theme.border.radius.md};
background-position: 50% 50%;
background-size: cover;
filter: saturate(80%);
z-index: -1;
}
position: relative;
z-index: 0;
p:last-child {
margin-bottom: 0;
}
`,
docsLink: css`
display: inline-block;
margin-top: ${theme.spacing.md};
font-size: ${theme.typography.size.sm};
color: ${theme.colors.textSemiWeak};
`,
}));
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(${theme.isLight ? panelArtLight : panelArtDark});
border-radius: ${theme.border.radius.md};
background-position: 50% 50%;
background-size: cover;
filter: saturate(80%);
z-index: -1;
}
p:last-child {
margin-bottom: 0;
}
`,
docsLink: css`
display: inline-block;
margin-top: ${theme.spacing.md};
font-size: ${theme.typography.size.sm};
color: ${theme.colors.textSemiWeak};
`,
};
});

22
packages/grafana-ui/src/utils/colors.ts
View File

@ -6,8 +6,6 @@ import zip from 'lodash/zip';
import tinycolor from 'tinycolor2';
import lightTheme from '../themes/light';
import darkTheme from '../themes/dark';
import { GrafanaTheme } from '@grafana/data';
import { AlertVariant } from '../components/Alert/Alert';
const PALETTE_ROWS = 4;
@ -126,23 +124,3 @@ export function getTextColorForBackground(color: string) {
}
export let sortedColors = sortColorsByHue(colors);
/**
* Returns colors used for severity color coding. Use for single color retrievel(0 index) or gradient definition
* @internal
**/
export function getColorsFromSeverity(severity: AlertVariant, theme: GrafanaTheme): [string, string] {
switch (severity) {
case 'error':
return [theme.palette.redBase, theme.palette.redShade];
case 'warning':
return [theme.palette.queryOrange, theme.palette.orange];
case 'info':
case 'info':
return [theme.palette.blue80, theme.palette.blue77];
case 'success':
return [theme.palette.greenBase, theme.palette.greenShade];
default:
return [theme.palette.blue80, theme.palette.blue77];
}
}

12
public/app/AppWrapper.tsx
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { ComponentType } from 'react';
import { Router, Route, Redirect, Switch } from 'react-router-dom';
import { config, locationService, navigationLogger } from '@grafana/runtime';
import { Provider } from 'react-redux';
@ -22,6 +22,13 @@ interface AppWrapperState {
ngInjector: any;
}
/** Used by enterprise */
let bodyRenderHooks: ComponentType[] = [];
export function addBodyRenderHook(fn: ComponentType) {
bodyRenderHooks.push(fn);
}
export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState> {
container = React.createRef<HTMLDivElement>();
@ -98,6 +105,9 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState
<AppNotificationList />
<SearchWrapper />
{this.state.ngInjector && this.container && this.renderRoutes()}
{bodyRenderHooks.map((Hook, index) => (
<Hook key={index.toString()} />
))}
</div>
</Router>
</div>

1
public/app/core/components/AppNotifications/AppNotificationItem.tsx
View File

@ -27,6 +27,7 @@ export default class AppNotificationItem extends Component<Props> {
severity={appNotification.severity}
title={appNotification.title}
onRemove={() => onClearNotification(appNotification.id)}
elevated
>
{appNotification.component || appNotification.text}
</Alert>

4
public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
View File

@ -8,7 +8,7 @@ exports[`Render should render component 1`] = `
onCancel={[Function]}
styles={
Object {
"actionsRow": "css-7gkft9",
"actionsRow": "css-sxfls",
"actionsWrapper": "css-gxxmom",
"backButton": "css-1cdxa9p",
"headerRow": "css-3sdqvi",
@ -25,7 +25,7 @@ exports[`Render should render component 1`] = `
className="css-gxxmom"
>
<div
className="css-7gkft9"
className="css-sxfls"
>
<div
aria-label="Add new panel"

21
public/app/features/datasources/settings/ButtonRow.tsx
View File

@ -2,6 +2,7 @@ import React, { FC } from 'react';
import { selectors } from '@grafana/e2e-selectors';
import config from 'app/core/config';
import { Button, LinkButton } from '@grafana/ui';
export interface Props {
isReadOnly: boolean;
@ -14,33 +15,33 @@ const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit, onTest }) => {
return (
<div className="gf-form-button-row">
{!isReadOnly && (
<button
<Button
type="submit"
className="btn btn-primary"
variant="primary"
disabled={isReadOnly}
onClick={(event) => onSubmit(event)}
aria-label={selectors.pages.DataSource.saveAndTest}
>
Save &amp; test
</button>
</Button>
)}
{isReadOnly && (
<button type="submit" className="btn btn-success" onClick={onTest}>
<Button type="submit" variant="primary" onClick={onTest}>
Test
</button>
</Button>
)}
<button
<Button
type="button"
className="btn btn-danger"
variant="destructive"
disabled={isReadOnly}
onClick={onDelete}
aria-label={selectors.pages.DataSource.delete}
>
Delete
</button>
<a className="btn btn-inverse" href={`${config.appSubUrl}/datasources`}>
</Button>
<LinkButton variant="link" href={`${config.appSubUrl}/datasources`}>
Back
</a>
</LinkButton>
</div>
);
};

2
public/app/features/datasources/settings/DataSourceSettingsPage.tsx
View File

@ -233,7 +233,7 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
/>
)}
<div className="gf-form-group">
<div className="gf-form-group p-t-2">
{testingStatus?.message && (
<Alert
severity={testingStatus.status === 'error' ? 'error' : 'success'}

36
public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap
View File

@ -4,28 +4,28 @@ exports[`Render should render component 1`] = `
<div
className="gf-form-button-row"
>
<button
className="btn btn-success"
<Button
onClick={[MockFunction]}
type="submit"
variant="primary"
>
Test
</button>
<button
</Button>
<Button
aria-label="Data source settings page Delete button"
className="btn btn-danger"
disabled={true}
onClick={[MockFunction]}
type="button"
variant="destructive"
>
Delete
</button>
<a
className="btn btn-inverse"
</Button>
<LinkButton
href="/datasources"
variant="link"
>
Back
</a>
</LinkButton>
</div>
`;
@ -33,29 +33,29 @@ exports[`Render should render with buttons enabled 1`] = `
<div
className="gf-form-button-row"
>
<button
<Button
aria-label="Data source settings page Save and Test button"
className="btn btn-primary"
disabled={false}
onClick={[Function]}
type="submit"
variant="primary"
>
Save & test
</button>
<button
</Button>
<Button
aria-label="Data source settings page Delete button"
className="btn btn-danger"
disabled={false}
onClick={[MockFunction]}
type="button"
variant="destructive"
>
Delete
</button>
<a
className="btn btn-inverse"
</Button>
<LinkButton
href="/datasources"
variant="link"
>
Back
</a>
</LinkButton>
</div>
`;

11
public/app/features/plugins/PluginStateInfo.tsx
View File

@ -1,7 +1,6 @@
import React, { FC } from 'react';
import { AlphaNotice } from '@grafana/ui';
import { PluginState } from '@grafana/data';
import { css } from '@emotion/css';
interface Props {
state?: PluginState;
@ -24,15 +23,7 @@ const PluginStateinfo: FC<Props> = (props) => {
return null;
}
return (
<AlphaNotice
state={props.state}
text={text}
className={css`
margin-left: 16px;
`}
/>
);
return <AlphaNotice state={props.state} text={text} />;
};
export default PluginStateinfo;

14
public/sass/_variables.dark.generated.scss
View File

@ -99,8 +99,8 @@ $page-bg: #181b1f;
$dashboard-bg: #0d0f16;
$text-color-strong: #fff;
$text-color: rgba(255, 255, 255, 0.75);
$text-color-semi-weak: rgba(255, 255, 255, 0.50);
$text-color: rgba(255, 255, 255, 0.77);
$text-color-semi-weak: rgba(255, 255, 255, 0.55);
$text-color-weak: rgba(255, 255, 255, 0.35);
$text-color-faint: rgba(255, 255, 255, 0.35);
$text-color-emphasis: #fff;
@ -122,7 +122,7 @@ $external-link-color: #33a2e5;
// Typography
// -------------------------
$headings-color: rgba(255, 255, 255, 0.75);
$headings-color: rgba(255, 255, 255, 0.77);
$abbr-border-color: $gray-2 !default;
$text-muted: $text-color-weak;
@ -258,7 +258,7 @@ $side-menu-border: none;
$side-menu-item-hover-bg: #22252b;
$side-menu-shadow: 0 0 20px black;
$side-menu-icon-color: #9fa7b3;
$side-menu-header-color: rgba(255, 255, 255, 0.75);
$side-menu-header-color: rgba(255, 255, 255, 0.77);
// Menu dropdowns
// -------------------------
@ -288,13 +288,13 @@ $tooltipLinkColor: $link-color;
$graph-tooltip-bg: $dark-1;
$tooltipBackground: #22252b;
$tooltipColor: rgba(255, 255, 255, 0.75);
$tooltipColor: rgba(255, 255, 255, 0.77);
$tooltipArrowColor: #22252b;
$tooltipBackgroundError: #D10E5C;
$tooltipShadow: 0px 3px 1px -2px rgba(0,0,0,0.5),0px 2px 2px 0px rgba(0,0,0,0.4),0px 1px 5px 0px rgba(0,0,0,0.3);
$popover-bg: #22252b;
$popover-color: rgba(255, 255, 255, 0.75);
$popover-color: rgba(255, 255, 255, 0.77);
$popover-border-color: rgba(218,224,254,0.15);
$popover-header-bg: #22252b;
$popover-shadow: 0px 5px 5px -3px rgba(0,0,0,0.5),0px 8px 10px 1px rgba(0,0,0,0.4),0px 3px 14px 2px rgba(0,0,0,0.3);
@ -339,7 +339,7 @@ $diff-group-bg: #22252b;
$diff-arrow-color: $white;
$diff-json-bg: #22252b;
$diff-json-fg: rgba(255, 255, 255, 0.75);
$diff-json-fg: rgba(255, 255, 255, 0.77);
$diff-json-added: $blue-shade;
$diff-json-deleted: $red-shade;

8
public/sass/_variables.light.generated.scss
View File

@ -127,7 +127,7 @@ $hr-border-color: $gray-4 !default;
$panel-bg: #fff;
$panel-border: #fff;
$panel-header-hover-bg: rgba(0, 0, 0, 0.04);
$panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.2),0px 0px 0px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
$panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.15),0px 0px 0px 0px rgba(0,0,0,0.1),0px 1px 3px 0px rgba(0,0,0,0.1);
$panel-corner: $panel-bg;
// Page header
@ -260,7 +260,7 @@ $side-menu-header-color: #e9edf2;
// -------------------------
$menu-dropdown-bg: #F7F7F8;
$menu-dropdown-hover-bg: rgba(0, 0, 0, 0.04);
$menu-dropdown-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
$menu-dropdown-shadow: 0px 2px 4px -1px rgba(0,0,0,0.15),0px 4px 5px 0px rgba(0,0,0,0.1),0px 1px 10px 0px rgba(0,0,0,0.1);
// Tabs
// -------------------------
@ -282,13 +282,13 @@ $tooltipBackground: #F7F7F8;
$tooltipColor: rgba(0, 0, 0, 0.75);
$tooltipArrowColor: #F7F7F8;
$tooltipBackgroundError: #E0226E;
$tooltipShadow: 0px 2px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
$tooltipShadow: 0px 2px 1px -2px rgba(0,0,0,0.15),0px 2px 2px 0px rgba(0,0,0,0.1),0px 1px 5px 0px rgba(0,0,0,0.1);
$popover-bg: #F7F7F8;
$popover-color: rgba(0, 0, 0, 0.75);
$popover-border-color: rgba(0, 2, 78, 0.20);
$popover-header-bg: #F7F7F8;
$popover-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
$popover-shadow: 0px 5px 5px -5px rgba(0,0,0,0.15),0px 8px 10px 1px rgba(0,0,0,0.1),0px 3px 14px 2px rgba(0,0,0,0.1);
$graph-tooltip-bg: $gray-5;

2
public/sass/components/_infobox.scss
View File

@ -2,7 +2,7 @@
position: relative;
padding: $space-lg;
background-color: $empty-list-cta-bg;
border-top: 3px solid $info-box-border-color;
border-left: 3px solid $info-box-border-color;
margin-bottom: $space-md;
margin-right: $space-xs;
box-shadow: $card-shadow;