From daf3cb7b81b6494d383dc709f336be9493cd4601 Mon Sep 17 00:00:00 2001
From: Sam El-Husseini <microsoftsam@users.noreply.github.com>
Date: Thu, 10 Aug 2017 16:02:31 -0700
Subject: [PATCH] Split out blockly css, related to pxt/#2694 (#506)

---
 theme/blockly.less | 73 ++++++++++++++++++++++++++++++++++++++++++++++
 theme/style.less   | 57 ------------------------------------
 2 files changed, 73 insertions(+), 57 deletions(-)
 create mode 100644 theme/blockly.less

diff --git a/theme/blockly.less b/theme/blockly.less
new file mode 100644
index 00000000..41e41113
--- /dev/null
+++ b/theme/blockly.less
@@ -0,0 +1,73 @@
+@import 'themes/default/globals/site.variables';
+@import 'themes/pxt/globals/site.variables';
+@import 'site/globals/site.variables';
+
+@import 'blockly-core';
+
+/* Reference import */
+@import (reference) "semantic.less";
+
+/*******************************
+             Blockly
+*******************************/
+
+div.blocklyTreeRow {
+    box-shadow: inset 0 -1px 0 0 #ecf0f1;
+
+    margin-bottom: 0px !important;
+
+    -webkit-transition-property: background-color; /* Safari */
+    -webkit-transition-duration: 1s; /* Safari */
+    transition-property: background-color;
+    transition-duration: 1s;
+}
+
+/* Blockly toolbox font size same as the page font */
+span.blocklyTreeLabel {
+    font-family: @pageFont !important;
+    font-weight: 200;
+}
+
+.blocklyToolboxDiv, .monacoToolboxDiv {
+    background-color: white !important;
+    border-left: 1px solid #ecf0f1 !important;
+    box-shadow: 4px 0px 2px -4px rgba(0,0,0,0.12), 4px 0px 2px -4px rgba(0,0,0,0.24);
+}
+
+.blocklyFlyoutBackground {
+    fill: #525A67 !important;
+}
+
+/* Remove shadow around blockly blocks */
+.blocklyPathDark, .blocklyPathLight {
+    display: none;
+}
+
+/* Blockly Field: Grid picker */
+.blocklyGridPickerTooltip {
+    padding: 3px 5px;
+    background-color: #fefefe;
+    border: black solid 3px;
+    color: black;
+    border-radius: 10px;
+}
+
+/* Mobile */
+@media only screen and (max-width: @largestMobileScreen) {
+    .blocklyToolboxDiv, .monacoToolboxDiv {
+        border-left: 0 !important;
+    }
+    div.blocklyTreeRoot {
+        padding: 0;
+    }
+}
+
+/* Tablet */
+@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+    .blocklyToolboxDiv, .monacoToolboxDiv {
+        border-left: 0 !important;
+    }
+    div.blocklyTreeRoot {
+        padding: 0;
+    }
+}
\ No newline at end of file
diff --git a/theme/style.less b/theme/style.less
index a92576db..a5cc12de 100644
--- a/theme/style.less
+++ b/theme/style.less
@@ -53,55 +53,10 @@
     background: transparent !important;
 }
 
-/*******************************
-             Blockly
-*******************************/
-
-div.blocklyTreeRow {
-    box-shadow: inset 0 -1px 0 0 #ecf0f1;
-
-    margin-bottom: 0px !important;
-
-    -webkit-transition-property: background-color; /* Safari */
-    -webkit-transition-duration: 1s; /* Safari */
-    transition-property: background-color;
-    transition-duration: 1s;
-}
-
-/* Blockly toolbox font size same as the page font */
-span.blocklyTreeLabel {
-    font-family: @pageFont !important;
-    font-weight: 200;
-}
-
-.blocklyToolboxDiv, .monacoToolboxDiv {
-    background-color: white !important;
-    border-left: 1px solid #ecf0f1 !important;
-    box-shadow: 4px 0px 2px -4px rgba(0,0,0,0.12), 4px 0px 2px -4px rgba(0,0,0,0.24);
-}
-
-.blocklyFlyoutBackground {
-    fill: #525A67 !important;
-}
-
-/* Remove shadow around blockly blocks */
-.blocklyPathDark, .blocklyPathLight {
-    display: none;
-}
-
 .organization {
     top: 1.6em;
 }
 
-/* Blockly Field: Grid picker */
-.blocklyGridPickerTooltip {
-    padding: 3px 5px;
-    background-color: #fefefe;
-    border: black solid 3px;
-    color: black;
-    border-radius: 10px;
-}
-
 /*******************************
              Monaco
 *******************************/
@@ -121,12 +76,6 @@ span.blocklyTreeLabel {
     #filelist {
         background: transparent !important;
     }
-    .blocklyToolboxDiv, .monacoToolboxDiv {
-        border-left: 0 !important;
-    }
-    div.blocklyTreeRoot {
-        padding: 0;
-    }
 }
 
 /* Tablet */
@@ -134,12 +83,6 @@ span.blocklyTreeLabel {
     #filelist {
         background: transparent !important;
     }
-    .blocklyToolboxDiv, .monacoToolboxDiv {
-        border-left: 0 !important;
-    }
-    div.blocklyTreeRoot {
-        padding: 0;
-    }
 }
 
 /* Small Monitor */