mirror of https://github.com/grafana/grafana.git
Chore: Convert some core components to use emotion object styles (#78607)
* convert some core components to use emotion object styles * remove enabled: true * use radius.default
This commit is contained in:
Ashley Harrison
GitHub
parent
23c7211f1d
commit
c70467c4c9
|
|
@ -1,5 +1,5 @@
|
|||
// BETTERER RESULTS V2.
|
||||
//
|
||||
//
|
||||
// If this file contains merge conflicts, use `betterer merge` to automatically resolve them:
|
||||
// https://phenomnomnominal.github.io/betterer/docs/results-file/#merge
|
||||
//
|
||||
|
|
@ -1091,9 +1091,6 @@ exports[`better eslint`] = {
|
|||
[0, 0, 0, "Unexpected any. Specify a different type.", "5"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "6"]
|
||||
],
|
||||
"public/app/core/components/AppChrome/MegaMenu/NavFeatureHighlight.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/core/components/AppChrome/News/NewsContainer.tsx:5381": [
|
||||
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
|
||||
],
|
||||
|
|
@ -1106,35 +1103,9 @@ exports[`better eslint`] = {
|
|||
"public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/core/components/Branding/Branding.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
||||
],
|
||||
"public/app/core/components/CardButton.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/core/components/CloseButton/CloseButton.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/core/components/Divider.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
||||
],
|
||||
"public/app/core/components/DynamicImports/SafeDynamicImport.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||
],
|
||||
"public/app/core/components/EmptyListCTA/EmptyListCTA.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "2"]
|
||||
],
|
||||
"public/app/core/components/FolderFilter/FolderFilter.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
||||
],
|
||||
"public/app/core/components/ForgottenPassword/ForgottenPassword.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/core/components/GraphNG/GraphNG.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],
|
||||
|
|
@ -1152,40 +1123,9 @@ exports[`better eslint`] = {
|
|||
"public/app/core/components/GraphNG/hooks.ts:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||
],
|
||||
"public/app/core/components/Layers/LayerDragDropList.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "2"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "3"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "4"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "5"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "6"]
|
||||
],
|
||||
"public/app/core/components/Layers/LayerName.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "2"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "3"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "4"]
|
||||
],
|
||||
"public/app/core/components/NestedFolderPicker/Trigger.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/core/components/NodeGraphSettings.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "2"]
|
||||
],
|
||||
"public/app/core/components/OptionsUI/color.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "2"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "3"]
|
||||
],
|
||||
"public/app/core/components/OptionsUI/fieldColor.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
||||
],
|
||||
"public/app/core/components/OptionsUI/registry.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],
|
||||
|
|
@ -1267,17 +1207,6 @@ exports[`better eslint`] = {
|
|||
[0, 0, 0, "Do not use any type assertions.", "77"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "78"]
|
||||
],
|
||||
"public/app/core/components/OptionsUI/slider.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/core/components/OptionsUI/strings.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
||||
],
|
||||
"public/app/core/components/OptionsUI/units.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
||||
],
|
||||
"public/app/core/components/PageHeader/PageHeader.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
||||
|
|
|
|||
|
|
@ -20,15 +20,15 @@ export const NavFeatureHighlight = ({ children }: Props): JSX.Element => {
|
|||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
highlight: css`
|
||||
background-color: ${theme.colors.success.main};
|
||||
border-radius: ${theme.shape.radius.circle};
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
`,
|
||||
highlight: css({
|
||||
backgroundColor: theme.colors.success.main,
|
||||
borderRadius: theme.shape.radius.circle,
|
||||
width: '6px',
|
||||
height: '6px',
|
||||
display: 'inline-block',
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
|
|||
import React, { FC } from 'react';
|
||||
|
||||
import { colorManipulator } from '@grafana/data';
|
||||
import { useTheme2, styleMixins } from '@grafana/ui';
|
||||
import { useTheme2 } from '@grafana/ui';
|
||||
|
||||
export interface BrandComponentProps {
|
||||
className?: string;
|
||||
|
|
@ -16,28 +16,28 @@ export const LoginLogo: FC<BrandComponentProps & { logo?: string }> = ({ classNa
|
|||
const LoginBackground: FC<BrandComponentProps> = ({ className, children }) => {
|
||||
const theme = useTheme2();
|
||||
|
||||
const background = css`
|
||||
&:before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
background: url(public/img/g8_login_${theme.isDark ? 'dark' : 'light'}.svg);
|
||||
background-position: top center;
|
||||
background-size: auto;
|
||||
background-repeat: no-repeat;
|
||||
const background = css({
|
||||
'&:before': {
|
||||
content: '""',
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
background: `url(public/img/g8_login_${theme.isDark ? 'dark' : 'light'}.svg)`,
|
||||
backgroundPosition: 'top center',
|
||||
backgroundSize: 'auto',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity 3s ease-in-out;
|
||||
opacity: 0,
|
||||
transition: 'opacity 3s ease-in-out',
|
||||
|
||||
@media ${styleMixins.mediaUp(theme.v1.breakpoints.md)} {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
`;
|
||||
[theme.breakpoints.up('md')]: {
|
||||
backgroundPosition: 'center',
|
||||
backgroundSize: 'cover',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return <div className={cx(background, className)}>{children}</div>;
|
||||
};
|
||||
|
|
@ -48,10 +48,10 @@ const MenuLogo: FC<BrandComponentProps> = ({ className }) => {
|
|||
|
||||
const LoginBoxBackground = () => {
|
||||
const theme = useTheme2();
|
||||
return css`
|
||||
background: ${colorManipulator.alpha(theme.colors.background.primary, 0.7)};
|
||||
background-size: cover;
|
||||
`;
|
||||
return css({
|
||||
background: colorManipulator.alpha(theme.colors.background.primary, 0.7),
|
||||
backgroundSize: 'cover',
|
||||
});
|
||||
};
|
||||
|
||||
export class Branding {
|
||||
|
|
|
|||
|
|
@ -27,27 +27,26 @@ CardButton.displayName = 'CardButton';
|
|||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
action: css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
action: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
|
||||
justify-self: center;
|
||||
cursor: pointer;
|
||||
background: ${theme.colors.background.secondary};
|
||||
border-radius: ${theme.shape.radius.default};
|
||||
color: ${theme.colors.text.primary};
|
||||
border: unset;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justifySelf: 'center',
|
||||
cursor: 'pointer',
|
||||
background: theme.colors.background.secondary,
|
||||
borderRadius: theme.shape.radius.default,
|
||||
color: theme.colors.text.primary,
|
||||
border: 'unset',
|
||||
width: '100%',
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
textAlign: 'center',
|
||||
|
||||
&:hover {
|
||||
background: ${theme.colors.emphasize(theme.colors.background.secondary)};
|
||||
}
|
||||
`,
|
||||
'&:hover': {
|
||||
background: theme.colors.emphasize(theme.colors.background.secondary),
|
||||
},
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -24,8 +24,9 @@ export const CloseButton = ({ onClick, 'aria-label': ariaLabel, style }: Props)
|
|||
);
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => css`
|
||||
position: absolute;
|
||||
right: ${theme.spacing(0.5)};
|
||||
top: ${theme.spacing(1)};
|
||||
`;
|
||||
const getStyles = (theme: GrafanaTheme2) =>
|
||||
css({
|
||||
position: 'absolute',
|
||||
right: theme.spacing(0.5),
|
||||
top: theme.spacing(1),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@ export const Divider = ({ hideLine = false }) => {
|
|||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
divider: css`
|
||||
margin: ${theme.spacing(4, 0)};
|
||||
`,
|
||||
dividerHideLine: css`
|
||||
border: none;
|
||||
margin: ${theme.spacing(3, 0)};
|
||||
`,
|
||||
divider: css({
|
||||
margin: theme.spacing(4, 0),
|
||||
}),
|
||||
dividerHideLine: css({
|
||||
border: 'none',
|
||||
margin: theme.spacing(3, 0),
|
||||
}),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -19,14 +19,14 @@ export interface Props {
|
|||
infoBoxTitle?: string;
|
||||
}
|
||||
|
||||
const ctaStyle = css`
|
||||
text-align: center;
|
||||
`;
|
||||
const ctaStyle = css({
|
||||
textAlign: 'center',
|
||||
});
|
||||
|
||||
const infoBoxStyles = css`
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
`;
|
||||
const infoBoxStyles = css({
|
||||
maxWidth: '700px',
|
||||
margin: '0 auto',
|
||||
});
|
||||
|
||||
const EmptyListCTA = ({
|
||||
title,
|
||||
|
|
@ -71,9 +71,9 @@ const EmptyListCTA = ({
|
|||
};
|
||||
|
||||
const ctaElementClassName = !footer()
|
||||
? css`
|
||||
margin-bottom: 20px;
|
||||
`
|
||||
? css({
|
||||
marginBottom: '20px',
|
||||
})
|
||||
: '';
|
||||
|
||||
const ButtonEl = buttonLink ? LinkButton : Button;
|
||||
|
|
|
|||
|
|
@ -85,18 +85,18 @@ async function getFoldersAsOptions(
|
|||
|
||||
function getStyles(theme: GrafanaTheme2) {
|
||||
return {
|
||||
container: css`
|
||||
label: container;
|
||||
position: relative;
|
||||
min-width: 180px;
|
||||
flex-grow: 1;
|
||||
`,
|
||||
clear: css`
|
||||
label: clear;
|
||||
font-size: ${theme.spacing(1.5)};
|
||||
position: absolute;
|
||||
top: -${theme.spacing(4.5)};
|
||||
right: 0;
|
||||
`,
|
||||
container: css({
|
||||
label: 'container',
|
||||
position: 'relative',
|
||||
minWidth: '180px',
|
||||
flexGrow: 1,
|
||||
}),
|
||||
clear: css({
|
||||
label: 'clear',
|
||||
fontSize: theme.spacing(1.5),
|
||||
position: 'absolute',
|
||||
top: -theme.spacing(4.5),
|
||||
right: 0,
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,13 +10,14 @@ interface EmailDTO {
|
|||
userOrEmail: string;
|
||||
}
|
||||
|
||||
const paragraphStyles = (theme: GrafanaTheme2) => css`
|
||||
color: ${theme.colors.text.secondary};
|
||||
font-size: ${theme.typography.bodySmall.fontSize};
|
||||
font-weight: ${theme.typography.fontWeightRegular};
|
||||
margin-top: ${theme.spacing(1)};
|
||||
display: block;
|
||||
`;
|
||||
const paragraphStyles = (theme: GrafanaTheme2) =>
|
||||
css({
|
||||
color: theme.colors.text.secondary,
|
||||
fontSize: theme.typography.bodySmall.fontSize,
|
||||
fontWeight: theme.typography.fontWeightRegular,
|
||||
marginTop: theme.spacing(1),
|
||||
display: 'block',
|
||||
});
|
||||
|
||||
export const ForgottenPassword = () => {
|
||||
const [emailSent, setEmailSent] = useState(false);
|
||||
|
|
|
|||
|
|
@ -127,49 +127,49 @@ LayerDragDropList.defaultProps = {
|
|||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
wrapper: css`
|
||||
margin-bottom: ${theme.spacing(2)};
|
||||
`,
|
||||
row: css`
|
||||
padding: ${theme.spacing(0.5, 1)};
|
||||
border-radius: ${theme.shape.radius.default};
|
||||
background: ${theme.colors.background.secondary};
|
||||
min-height: ${theme.spacing(4)};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 3px;
|
||||
cursor: pointer;
|
||||
wrapper: css({
|
||||
marginBottom: theme.spacing(2),
|
||||
}),
|
||||
row: css({
|
||||
padding: theme.spacing(0.5, 1),
|
||||
borderRadius: theme.shape.radius.default,
|
||||
background: theme.colors.background.secondary,
|
||||
minHeight: theme.spacing(4),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: '3px',
|
||||
cursor: 'pointer',
|
||||
|
||||
border: 1px solid ${theme.components.input.borderColor};
|
||||
&:hover {
|
||||
border: 1px solid ${theme.components.input.borderHover};
|
||||
}
|
||||
`,
|
||||
sel: css`
|
||||
border: 1px solid ${theme.colors.primary.border};
|
||||
&:hover {
|
||||
border: 1px solid ${theme.colors.primary.border};
|
||||
}
|
||||
`,
|
||||
dragIcon: css`
|
||||
cursor: drag;
|
||||
`,
|
||||
actionIcon: css`
|
||||
color: ${theme.colors.text.secondary};
|
||||
&:hover {
|
||||
color: ${theme.colors.text};
|
||||
}
|
||||
`,
|
||||
typeWrapper: css`
|
||||
color: ${theme.colors.primary.text};
|
||||
margin-right: 5px;
|
||||
`,
|
||||
textWrapper: css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
margin-right: ${theme.spacing(1)};
|
||||
`,
|
||||
border: `1px solid ${theme.components.input.borderColor}`,
|
||||
'&:hover': {
|
||||
border: `1px solid ${theme.components.input.borderHover}`,
|
||||
},
|
||||
}),
|
||||
sel: css({
|
||||
border: `1px solid ${theme.colors.primary.border}`,
|
||||
'&:hover': {
|
||||
border: `1px solid ${theme.colors.primary.border}`,
|
||||
},
|
||||
}),
|
||||
dragIcon: css({
|
||||
cursor: 'drag',
|
||||
}),
|
||||
actionIcon: css({
|
||||
color: theme.colors.text.secondary,
|
||||
'&:hover': {
|
||||
color: theme.colors.text.primary,
|
||||
},
|
||||
}),
|
||||
typeWrapper: css({
|
||||
color: theme.colors.primary.text,
|
||||
marginRight: '5px',
|
||||
}),
|
||||
textWrapper: css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexGrow: 1,
|
||||
overflow: 'hidden',
|
||||
marginRight: theme.spacing(1),
|
||||
}),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -105,55 +105,54 @@ export const LayerName = ({ name, onChange, verifyLayerNameUniqueness, overrideS
|
|||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
wrapper: css`
|
||||
label: Wrapper;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: ${theme.spacing(0.5)};
|
||||
`,
|
||||
layerNameWrapper: css`
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
border-radius: ${theme.shape.borderRadius(2)};
|
||||
align-items: center;
|
||||
padding: 0 0 0 ${theme.spacing(0.5)};
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
wrapper: css({
|
||||
label: 'Wrapper',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginLeft: theme.spacing(0.5),
|
||||
}),
|
||||
layerNameWrapper: css({
|
||||
display: 'flex',
|
||||
cursor: 'pointer',
|
||||
border: '1px solid transparent',
|
||||
borderRadius: theme.shape.radius.default,
|
||||
alignItems: 'center',
|
||||
padding: `0 0 0 ${theme.spacing(0.5)}`,
|
||||
margin: 0,
|
||||
background: 'transparent',
|
||||
|
||||
&:hover {
|
||||
background: ${theme.colors.action.hover};
|
||||
border: 1px dashed ${theme.colors.border.strong};
|
||||
}
|
||||
'&:hover': {
|
||||
background: theme.colors.action.hover,
|
||||
border: `1px dashed ${theme.colors.border.strong}`,
|
||||
},
|
||||
|
||||
&:focus {
|
||||
border: 2px solid ${theme.colors.primary.border};
|
||||
}
|
||||
'&:focus': {
|
||||
border: `2px solid ${theme.colors.primary.border}`,
|
||||
},
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.query-name-edit-icon {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
`,
|
||||
layerName: css`
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
color: ${theme.colors.primary.text};
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
margin-left: ${theme.spacing(0.5)};
|
||||
`,
|
||||
'&:hover, &:focus': {
|
||||
'.query-name-edit-icon': {
|
||||
visibility: 'visible',
|
||||
},
|
||||
},
|
||||
}),
|
||||
layerName: css({
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
color: theme.colors.primary.text,
|
||||
cursor: 'pointer',
|
||||
overflow: 'hidden',
|
||||
marginLeft: theme.spacing(0.5),
|
||||
}),
|
||||
layerEditIcon: cx(
|
||||
css`
|
||||
margin-left: ${theme.spacing(2)};
|
||||
visibility: hidden;
|
||||
`,
|
||||
css({
|
||||
marginLeft: theme.spacing(2),
|
||||
visibility: 'hidden',
|
||||
}),
|
||||
'query-name-edit-icon'
|
||||
),
|
||||
layerNameInput: css`
|
||||
max-width: 300px;
|
||||
margin: -4px 0;
|
||||
`,
|
||||
layerNameInput: css({
|
||||
maxWidth: '300px',
|
||||
margin: '-4px 0',
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -145,7 +145,7 @@ export const getLoginStyles = (theme: GrafanaTheme2) => {
|
|||
justifyContent: 'flex-start',
|
||||
zIndex: 1,
|
||||
minHeight: 320,
|
||||
borderRadius: theme.shape.borderRadius(4),
|
||||
borderRadius: theme.shape.radius.default,
|
||||
padding: theme.spacing(2, 0),
|
||||
opacity: 0,
|
||||
transition: 'opacity 0.5s ease-in-out',
|
||||
|
|
@ -157,13 +157,12 @@ export const getLoginStyles = (theme: GrafanaTheme2) => {
|
|||
}),
|
||||
loginOuterBox: css({
|
||||
display: 'flex',
|
||||
overflowU: 'hidden',
|
||||
overflowY: 'hidden',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}),
|
||||
loginInnerBox: css({
|
||||
padding: theme.spacing(0, 2, 2, 2),
|
||||
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
|
|
|
|||
|
|
@ -70,17 +70,17 @@ export const NodeGraphSection = ({ options, onOptionsChange }: DataSourcePluginO
|
|||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
infoText: css`
|
||||
label: infoText;
|
||||
padding-bottom: ${theme.spacing(2)};
|
||||
color: ${theme.colors.text.secondary};
|
||||
`,
|
||||
container: css`
|
||||
label: container;
|
||||
width: 100%;
|
||||
`,
|
||||
row: css`
|
||||
label: row;
|
||||
align-items: baseline;
|
||||
`,
|
||||
infoText: css({
|
||||
label: 'infoText',
|
||||
paddingBottom: theme.spacing(2),
|
||||
color: theme.colors.text.secondary,
|
||||
}),
|
||||
container: css({
|
||||
label: 'container',
|
||||
width: '100%',
|
||||
}),
|
||||
row: css({
|
||||
label: 'row',
|
||||
alignItems: 'baseline',
|
||||
}),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -71,30 +71,30 @@ export const ColorValueEditor = ({ value, settings, onChange, details }: Props)
|
|||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
spot: css`
|
||||
cursor: pointer;
|
||||
color: ${theme.colors.text};
|
||||
background: ${theme.components.input.background};
|
||||
padding: 3px;
|
||||
height: ${theme.v1.spacing.formInputHeight}px;
|
||||
border: 1px solid ${theme.components.input.borderColor};
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
align-content: flex-end;
|
||||
&:hover {
|
||||
border: 1px solid ${theme.components.input.borderHover};
|
||||
}
|
||||
`,
|
||||
colorPicker: css`
|
||||
padding: 0 ${theme.spacing(1)};
|
||||
`,
|
||||
colorText: css`
|
||||
flex-grow: 2;
|
||||
`,
|
||||
placeholderText: css`
|
||||
flex-grow: 2;
|
||||
color: ${theme.colors.text.secondary};
|
||||
`,
|
||||
spot: css({
|
||||
cursor: 'pointer',
|
||||
color: theme.colors.text.primary,
|
||||
background: theme.components.input.background,
|
||||
padding: '3px',
|
||||
height: theme.v1.spacing.formInputHeight,
|
||||
border: `1px solid ${theme.components.input.borderColor}`,
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
alignContent: 'flex-end',
|
||||
'&:hover': {
|
||||
border: `1px solid ${theme.components.input.borderHover}`,
|
||||
},
|
||||
}),
|
||||
colorPicker: css({
|
||||
padding: `0 ${theme.spacing(1)}`,
|
||||
}),
|
||||
colorText: css({
|
||||
flexGrow: 2,
|
||||
}),
|
||||
placeholderText: css({
|
||||
flexGrow: 2,
|
||||
color: theme.colors.text.secondary,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -150,12 +150,12 @@ const FieldColorModeViz: FC<ModeProps> = ({ mode, theme }) => {
|
|||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
group: css`
|
||||
display: flex;
|
||||
`,
|
||||
select: css`
|
||||
margin-right: 8px;
|
||||
flex-grow: 1;
|
||||
`,
|
||||
group: css({
|
||||
display: 'flex',
|
||||
}),
|
||||
select: css({
|
||||
marginRight: theme.spacing(1),
|
||||
flexGrow: 1,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -130,13 +130,13 @@ function getTextWidth(text: string, font: string): number | null {
|
|||
|
||||
const getStylesSlider = (theme: GrafanaTheme2, width: number) => {
|
||||
return {
|
||||
numberInputWrapper: css`
|
||||
margin-left: ${theme.spacing(3)};
|
||||
max-height: 32px;
|
||||
max-width: ${width}px;
|
||||
min-width: ${width}px;
|
||||
overflow: visible;
|
||||
width: 100%;
|
||||
`,
|
||||
numberInputWrapper: css({
|
||||
marginLeft: theme.spacing(3),
|
||||
maxHeight: '32px',
|
||||
maxWidth: width,
|
||||
minWidth: width,
|
||||
overflow: 'visible',
|
||||
width: '100%',
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -92,19 +92,19 @@ export class StringArrayEditor extends React.PureComponent<Props, State> {
|
|||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme2) => {
|
||||
return {
|
||||
textInput: css`
|
||||
margin-bottom: 5px;
|
||||
&:hover {
|
||||
border: 1px solid ${theme.components.input.borderHover};
|
||||
}
|
||||
`,
|
||||
trashIcon: css`
|
||||
color: ${theme.colors.text.secondary};
|
||||
cursor: pointer;
|
||||
textInput: css({
|
||||
marginBottom: '5px',
|
||||
'&:hover': {
|
||||
border: `1px solid ${theme.components.input.borderHover}`,
|
||||
},
|
||||
}),
|
||||
trashIcon: css({
|
||||
color: theme.colors.text.secondary,
|
||||
cursor: 'pointer',
|
||||
|
||||
&:hover {
|
||||
color: ${theme.colors.text};
|
||||
}
|
||||
`,
|
||||
'&:hover': {
|
||||
color: theme.colors.text.primary,
|
||||
},
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -22,14 +22,14 @@ export function UnitValueEditor({ value, onChange, item }: Props) {
|
|||
}
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
wrapper: css`
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: rows;
|
||||
align-items: center;
|
||||
`,
|
||||
first: css`
|
||||
margin-right: 8px;
|
||||
flex-grow: 2;
|
||||
`,
|
||||
wrapper: css({
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
}),
|
||||
first: css({
|
||||
marginRight: theme.spacing(1),
|
||||
flexGrow: 2,
|
||||
}),
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue