From a5cad2bb31285765eddf29acaa009d1a7335db56 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Sun, 30 Sep 2018 12:27:37 +0200
Subject: [PATCH] Try a white sidebar (#10062)

* Try a white sidebar

This PR extracts an idea from #9784, a white sidebar.

This looks a little jarring at first, but can grow on you. Because it's sort of a jarring change, I think it needs to be tested in a PR, rather than be discussed. That way people can actually _feel_ it, rather than look at screenshots.

What do you think?

* Try sticky and light gray tabs

* Address feedback.
---
 edit-post/assets/stylesheets/_z-index.scss              | 1 +
 edit-post/components/sidebar/settings-header/style.scss | 6 +++++-
 edit-post/components/sidebar/style.scss                 | 2 +-
 packages/components/src/panel/style.scss                | 1 -
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
index 44b6824b184860..014f2820cea182 100644
--- a/edit-post/assets/stylesheets/_z-index.scss
+++ b/edit-post/assets/stylesheets/_z-index.scss
@@ -12,6 +12,7 @@ $z-layers: (
 	".editor-block-list__layout .reusable-block-indicator": 1,
 	".editor-block-list__breadcrumb": 2,
 	".components-form-toggle__input": 1,
+	".components-panel__header.edit-post-sidebar__panel-tabs": 1,
 	".editor-inserter__tabs": 1,
 	".editor-inserter__tab.is-active": 1,
 	".components-panel__header": 1,
diff --git a/edit-post/components/sidebar/settings-header/style.scss b/edit-post/components/sidebar/settings-header/style.scss
index 26743592f71a1e..fca16046d496b5 100644
--- a/edit-post/components/sidebar/settings-header/style.scss
+++ b/edit-post/components/sidebar/settings-header/style.scss
@@ -3,6 +3,10 @@
 	padding-left: 0;
 	padding-right: $grid-size-small;
 	border-top: 0;
+	background: $light-gray-200;
+	position: sticky;
+	z-index: z-index(".components-panel__header.edit-post-sidebar__panel-tabs");
+	top: 0;
 }
 
 .edit-post-sidebar__panel-tab {
@@ -10,7 +14,7 @@
 	border: none;
 	border-radius: 0;
 	cursor: pointer;
-	height: 50px;
+	height: $grid-size * 6;
 	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
 	font-weight: 400;
diff --git a/edit-post/components/sidebar/style.scss b/edit-post/components/sidebar/style.scss
index eda49ffb3d1ade..c33aee329d7065 100644
--- a/edit-post/components/sidebar/style.scss
+++ b/edit-post/components/sidebar/style.scss
@@ -6,7 +6,7 @@
 	bottom: 0;
 	width: $sidebar-width;
 	border-left: $border-width solid $light-gray-500;
-	background: $light-gray-300;
+	background: $white;
 	color: $dark-gray-500;
 	height: 100vh;
 	overflow: hidden;
diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss
index c1eecd4dc0fc3a..21b3ab0da33df2 100644
--- a/packages/components/src/panel/style.scss
+++ b/packages/components/src/panel/style.scss
@@ -38,7 +38,6 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	background: $light-gray-300;
 	padding: 0 $panel-padding;
 	height: 50px;
 	border-top: $border-width solid $light-gray-500;