Markup / scss refactor WIP

- Fix modifiers to correctly use '--';
- Fix icon element in search input to disallow shrinking;

src/ui/components/controls/search.vue

@@ -25,7 +25,7 @@
             direction: rtl; // Aligns glyph to right-hand side of container, for transition
             display: block;
             font-family: symbolsfont;
-            flex: 0 1 auto;
+            flex: 0 0 auto;
             opacity: 0.7;
             overflow: hidden;
             padding: 2px; // Prevents clipping

src/ui/components/controls/viewControl.vue

@@ -1,6 +1,6 @@
 <template>
     <span class="c-view-control"
-    :class="{ 'c-view-control-expanded' : expanded }"
+    :class="{ 'c-view-control--expanded' : expanded }"
     @click="toggle"></span>
 </template>
 
@@ -23,11 +23,11 @@
             font-family: symbolsfont;
             font-size: 1rem * $s;
             position: absolute;
-            transform-origin: floor(($d / 2) * $s);
+            transform-origin: floor(($d / 2) * $s); // This is slightly better than 'center'
             transition: transform 100ms ease-in-out;
         }
 
-        &-expanded {
+        &--expanded {
             &:before {
                 transform: rotate(90deg);
             }

src/ui/components/layout/MCTSearch.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="c-search c-search-major">
+    <div class="c-search c-search--major">
         <input type="search" placeholder="Search"/>
     </div>
 </template>
@@ -13,7 +13,7 @@
             width: 100%;
         }
 
-        &-major {
+        &--major {
             display: flex;
         }
     }