public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Theme: Update theme layering (#33217)

Browse Source 
* Theme: Update theme layering

* More updates

* Updates to shadows and dropdowns

* Moved panel option group to emotion global styles

* more minor fixes
This commit is contained in:
Torkel Ödegaard
2021-04-22 09:18:32 +02:00
committed by GitHub
parent 6acb99afde
commit 44cf2f8efe
28 changed files with 120 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-data/src/themes/createComponents.ts
+19 -18
View File
@@ -11,10 +11,11 @@ export interface ThemeComponents {
};
input: {
background: string;
border: string;
borderColor: string;
borderHover: string;
text: string;
};
tooltip: {
text: string;
background: string;
@@ -22,10 +23,13 @@ export interface ThemeComponents {
panel: {
padding: number;
headerHeight: number;
border: string;
borderColor: string;
boxShadow: string;
background: string;
};
dropdown: {
background: string;
};
dashboard: {
background: string;
padding: number;
@@ -37,8 +41,15 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
padding: 1,
headerHeight: 4,
background: colors.background.primary,
border: colors.background.primary,
boxShadow: shadows.z0,
borderColor: colors.background.primary,
boxShadow: shadows.z1,
};
const input = {
borderColor: colors.border.medium,
borderHover: colors.border.strong,
text: colors.text.primary,
background: colors.mode === 'dark' ? colors.background.canvas : colors.background.primary,
};
return {
@@ -47,21 +58,11 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
md: 4,
lg: 6,
},
input:
colors.mode === 'dark'
? {
background: colors.background.canvas,
border: colors.border.medium,
borderHover: colors.border.strong,
text: colors.text.primary,
}
: {
background: colors.background.primary,
border: colors.border.medium,
borderHover: colors.border.strong,
text: colors.text.primary,
},
input,
panel,
dropdown: {
background: input.background,
},
tooltip: {
background: colors.background.secondary,
text: colors.text.primary,
packages/grafana-data/src/themes/createShadows.ts
+6 -36
View File
@@ -2,54 +2,24 @@ import { ThemeColors } from './createColors';
/** @beta */
export interface ThemeShadows {
z0: string;
z1: string;
z2: string;
z3: string;
z4: string;
}
function createDarkShadow(...px: number[]) {
const shadowKeyUmbraOpacity = 0.2;
const shadowKeyPenumbraOpacity = 0.15;
const shadowAmbientShadowOpacity = 0.1;
return [
`${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0,0,0,${shadowKeyUmbraOpacity})`,
`${px[4]}px ${px[5]}px ${px[6]}px ${px[7]}px rgba(0,0,0,${shadowKeyPenumbraOpacity})`,
`${px[8]}px ${px[9]}px ${px[10]}px ${px[11]}px rgba(0,0,0,${shadowAmbientShadowOpacity})`,
].join(',');
}
function createLightShadow(...px: number[]) {
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})`,
`${px[4]}px ${px[5]}px ${px[6]}px ${px[7]}px rgba(0,0,0,${shadowKeyPenumbraOpacity})`,
`${px[8]}px ${px[9]}px ${px[10]}px ${px[11]}px rgba(0,0,0,${shadowAmbientShadowOpacity})`,
].join(',');
}
/** @alpha */
export function createShadows(colors: ThemeColors): ThemeShadows {
if (colors.mode === 'dark') {
return {
z0: createDarkShadow(0, 1, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0),
z1: createDarkShadow(0, 1, 1, -1, 0, 1, 2, 0, 0, 1, 3, 0),
z2: createDarkShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0),
z3: createDarkShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0),
z4: createDarkShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2),
z1: '0px 1px 2px rgba(24, 26, 27, 0.75)',
z2: '0px 4px 8px rgba(24, 26, 27, 0.75)',
z3: '0px 10px 20px #181A1B',
};
}
return {
z0: createLightShadow(0, 1, 1, -1, 0, 0, 0, 0, 0, 1, 3, 0),
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, -5, 0, 8, 10, 1, 0, 3, 14, 2),
z1: '0px 1px 2px rgba(24, 26, 27, 0.2)',
z2: '0px 4px 8px rgba(24, 26, 27, 0.2)',
z3: '0px 13px 20px 1px rgba(24, 26, 27, 0.18)',
};
}
packages/grafana-data/src/themes/createV1Theme.ts
+1 -1
View File
@@ -222,7 +222,7 @@ export function createV1Theme(theme: Omit<GrafanaThemeV2, 'v1'>): GrafanaTheme {
bodyBg: theme.colors.background.canvas,
panelBg: theme.components.panel.background,
panelBorder: theme.components.panel.border,
panelBorder: theme.components.panel.borderColor,
pageHeaderBg: theme.colors.background.canvas,
pageHeaderBorder: theme.colors.background.canvas,
packages/grafana-ui/.storybook/storybookTheme.ts
+1 -1
View File
@@ -31,7 +31,7 @@ const createStorybookTheme = (theme: GrafanaThemeV2) => {
// Form colors
inputBg: theme.components.input.background,
inputBorder: theme.components.input.border,
inputBorder: theme.components.input.borderColor,
inputTextColor: theme.components.input.text,
inputBorderRadius: theme.shape.borderRadius(1),
packages/grafana-ui/src/components/Alert/Alert.tsx
+1 -1
View File
@@ -80,7 +80,7 @@ const getStyles = (theme: GrafanaThemeV2, severity: AlertVariant, elevated?: boo
flex-direction: row;
align-items: stretch;
background: ${theme.colors.background.secondary};
box-shadow: ${elevated ? theme.shadows.z4 : theme.shadows.z1};
box-shadow: ${elevated ? theme.shadows.z3 : theme.shadows.z1};
&:before {
content: '';
packages/grafana-ui/src/components/Button/Button.tsx
+1 -1
View File
@@ -172,7 +172,7 @@ function getButtonVariantStyles(theme: GrafanaThemeV2, color: ThemeRichColor): C
'&:hover': {
background: color.shade,
color: color.contrastText,
boxShadow: theme.shadows.z2,
boxShadow: theme.shadows.z1,
},
};
}
packages/grafana-ui/src/components/Drawer/Drawer.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, scrollableContent: boolean
return {
drawer: css`
.drawer-content {
background-color: ${theme.colors.bodyBg};
background-color: ${theme.colors.bg1};
display: flex;
flex-direction: column;
overflow: hidden;
packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
+1 -1
View File
@@ -75,7 +75,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
display: 'inline-flex',
flexDirection: 'row',
flexWrap: 'nowrap',
border: `1px solid ${theme.components.input.border}`,
border: `1px solid ${theme.components.input.borderColor}`,
borderRadius: theme.shape.borderRadius(),
padding: '2px',
}),
packages/grafana-ui/src/components/Forms/commonStyles.ts
+1 -1
View File
@@ -10,7 +10,7 @@ export const getFocusStyle = (theme: GrafanaTheme) => css`
`;
export const sharedInputStyle = (theme: GrafanaThemeV2, invalid = false) => {
const borderColor = invalid ? theme.colors.error.border : theme.components.input.border;
const borderColor = invalid ? theme.colors.error.border : theme.components.input.borderColor;
const borderColorHover = invalid ? theme.colors.error.shade : theme.components.input.borderHover;
const background = theme.components.input.background;
const textColor = theme.components.input.text;
packages/grafana-ui/src/components/Menu/Menu.tsx
+3 -3
View File
@@ -31,11 +31,11 @@ const getStyles = (theme: GrafanaThemeV2) => {
return {
header: css`
padding: ${theme.spacing(0.5, 0.5, 1, 0.5)};
border-bottom: 1px solid ${theme.colors.border.medium};
border-bottom: 1px solid ${theme.colors.border.weak};
`,
wrapper: css`
background: ${theme.colors.background.secondary};
box-shadow: ${theme.shadows.z2};
background: ${theme.colors.background.primary};
box-shadow: ${theme.shadows.z3};
display: inline-block;
border-radius: ${theme.shape.borderRadius()};
`,
packages/grafana-ui/src/components/Modal/getModalStyles.ts
+5 -6
View File
@@ -3,8 +3,7 @@ import { GrafanaThemeV2 } from '@grafana/data';
import { stylesFactory } from '../../themes';
export const getModalStyles = stylesFactory((theme: GrafanaThemeV2) => {
// rgba(1,4,9,0.8)
const backdropBackground = 'rgba(0, 0, 0, 0.5)';
const backdropBackground = theme.isDark ? 'rgba(0, 0, 0, 0.27)' : 'rgba(208, 209, 211, 0.24)';
const borderRadius = theme.shape.borderRadius(2);
return {
@@ -12,7 +11,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaThemeV2) => {
position: fixed;
z-index: ${theme.zIndex.modal};
background: ${theme.colors.background.primary};
box-shadow: ${theme.shadows.z4};
box-shadow: ${theme.shadows.z3};
border-radius: ${borderRadius};
background-clip: padding-box;
outline: none;
@@ -32,11 +31,11 @@ export const getModalStyles = stylesFactory((theme: GrafanaThemeV2) => {
left: 0;
z-index: ${theme.zIndex.modalBackdrop};
background-color: ${backdropBackground};
backdrop-filter: blur(2px);
`,
modalHeader: css`
label: modalHeader;
background: ${theme.colors.background.secondary};
border-bottom: 1px solid ${theme.colors.border.weak};
border-radius: ${borderRadius} ${borderRadius} 0 0;
display: flex;
height: 42px;
@@ -64,10 +63,10 @@ export const getModalStyles = stylesFactory((theme: GrafanaThemeV2) => {
padding-right: ${theme.spacing(1)};
`,
modalContent: css`
padding: calc(${theme.spacing.gridSize} * 2);
padding: ${theme.spacing(2)};
overflow: auto;
width: 100%;
max-height: calc(90vh - ${theme.spacing.gridSize} * 2);
max-height: calc(90vh - ${theme.spacing(2)});
`,
};
});
packages/grafana-ui/src/components/Select/getSelectStyles.ts
+1 -1
View File
@@ -6,7 +6,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaThemeV2) => {
return {
menu: css`
label: grafana-select-menu;
background: ${theme.colors.background.secondary};
background: ${theme.components.dropdown.background};
box-shadow: ${theme.shadows.z3};
position: relative;
min-width: 100%;
packages/grafana-ui/src/components/Switch/Switch.tsx
+2 -2
View File
@@ -104,7 +104,7 @@ const getSwitchStyles = stylesFactory((theme: GrafanaThemeV2, transparent?: bool
border: none;
border-radius: 50px;
background: ${theme.components.input.background};
border: 1px solid ${theme.components.input.border};
border: 1px solid ${theme.components.input.borderColor};
transition: all 0.3s ease;
&:hover {
@@ -132,7 +132,7 @@ const getSwitchStyles = stylesFactory((theme: GrafanaThemeV2, transparent?: bool
display: flex;
align-items: center;
background: ${transparent ? 'transparent' : theme.components.input.background};
border: 1px solid ${transparent ? 'transparent' : theme.components.input.border};
border: 1px solid ${transparent ? 'transparent' : theme.components.input.borderColor};
border-radius: ${theme.shape.borderRadius()};
`,
};
packages/grafana-ui/src/components/TextArea/TextArea.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ const getTextAreaStyle = stylesFactory((theme: GrafanaThemeV2, invalid = false)
border-radius: ${theme.shape.borderRadius()};
padding: ${theme.spacing.gridSize / 4}px ${theme.spacing.gridSize}px;
width: 100%;
border-color: ${invalid ? theme.colors.error.border : theme.components.input.border};
border-color: ${invalid ? theme.colors.error.border : theme.components.input.borderColor};
`
),
};
packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx
+2 -2
View File
@@ -14,8 +14,8 @@ import { TimePickerFooter } from './TimePickerFooter';
const getStyles = stylesFactory((theme: GrafanaThemeV2, isReversed, hideQuickRanges, isContainerTall) => {
return {
container: css`
background: ${theme.colors.background.secondary};
box-shadow: ${theme.shadows.z4};
background: ${theme.colors.background.primary};
box-shadow: ${theme.shadows.z3};
position: absolute;
z-index: ${theme.zIndex.dropdown};
width: 546px;
packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx
+2 -3
View File
@@ -3,12 +3,11 @@ import { Global } from '@emotion/react';
import { useTheme2 } from '..';
import { getElementStyles } from './elements';
import { getCardStyles } from './card';
import { getAgularPanelStyles } from './angularPanelStyles';
/** @internal */
export function GlobalStyles() {
const theme = useTheme2();
const types = getElementStyles(theme);
const cards = getCardStyles(theme);
return <Global styles={[types, cards]} />;
return <Global styles={[getElementStyles(theme), getCardStyles(theme), getAgularPanelStyles(theme)]} />;
}
packages/grafana-ui/src/themes/GlobalStyles/angularPanelStyles.ts
+37
View File
@@ -0,0 +1,37 @@
import { css } from '@emotion/react';
import { GrafanaThemeV2 } from '@grafana/data';
export function getAgularPanelStyles(theme: GrafanaThemeV2) {
return css`
.panel-options-group {
border-bottom: 1px solid ${theme.colors.border.weak};
}
.panel-options-group__header {
padding: ${theme.spacing(1, 2, 1, 1)};
position: relative;
display: flex;
align-items: center;
cursor: pointer;
font-weight: 500;
color: ${theme.colors.text.primary};
&:hover {
background: ${theme.colors.emphasize(theme.colors.background.primary, 0.03)};
}
}
.panel-options-group__icon {
color: ${theme.colors.text.secondary};
margin-right: ${theme.spacing(1)};
}
.panel-options-group__title {
position: relative;
}
.panel-options-group__body {
padding: ${theme.spacing(1, 2, 1, 4)};
}
`;
}
packages/grafana-ui/src/themes/GlobalStyles/card.tsx → packages/grafana-ui/src/themes/GlobalStyles/card.ts
+1
View File
@@ -1,5 +1,6 @@
import { css } from '@emotion/react';
import { GrafanaThemeV2 } from '@grafana/data';
export function getCardStyles(theme: GrafanaThemeV2) {
return css`
.card-section {
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+5 -5
View File
@@ -128,7 +128,7 @@ $hr-border-color: $dark-9;
// Panel
// -------------------------
$panel-bg: ${theme.components.panel.background};
$panel-border: ${theme.components.panel.border};
$panel-border: 1px solid ${theme.components.panel.borderColor};
$panel-header-hover-bg: ${theme.colors.action.hover};
$panel-box-shadow: ${theme.components.panel.boxShadow};
$panel-corner: $panel-bg;
@@ -259,7 +259,7 @@ $side-menu-header-color: ${theme.v1.colors.text};
// Menu dropdowns
// -------------------------
$menu-dropdown-bg: ${theme.colors.background.secondary};
$menu-dropdown-bg: ${theme.colors.background.primary};
$menu-dropdown-hover-bg: ${theme.colors.action.hover};
$menu-dropdown-shadow: ${theme.shadows.z3};
@@ -290,11 +290,11 @@ $tooltipArrowColor: ${theme.colors.background.secondary};
$tooltipBackgroundError: ${theme.colors.error.main};
$tooltipShadow: ${theme.shadows.z2};
$popover-bg: ${theme.colors.background.secondary};
$popover-bg: ${theme.colors.background.primary};
$popover-color: ${theme.colors.text.primary};
$popover-border-color: ${theme.colors.border.medium};
$popover-border-color: ${theme.colors.border.weak};
$popover-header-bg: ${theme.colors.background.secondary};
$popover-shadow: ${theme.shadows.z4};
$popover-shadow: ${theme.shadows.z3};
$popover-help-bg: $tooltipBackground;
$popover-help-color: $text-color;
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+5 -5
View File
@@ -123,7 +123,7 @@ $hr-border-color: $gray-4 !default;
// Panel
// -------------------------
$panel-bg: ${theme.components.panel.background};
$panel-border: ${theme.components.panel.border};
$panel-border: 1px solid ${theme.components.panel.borderColor};
$panel-header-hover-bg: ${theme.colors.action.hover};
$panel-box-shadow: ${theme.components.panel.boxShadow};
$panel-corner: $panel-bg;
@@ -256,7 +256,7 @@ $side-menu-header-color: ${theme.v1.palette.gray95};
// Menu dropdowns
// -------------------------
$menu-dropdown-bg: ${theme.colors.background.secondary};
$menu-dropdown-bg: ${theme.colors.background.primary};
$menu-dropdown-hover-bg: ${theme.colors.action.hover};
$menu-dropdown-shadow: ${theme.shadows.z3};
@@ -282,11 +282,11 @@ $tooltipArrowColor: ${theme.colors.background.secondary};
$tooltipBackgroundError: ${theme.colors.error.main};
$tooltipShadow: ${theme.shadows.z2};
$popover-bg: ${theme.colors.background.secondary};
$popover-bg: ${theme.colors.background.primary};
$popover-color: ${theme.colors.text.primary};
$popover-border-color: ${theme.colors.border.medium};
$popover-border-color: ${theme.colors.border.weak};
$popover-header-bg: ${theme.colors.background.secondary};
$popover-shadow: ${theme.shadows.z4};
$popover-shadow: ${theme.shadows.z3};
$graph-tooltip-bg: $gray-5;
public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
+2 -2
View File
@@ -161,7 +161,7 @@ const getStyles = (theme: GrafanaThemeV2) => ({
formBox: css`
padding: ${theme.spacing(1)};
background: ${theme.colors.background.primary};
border: 1px solid ${theme.components.panel.border};
border: 1px solid ${theme.components.panel.borderColor};
border-bottom: none;
`,
closeButton: css`
@@ -182,7 +182,7 @@ const getStyles = (theme: GrafanaThemeV2) => ({
`,
mainBox: css`
background: ${theme.colors.background.primary};
border: 1px solid ${theme.components.panel.border};
border: 1px solid ${theme.components.panel.borderColor};
border-top: none;
flex-grow: 1;
`,
public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
+1 -1
View File
@@ -92,7 +92,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
flex-grow: 1;
min-height: 0;
background: ${theme.colors.background.primary};
border-right: 1px solid ${theme.components.panel.border};
border-right: 1px solid ${theme.components.panel.borderColor};
`,
};
};
public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx
+1 -1
View File
@@ -71,7 +71,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
cursor: pointer;
background: ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius()};
box-shadow: ${theme.shadows.z0};
box-shadow: ${theme.shadows.z1};
align-items: center;
padding: 8px;
width: 100%;
public/img/icons/mono/reusable-panel.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg"><path d="M14.3 8.7H9.4a.7.7 0 00-.7.7v4.9a.7.7 0 00.7.7h4.9a.7.7 0 00.7-.7V9.4a.7.7 0 00-.7-.7zm-.7 4.9h-3.5v-3.5h3.5v3.5zM6.6 1H1.7a.7.7 0 00-.7.7v4.9a.7.7 0 00.7.7h4.9a.7.7 0 00.7-.7V1.7a.7.7 0 00-.7-.7zm-.7 4.9H2.4V2.4h3.5v3.5zm8 1.08a.42.42 0 01-.12-.08l-1.63-1.5a.31.31 0 01-.08-.22c0-.08.04-.16.1-.22.06-.06.14-.09.23-.1.09 0 .18.03.24.09l1.03.94V3.62c0-.26-.12-.5-.31-.69a1.1 1.1 0 00-.74-.28H9.35a.36.36 0 01-.25-.1.31.31 0 01-.1-.23c0-.08.04-.16.1-.22.07-.07.16-.1.25-.1h3.28c.46 0 .9.17 1.24.48.33.3.51.71.51 1.14V5.9l1.02-.94a.37.37 0 01.5 0c.03.03.06.06.07.1a.31.31 0 01-.08.35l-1.61 1.5a.35.35 0 01-.12.08.38.38 0 01-.26 0zM2.1 9.02l.12.08 1.63 1.5c.06.06.09.14.08.22 0 .08-.04.16-.1.22a.37.37 0 01-.48.02l-1.02-.95v2.27c0 .26.12.5.31.69.2.18.47.28.74.28h3.27c.1 0 .18.04.25.1.06.06.1.14.1.23s-.04.16-.1.22a.36.36 0 01-.25.1H3.37c-.46 0-.9-.17-1.24-.48s-.5-.71-.5-1.14V10.1l-1.03.94a.37.37 0 01-.5 0 .32.32 0 01-.07-.1.31.31 0 01.08-.35l1.61-1.5a.35.35 0 01.12-.08.38.38 0 01.26 0z" fill="#C7D0D9"/></svg>
<svg xmlns="http://www.w3.org/2000/svg"><path d="M14.3 8.7H9.4a.7.7 0 00-.7.7v4.9a.7.7 0 00.7.7h4.9a.7.7 0 00.7-.7V9.4a.7.7 0 00-.7-.7zm-.7 4.9h-3.5v-3.5h3.5v3.5zM6.6 1H1.7a.7.7 0 00-.7.7v4.9a.7.7 0 00.7.7h4.9a.7.7 0 00.7-.7V1.7a.7.7 0 00-.7-.7zm-.7 4.9H2.4V2.4h3.5v3.5zm8 1.08a.42.42 0 01-.12-.08l-1.63-1.5a.31.31 0 01-.08-.22c0-.08.04-.16.1-.22.06-.06.14-.09.23-.1.09 0 .18.03.24.09l1.03.94V3.62c0-.26-.12-.5-.31-.69a1.1 1.1 0 00-.74-.28H9.35a.36.36 0 01-.25-.1.31.31 0 01-.1-.23c0-.08.04-.16.1-.22.07-.07.16-.1.25-.1h3.28c.46 0 .9.17 1.24.48.33.3.51.71.51 1.14V5.9l1.02-.94a.37.37 0 01.5 0c.03.03.06.06.07.1a.31.31 0 01-.08.35l-1.61 1.5a.35.35 0 01-.12.08.38.38 0 01-.26 0zM2.1 9.02l.12.08 1.63 1.5c.06.06.09.14.08.22 0 .08-.04.16-.1.22a.37.37 0 01-.48.02l-1.02-.95v2.27c0 .26.12.5.31.69.2.18.47.28.74.28h3.27c.1 0 .18.04.25.1.06.06.1.14.1.23s-.04.16-.1.22a.36.36 0 01-.25.1H3.37c-.46 0-.9-.17-1.24-.48s-.5-.71-.5-1.14V10.1l-1.03.94a.37.37 0 01-.5 0 .32.32 0 01-.07-.1.31.31 0 01.08-.35l1.61-1.5a.35.35 0 01.12-.08.38.38 0 01.26 0z" fill="currentColor"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

public/sass/_variables.dark.generated.scss
+8 -8
View File
@@ -131,9 +131,9 @@ $hr-border-color: $dark-9;
// Panel
// -------------------------
$panel-bg: #181b1f;
$panel-border: #181b1f;
$panel-border: 1px solid #181b1f;
$panel-header-hover-bg: rgba(201, 209, 217, 0.08);
$panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.15),0px 1px 3px 0px rgba(0,0,0,0.1);
$panel-box-shadow: 0px 1px 2px rgba(24, 26, 27, 0.75);
$panel-corner: $panel-bg;
// page header
@@ -262,9 +262,9 @@ $side-menu-header-color: rgb(201, 209, 217);
// Menu dropdowns
// -------------------------
$menu-dropdown-bg: #22252b;
$menu-dropdown-bg: #181b1f;
$menu-dropdown-hover-bg: rgba(201, 209, 217, 0.08);
$menu-dropdown-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.15),0px 1px 10px 0px rgba(0,0,0,0.1);
$menu-dropdown-shadow: 0px 10px 20px #181A1B;
// Tabs
// -------------------------
@@ -291,13 +291,13 @@ $tooltipBackground: #22252b;
$tooltipColor: rgb(201, 209, 217);
$tooltipArrowColor: #22252b;
$tooltipBackgroundError: #D10E5C;
$tooltipShadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.15),0px 1px 5px 0px rgba(0,0,0,0.1);
$tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.75);
$popover-bg: #22252b;
$popover-bg: #181b1f;
$popover-color: rgb(201, 209, 217);
$popover-border-color: rgba(201, 209, 217, 0.15);
$popover-border-color: rgba(201, 209, 217, 0.10);
$popover-header-bg: #22252b;
$popover-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.15),0px 3px 14px 2px rgba(0,0,0,0.1);
$popover-shadow: 0px 10px 20px #181A1B;
$popover-help-bg: $tooltipBackground;
$popover-help-color: $text-color;
public/sass/_variables.light.generated.scss
+8 -8
View File
@@ -125,9 +125,9 @@ $hr-border-color: $gray-4 !default;
// Panel
// -------------------------
$panel-bg: #fff;
$panel-border: #fff;
$panel-border: 1px solid #fff;
$panel-header-hover-bg: rgba(36, 41, 46, 0.04);
$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-box-shadow: 0px 1px 2px rgba(24, 26, 27, 0.2);
$panel-corner: $panel-bg;
// Page header
@@ -258,9 +258,9 @@ $side-menu-header-color: #e9edf2;
// Menu dropdowns
// -------------------------
$menu-dropdown-bg: #F4F5F5;
$menu-dropdown-bg: #fff;
$menu-dropdown-hover-bg: rgba(36, 41, 46, 0.04);
$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);
$menu-dropdown-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18);
// Tabs
// -------------------------
@@ -282,13 +282,13 @@ $tooltipBackground: #F4F5F5;
$tooltipColor: rgba(36, 41, 46, 1);
$tooltipArrowColor: #F4F5F5;
$tooltipBackgroundError: #E0226E;
$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);
$tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.2);
$popover-bg: #F4F5F5;
$popover-bg: #fff;
$popover-color: rgba(36, 41, 46, 1);
$popover-border-color: rgba(36, 41, 46, 0.30);
$popover-border-color: rgba(36, 41, 46, 0.12);
$popover-header-bg: #F4F5F5;
$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);
$popover-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18);
$graph-tooltip-bg: $gray-5;
public/sass/components/_panel_editor.scss
-36
View File
@@ -16,39 +16,3 @@
left: 0 !important;
}
}
/* Used by old angular panels */
.panel-options-group {
border-bottom: 1px solid $divider;
}
.panel-options-group__header {
padding: 8px 16px 8px 8px;
position: relative;
display: flex;
align-items: center;
cursor: pointer;
font-weight: 500;
color: $text-color-semi-weak;
&:hover {
color: $text-color;
.panel-options-group__icon {
color: $text-color;
}
}
}
.panel-options-group__icon {
color: $text-color-weak;
margin-right: 8px;
}
.panel-options-group__title {
position: relative;
}
.panel-options-group__body {
padding: 8px 16px 16px 32px;
}
public/sass/components/_panel_graph.scss
+3 -3
View File
@@ -236,7 +236,7 @@
position: relative;
top: -3px;
padding: $space-xxs;
font-weight: bold;
font-weight: $font-weight-semi-bold;
color: $text-color;
}
@@ -245,7 +245,7 @@
&--highlight {
color: $text-color-emphasis;
font-weight: bold;
font-weight: $font-weight-semi-bold;
}
}
@@ -259,7 +259,7 @@
.graph-tooltip-value {
display: table-cell;
font-weight: bold;
font-weight: $font-weight-semi-bold;
padding-left: 15px;
text-align: right;
}