From be207282e3c0d2cf9b192fff238d56bf36d47522 Mon Sep 17 00:00:00 2001
From: Sam El-Husseini <16690124+samelhusseini@users.noreply.github.com>
Date: Sun, 15 Apr 2018 10:29:37 -0700
Subject: [PATCH] Move blockly toolbox css to semantic.css (#522)

---
 theme/blockly-toolbox.less | 117 +++++++++++++++++++++++++++++++
 theme/blockly.less         | 140 -------------------------------------
 theme/style.less           |  33 ++++++++-
 3 files changed, 149 insertions(+), 141 deletions(-)
 create mode 100644 theme/blockly-toolbox.less

diff --git a/theme/blockly-toolbox.less b/theme/blockly-toolbox.less
new file mode 100644
index 00000000..a32caea8
--- /dev/null
+++ b/theme/blockly-toolbox.less
@@ -0,0 +1,117 @@
+
+
+/*******************************
+     Blockly Toolbox
+*******************************/
+
+/* Fonts for toolbox icons */
+@font-face {
+    font-family: 'legoIcons';
+    src: data-uri("../docs/static/fonts/icons/iconfont.woff");
+}
+
+span.blocklyTreeIcon {
+    font-family: 'legoIcons' !important;
+}
+
+/* Toolbox padding */
+.blocklyToolboxDiv, .monacoToolboxDiv {
+    padding: 0.5rem;
+    /*box-shadow: inset 0px 0px 0px 2px #D3A805;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;*/
+    box-shadow: 3px 0 1px -2px @legoGreyLight;
+}
+
+div.blocklyTreeRow {
+    border-radius: 0px;
+    margin-bottom: 7px;
+    /*-webkit-box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.2);
+    -moz-box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.2);
+    box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.2);*/
+
+    border: none !important;
+    border-bottom: 1px solid #EBEBEB !important;
+}
+
+div.blocklyTreeSeparator {
+    border: none;
+    /*border-bottom: solid #CEA403 2px;*/
+}
+
+/* Blockly Text */
+span.blocklyTreeLabel {
+    font-family: @pageFont !important;
+    font-size:1rem !important;
+    font-weight: bold;
+}
+
+/* Search box */
+#blocklySearchArea {
+    margin: 0.5rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
+    margin-bottom: 0.8rem;
+}
+.blocklySearchInputField {
+    border-radius: 1rem !important;
+    border: 1px solid #ebebeb !important;
+}
+
+/* Mobile */
+@media only screen and (max-width: @largestMobileScreen) {
+    #blocklyTrashIcon {
+        margin: 0.2rem;
+    }
+}
+
+/*******************************
+     Custom icons
+*******************************/
+
+span.blocklyTreeIcon.blocklyTreeIconloops::before {
+    content: "\f10b";
+}
+
+span.blocklyTreeIcon.blocklyTreeIconlogic::before {
+    content: "\f10a";
+}
+
+span.blocklyTreeIcon.blocklyTreeIconvariables::before {
+    content: "\f111";
+}
+
+span.blocklyTreeIcon.blocklyTreeIconmath::before {
+    content: "\f10c";
+}
+
+span.blocklyTreeIcon.blocklyTreeIconfunctions {
+    font-family: 'legoIcons' !important;
+}
+span.blocklyTreeIcon.blocklyTreeIconfunctions::before {
+    content: "\f108";
+}
+
+span.blocklyTreeIcon.blocklyTreeIconarrays::before {
+    content: "\f109";
+}
+
+span.blocklyTreeIcon.blocklyTreeIcontext::before {
+    content: "\f110";
+}
+
+span.blocklyTreeIcon.blocklyTreeIconaddpackage::before {
+    content: "\f105";
+}
+
+span.blocklyTreeIcon.blocklyTreeIconadvancedcollapsed::before {
+    content: "\f113";
+}
+
+span.blocklyTreeIcon.blocklyTreeIconadvancedexpanded::before {
+    content: "\f114";
+}
+
+span.blocklyTreeIcon.blocklyTreeIconsearch::before {
+    content: "\f11a";
+}
\ No newline at end of file
diff --git a/theme/blockly.less b/theme/blockly.less
index 3e28c731..a0804463 100644
--- a/theme/blockly.less
+++ b/theme/blockly.less
@@ -4,14 +4,6 @@
 
 @import 'blockly-core';
 
-/* Toolbox icons */
-
-/* Fonts for toolbox icons */
-@font-face {
-    font-family: 'legoIcons';
-    src: data-uri("../docs/static/fonts/icons/iconfont.woff");
-}
-
 .blocklyFlyoutLabel:not(.blocklyFlyoutHeading) .blocklyFlyoutLabelIcon {
     fill: white;
     font-size: 1.7rem;
@@ -21,59 +13,6 @@
     font-family: 'legoIcons' !important;
 }
 
