Markup / scss refactor WIP

- Search input styling and dynamics WIP;

src/styles-new/_constants-snow.scss

@@ -233,9 +233,8 @@ $scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
 $scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
 
 // Splitter
-// All splitterD* values MUST both be either odd or even numbers
+$splitterD: 10px;
-$splitterD: 12px;
+$splitterDSm: 8px; // Smaller splitter, used inside elements like a Timeline view
-$splitterDSm: 10px; // Smaller splitter, used inside elements like a Timeline view
 $splitterHandleD: 4px;
 $colorSplitterBaseBg: $colorBodyBg;
 $colorSplitterBg: pullForward($colorSplitterBaseBg, 15%);

src/ui/components/controls/search.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="c-search"
+        :class="{ 'is-active': active === true }">
+        <!-- before will be the mag glass icon, set via CSS -->
+        <input class="c-search__input" type="search"/>
+        <a class="c-search__clear-input icon-x-in-circle"></a>
+    </div>
+</template>
+
+<style lang="scss">
+    @import "~styles/constants";
+    @import "~styles/constants-snow";
+    @import "~styles/glyphs";
+    @import "~styles/mixins";
+
+    /******************************* SEARCH */
+    .c-search {
+        @include nice-input();
+        display: flex;
+        align-items: center;
+        padding: 2px 4px;
+
+        &:before {
+            // Mag glass icon
+            content: $glyph-icon-magnify;
+            direction: rtl; // Aligns glyph to right-hand side of container, for transition
+            display: block;
+            font-family: symbolsfont;
+            flex: 0 1 auto;
+            opacity: 0.7;
+            overflow: hidden;
+            padding: 2px; // Prevents clipping
+            transition: width, padding, opacity 250ms ease;
+        }
+
+        &__input {
+            background: none  !important;
+            box-shadow: none !important; // !important needed to override default for [input]
+            flex: 1 1 100%;
+            padding-left: 0 !important;
+            padding-right: 0 !important;
+            width: 100%; // Width must be set to allow input to collapse below browser min
+        }
+
+        &__clear-input {
+            display: none;
+        }
+
+        &:hover {
+            box-shadow: inset rgba(black, 0.7) 0 0px 2px;
+            &:before {
+                opacity: 0.9;
+            }
+        }
+
+        &.is-active {
+            &:before {
+                padding: 2px 0px;
+                width: 0px;
+            }
+
+            .c-search__clear-input {
+                display: block;
+            }
+        }
+    }
+</style>
+
+<script>
+    export default {
+        props: {
+            active: String
+        }
+    }
+</script>

src/ui/components/layout/Layout.vue

@@ -3,7 +3,7 @@
         <div class="l-shell__main">
             <div class="l-pane l-shell__pane-tree" ref="shell-pane-tree">
                 <div class="l-shell__search">
-                    <MctSearch ref="shell-search"></MctSearch>
+                    <search ref="shell-search"></search>
                 </div>
                 <div class="l-shell__tree">
                     <MctTree ref="shell-tree"></MctTree>
@@ -100,9 +100,9 @@
 <script>
     import MctInspector from './MctInspector.vue';
     import MctMain from './MctMain.vue';
-    import MctSearch from './MctSearch.vue';
     import MctStatus from './MctStatus.vue';
     import MctTree from './MctTree.vue';
+    import search from '../controls/search.vue';
     import splitter from '../controls/splitter.vue';
 
 export default {
@@ -114,9 +114,9 @@ export default {
     components: {
         MctInspector,
         MctMain,
-        MctSearch,
         MctStatus,
         MctTree,
+        search,
         splitter
     }
 }

src/ui/components/layout/MCTSearch.vue

@@ -9,13 +9,12 @@
 
     /******************************* SEARCH */
     .c-search {
+        input[type=search] {
+            width: 100%;
+        }
 
         &-major {
             display: flex;
-
-            input[type=search] {
-                width: 100%;
-            }
         }
     }
 </style>