From aeffe1cea9b80937b3d3d6340cf63555c27d08e1 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Fri, 1 Dec 2017 11:22:12 +0000
Subject: [PATCH] Style resizers while dragging.

---
 .../web/public/stylesheets/app/editor.less    |  2 +-
 .../stylesheets/core/_common-variables.less   |  4 +-
 .../public/stylesheets/core/ol-variables.less | 56 ++++++++++---------
 3 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index 56c620c16d..e280f92779 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -330,7 +330,7 @@
 	}
 }
 .ui-layout-resizer-dragging {
-	background-color: #ddd;
+	background-color: @editor-resizer-bg-color-dragging;
 }
 
 .context-menu {
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 11d3e3681c..c5bd633b15 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -917,8 +917,8 @@
 @file-tree-multiselect-hover-bg : lighten(@brand-info, 30%);
 
 // Editor resizers
-@editor-resizer-bg-color        : #F4F4F4;
-
+@editor-resizer-bg-color          : #F4F4F4;
+@editor-resizer-bg-color-dragging : #ddd;
 // Tags
 @tag-border-radius  : 0.25em;
 @tag-bg-color       : @label-default-bg;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 4cf789c666..54fdddf309 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -157,35 +157,37 @@
 @footer-padding                 : 2em 0;
 
 // Editor header
-@toolbar-header-bg-color        : @ol-blue-gray-6;
-@toolbar-header-shadow          : none;
-@toolbar-btn-color              : #FFF;
-@toolbar-btn-hover-color        : #FFF;
-@toolbar-btn-hover-bg-color     : @ol-blue-gray-5;
-@toolbar-btn-hover-text-shadow  : none;
-@toolbar-btn-active-color       : #FFF;
-@toolbar-btn-active-bg-color    : @ol-green;
-@toolbar-btn-active-shadow      : none;
-@toolbar-border-color           : @ol-blue-gray-5;
-@toolbar-alt-bg-color           : @ol-blue-gray-5;
-@toolbar-icon-btn-color         : #FFF;
-@toolbar-icon-btn-hover-color   : #FFF;
-@toolbar-icon-btn-hover-shadow  : none;
-@toolbar-border-bottom          : 1px solid @toolbar-border-color;
+@toolbar-header-bg-color          : @ol-blue-gray-6;
+@toolbar-header-shadow            : none;
+@toolbar-btn-color                : #FFF;
+@toolbar-btn-hover-color          : #FFF;
+@toolbar-btn-hover-bg-color       : @ol-blue-gray-5;
+@toolbar-btn-hover-text-shadow    : none;
+@toolbar-btn-active-color         : #FFF;
+@toolbar-btn-active-bg-color      : @ol-green;
+@toolbar-btn-active-shadow        : none;
+@toolbar-border-color             : @ol-blue-gray-5;
+@toolbar-alt-bg-color             : @ol-blue-gray-5;
+@toolbar-icon-btn-color           : #FFF;
+@toolbar-icon-btn-hover-color     : #FFF;
+@toolbar-icon-btn-hover-shadow    : none;
+@toolbar-border-bottom            : 1px solid @toolbar-border-color;
 // Editor file-tree
-@file-tree-bg                   : @ol-blue-gray-4;
-@file-tree-item-color           : #FFF;
-@file-tree-item-input-color     : @ol-blue-gray-5;
-@file-tree-item-toggle-color    : @ol-blue-gray-2;
-@file-tree-item-icon-color      : @ol-blue-gray-2;
-@file-tree-item-folder-color    : @ol-blue-gray-2;
-@file-tree-item-hover-bg        : @ol-blue-gray-5;
-@file-tree-item-selected-bg     : @ol-green;
-@file-tree-multiselect-bg       : @ol-blue;
-@file-tree-multiselect-hover-bg : @ol-dark-blue;
-@file-tree-droppable-bg-color   : tint(@ol-green, 5%);
+@file-tree-bg                     : @ol-blue-gray-4;
+@file-tree-item-color             : #FFF;
+@file-tree-item-input-color       : @ol-blue-gray-5;
+@file-tree-item-toggle-color      : @ol-blue-gray-2;
+@file-tree-item-icon-color        : @ol-blue-gray-2;
+@file-tree-item-folder-color      : @ol-blue-gray-2;
+@file-tree-item-hover-bg          : @ol-blue-gray-5;
+@file-tree-item-selected-bg       : @ol-green;
+@file-tree-multiselect-bg         : @ol-blue;
+@file-tree-multiselect-hover-bg   : @ol-dark-blue;
+@file-tree-droppable-bg-color     : tint(@ol-green, 5%);
 // Editor resizers
-@editor-resizer-bg-color        : @ol-blue-gray-6;
+@editor-resizer-bg-color          : @ol-blue-gray-6;
+@editor-resizer-bg-color-dragging : transparent;
+
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.