-span.blocklyTreeIcon {
-    font-family: 'legoIcons' !important;
-}
-
-/* Toolbox padding */
-.blocklyToolboxDiv, .monacoToolboxDiv {
-    padding: 0.5rem;
-    /*box-shadow: inset 0px 0px 0px 2px #D3A805;
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;*/
-    box-shadow: 3px 0 1px -2px @legoGreyLight;
-}
-
-div.blocklyTreeRow {
-    border-radius: 0px;
-    margin-bottom: 7px;
-    /*-webkit-box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.2);
-    -moz-box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.2);
-    box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.2);*/
-
-    border: none !important;
-    border-bottom: 1px solid #EBEBEB !important;
-}
-
-div.blocklyTreeSeparator {
-    border: none;
-    /*border-bottom: solid #CEA403 2px;*/
-}
-
-/* Remove shadow around blockly blocks */
-.blocklyPathDark, .blocklyPathLight {
-    display: none;
-}
-
-/* Blockly Text */
-span.blocklyTreeLabel {
-    font-family: @pageFont !important;
-    font-size:1rem !important;
-    font-weight: bold;
-}
-
-/* Search box */
-#blocklySearchArea {
-    margin: 0.5rem;
-    margin-left: 1rem;
-    margin-right: 1rem;
-    margin-bottom: 0.8rem;
-}
-.blocklySearchInputField {
-    border-radius: 1rem !important;
-    border: 1px solid #ebebeb !important;
-}
-
 /* Square shaped corners */
 .blocklyDropDownDiv {
     border-radius: 0px !important;
@@ -91,82 +30,3 @@ span.blocklyTreeLabel {
 .blocklyDropDownButton {
     border-radius: 0px !important;
 }
-
-/* Mobile */
-@media only screen and (max-width: @largestMobileScreen) {
-    #blocklyTrashIcon {
-        margin: 0.2rem;
-    }
-}
-
-span.blocklyTreeIcon.blocklyTreeIconloops::before {
-    content: "\f10b";
-}
-
-span.blocklyTreeIcon.blocklyTreeIconlogic::before {
-    content: "\f10a";
-}
-
-span.blocklyTreeIcon.blocklyTreeIconvariables::before {
-    content: "\f111";
-}
-
-span.blocklyTreeIcon.blocklyTreeIconmath::before {
-    content: "\f10c";
-}
-
-span.blocklyTreeIcon.blocklyTreeIconfunctions {
-    font-family: 'legoIcons' !important;
-}
-span.blocklyTreeIcon.blocklyTreeIconfunctions::before {
-    content: "\f108";
-}
-
-span.blocklyTreeIcon.blocklyTreeIconarrays::before {
-    content: "\f109";
-}
-
-span.blocklyTreeIcon.blocklyTreeIcontext::before {
-    content: "\f110";
-}
-
-span.blocklyTreeIcon.blocklyTreeIconaddpackage::before {
-    content: "\f105";
-}
-
-span.blocklyTreeIcon.blocklyTreeIconadvancedcollapsed::before {
-    content: "\f113";
-}
-
-span.blocklyTreeIcon.blocklyTreeIconadvancedexpanded::before {
-    content: "\f114";
-}
-
-span.blocklyTreeIcon.blocklyTreeIconsearch::before {
-    content: "\f11a";
-}
-
-.save-editortools-btn .icon.save:before {
-    font-family: 'legoIcons';
-    content: "\f118";
-}
-
-.download-button .icon.download.icon-and-text:before {
-    font-family: 'legoIcons';
-    content: "\f117";
-}
-
-.button.approve.positive i.icon.checkmark:before {
-    font-family: 'legoIcons';
-    content: "\f116";
-}
-
-.button.approve.cancel i.icon.cancel:before {
-    font-family: 'legoIcons';
-    content: "\f115";
-}
-
-.blocks-menuitem i.icon.blocks:before {
-    font-family: 'legoIcons' !important;
-    content: "\f119" !important;
-}
diff --git a/theme/style.less b/theme/style.less
index 36b6d9c1..ad23dcc9 100644
--- a/theme/style.less
+++ b/theme/style.less
@@ -1,6 +1,7 @@
 /* Import all components */
 @import 'pxtsemantic';
 @import 'pxt';
+@import 'blockly-toolbox';
 @import 'themes/default/globals/site.variables';
 @import 'themes/pxt/globals/site.variables';
 @import 'site/globals/site.variables';
@@ -167,4 +168,34 @@
     .menubar .ui.menu.fixed .item.editor-menuitem .ui.grid {
         border-color: white !important;
     }
-}
\ No newline at end of file
+}
+
+
+/*******************************
+     Custom icons
+*******************************/
+
+.save-editortools-btn .icon.save:before {
+    font-family: 'legoIcons';
+    content: "\f118";
+}
+
+.download-button .icon.download.icon-and-text:before {
+    font-family: 'legoIcons';
+    content: "\f117";
+}
+
+.button.approve.positive i.icon.checkmark:before {
+    font-family: 'legoIcons';
+    content: "\f116";
+}
+
+.button.approve.cancel i.icon.cancel:before {
+    font-family: 'legoIcons';
+    content: "\f115";
+}
+
+.blocks-menuitem i.icon.blocks:before {
+    font-family: 'legoIcons' !important;
+    content: "\f119" !important;
+}