Split out blockly css, related to pxt/#2694 (#506)

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;
+    }
+}

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 */