From 7bde2a72184a707d39420343c11b9c0ed738f21f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Pior?= <piorek82@gmail.com>
Date: Mon, 21 May 2018 14:11:30 +0200
Subject: [PATCH] #7204 bxvariables

---
 js/notebook/src/shared/style/bxvariables.scss | 24 ++++++++++
 js/notebook/src/shared/style/spark.scss       | 46 +++++++++++++++++++
 .../{tree/styles => shared/style}/tree.scss   | 38 +++++++++++++--
 3 files changed, 105 insertions(+), 3 deletions(-)
 create mode 100644 js/notebook/src/shared/style/bxvariables.scss
 rename js/notebook/src/{tree/styles => shared/style}/tree.scss (86%)

diff --git a/js/notebook/src/shared/style/bxvariables.scss b/js/notebook/src/shared/style/bxvariables.scss
new file mode 100644
index 0000000000..a9dc02bd42
--- /dev/null
+++ b/js/notebook/src/shared/style/bxvariables.scss
@@ -0,0 +1,24 @@
+/*
+ *  Copyright 2017 TWO SIGMA OPEN SOURCE, LLC
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+$bxBorderColor1: #cccccc;
+$bxBgColor1: #ffffff;
+$bxBgColor2: #eeeeee;
+
+$bxColorSuccess: #5cb85c;
+$bxColorInfo: #5bc0de;
+$bxColorWarning: #f0ad4e;
+$bxColorDefault: #777777;
diff --git a/js/notebook/src/shared/style/spark.scss b/js/notebook/src/shared/style/spark.scss
index 1f4c863f35..1e4211dad5 100644
--- a/js/notebook/src/shared/style/spark.scss
+++ b/js/notebook/src/shared/style/spark.scss
@@ -14,6 +14,8 @@
  *  limitations under the License.
  */
 
+@import "bxvariables";
+
 .foldout-preview {
   & > .bx-spark-stagePanel {
     padding: 0;
@@ -27,3 +29,47 @@
 .bx-spark-stageProgressBar {
   margin: 0 10px;
 }
+
+.bx-panel {
+  border: 1px solid $bxBorderColor1;
+  border-radius: 2px;
+  margin-bottom: 18px;
+
+  .bx-panel-heading {
+    background-color: $bxBgColor2;
+    padding: 10px;
+    border-bottom: 1px solid $bxBorderColor1;
+
+    display: flex;
+  }
+
+  .bx-panel-body {
+    padding: 10px;
+  }
+}
+
+.bx-label {
+  display: inline;
+  padding: .2em .6em .3em;
+  font-size: 75%;
+  font-weight: bold;
+  line-height: 1;
+  text-align: center;
+  vertical-align: baseline;
+  border-radius: .25em;
+  color: #ffffff;
+
+  &.done { background-color: $bxColorSuccess; }
+  &.active { background-color: $bxColorInfo; }
+  &.waiting { background-color: $bxColorWarning; }
+  &.all { background-color: $bxColorDefault; }
+}
+
+.bx-progress-bar {
+  display: inline-block;
+  height: 28px;
+
+  &.done { background-color: $bxColorSuccess; }
+  &.active { background-color: $bxColorInfo; }
+  &.waiting { background-color: $bxColorWarning; }
+}
diff --git a/js/notebook/src/tree/styles/tree.scss b/js/notebook/src/shared/style/tree.scss
similarity index 86%
rename from js/notebook/src/tree/styles/tree.scss
rename to js/notebook/src/shared/style/tree.scss
index 7edaf483da..9657dbedb2 100644
--- a/js/notebook/src/tree/styles/tree.scss
+++ b/js/notebook/src/shared/style/tree.scss
@@ -30,6 +30,8 @@
  *  limitations under the License.
  */
 
+@import "bxvariables";
+
 #beakerx-tree-widget.isLab {
   width: 100%;
   height: 100%;
@@ -131,9 +133,6 @@
 }
 
 // ========== NEW
-$bxBorderColor1: #cccccc;
-$bxBgColor1: #ffffff;
-$bxBgColor2: #eeeeee;
 
 #beakerx-tree {
 
@@ -201,6 +200,39 @@ $bxBgColor2: #eeeeee;
 
     .bx-panel-body {
       padding:10px;
+
+      .bx-form-row {
+
+        &:not(:last-child) {
+          margin-bottom: 6px;
+        }
+
+        .bx-input-text {
+          display: inline-block;
+          border: 1px solid $bxBorderColor1;
+          border-radius: 2px;
+          margin: 0 6px 0 0;
+          padding: 6px 12px;
+          font-size: 13px;
+          line-height: 1.4;
+        }
+
+        .bx-btn {
+          border: 1px solid $bxBorderColor1;
+          border-radius: 2px;
+          margin: 0;
+          background-color: $bxBgColor1;
+          padding: 6px 12px;
+          font-size: 13px;
+          line-height: 1.4;
+
+          &:hover {
+            background-color: $bxBgColor2;
+          }
+
+        }
+
+      }
     }
   }