Vertical category menu

core/css.js

@@ -1104,47 +1104,45 @@ Blockly.Css.CONTENT = [
   '}',
 
   '.scratchCategoryMenu {',
-    'width: 250px;',
+    'width: 60px;',
     'background: $colour_toolbox;',
     'color: $colour_toolboxText;',
-    'font-size: .9em;',
+    'font-size: .7em;',
     'user-select: none;',
     '-webkit-user-select: none;',
     '-moz-user-select: none;',
     '-ms-user-select: none;',
   '}',
 
-  '.scratchCategoryRow {',
-    'width: 50%;',
+  '.scratchCategoryMenuRow {',
+  '}',
+
+  '.scratchCategoryMenuRow + .scratchCategoryMenuRow:before {',
+    'display: block;',
+    'border-top: 1px solid #ddd;',
+    'content: "";',
+    'width: 60%;',
+    'margin: 4px auto;',
   '}',
 
   '.scratchCategoryMenuItem {',
-    'padding: 4px;',
-    'width: 50%;',
+    'padding: 6px 0px;',
     'cursor: pointer;',
+    'margin: 0px 2px;',
+    'text-align: center;',
   '}',
 
   '.scratchCategoryMenuItem.categorySelected {',
     'background: $colour_toolboxSelected;',
-    'border-radius: 16px;',
+    'border-radius: 6px;',
   '}',
 
-  '.scratchCategoryItemBubbleLTR {',
-    'width: 14px;',
-    'height: 14px;',
+  '.scratchCategoryItemBubble {',
+    'width: 16px;',
+    'height: 16px;',
     'border: 1px solid;',
-    'border-radius: 8px;',
-    'float: left;',
-    'margin-right: 8px;',
-  '}',
-
-  '.scratchCategoryItemBubbleRTL {',
-    'width: 14px;',
-    'height: 14px;',
-    'border: 1px solid;',
-    'border-radius: 8px;',
-    'float: right;',
-    'margin-left: 8px;',
+    'border-radius: 100%;',
+    'margin: 0 auto 3px;',
   '}',
 
   '.scratchCategoryMenuItem:hover {',