From d6a9a9b9757e16e4f579e018dced1f3511413069 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 29 May 2021 07:08:05 +0200 Subject: [PATCH] Themes: Add border to sidemenu, and reduce border in dark theme a tiny bit (#34737) * Themes: Add border to sidemenu, and reduce border in dark theme a tiny bit * Updated --- packages/grafana-data/src/themes/createColors.ts | 2 +- public/sass/_variables.dark.generated.scss | 14 +++++++------- public/sass/components/_sidemenu.scss | 1 + 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/grafana-data/src/themes/createColors.ts b/packages/grafana-data/src/themes/createColors.ts index afc23c41bdc..e97b369990d 100644 --- a/packages/grafana-data/src/themes/createColors.ts +++ b/packages/grafana-data/src/themes/createColors.ts @@ -88,7 +88,7 @@ class DarkColors implements ThemeColorsBase> { whiteBase = '201, 209, 217'; border = { - weak: `rgba(${this.whiteBase}, 0.08)`, + weak: `rgba(${this.whiteBase}, 0.07)`, medium: `rgba(${this.whiteBase}, 0.15)`, strong: `rgba(${this.whiteBase}, 0.25)`, }; diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index 905f6a67796..c8a6f958098 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -61,9 +61,9 @@ $layer0: #111217; $layer1: #181b1f; $layer2: #22252b; -$divider: rgba(201, 209, 217, 0.08); +$divider: rgba(201, 209, 217, 0.07); -$border0: rgba(201, 209, 217, 0.08); +$border0: rgba(201, 209, 217, 0.07); $border1: rgba(201, 209, 217, 0.15); // Accent colors @@ -130,7 +130,7 @@ $hr-border-color: $dark-9; // Panel // ------------------------- $panel-bg: #181b1f; -$panel-border: 1px solid rgba(201, 209, 217, 0.08); +$panel-border: 1px solid rgba(201, 209, 217, 0.07); $panel-header-hover-bg: rgba(201, 209, 217, 0.08); $panel-box-shadow: none; $panel-corner: $panel-bg; @@ -231,9 +231,9 @@ $typeahead-selected-color: $yellow; // Dropdowns // ------------------------- $dropdownBackground: #181b1f; -$dropdownBorder: rgba(201, 209, 217, 0.08); -$dropdownDividerTop: rgba(201, 209, 217, 0.08); -$dropdownDividerBottom: rgba(201, 209, 217, 0.08); +$dropdownBorder: rgba(201, 209, 217, 0.07); +$dropdownDividerTop: rgba(201, 209, 217, 0.07); +$dropdownDividerBottom: rgba(201, 209, 217, 0.07); $dropdownShadow: 0px 10px 20px rgb(20,20,20); $dropdownLinkColor: $link-color; @@ -295,7 +295,7 @@ $tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.75); $popover-bg: #181b1f; $popover-color: rgb(201, 209, 217); -$popover-border-color: rgba(201, 209, 217, 0.08); +$popover-border-color: rgba(201, 209, 217, 0.07); $popover-header-bg: #22252b; $popover-shadow: 0px 10px 20px rgb(20,20,20); diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index 92d298a2b71..95954640458 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -7,6 +7,7 @@ $mobile-menu-breakpoint: md; flex-direction: column; width: $side-menu-width; z-index: $zindex-sidemenu; + border-right: $panel-border; a:focus { text-decoration: none;