Update selectors + use vendor prefixes

Author: Aaron Imming

src/assets/sass/scratch/_toolbox.scss

@@ -49,49 +49,49 @@ $category-colours: (
         display: flex;
         flex-direction: row;
     }
-    &__cat-arrow {
+    &__category-arrow {
         display: flex;
         margin: auto;
 
         &--back {
             margin-left: $category-text-spacing;
             fill: $white;
-            transform: rotate(90deg);
+            @include vendor(transform, rotate(90deg));
         }
         &--open {
             margin-right: $category-text-spacing;
-            transform: rotate(270deg);
+            @include vendor(transform, rotate(270deg));
         }
     }
-    &__cat-colour {
+    &__category-colour {
         width: 5px;
         flex-shrink: 0;
     }
     @each $category, $colour in $category-colours {
-        &__cat {
+        &__category {
             &--#{$category} {
-                #{$toolbox}__cat-colour {
+                #{$toolbox}__category-colour {
                     background-color: $colour;
                 }
             }
         }
-        &__cat-return {
-            #{$toolbox}__cat {
+        &__category-return {
+            #{$toolbox}__category {
                 &--#{$category} {
                     background-color: $colour;
                 }
             }
         }
     }
 
-    &__cat-menu {
+    &__category-menu {
         display: flex;
         flex-direction: column;
         flex-grow: 1;
         min-height: 0;
         overflow: auto;
     }
-    &__cat-return {
+    &__category-return {
         cursor: pointer;
         color: $white;
         text-align: center;
@@ -100,7 +100,7 @@ $category-colours: (
             margin-left: -($category-text-spacing * 2);
         }
     }
-    &__cat-text {
+    &__category-text {
         align-self: center;
         margin: $category-text-spacing;
         width: 100%;
@@ -131,15 +131,15 @@ $category-colours: (
         }
 
         @each $category, $colour in $category-colours {
-            #{$toolbox}__cat {
+            #{$toolbox}__category {
                 &--#{$category} {
-                    &:hover:not(#{$toolbox}__cat--selected) {
+                    &:hover:not(#{$toolbox}__category--selected) {
                         background-image: linear-gradient(to right, $white 25%, transparentize($colour, 0.8) 100%);
                     }
                 }
-                &--#{$category}#{$toolbox}__cat--selected {
+                &--#{$category}#{$toolbox}__category--selected {
                     background-color: transparentize($colour, 0.9);
-                    transition: background-color 0.25s ease;
+                    @include vendor(transition, background-color 0.25s ease);
                 }
             }
         }

src/scratch/hooks/toolbox.js

@@ -87,10 +87,10 @@ Blockly.Toolbox.prototype.showCategory_ = function (category_id) {
  * deriv-bot: Custom class names
  */
 Blockly.Toolbox.Category.prototype.getMenuItemClassName_ = function(selected) {
-    const classNames = ['toolbox__item', `toolbox__cat--${this.id_}`];
+    const classNames = ['toolbox__item', `toolbox__category--${this.id_}`];
 
     if (selected) {
-        classNames.push('toolbox__cat--selected');
+        classNames.push('toolbox__category--selected');
     }
 
     return classNames.join(' ');
@@ -230,16 +230,16 @@ Blockly.Toolbox.Category.prototype.createDom = function () {
     this.item_ = el_item;
 
     if (this.is_category_return_) {
-        const el_return_arrow = goog.dom.createDom('div', 'toolbox__cat-arrow toolbox__cat-arrow--back');
+        const el_return_arrow = goog.dom.createDom('div', 'toolbox__category-arrow toolbox__category-arrow--back');
         ReactDOM.render(<ArrowIcon className='arrow' />, el_return_arrow);
         el_item.appendChild(el_return_arrow);
     } else {
-        const el_colour = goog.dom.createDom('div', 'toolbox__cat-colour');
+        const el_colour = goog.dom.createDom('div', 'toolbox__category-colour');
         el_item.appendChild(el_colour);
     }
 
     const el_label = goog.dom.createDom('div', 'toolbox__label', this.name_);
-    const el_toolbox_text = goog.dom.createDom('div', 'toolbox__cat-text');
+    const el_toolbox_text = goog.dom.createDom('div', 'toolbox__category-text');
 
     this.label_ = el_label;
     el_toolbox_text.appendChild(el_label);
@@ -252,7 +252,7 @@ Blockly.Toolbox.Category.prototype.createDom = function () {
     el_item.appendChild(el_toolbox_text);
 
     if (this.has_child_category_) {
-        const el_category_arrow = goog.dom.createDom('div', 'toolbox__cat-arrow toolbox__cat-arrow--open');
+        const el_category_arrow = goog.dom.createDom('div', 'toolbox__category-arrow toolbox__category-arrow--open');
         ReactDOM.render(<ArrowIcon className='arrow' />, el_category_arrow);
         el_item.appendChild(el_category_arrow);
     } else if (this.iconURI_) {
@@ -343,7 +343,7 @@ Blockly.Toolbox.Category.prototype.setColour = function(node) {
 Blockly.Toolbox.CategoryMenu.prototype.createDom = function() {
     const className = this.parent_.horizontalLayout_ ?
         'toolbox__horizontal-category-menu' :
-        'toolbox__cat-menu';
+        'toolbox__category-menu';
 
     this.table = goog.dom.createDom('div', className);
     this.parentHtml_.appendChild(this.table);
@@ -369,7 +369,7 @@ Blockly.Toolbox.CategoryMenu.prototype.populate = function (domTree) {
 
         if (is_category()) {
             const row_class = childNode.getAttribute('is_category_return') ?
-                'toolbox__cat-return' :
+                'toolbox__category-return' :
                 'toolbox__row';
             const el_row = goog.dom.createDom('div', { class: row_class });