Tree styling WIP

- Mobile styling;
- Increased hit area for desktop and mobile on tree item;
- Added button mixin;
- Fixed scrolling for tree in tree pane;

src/styles-new/_constants-snow.scss

@@ -258,7 +258,8 @@ $colorMiniTabFgHov: #fff;
 
 // Mobile
 $colorMobilePaneLeft: darken($colorBodyBg, 2%);
-$colorMobilePaneLeftTreeItemBg: pullForward($colorMobilePaneLeft, 3%);
+$colorMobilePaneLeftTreeItemBg: rgba($colorBodyFg, 0.1); //pullForward($colorMobilePaneLeft, 3%);
+$colorMobilePaneLeftTreeItemFg: $colorItemTreeFg;
 $colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
 
 // Datetime Picker, Calendar

src/styles-new/_mixins.scss

@@ -79,7 +79,7 @@
     background-color: rgba($c, $a) !important;
 }
 
-/************************** CONTROLS */
+/************************** CONTROLS, BUTTONS */
 @mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.5) 0 0px 2px) {
     appearance: none;
     background: $bg;
@@ -99,6 +99,13 @@
     }
 }
 
+@mixin button($bg: $colorBtnBg, $fg: $colorBtnFg, $radius: $controlCr, $shdw: none) {
+    background: $bg;
+    color: $fg;
+    border-radius: $radius;
+    box-shadow: $shdw;
+}
+
 /************************** MATH */
 @function percentToDecimal($p) {
     @return $p / 100%;

src/ui/components/controls/pane.vue

@@ -24,8 +24,6 @@
 <style lang="scss">
     @import "~styles/sass-base";
 
-    // TODO: integrate approach at https://codepen.io/charlesh88/pen/KxpvOP
-
     $hitMargin: 2px;
     /**************************** BASE - MOBILE AND DESKTOP */
     .l-pane {
@@ -64,7 +62,6 @@
         &__contents {
             //display: none;
             opacity: 1;
-            overflow: hidden;
             pointer-events: inherit;
             transition: opacity 250ms ease 250ms;
             height: 100%;

src/ui/components/layout/Layout.vue

@@ -74,6 +74,17 @@
             backface-visibility: hidden;
             width: 40%;
 
+            .l-pane__contents {
+                display: flex;
+                flex-flow: column nowrap;
+
+                > [class*="__"] {
+                    // Margin between elements
+                    &:not(:last-child) { margin-bottom: $interiorMargin };
+                }
+            }
+
+
             [class*="collapse-button"] {
                 // For mobile, collapse button becomes menu icon
 
@@ -85,6 +96,7 @@
                     &:before {
                         color: $colorKey;
                         content: $glyph-icon-menu-hamburger;
+                        font-family: symbolsfont;
                         font-size: 1.4em;
                     }
                 }
@@ -140,6 +152,7 @@
         &__tree {
             // Tree component within __pane-tree
             flex: 1 1 100%;
+            overflow-y: auto;
         }
 
         &__object-view {

src/ui/components/layout/tree-item.vue

@@ -22,9 +22,29 @@
     </li>
 </template>
 
-<script>
-    // TODO: make sure hit area encompasses all of the tree item; currently is just the text
+<style lang="scss">
+    @import "~styles/sass-base";
 
+    .c-tree__item,
+    .c-search-result__item {
+        &__name {
+            width: 100%; // Make hit area as large as possible
+        }
+
+        body.mobile & {
+            @include button($bg: $colorMobilePaneLeftTreeItemBg, $fg: $colorMobilePaneLeftTreeItemFg);
+            height: $mobileTreeItemH;
+            margin-bottom: $interiorMarginSm;
+            .c-view-control {
+                font-size: 1em;
+                width: ceil($mobileTreeItemH * 0.75);
+            }
+        }
+    }
+
+</style>
+
+<script>
     import viewControl from '../controls/viewControl.vue'
     export default {
         name: 'tree-item',