mirror of
https://github.com/grafana/grafana.git
synced 2024-12-28 01:41:24 -06:00
Chore: Migrate dashdiff styles to emotion globals (#90818)
* migrate dashdiff styles to emotion globals * fix colors
This commit is contained in:
Ashley Harrison
GitHub
parent
a9aadf2aa0
commit
d8711beac5
@ -7,6 +7,7 @@ import { getAlertingStyles } from './alerting';
|
||||
import { getAgularPanelStyles } from './angularPanelStyles';
|
||||
import { getCardStyles } from './card';
|
||||
import { getCodeStyles } from './code';
|
||||
import { getDashDiffStyles } from './dashdiff';
|
||||
import { getElementStyles } from './elements';
|
||||
import { getExtraStyles } from './extra';
|
||||
import { getFilterTableStyles } from './filterTable';
|
||||
@ -33,6 +34,7 @@ export function GlobalStyles() {
|
||||
getAgularPanelStyles(theme),
|
||||
getAlertingStyles(theme),
|
||||
getCodeStyles(theme),
|
||||
getDashDiffStyles(theme),
|
||||
getElementStyles(theme),
|
||||
getExtraStyles(theme),
|
||||
getFilterTableStyles(theme),
|
||||
|
||||
204
packages/grafana-ui/src/themes/GlobalStyles/dashdiff.ts
Normal file
204
packages/grafana-ui/src/themes/GlobalStyles/dashdiff.ts
Normal file
@ -0,0 +1,204 @@
|
||||
import { css } from '@emotion/react';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
|
||||
export function getDashDiffStyles(theme: GrafanaTheme2) {
|
||||
return css({
|
||||
'.delta-html': {
|
||||
background: theme.colors.background.secondary,
|
||||
paddingTop: '5px',
|
||||
paddingBottom: '5px',
|
||||
userSelect: 'none',
|
||||
},
|
||||
|
||||
'.diff-line': {
|
||||
color: theme.colors.text.primary,
|
||||
fontFamily: theme.typography.fontFamilyMonospace,
|
||||
fontSize: theme.typography.size.sm,
|
||||
lineHeight: 2,
|
||||
marginBottom: 0,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
position: 'relative',
|
||||
|
||||
'&:after': {
|
||||
left: '-40px',
|
||||
},
|
||||
},
|
||||
|
||||
'.diff-line-number': {
|
||||
color: theme.colors.text.secondary,
|
||||
display: 'inline-block',
|
||||
fontSize: theme.typography.size.xs,
|
||||
lineHeight: 2.3,
|
||||
textAlign: 'right',
|
||||
width: '30px',
|
||||
},
|
||||
|
||||
'.diff-line-number-hide': {
|
||||
visibility: 'hidden',
|
||||
},
|
||||
|
||||
'.diff-line-icon': {
|
||||
color: theme.colors.text.primary,
|
||||
fontSize: theme.typography.size.xs,
|
||||
float: 'right',
|
||||
position: 'relative',
|
||||
top: '2px',
|
||||
right: '10px',
|
||||
},
|
||||
|
||||
'.diff-json-new, .diff-json-old, .diff-json-deleted, .diff-json-added': {
|
||||
color: theme.v1.palette.gray5,
|
||||
|
||||
'.diff-line-number': {
|
||||
color: theme.colors.text.primary,
|
||||
},
|
||||
},
|
||||
|
||||
'.diff-json-new': {
|
||||
backgroundColor: theme.isDark ? '#457740' : '#664e33',
|
||||
},
|
||||
'.diff-json-old': {
|
||||
backgroundColor: theme.isDark ? '#a04338' : '#5a372a',
|
||||
},
|
||||
'.diff-json-added': {
|
||||
backgroundColor: theme.colors.primary.shade,
|
||||
},
|
||||
'.diff-json-deleted': {
|
||||
backgroundColor: theme.colors.error.shade,
|
||||
},
|
||||
|
||||
'.diff-value': {
|
||||
userSelect: 'all',
|
||||
},
|
||||
|
||||
// Basic
|
||||
'.diff-circle': {
|
||||
marginRight: '0.5em',
|
||||
'*': {
|
||||
marginBottom: '1px',
|
||||
},
|
||||
},
|
||||
'.diff-circle-changed': {
|
||||
color: '#f59433',
|
||||
},
|
||||
'.diff-circle-added': {
|
||||
color: '#29d761',
|
||||
},
|
||||
'.diff-circle-deleted': {
|
||||
color: '#fd474a',
|
||||
},
|
||||
|
||||
'.diff-item-added, .diff-item-deleted': {
|
||||
listStyle: 'none',
|
||||
},
|
||||
|
||||
'.diff-group': {
|
||||
background: theme.colors.background.secondary,
|
||||
fontSize: '16px',
|
||||
fontStyle: 'normal',
|
||||
padding: '10px 15px',
|
||||
margin: theme.spacing(2, 0),
|
||||
|
||||
'.diff-group': {
|
||||
padding: '0 5px',
|
||||
},
|
||||
},
|
||||
|
||||
'.diff-group-name': {
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
fontSize: '16px',
|
||||
paddingLeft: '1.75em',
|
||||
margin: '0 0 14px 0',
|
||||
},
|
||||
|
||||
'.diff-summary-key': {
|
||||
paddingLeft: '0.25em',
|
||||
},
|
||||
|
||||
'.diff-list': {
|
||||
paddingLeft: '40px',
|
||||
|
||||
'.diff-list': {
|
||||
paddingLeft: 0,
|
||||
},
|
||||
},
|
||||
|
||||
'.diff-item': {
|
||||
color: theme.v1.palette.gray2,
|
||||
lineHeight: 2.5,
|
||||
|
||||
'> div': {
|
||||
display: 'inline',
|
||||
},
|
||||
},
|
||||
|
||||
'.diff-item-changeset': {
|
||||
listStyle: 'none',
|
||||
},
|
||||
|
||||
'.diff-label': {
|
||||
backgroundColor: theme.colors.action.hover,
|
||||
borderRadius: '3px',
|
||||
color: theme.colors.text.primary,
|
||||
display: 'inline',
|
||||
fontSize: `${theme.typography.fontSize}px`,
|
||||
margin: '0 5px',
|
||||
padding: '3px 8px',
|
||||
},
|
||||
|
||||
'.diff-linenum': {
|
||||
float: 'right',
|
||||
},
|
||||
|
||||
'.diff-arrow': {
|
||||
color: theme.colors.text.primary,
|
||||
},
|
||||
|
||||
'.diff-block': {
|
||||
width: '100%',
|
||||
display: 'inline-block',
|
||||
},
|
||||
|
||||
'.diff-block-title': {
|
||||
fontSize: '16px',
|
||||
display: 'inline-block',
|
||||
},
|
||||
|
||||
'.diff-title': {
|
||||
fontSize: '16px',
|
||||
},
|
||||
|
||||
'.diff-change-container': {
|
||||
margin: '0 0',
|
||||
paddingLeft: '3em',
|
||||
paddingRight: 0,
|
||||
},
|
||||
|
||||
'.diff-change-group': {
|
||||
width: '100%',
|
||||
color: theme.colors.text.primary,
|
||||
marginBottom: '14px',
|
||||
},
|
||||
|
||||
'.diff-change-item': {
|
||||
display: 'inline-block',
|
||||
},
|
||||
|
||||
'.diff-change-title': {
|
||||
fontSize: '16px',
|
||||
},
|
||||
|
||||
'.bullet-position-container': {
|
||||
position: 'relative',
|
||||
left: '-6px',
|
||||
},
|
||||
|
||||
'.diff-list-circle': {
|
||||
marginBottom: '3px',
|
||||
},
|
||||
});
|
||||
}
|
||||
@ -18,8 +18,5 @@
|
||||
@import 'components/dropdown';
|
||||
@import 'components/dashboard_grid';
|
||||
|
||||
// PAGES
|
||||
@import 'pages/history';
|
||||
|
||||
// ANGULAR
|
||||
@import 'angular';
|
||||
|
||||
@ -1,208 +0,0 @@
|
||||
// JSON
|
||||
@for $i from 0 through 16 {
|
||||
.diff-indent-#{$i} {
|
||||
padding-left: $i * 21px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.delta-html {
|
||||
background: $diff-json-bg;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.diff-line {
|
||||
color: $diff-json-fg;
|
||||
font-family: $font-family-monospace;
|
||||
font-size: $font-size-sm;
|
||||
line-height: 2;
|
||||
margin-bottom: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
left: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
.diff-line-number {
|
||||
color: $text-muted;
|
||||
display: inline-block;
|
||||
font-size: $font-size-xs;
|
||||
line-height: 2.3;
|
||||
text-align: right;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.diff-line-number-hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.diff-line-icon {
|
||||
color: $diff-json-icon;
|
||||
font-size: $font-size-xs;
|
||||
float: right;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.diff-json-new,
|
||||
.diff-json-old,
|
||||
.diff-json-deleted,
|
||||
.diff-json-added {
|
||||
color: $diff-json-changed-fg;
|
||||
|
||||
.diff-line-number {
|
||||
color: $diff-json-changed-num;
|
||||
}
|
||||
}
|
||||
|
||||
.diff-json-new {
|
||||
background-color: $diff-json-new;
|
||||
}
|
||||
.diff-json-old {
|
||||
background-color: $diff-json-old;
|
||||
}
|
||||
.diff-json-added {
|
||||
background-color: $diff-json-added;
|
||||
}
|
||||
.diff-json-deleted {
|
||||
background-color: $diff-json-deleted;
|
||||
}
|
||||
|
||||
.diff-value {
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
// Basic
|
||||
.diff-circle {
|
||||
margin-right: 0.5em;
|
||||
* {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
.diff-circle-changed {
|
||||
color: #f59433;
|
||||
}
|
||||
.diff-circle-added {
|
||||
color: #29d761;
|
||||
}
|
||||
.diff-circle-deleted {
|
||||
color: #fd474a;
|
||||
}
|
||||
|
||||
.diff-item-added,
|
||||
.diff-item-deleted {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.diff-group {
|
||||
background: $diff-group-bg;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
padding: 10px 15px;
|
||||
margin: $space-md 0;
|
||||
|
||||
.diff-group {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.diff-group-name {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
padding-left: 1.75em;
|
||||
margin: 0 0 14px 0;
|
||||
}
|
||||
|
||||
.diff-summary-key {
|
||||
padding-left: 0.25em;
|
||||
}
|
||||
|
||||
.diff-list {
|
||||
padding-left: 40px;
|
||||
|
||||
.diff-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.diff-item {
|
||||
color: $gray-2;
|
||||
line-height: 2.5;
|
||||
|
||||
> div {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.diff-item-changeset {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.diff-label {
|
||||
background-color: $diff-label-bg;
|
||||
border-radius: 3px;
|
||||
color: $diff-label-fg;
|
||||
display: inline;
|
||||
font-size: $font-size-base;
|
||||
margin: 0 5px;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.diff-linenum {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.diff-arrow {
|
||||
color: $diff-arrow-color;
|
||||
}
|
||||
|
||||
.diff-block {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.diff-block-title {
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.diff-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.diff-change-container {
|
||||
margin: 0 0;
|
||||
padding-left: 3em;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.diff-change-group {
|
||||
width: 100%;
|
||||
color: $text-color;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.diff-change-item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.diff-change-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.bullet-position-container {
|
||||
position: relative;
|
||||
left: -6px;
|
||||
}
|
||||
|
||||
.diff-list-circle {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user