Markup / scss refactor WIP

- Add input-related styling;
- Cleanup scss in various files;
- Move search into own component;
- Refine padding approach in pane-tree;

src/styles-new/_constants-snow.scss

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

src/styles-new/_constants.scss

@@ -8,6 +8,10 @@ $controlFadeMs: 100ms;
 $browseToEditAnimMs: 400ms;
 $editBorderPulseMs: 500ms;
 
+/************************** SPATIAL */
 $interiorMarginSm: 3px;
 $interiorMargin: 5px;
-$interiorMarginLg: 10px;
+$interiorMarginLg: 10px;
+$inputTextPTopBtm: 2px;
+$inputTextPLeftRight: 5px;
+$inputTextP: $inputTextPTopBtm $inputTextPLeftRight;

src/styles-new/_global.scss

@@ -70,6 +70,16 @@ input, textarea {
     letter-spacing: inherit;
 }
 
+input[type=text],
+input[type=search],
+input[type=number] {
+    @include nice-input();
+    padding: $inputTextP;
+    &.numeric {
+        text-align: right;
+    }
+}
+
 h1, h2, h3 {
     letter-spacing: 0.04em;
     margin: 0;
@@ -92,4 +102,4 @@ ol, ul {
     list-style: none;
     margin: 0;
     padding-left: 0;
-}
+}

src/styles-new/_mixins.scss

@@ -20,6 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+/************************** VISUALS */
 @mixin ancillaryIcon($d, $c) {
     // Used for small icons used in combination with larger icons,
     // like the link and alert icons in tree items.
@@ -61,15 +62,7 @@
     background-size: $d $d;
 }
 
-
-@function percentToDecimal($p) {
-	@return $p / 100%;
-}
-
-@function decimalToPercent($d) {
-	@return percentage($d);
-}
-
+/************************** TEXT */
 @mixin ellipsize() {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -84,4 +77,33 @@
 
 @mixin test($c: #ffcc00, $a: 0.2) {
     background-color: rgba($c, $a) !important;
+}
+
+/************************** CONTROLS */
+@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.5) 0 0px 2px) {
+    appearance: none;
+    background: $bg;
+    border: none;
+    color: $fg;
+    border-radius: $controlCr;
+    box-shadow: inset $shdw;
+    outline: none;
+
+    &:focus {
+        outline: 0;
+    }
+
+    &.error {
+        background-color: $colorFormFieldErrorBg;
+        color: $colorFormFieldErrorFg;
+    }
+}
+
+/************************** MATH */
+@function percentToDecimal($p) {
+    @return $p / 100%;
+}
+
+@function decimalToPercent($d) {
+    @return percentage($d);
 }

src/styles-new/core.scss

@@ -2,4 +2,5 @@
 @import "constants";
 @import "constants-snow";
 @import "glyphs";
+@import "mixins";
 @import "global";

src/ui/components/controls/splitter.vue

@@ -75,7 +75,7 @@
         // Collapse button
         background: $colorSplitterBg;
         display: none; // Only display if splitter is collapsible, see below
-        width: $size * 3;
+        width: $splitterD;
         height: 40px;
         transition: $transOut;
 
@@ -120,8 +120,6 @@
                 content: $glyph-icon-arrow-right;
             }
         }
-
-
     }
 </style>
 

src/ui/components/layout/Layout.vue

@@ -3,8 +3,7 @@
         <div class="l-shell__main">
             <div class="l-pane l-shell__pane-tree" ref="shell-pane-tree">
                 <div class="l-shell__search">
-                    <!-- Change to search component -->
-                    <input placeholder="Search"/>
+                    <MctSearch ref="shell-search"></MctSearch>
                 </div>
                 <div class="l-shell__tree">
                     <MctTree ref="shell-tree"></MctTree>
@@ -82,8 +81,9 @@
     }
 
     &__pane-tree {
+        $m: $interiorMargin;
         background: $colorTreeBg;
-        padding: $interiorMarginLg;
+        padding: $m $m + ($splitterD - $splitterHandleD) $m $m;
         width: 300px
     }
 
@@ -100,6 +100,7 @@
 <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 splitter from '../controls/splitter.vue';
@@ -113,6 +114,7 @@ export default {
     components: {
         MctInspector,
         MctMain,
+        MctSearch,
         MctStatus,
         MctTree,
         splitter

src/ui/components/layout/MCTSearch.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="c-search c-search-major">
+        <input type="search" placeholder="Search"/>
+    </div>
+</template>
+
+<style lang="scss">
+    @import "~styles/constants";
+
+    /******************************* SEARCH */
+    .c-search {
+
+        &-major {
+            display: flex;
+
+            input[type=search] {
+                width: 100%;
+            }
+        }
+    }
+</style>
+
+<script>
+    export default {
+    }
+</script>