IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-15 19:22:34 -06:00
Code Issues Packages Projects Releases Wiki Activity

Modals: Unify angular/react modals backdrop color (#22708)

Browse Source
This commit is contained in:
Dominik Prokop 2020-03-11 09:30:08 +01:00 committed by GitHub
parent c6829645c7
commit 4845321b43
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 67 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/grafana-ui/src/components/Modal/getModalStyles.ts
View File

@ -1,8 +1,16 @@
import { css } from 'emotion';
import { GrafanaTheme } from '@grafana/data';
import { stylesFactory } from '../../themes';
import { selectThemeVariant, stylesFactory } from '../../themes';
export const getModalStyles = stylesFactory((theme: GrafanaTheme) => ({
export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
const backdropBackground = selectThemeVariant(
{
light: theme.colors.bodyBg,
dark: theme.colors.gray25,
},
theme.type
);
return {
modal: css`
position: fixed;
z-index: ${theme.zIndex.modal};
@ -25,9 +33,8 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => ({
bottom: 0;
left: 0;
z-index: ${theme.zIndex.modalBackdrop};
background-color: ${theme.colors.blueFaint};
opacity: 0.8;
backdrop-filter: blur(4px);
background-color: ${backdropBackground};
opacity: 0.7;
`,
modalHeader: css`
background: ${theme.background.pageHeader};
@ -57,4 +64,5 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => ({
width: 100%;
max-height: calc(90vh - ${theme.spacing.d} * 2);
`,
}));
};
});

2
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
View File

@ -127,7 +127,7 @@ $divider-border-color: $gray-1;
$tight-form-func-bg: $dark-9;
$tight-form-func-highlight-bg: $dark-10;
$modal-backdrop-bg: #353c42;
$modal-backdrop-bg: #343b40;
$code-tag-bg: $dark-1;
$code-tag-border: $dark-9;

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

@ -130,7 +130,7 @@ $divider-border-color: $gray-1;
$tight-form-func-bg: $dark-9;
$tight-form-func-highlight-bg: $dark-10;
$modal-backdrop-bg: #353c42;
$modal-backdrop-bg: #343b40;
$code-tag-bg: $dark-1;
$code-tag-border: $dark-9;