Skip to content

N
nexpie-grafana-theme
Commit 08c95c34 by Torkel Ödegaard Committed by GitHub
Options

UI: Theme changes (#22880) 

* Theme: Updates the theme to align panel & page background colors

* Updated dashboard settings view to be similar to new panel edit

* Updated themes

* Added shadow

* Updates generated files

* Minor fix to inspect drawer

* Clean up old dashboard setttings stuff

* Polish to search

* Updated truth image

* Minor tweaks to dropdown menu

* Updates and alignments between inspect drawer and explore rich history

* removed unused variables

* Minor tweak to light page header bg
parent e2f7f852
Showing with 339 additions and 351 deletions
e2e/suite1/screenshots/expected/smoke-test-scenario.png
e2e/suite1/screenshots/expected/smoke-test-scenario.png

26.4 KB | W: | H:

e2e/suite1/screenshots/expected/smoke-test-scenario.png

26.4 KB | W: | H:

e2e/suite1/screenshots/expected/smoke-test-scenario.png
e2e/suite1/screenshots/expected/smoke-test-scenario.png
e2e/suite1/screenshots/expected/smoke-test-scenario.png
e2e/suite1/screenshots/expected/smoke-test-scenario.png
  • 2-up
  • Swipe
  • Onion skin
packages/grafana-data/src/types/theme.ts
......@@ -144,6 +144,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
gray95: string;
gray85: string;
gray70: string;
gray60: string;
gray33: string;
gray25: string;
gray15: string;
......@@ -208,6 +209,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
// panel
panelBg: string;
panelBorder: string;
// TODO: move to background section
bodyBg: string;
......
packages/grafana-ui/src/components/Drawer/Drawer.tsx
......@@ -34,7 +34,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, scollableContent: boolean)
return {
drawer: css`
.drawer-content {
background-color: ${theme.colors.bodyBg};
background-color: ${theme.colors.pageBg};
display: flex;
flex-direction: column;
overflow: hidden;
......
packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap
......@@ -82,7 +82,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
"blueLight": "#5794f2",
"blueShade": "#1f60c4",
"body": "#d8d9da",
"bodyBg": "#161719",
"bodyBg": "#0b0c0e",
"brandDanger": "#e02f44",
"brandPrimary": "#eb7b18",
"brandSuccess": "#299c46",
......@@ -102,7 +102,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
"formCheckboxBgChecked": "#5794f2",
"formCheckboxBgCheckedHover": "#3274d9",
"formCheckboxCheckmark": "#343b40",
"formDescription": "#7B8087",
"formDescription": "#7b8087",
"formFocusOutline": "#1f60c4",
"formInputBg": "#0b0c0e",
"formInputBgDisabled": "#141619",
......@@ -136,7 +136,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
"gray4": "#d8d9da",
"gray5": "#ececec",
"gray6": "#f4f5f8",
"gray60": "#7B8087",
"gray60": "#7b8087",
"gray7": "#fbfbfb",
"gray70": "#9fa7b3",
"gray85": "#c7d0d9",
......@@ -146,7 +146,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
"greenBase": "#299c46",
"greenShade": "#23843b",
"headingColor": "#d8d9da",
"inputBlack": "#09090b",
"inputBlack": "#0b0c0e",
"link": "#d8d9da",
"linkDisabled": "#8e8e8e",
"linkExternal": "#33b5e5",
......@@ -154,9 +154,10 @@ exports[`TimePicker renders buttons correctly 1`] = `
"online": "#299c46",
"orange": "#eb7b18",
"orangeDark": "#ff780a",
"pageBg": "#161719",
"pageBg": "#141619",
"pageHeaderBorder": "#202226",
"panelBg": "#212124",
"panelBg": "#141619",
"panelBorder": "#202226",
"purple": "#9933cc",
"queryGreen": "#74e680",
"queryKeyword": "#66d9ef",
......@@ -391,7 +392,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"blueLight": "#5794f2",
"blueShade": "#1f60c4",
"body": "#d8d9da",
"bodyBg": "#161719",
"bodyBg": "#0b0c0e",
"brandDanger": "#e02f44",
"brandPrimary": "#eb7b18",
"brandSuccess": "#299c46",
......@@ -411,7 +412,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"formCheckboxBgChecked": "#5794f2",
"formCheckboxBgCheckedHover": "#3274d9",
"formCheckboxCheckmark": "#343b40",
"formDescription": "#7B8087",
"formDescription": "#7b8087",
"formFocusOutline": "#1f60c4",
"formInputBg": "#0b0c0e",
"formInputBgDisabled": "#141619",
......@@ -445,7 +446,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"gray4": "#d8d9da",
"gray5": "#ececec",
"gray6": "#f4f5f8",
"gray60": "#7B8087",
"gray60": "#7b8087",
"gray7": "#fbfbfb",
"gray70": "#9fa7b3",
"gray85": "#c7d0d9",
......@@ -455,7 +456,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"greenBase": "#299c46",
"greenShade": "#23843b",
"headingColor": "#d8d9da",
"inputBlack": "#09090b",
"inputBlack": "#0b0c0e",
"link": "#d8d9da",
"linkDisabled": "#8e8e8e",
"linkExternal": "#33b5e5",
......@@ -463,9 +464,10 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"online": "#299c46",
"orange": "#eb7b18",
"orangeDark": "#ff780a",
"pageBg": "#161719",
"pageBg": "#141619",
"pageHeaderBorder": "#202226",
"panelBg": "#212124",
"panelBg": "#141619",
"panelBorder": "#202226",
"purple": "#9933cc",
"queryGreen": "#74e680",
"queryKeyword": "#66d9ef",
......
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
......@@ -22,6 +22,17 @@ $green-base: ${theme.colors.greenBase};
$green-shade: ${theme.colors.greenShade};
$orange-dark: ${theme.colors.orangeDark};
$gray98: ${theme.colors.gray98};
$gray95: ${theme.colors.gray95};
$gray85: ${theme.colors.gray85};
$gray70: ${theme.colors.gray70};
$gray60: ${theme.colors.gray60};
$gray33: ${theme.colors.gray33};
$gray25: ${theme.colors.gray25};
$gray15: ${theme.colors.gray15};
$gray10: ${theme.colors.gray10};
$gray05: ${theme.colors.gray05};
// Grays
// -------------------------
$black: ${theme.colors.black};
......@@ -91,8 +102,6 @@ $textShadow: none;
// gradients
$brand-gradient-horizontal: linear-gradient(to right, #f05a28 30%, #fbca0a 99%);
$brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
$page-gradient: linear-gradient(180deg, $dark-5 10px, $dark-2 100px);
$edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black);
// Links
// -------------------------
......@@ -112,12 +121,12 @@ $hr-border-color: $dark-9;
// Panel
// -------------------------
$panel-bg: ${theme.colors.panelBg};
$panel-border: solid 1px $dark-1;
$panel-header-hover-bg: $dark-9;
$panel-border: 1px solid ${theme.colors.panelBorder};
$panel-header-hover-bg: ${theme.colors.gray15};
$panel-corner: $panel-bg;
// page header
$page-header-bg: linear-gradient(90deg, $dark-7, $black);
$page-header-bg: ${theme.colors.gray15};
$page-header-shadow: inset 0px -4px 14px $dark-3;
$page-header-border-color: $dark-9;
......@@ -132,8 +141,8 @@ $code-tag-bg: $dark-1;
$code-tag-border: $dark-9;
// cards
$card-background: linear-gradient(135deg, $dark-8, $dark-6);
$card-background-hover: linear-gradient(135deg, $dark-9, $dark-6);
$card-background: linear-gradient(135deg, $dark-4, $dark-3);
$card-background-hover: linear-gradient(135deg, $dark-5, $dark-6);
$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
// Lists
......@@ -209,7 +218,6 @@ $placeholderText: darken($text-color, 25%);
// Search
$search-shadow: 0 0 30px 0 $black;
$search-filter-box-bg: $gray-blue;
// Typeahead
$typeahead-shadow: 0 5px 10px 0 $black;
......@@ -218,10 +226,10 @@ $typeahead-selected-color: $yellow;
// Dropdowns
// -------------------------
$dropdownBackground: $dark-6;
$dropdownBorder: rgba(0, 0, 0, 0.2);
$dropdownBackground: $panel-bg;
$dropdownBorder: ${theme.colors.panelBorder};
$dropdownDividerTop: transparent;
$dropdownDividerBottom: #444;
$dropdownDividerBottom: ${theme.colors.gray25};
$dropdownLinkColor: $text-color;
$dropdownLinkColorHover: $white;
......@@ -236,26 +244,23 @@ $horizontalComponentOffset: 180px;
// Navbar
// -------------------------
$navbarHeight: 55px;
$navbarBackground: $panel-bg;
$navbarBorder: 1px solid $dark-6;
$navbarButtonBackground: $navbarBackground;
$navbarButtonBackgroundHighlight: $body-bg;
$navbarButtonBackground: $panel-bg;
$navbar-button-border: #2f2f32;
// Sidemenu
// -------------------------
$side-menu-bg: $black;
$side-menu-bg-mobile: $side-menu-bg;
$side-menu-bg: $panel-bg;
$side-menu-bg-mobile: $panel-bg;
$side-menu-border: none;
$side-menu-item-hover-bg: $dark-3;
$side-menu-shadow: 0 0 20px black;
$side-menu-link-color: $link-color;
// Menu dropdowns
// -------------------------
$menu-dropdown-bg: $body-bg;
$menu-dropdown-bg: $panel-bg;
$menu-dropdown-hover-bg: $dark-3;
$menu-dropdown-shadow: 5px 5px 20px -5px $black;
......
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
......@@ -22,6 +22,17 @@ $green-base: ${theme.colors.greenBase};
$green-shade: ${theme.colors.greenShade};
$orange-dark: ${theme.colors.orangeDark};
$gray98: ${theme.colors.gray98};
$gray95: ${theme.colors.gray95};
$gray85: ${theme.colors.gray85};
$gray70: ${theme.colors.gray70};
$gray60: ${theme.colors.gray60};
$gray33: ${theme.colors.gray33};
$gray25: ${theme.colors.gray25};
$gray15: ${theme.colors.gray15};
$gray10: ${theme.colors.gray10};
$gray05: ${theme.colors.gray05};
// Grays
// -------------------------
$black: ${theme.colors.black};
......@@ -83,8 +94,6 @@ $text-shadow-faint: none;
// gradients
$brand-gradient-horizontal: linear-gradient(to right, #f05a28 30%, #fbca0a 99%);
$brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
$page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px);
$edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
// Links
// -------------------------
......@@ -104,12 +113,12 @@ $hr-border-color: $gray-4 !default;
// Panel
// -------------------------
$panel-bg: ${theme.colors.panelBg};
$panel-border: solid 1px $gray-5;
$panel-border: 1px solid ${theme.colors.panelBorder};
$panel-header-hover-bg: $gray-6;
$panel-corner: $gray-4;
// Page header
$page-header-bg: linear-gradient(90deg, $white, $gray-7);
$page-header-bg: linear-gradient(90deg, $white, ${theme.colors.gray95});
$page-header-shadow: inset 0px -3px 10px $gray-6;
$page-header-border-color: $gray-4;
......@@ -202,7 +211,6 @@ $placeholderText: $gray-2;
// search
$search-shadow: 0 1px 5px 0 $gray-5;
$search-filter-box-bg: $gray-7;
// Typeahead
$typeahead-shadow: 0 5px 10px 0 $gray-5;
......@@ -229,26 +237,23 @@ $horizontalComponentOffset: 180px;
// Navbar
// -------------------------
$navbarHeight: 52px;
$navbarBackground: $white;
$navbarBorder: 1px solid $gray-5;
$navbarButtonBackground: lighten($navbarBackground, 3%);
$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
$navbarButtonBackground: $panel-bg;
$navbar-button-border: $gray-4;
// Sidemenu
// -------------------------
$side-menu-bg: $dark-1;
$side-menu-bg: ${theme.colors.gray15};
$side-menu-border: 1px solid ${theme.colors.gray25};
$side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
$side-menu-item-hover-bg: $gray-1;
$side-menu-item-hover-bg: ${theme.colors.gray25};
$side-menu-shadow: 5px 0px 10px -5px $gray-1;
$side-menu-link-color: $gray-6;
// Menu dropdowns
// -------------------------
$menu-dropdown-bg: $gray-7;
$menu-dropdown-bg: $panel-bg;
$menu-dropdown-hover-bg: $gray-6;
$menu-dropdown-shadow: 5px 5px 10px -5px $gray-1;
......
packages/grafana-ui/src/themes/dark.ts
......@@ -48,7 +48,7 @@ const darkTheme: GrafanaTheme = {
name: 'Grafana Dark',
colors: {
...basicColors,
inputBlack: '#09090b',
inputBlack: basicColors.gray05,
brandPrimary: basicColors.orange,
brandSuccess: basicColors.greenBase,
brandWarning: basicColors.orange,
......@@ -61,8 +61,8 @@ const darkTheme: GrafanaTheme = {
online: basicColors.greenBase,
warn: '#f79520',
critical: basicColors.redBase,
bodyBg: basicColors.dark2,
pageBg: basicColors.dark2,
bodyBg: basicColors.gray05,
pageBg: basicColors.gray10,
body: basicColors.gray4,
text: basicColors.gray4,
textStrong: basicColors.white,
......@@ -75,7 +75,8 @@ const darkTheme: GrafanaTheme = {
linkExternal: basicColors.blue,
headingColor: basicColors.gray4,
pageHeaderBorder: basicColors.gray15,
panelBg: basicColors.dark4,
panelBg: basicColors.gray10,
panelBorder: basicColors.gray15,
// Next-gen forms functional colors
formLabel: basicColors.gray70,
......
packages/grafana-ui/src/themes/default.ts
......@@ -6,7 +6,7 @@ export const commonColorsPalette = {
gray95: '#e9edf2',
gray85: '#c7d0d9',
gray70: '#9fa7b3',
gray60: '#7B8087',
gray60: '#7b8087',
gray33: '#464c54',
gray25: '#343b40',
gray15: '#202226',
......
packages/grafana-ui/src/themes/light.ts
......@@ -63,7 +63,7 @@ const lightTheme: GrafanaTheme = {
warn: '#f79520',
critical: basicColors.redShade,
bodyBg: basicColors.gray7,
pageBg: basicColors.gray7,
pageBg: basicColors.white,
// Text colors
body: basicColors.gray1,
......@@ -83,6 +83,7 @@ const lightTheme: GrafanaTheme = {
// panel
panelBg: basicColors.white,
panelBorder: basicColors.gray95,
// Next-gen forms functional colors
formLabel: basicColors.gray33,
......
public/app/core/components/search/SearchField.tsx
......@@ -3,7 +3,7 @@ import React, { useContext } from 'react';
import tinycolor from 'tinycolor2';
import { SearchQuery } from './search';
import { css, cx } from 'emotion';
import { ThemeContext, selectThemeVariant } from '@grafana/ui';
import { ThemeContext } from '@grafana/ui';
import { GrafanaTheme } from '@grafana/data';
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
......@@ -19,14 +19,9 @@ const getSearchFieldStyles = (theme: GrafanaTheme) => ({
width: 100%;
height: 55px; /* this variable is not part of GrafanaTheme yet*/
display: flex;
background-color: ${selectThemeVariant(
{
light: theme.colors.white,
dark: theme.colors.dark4,
},
theme.type
)};
background-color: ${theme.colors.formInputBg};
position: relative;
box-shadow: 0 0 10px ${theme.isLight ? theme.colors.gray85 : theme.colors.black};
`,
input: css`
max-width: 653px;
......@@ -34,22 +29,8 @@ const getSearchFieldStyles = (theme: GrafanaTheme) => ({
height: 51px;
box-sizing: border-box;
outline: none;
background: ${selectThemeVariant(
{
light: theme.colors.dark1,
dark: theme.colors.black,
},
theme.type
)};
background-color: ${selectThemeVariant(
{
light: tinycolor(theme.colors.white)
.lighten(4)
.toString(),
dark: theme.colors.dark4,
},
theme.type
)};
background-color: ${theme.colors.formInputBg};
background: ${theme.colors.formInputBg};
flex-grow: 10;
`,
spacer: css`
......@@ -57,6 +38,7 @@ const getSearchFieldStyles = (theme: GrafanaTheme) => ({
`,
icon: cx(
css`
color: ${theme.colors.textWeak};
font-size: ${theme.typography.size.lg};
padding: ${theme.spacing.md} ${theme.spacing.md} ${theme.spacing.sm} ${theme.spacing.md};
`,
......
public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap
......@@ -100,7 +100,7 @@ exports[`ServerStats Should render table with stats 1`] = `
className="css-13jkosq"
>
<li
className="css-14totda"
className="css-1aiaexb"
onClick={[Function]}
>
<i
......
public/app/features/dashboard/components/DashNav/DashNav.tsx
......@@ -20,7 +20,6 @@ import { SaveDashboardModalProxy } from 'app/features/dashboard/components/SaveD
export interface OwnProps {
dashboard: DashboardModel;
editview: string;
isEditing: boolean;
isFullscreen: boolean;
$injector: any;
......@@ -53,17 +52,10 @@ export class DashNav extends PureComponent<Props> {
};
onClose = () => {
if (this.props.editview) {
this.props.updateLocation({
query: { editview: null },
partial: true,
});
} else {
this.props.updateLocation({
query: { panelId: null, edit: null, fullscreen: null, tab: null },
partial: true,
});
}
this.props.updateLocation({
query: { panelId: null, edit: null, fullscreen: null, tab: null },
partial: true,
});
};
onToggleTVMode = () => {
......@@ -101,7 +93,7 @@ export class DashNav extends PureComponent<Props> {
};
renderDashboardTitleSearchButton() {
const { dashboard } = this.props;
const { dashboard, isFullscreen } = this.props;
const folderTitle = dashboard.meta.folderTitle;
const haveFolder = dashboard.meta.folderId > 0;
......@@ -110,7 +102,7 @@ export class DashNav extends PureComponent<Props> {
<>
<div>
<div className="navbar-page-btn">
{!this.isInFullscreenOrSettings && <i className="gicon gicon-dashboard" />}
{!isFullscreen && <i className="gicon gicon-dashboard" />}
{haveFolder && (
<>
<a className="navbar-page-btn__folder" onClick={this.onFolderNameClick}>
......@@ -124,20 +116,11 @@ export class DashNav extends PureComponent<Props> {
</a>
</div>
</div>
{this.isSettings && <span className="navbar-settings-title">&nbsp;/ Settings</span>}
<div className="navbar__spacer" />
</>
);
}
get isInFullscreenOrSettings() {
return this.props.editview || this.props.isFullscreen;
}
get isSettings() {
return this.props.editview;
}
renderBackButton() {
return (
<div className="navbar-edit">
......@@ -147,13 +130,13 @@ export class DashNav extends PureComponent<Props> {
}
render() {
const { dashboard, onAddPanel, location } = this.props;
const { dashboard, onAddPanel, location, isFullscreen } = this.props;
const { canStar, canSave, canShare, showSettings, isStarred } = dashboard.meta;
const { snapshot } = dashboard;
const snapshotUrl = snapshot && snapshot.originalUrl;
return (
<div className="navbar">
{this.isInFullscreenOrSettings && this.renderBackButton()}
{isFullscreen && this.renderBackButton()}
{this.renderDashboardTitleSearchButton()}
{this.playlistSrv.isPlaying && (
......
public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
......@@ -6,9 +6,13 @@ import { AngularComponent, getAngularLoader } from '@grafana/runtime';
// Types
import { DashboardModel } from '../../state/DashboardModel';
import { BackButton } from 'app/core/components/BackButton/BackButton';
import { e2e } from '@grafana/e2e';
import { updateLocation } from 'app/core/actions';
export interface Props {
dashboard: DashboardModel | null;
updateLocation: typeof updateLocation;
}
export class DashboardSettings extends PureComponent<Props> {
......@@ -18,7 +22,7 @@ export class DashboardSettings extends PureComponent<Props> {
componentDidMount() {
const loader = getAngularLoader();
const template = '<dashboard-settings dashboard="dashboard" class="dashboard-settings" />';
const template = '<dashboard-settings dashboard="dashboard" class="dashboard-settings__body2" />';
const scopeProps = { dashboard: this.props.dashboard };
this.angularCmp = loader.load(this.element, scopeProps, template);
......@@ -30,7 +34,31 @@ export class DashboardSettings extends PureComponent<Props> {
}
}
onClose = () => {
this.props.updateLocation({
query: { editview: null },
partial: true,
});
};
render() {
return <div className="panel-height-helper" ref={element => (this.element = element)} />;
const { dashboard } = this.props;
const folderTitle = dashboard.meta.folderTitle;
const haveFolder = dashboard.meta.folderId > 0;
return (
<div className="dashboard-settings">
<div className="navbar navbar--shadow">
<div className="navbar-edit">
<BackButton onClick={this.onClose} aria-label={e2e.pages.Dashboard.Toolbar.selectors.backArrow} />
</div>
<div className="navbar-page-btn">
{haveFolder && <div className="navbar-page-btn__folder">{folderTitle} / </div>}
<span>{dashboard.title} / Settings</span>
</div>
</div>
<div className="dashboard-settings__body1" ref={element => (this.element = element)} />
</div>
);
}
}
public/app/features/dashboard/components/Inspector/InspectHeader.tsx
import React, { FC } from 'react';
import { css } from 'emotion';
import { Icon, selectThemeVariant, stylesFactory, Tab, TabsBar, useTheme } from '@grafana/ui';
import { Icon, stylesFactory, Tab, TabsBar, useTheme } from '@grafana/ui';
import { GrafanaTheme, SelectableValue, PanelData, getValueFormat, formattedValueToString } from '@grafana/data';
import { InspectTab } from './PanelInspector';
import { PanelModel } from '../../state';
......@@ -60,7 +60,7 @@ export const InspectHeader: FC<Props> = ({
};
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const headerBackground = selectThemeVariant({ dark: theme.colors.gray15, light: theme.colors.white }, theme.type);
const headerBackground = theme.isLight ? theme.colors.gray95 : theme.colors.gray15;
return {
header: css`
background-color: ${headerBackground};
......
public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
import React, { PureComponent } from 'react';
import { FieldConfigSource, GrafanaTheme, PanelData, PanelPlugin, SelectableValue } from '@grafana/data';
import { Forms, selectThemeVariant, stylesFactory } from '@grafana/ui';
import { Forms, stylesFactory } from '@grafana/ui';
import { css, cx } from 'emotion';
import config from 'app/core/config';
import AutoSizer from 'react-virtualized-auto-sizer';
......@@ -316,7 +316,6 @@ export const PanelEditor = connect(mapStateToProps, mapDispatchToProps)(PanelEdi
*/
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const handleColor = theme.colors.blueLight;
const background = selectThemeVariant({ light: theme.colors.white, dark: theme.colors.inputBlack }, theme.type);
const resizer = css`
font-style: italic;
......@@ -344,7 +343,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
left: 0;
right: 0;
bottom: 0;
background: ${background};
background: ${theme.colors.bodyBg};
display: flex;
flex-direction: column;
`,
......@@ -382,7 +381,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
height: 100%;
width: 100%;
`,
toolbar: css`
display: flex;
padding: ${theme.spacing.sm};
......
public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
......@@ -79,7 +79,7 @@ const getPanelEditorTabsStyles = stylesFactory(() => {
flex-direction: column;
flex-grow: 1;
min-height: 0;
background: ${theme.colors.pageBg};
background: ${theme.colors.panelBg};
.toolbar {
background: transparent;
......
public/app/features/dashboard/containers/DashboardPage.test.tsx
......@@ -198,10 +198,6 @@ describe('DashboardPage', () => {
it('should render settings view', () => {
expect(ctx.wrapper).toMatchSnapshot();
});
it('should set animation state', () => {
expect(ctx.wrapper?.state().isSettingsOpening).toBe(true);
});
});
dashboardPageScenario('When adding panel', ctx => {
......
public/app/features/dashboard/containers/DashboardPage.tsx
......@@ -61,7 +61,6 @@ export interface Props {
}
export interface State {
isSettingsOpening: boolean;
isEditing: boolean;
isFullscreen: boolean;
fullscreenPanel: PanelModel | null;
......@@ -73,7 +72,6 @@ export interface State {
export class DashboardPage extends PureComponent<Props, State> {
state: State = {
isSettingsOpening: false,
isEditing: false,
isFullscreen: false,
showLoadingState: false,
......@@ -103,7 +101,7 @@ export class DashboardPage extends PureComponent<Props, State> {
}
componentDidUpdate(prevProps: Props) {
const { dashboard, editview, urlEdit, urlFullscreen, urlPanelId, urlUid } = this.props;
const { dashboard, urlEdit, urlFullscreen, urlPanelId, urlUid } = this.props;
if (!dashboard) {
return;
......@@ -120,14 +118,6 @@ export class DashboardPage extends PureComponent<Props, State> {
return;
}
// handle animation states when opening dashboard settings
if (!prevProps.editview && editview) {
this.setState({ isSettingsOpening: true });
setTimeout(() => {
this.setState({ isSettingsOpening: false });
}, 10);
}
// Sync url state with model
if (urlFullscreen !== dashboard.meta.fullscreen || urlEdit !== dashboard.meta.isEditing) {
if (urlPanelId && !isNaN(parseInt(urlPanelId, 10))) {
......@@ -265,8 +255,10 @@ export class DashboardPage extends PureComponent<Props, State> {
urlEditPanel,
inspectTab,
isNewEditorOpen,
updateLocation,
} = this.props;
const { isSettingsOpening, isEditing, isFullscreen, scrollTop, updateScrollTop } = this.state;
const { isEditing, isFullscreen, scrollTop, updateScrollTop } = this.state;
if (!dashboard) {
if (isInitSlow) {
......@@ -275,11 +267,6 @@ export class DashboardPage extends PureComponent<Props, State> {
return null;
}
const classes = classNames({
'dashboard-page--settings-opening': isSettingsOpening,
'dashboard-page--settings-open': !isSettingsOpening && editview,
});
const gridWrapperClasses = classNames({
'dashboard-container': true,
'dashboard-container--has-submenu': dashboard.meta.submenuEnabled,
......@@ -294,12 +281,11 @@ export class DashboardPage extends PureComponent<Props, State> {
const approximateScrollTop = Math.round(scrollTop / 25) * 25;
return (
<div className={classes}>
<div>
<DashNav
dashboard={dashboard}
isEditing={isEditing}
isFullscreen={isFullscreen}
editview={editview}
$injector={$injector}
onAddPanel={this.onAddPanel}
/>
......@@ -311,8 +297,6 @@ export class DashboardPage extends PureComponent<Props, State> {
updateAfterMountMs={500}
className="custom-scrollbar--page"
>
{editview && <DashboardSettings dashboard={dashboard} />}
{initError && this.renderInitFailedState()}
<div className={gridWrapperClasses}>
......@@ -335,6 +319,11 @@ export class DashboardPage extends PureComponent<Props, State> {
<PanelEditor dashboard={dashboard} sourcePanel={editPanel} />
</Portal>
)}
{editview && (
<Portal>
<DashboardSettings dashboard={dashboard} updateLocation={updateLocation} />
</Portal>
)}
</div>
);
}
......
public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DashboardPage Dashboard init completed Should render dashboard grid 1`] = `
<div
className=""
>
<div>
<Connect(DashNav)
$injector={Object {}}
dashboard={
......@@ -347,9 +345,7 @@ exports[`DashboardPage Dashboard is fetching slowly Should render slow init stat
exports[`DashboardPage Given initial state Should render nothing 1`] = `""`;
exports[`DashboardPage When dashboard has editview url state should render settings view 1`] = `
<div
className="dashboard-page--settings-opening"
>
<div>
<Connect(DashNav)
$injector={Object {}}
dashboard={
......@@ -448,7 +444,6 @@ exports[`DashboardPage When dashboard has editview url state should render setti
"version": 0,
}
}
editview="settings"
isEditing={false}
isFullscreen={false}
onAddPanel={[Function]}
......@@ -467,104 +462,6 @@ exports[`DashboardPage When dashboard has editview url state should render setti
setScrollTop={[Function]}
updateAfterMountMs={500}
>
<DashboardSettings
dashboard={
DashboardModel {
"annotations": Object {
"list": Array [
Object {
"builtIn": 1,
"datasource": "-- Grafana --",
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"type": "dashboard",
},
],
},
"autoUpdate": undefined,
"description": undefined,
"editable": true,
"events": Emitter {
"emitter": EventEmitter {
"_events": Object {},
"_eventsCount": 0,
},
},
"getVariables": [Function],
"gnetId": null,
"graphTooltip": 0,
"id": null,
"links": Array [],
"meta": Object {
"canEdit": true,
"canMakeEditable": false,
"canSave": true,
"canShare": true,
"canStar": true,
"fullscreen": false,
"isEditing": false,
"showSettings": true,
},
"originalTemplating": Array [],
"originalTime": Object {
"from": "now-6h",
"to": "now",
},
"panels": Array [
PanelModel {
"cachedPluginOptions": Object {},
"datasource": null,
"events": Emitter {
"emitter": EventEmitter {
"_events": Object {},
"_eventsCount": 0,
},
},
"gridPos": Object {
"h": 1,
"w": 1,
"x": 0,
"y": 0,
},
"id": 1,
"options": Object {},
"replaceVariables": [Function],
"targets": Array [
Object {
"refId": "A",
},
],
"title": "My graph",
"transparent": false,
"type": "graph",
},
],
"refresh": undefined,
"revision": undefined,
"schemaVersion": 22,
"snapshot": undefined,
"style": "dark",
"tags": Array [],
"templating": Object {
"list": Array [],
},
"time": Object {
"from": "now-6h",
"to": "now",
},
"timepicker": Object {},
"timezone": "",
"title": "My dashboard",
"uid": null,
"variables": Object {
"list": Array [],
},
"version": 0,
}
}
/>
<div
className="dashboard-container"
>
......@@ -770,5 +667,106 @@ exports[`DashboardPage When dashboard has editview url state should render setti
</div>
</CustomScrollbar>
</div>
<Portal>
<DashboardSettings
dashboard={
DashboardModel {
"annotations": Object {
"list": Array [
Object {
"builtIn": 1,
"datasource": "-- Grafana --",
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"type": "dashboard",
},
],
},
"autoUpdate": undefined,
"description": undefined,
"editable": true,
"events": Emitter {
"emitter": EventEmitter {
"_events": Object {},
"_eventsCount": 0,
},
},
"getVariables": [Function],
"gnetId": null,
"graphTooltip": 0,
"id": null,
"links": Array [],
"meta": Object {
"canEdit": true,
"canMakeEditable": false,
"canSave": true,
"canShare": true,
"canStar": true,
"fullscreen": false,
"isEditing": false,
"showSettings": true,
},
"originalTemplating": Array [],
"originalTime": Object {
"from": "now-6h",
"to": "now",
},
"panels": Array [
PanelModel {
"cachedPluginOptions": Object {},
"datasource": null,
"events": Emitter {
"emitter": EventEmitter {
"_events": Object {},
"_eventsCount": 0,
},
},
"gridPos": Object {
"h": 1,
"w": 1,
"x": 0,
"y": 0,
},
"id": 1,
"options": Object {},
"replaceVariables": [Function],
"targets": Array [
Object {
"refId": "A",
},
],
"title": "My graph",
"transparent": false,
"type": "graph",
},
],
"refresh": undefined,
"revision": undefined,
"schemaVersion": 22,
"snapshot": undefined,
"style": "dark",
"tags": Array [],
"templating": Object {
"list": Array [],
},
"time": Object {
"from": "now-6h",
"to": "now",
},
"timepicker": Object {},
"timezone": "",
"title": "My dashboard",
"uid": null,
"variables": Object {
"list": Array [],
},
"version": 0,
}
}
updateLocation={[MockFunction]}
/>
</Portal>
</div>
`;
public/app/features/explore/RichHistory/RichHistory.tsx
......@@ -51,24 +51,23 @@ interface RichHistoryState {
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const borderColor = theme.isLight ? theme.colors.gray5 : theme.colors.dark6;
const tabBarBg = theme.isLight ? theme.colors.white : theme.colors.black;
const tabContentBg = theme.isLight ? theme.colors.gray7 : theme.colors.dark2;
const tabContentBg = theme.colors.pageBg;
return {
container: css`
height: 100%;
background-color: ${tabContentBg};
`,
tabContent: css`
background-color: ${tabContentBg};
padding: ${theme.spacing.md};
background-color: ${tabContentBg};
`,
close: css`
position: absolute;
right: ${theme.spacing.sm};
right: 16px;
top: 5px;
cursor: pointer;
font-size: ${theme.typography.size.lg};
`,
tabs: css`
background-color: ${tabBarBg};
padding-top: ${theme.spacing.sm};
border-color: ${borderColor};
ul {
......
public/app/features/explore/RichHistory/RichHistoryCard.tsx
......@@ -36,7 +36,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
: isRemoved
? theme.colors.gray15
: theme.colors.gray05;
const cardBoxShadow = theme.isLight ? `0px 2px 2px ${borderColor}` : `0px 2px 4px black`;
return {
queryCard: css`
......@@ -44,7 +43,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
flex-direction: column;
border: 1px solid ${borderColor};
margin: ${theme.spacing.sm} 0;
box-shadow: ${cardBoxShadow};
background-color: ${cardColor};
border-radius: ${theme.border.radius.sm};
.starred {
......
public/app/features/explore/RichHistory/RichHistoryContainer.tsx
......@@ -22,12 +22,12 @@ import { RichHistory, Tabs } from './RichHistory';
import { deleteRichHistory } from '../state/actions';
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const containerBackground = theme.isLight ? theme.colors.gray7 : theme.colors.dark2;
const containerBackground = theme.isLight ? theme.colors.gray95 : theme.colors.gray15;
const containerBorderColor = theme.isLight ? theme.colors.gray5 : theme.colors.dark6;
const handleBackground = theme.isLight ? theme.colors.gray5 : theme.colors.gray15;
const handleDots = theme.isLight ? theme.colors.gray70 : theme.colors.gray33;
const handleBackgroundHover = theme.isLight ? theme.colors.gray70 : theme.colors.gray33;
const handleDotsHover = theme.isLight ? theme.colors.gray5 : theme.colors.dark7;
const handleBackground = theme.isLight ? theme.colors.white : theme.colors.gray15;
const handleDots = theme.isLight ? theme.colors.gray85 : theme.colors.gray33;
const handleBackgroundHover = theme.isLight ? theme.colors.gray85 : theme.colors.gray33;
const handleDotsHover = theme.isLight ? theme.colors.gray70 : theme.colors.dark7;
return {
container: css`
......
public/app/routes/routes.ts
......@@ -197,6 +197,7 @@ export function setupAngularRoutes($routeProvider: route.IRouteProvider, $locati
.when('/explore', {
template: '<react-container />',
reloadOnSearch: false,
pageClass: 'page-explore',
resolve: {
roles: () => (config.viewersCanEdit ? [] : ['Editor', 'Admin']),
component: () => SafeDynamicImport(import(/* webpackChunkName: "explore" */ 'app/features/explore/Wrapper')),
......
public/sass/_variables.dark.generated.scss
......@@ -25,6 +25,17 @@ $green-base: #299c46;
$green-shade: #23843b;
$orange-dark: #ff780a;
$gray98: #f7f8fa;
$gray95: #e9edf2;
$gray85: #c7d0d9;
$gray70: #9fa7b3;
$gray60: #7b8087;
$gray33: #464c54;
$gray25: #343b40;
$gray15: #202226;
$gray10: #141619;
$gray05: #0b0c0e;
// Grays
// -------------------------
$black: #000000;
......@@ -78,8 +89,8 @@ $critical: #e02f44;
// Scaffolding
// -------------------------
$body-bg: #161719;
$page-bg: #161719;
$body-bg: #0b0c0e;
$page-bg: #141619;
$body-color: #d8d9da;
$text-color: #d8d9da;
......@@ -94,8 +105,6 @@ $textShadow: none;
// gradients
$brand-gradient-horizontal: linear-gradient(to right, #f05a28 30%, #fbca0a 99%);
$brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
$page-gradient: linear-gradient(180deg, $dark-5 10px, $dark-2 100px);
$edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black);
// Links
// -------------------------
......@@ -114,13 +123,13 @@ $hr-border-color: $dark-9;
// Panel
// -------------------------
$panel-bg: #212124;
$panel-border: solid 1px $dark-1;
$panel-header-hover-bg: $dark-9;
$panel-bg: #141619;
$panel-border: 1px solid #202226;
$panel-header-hover-bg: #202226;
$panel-corner: $panel-bg;
// page header
$page-header-bg: linear-gradient(90deg, $dark-7, $black);
$page-header-bg: #202226;
$page-header-shadow: inset 0px -4px 14px $dark-3;
$page-header-border-color: $dark-9;
......@@ -135,8 +144,8 @@ $code-tag-bg: $dark-1;
$code-tag-border: $dark-9;
// cards
$card-background: linear-gradient(135deg, $dark-8, $dark-6);
$card-background-hover: linear-gradient(135deg, $dark-9, $dark-6);
$card-background: linear-gradient(135deg, $dark-4, $dark-3);
$card-background-hover: linear-gradient(135deg, $dark-5, $dark-6);
$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
// Lists
......@@ -212,7 +221,6 @@ $placeholderText: darken($text-color, 25%);
// Search
$search-shadow: 0 0 30px 0 $black;
$search-filter-box-bg: $gray-blue;
// Typeahead
$typeahead-shadow: 0 5px 10px 0 $black;
......@@ -221,10 +229,10 @@ $typeahead-selected-color: $yellow;
// Dropdowns
// -------------------------
$dropdownBackground: $dark-6;
$dropdownBorder: rgba(0, 0, 0, 0.2);
$dropdownBackground: $panel-bg;
$dropdownBorder: #202226;
$dropdownDividerTop: transparent;
$dropdownDividerBottom: #444;
$dropdownDividerBottom: #343b40;
$dropdownLinkColor: $text-color;
$dropdownLinkColorHover: $white;
......@@ -239,26 +247,23 @@ $horizontalComponentOffset: 180px;
// Navbar
// -------------------------
$navbarHeight: 55px;
$navbarBackground: $panel-bg;
$navbarBorder: 1px solid $dark-6;
$navbarButtonBackground: $navbarBackground;
$navbarButtonBackgroundHighlight: $body-bg;
$navbarButtonBackground: $panel-bg;
$navbar-button-border: #2f2f32;
// Sidemenu
// -------------------------
$side-menu-bg: $black;
$side-menu-bg-mobile: $side-menu-bg;
$side-menu-bg: $panel-bg;
$side-menu-bg-mobile: $panel-bg;
$side-menu-border: none;
$side-menu-item-hover-bg: $dark-3;
$side-menu-shadow: 0 0 20px black;
$side-menu-link-color: $link-color;
// Menu dropdowns
// -------------------------
$menu-dropdown-bg: $body-bg;
$menu-dropdown-bg: $panel-bg;
$menu-dropdown-hover-bg: $dark-3;
$menu-dropdown-shadow: 5px 5px 20px -5px $black;
......
public/sass/_variables.light.generated.scss
......@@ -25,6 +25,17 @@ $green-base: #3eb15b;
$green-shade: #369b4f;
$orange-dark: #ed5700;
$gray98: #f7f8fa;
$gray95: #e9edf2;
$gray85: #c7d0d9;
$gray70: #9fa7b3;
$gray60: #7b8087;
$gray33: #464c54;
$gray25: #343b40;
$gray15: #202226;
$gray10: #141619;
$gray05: #0b0c0e;
// Grays
// -------------------------
$black: #000000;
......@@ -72,7 +83,7 @@ $critical: #c4162a;
// Scaffolding
// -------------------------
$body-bg: #f7f8fa;
$page-bg: #f7f8fa;
$page-bg: #ffffff;
$body-color: #52545c;
$text-color: #52545c;
......@@ -86,8 +97,6 @@ $text-shadow-faint: none;
// gradients
$brand-gradient-horizontal: linear-gradient(to right, #f05a28 30%, #fbca0a 99%);
$brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
$page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px);
$edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
// Links
// -------------------------
......@@ -107,12 +116,12 @@ $hr-border-color: $gray-4 !default;
// Panel
// -------------------------
$panel-bg: #ffffff;
$panel-border: solid 1px $gray-5;
$panel-border: 1px solid #e9edf2;
$panel-header-hover-bg: $gray-6;
$panel-corner: $gray-4;
// Page header
$page-header-bg: linear-gradient(90deg, $white, $gray-7);
$page-header-bg: linear-gradient(90deg, $white, #e9edf2);
$page-header-shadow: inset 0px -3px 10px $gray-6;
$page-header-border-color: $gray-4;
......@@ -205,7 +214,6 @@ $placeholderText: $gray-2;
// search
$search-shadow: 0 1px 5px 0 $gray-5;
$search-filter-box-bg: $gray-7;
// Typeahead
$typeahead-shadow: 0 5px 10px 0 $gray-5;
......@@ -232,26 +240,23 @@ $horizontalComponentOffset: 180px;
// Navbar
// -------------------------
$navbarHeight: 52px;
$navbarBackground: $white;
$navbarBorder: 1px solid $gray-5;
$navbarButtonBackground: lighten($navbarBackground, 3%);
$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
$navbarButtonBackground: $panel-bg;
$navbar-button-border: $gray-4;
// Sidemenu
// -------------------------
$side-menu-bg: $dark-1;
$side-menu-bg: #202226;
$side-menu-border: 1px solid #343b40;
$side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
$side-menu-item-hover-bg: $gray-1;
$side-menu-item-hover-bg: #343b40;
$side-menu-shadow: 5px 0px 10px -5px $gray-1;
$side-menu-link-color: $gray-6;
// Menu dropdowns
// -------------------------
$menu-dropdown-bg: $gray-7;
$menu-dropdown-bg: $panel-bg;
$menu-dropdown-hover-bg: $gray-6;
$menu-dropdown-shadow: 5px 5px 10px -5px $gray-1;
......
public/sass/components/_dashboard_settings.scss
.dashboard-settings {
opacity: 0;
position: fixed;
height: 100%;
display: flex;
flex-direction: row;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: $zindex-modal;
background: $body-bg;
}
.dashboard-page--settings-opening {
.dashboard-container {
display: none;
}
.dashboard-settings__body1 {
height: calc(100% - #{$navbarHeight});
width: 100%;
}
.dashboard-page--settings-open {
.dashboard-settings {
opacity: 1;
transition: opacity 300ms ease-in-out;
}
.dashboard-container {
display: none;
}
.dashboard-settings__body2 {
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
background: $panel-bg;
}
.dashboard-settings__content {
......@@ -31,7 +33,7 @@
.dashboard-settings__aside {
padding: 32px 0 0 32px;
background: $panel-bg;
background: lightOrDark($gray95, $gray15);
display: flex;
flex-direction: column;
}
......
public/sass/components/_navbar.scss
......@@ -14,6 +14,10 @@
padding-left: $dashboard-padding;
margin-left: 0;
}
&--shadow {
box-shadow: $side-menu-shadow;
}
}
@mixin navbar-alt-look() {
......@@ -22,28 +26,6 @@
border-bottom: $navbarBorder;
}
.dashboard-page--settings-open {
.navbar {
@include navbar-alt-look();
}
.navbar-buttons--tv,
.navbar-button--add-panel,
.navbar-button--star,
.navbar-button--save,
.navbar-button--share,
.navbar-button--settings,
.navbar-page-btn .fa-caret-down,
.refresh-picker,
.time-picker {
display: none;
}
.navbar-buttons--close {
display: flex;
}
}
.panel-in-fullscreen,
.panel-in-fullscreen.view-mode--tv {
.navbar {
......@@ -86,6 +68,7 @@
.navbar-page-btn__folder {
color: $text-color-weak;
display: none;
padding-right: 8px;
@include media-breakpoint-up(lg) {
display: inline-block;
......@@ -129,7 +112,7 @@ i.navbar-page-btn__search {
}
.navbar-button {
@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
background-color: $panel-bg;
display: flex;
align-items: center;
......@@ -192,6 +175,12 @@ i.navbar-page-btn__search {
@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
}
&:hover {
.fa {
color: $text-color;
}
}
@include media-breakpoint-down(lg) {
.btn-title {
margin-left: $space-xs;
......@@ -206,12 +195,3 @@ i.navbar-page-btn__search {
align-items: center;
padding-right: 13px;
}
.navbar-settings-title {
display: block;
margin: 0;
color: $headings-color;
font-size: $font-size-lg;
min-height: $navbarHeight;
line-height: $navbarHeight;
}
public/sass/components/_panel_gettingstarted.scss
// Colors
$progress-color-dark: $panel-bg !default;
$progress-color: $panel-bg !default;
$progress-line-uncompleted: lightOrDarkTheme($gray-3, $gray-1);
$progress-line-uncompleted: lightOrDark($gray-3, $gray-1);
// Sizing
$marker-size: 60px !default;
......
public/sass/components/_search.scss
......@@ -3,10 +3,10 @@
right: 0;
left: 0;
bottom: 0;
top: $navbarHeight;
top: 0;
z-index: $zindex-modal-backdrop;
background-color: $black;
@include opacity(75);
@include opacity(60);
}
.search-container {
......@@ -16,6 +16,7 @@
bottom: 0;
z-index: ($zindex-modal-backdrop + 10);
position: fixed;
background: $body-bg;
}
// Search
......@@ -26,7 +27,7 @@
}
.search-dropdown__col_1 {
background: $page-bg;
padding: $dashboard-padding;
max-width: 700px;
display: flex;
flex-direction: column;
......@@ -47,8 +48,9 @@
}
.search-filter-box {
background: $search-filter-box-bg;
border-radius: 2px;
background: $panel-bg;
border: $panel-border;
border-radius: 3px;
padding: $spacer * 1.5;
min-width: 340px;
margin-bottom: $spacer * 1.5;
......@@ -77,6 +79,10 @@
.search-results-scroller {
display: flex;
position: relative;
min-height: 100%;
background: $panel-bg;
border: $panel-border;
border-radius: 3px;
}
.search-results-container {
......@@ -106,10 +112,9 @@
.search-section {
background: $panel-bg;
border: $panel-border;
border-bottom: 1px solid lightOrDark($gray95, $gray25);
padding: 0px 4px 4px 4px;
margin-bottom: 3px;
border-radius: 5px;
}
.search-section__header {
......
public/sass/components/_sidemenu.scss
$mobile-menu-breakpoint: md;
.sidemenu {
background: $side-menu-bg;
position: fixed;
display: flex;
flex-flow: column;
flex-direction: column;
width: $side-menu-width;
z-index: $zindex-sidemenu;
a:focus {
text-decoration: none;
}
......@@ -20,7 +22,7 @@ $mobile-menu-breakpoint: md;
}
@include media-breakpoint-up($mobile-menu-breakpoint) {
background: $side-menu-bg;
border-right: $side-menu-border;
height: auto;
box-shadow: $side-menu-shadow;
position: relative;
......@@ -205,7 +207,7 @@ li.sidemenu-org-switcher {
height: $navbarHeight - 1px;
&:hover {
background: $navbarButtonBackgroundHighlight;
background: lightOrDark($gray33, $gray25);
}
img {
......
public/sass/layout/_page.scss
......@@ -11,12 +11,13 @@
.main-view {
position: relative;
flex-grow: 1;
background: $page-gradient;
background: $page-bg;
}
.panel-in-fullscreen {
.page-explore,
.page-dashboard {
.main-view {
background: $edit-gradient;
background: $body-bg;
}
}
......
public/sass/mixins/_mixins.scss
......@@ -369,7 +369,7 @@
}
}
@function lightOrDarkTheme($lightColor, $darkColor) {
@function lightOrDark($lightColor, $darkColor) {
@if (lightness($text-color) < 50) {
@return $lightColor;
} @else {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment