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

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

@ -1,60 +1,68 @@
import { css } from 'emotion'; import { css } from 'emotion';
import { GrafanaTheme } from '@grafana/data'; 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) => {
modal: css` const backdropBackground = selectThemeVariant(
position: fixed; {
z-index: ${theme.zIndex.modal}; light: theme.colors.bodyBg,
background: ${theme.colors.pageBg}; dark: theme.colors.gray25,
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); },
background-clip: padding-box; theme.type
outline: none; );
width: 750px; return {
max-width: 100%; modal: css`
left: 0; position: fixed;
right: 0; z-index: ${theme.zIndex.modal};
margin-left: auto; background: ${theme.colors.pageBg};
margin-right: auto; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
top: 10%; background-clip: padding-box;
`, outline: none;
modalBackdrop: css` width: 750px;
position: fixed; max-width: 100%;
top: 0; left: 0;
right: 0; right: 0;
bottom: 0; margin-left: auto;
left: 0; margin-right: auto;
z-index: ${theme.zIndex.modalBackdrop}; top: 10%;
background-color: ${theme.colors.blueFaint}; `,
opacity: 0.8; modalBackdrop: css`
backdrop-filter: blur(4px); position: fixed;
`, top: 0;
modalHeader: css` right: 0;
background: ${theme.background.pageHeader}; bottom: 0;
box-shadow: ${theme.shadow.pageHeader}; left: 0;
border-bottom: 1px solid ${theme.colors.pageHeaderBorder}; z-index: ${theme.zIndex.modalBackdrop};
display: flex; background-color: ${backdropBackground};
`, opacity: 0.7;
modalHeaderTitle: css` `,
font-size: ${theme.typography.heading.h3}; modalHeader: css`
padding-top: ${theme.spacing.sm}; background: ${theme.background.pageHeader};
margin: 0 ${theme.spacing.md}; box-shadow: ${theme.shadow.pageHeader};
`, border-bottom: 1px solid ${theme.colors.pageHeaderBorder};
modalHeaderIcon: css` display: flex;
margin-right: ${theme.spacing.md}; `,
font-size: inherit; modalHeaderTitle: css`
&:before { font-size: ${theme.typography.heading.h3};
vertical-align: baseline; padding-top: ${theme.spacing.sm};
} margin: 0 ${theme.spacing.md};
`, `,
modalHeaderClose: css` modalHeaderIcon: css`
margin-left: auto; margin-right: ${theme.spacing.md};
padding: 9px ${theme.spacing.d}; font-size: inherit;
`, &:before {
modalContent: css` vertical-align: baseline;
padding: calc(${theme.spacing.d} * 2); }
overflow: auto; `,
width: 100%; modalHeaderClose: css`
max-height: calc(90vh - ${theme.spacing.d} * 2); margin-left: auto;
`, padding: 9px ${theme.spacing.d};
})); `,
modalContent: css`
padding: calc(${theme.spacing.d} * 2);
overflow: auto;
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-bg: $dark-9;
$tight-form-func-highlight-bg: $dark-10; $tight-form-func-highlight-bg: $dark-10;
$modal-backdrop-bg: #353c42; $modal-backdrop-bg: #343b40;
$code-tag-bg: $dark-1; $code-tag-bg: $dark-1;
$code-tag-border: $dark-9; $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-bg: $dark-9;
$tight-form-func-highlight-bg: $dark-10; $tight-form-func-highlight-bg: $dark-10;
$modal-backdrop-bg: #353c42; $modal-backdrop-bg: #343b40;
$code-tag-bg: $dark-1; $code-tag-bg: $dark-1;
$code-tag-border: $dark-9; $code-tag-border: $dark-9;