Mobile styles WIP

- Mobile layout mostly done;
- Pane transitions;

src/styles-new/_constants-snow.scss

@@ -205,7 +205,7 @@ $legendCollapsedNameMaxW: 50%;
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 
 // Tree
-$colorTreeBg: #f5f5f5; // Used
+$colorTreeBg: #f0f0f0; // Used
 $colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
 $colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
 $colorItemTreeIcon: $colorKey; // Used

src/ui/components/controls/pane.vue

@@ -36,7 +36,7 @@
         }
 
         &__collapse-button {
-            @include test();
+            // @include test();
             position: absolute;
             display: flex;
             align-items: center;
@@ -72,12 +72,12 @@
         }
 
         /************************ MOBILE-FIRST STYLES */
-        @include test(green, 0.1);
+        // @include test(green, 0.1);
 
 
         /************************ DESKTOP STYLES */
         body.desktop & {
-            @include test(blue, 0.1);
+            //@include test(blue, 0.1);
 
             &__handle {
                 z-index: 1;

src/ui/components/layout/Layout.vue

@@ -56,8 +56,15 @@
         }
 
         &__pane-tree {
+            background: $colorTreeBg;
+            padding: $m;
+            backface-visibility: hidden;
+            transition: all 350ms ease-in-out;
             width: 30%;
 
+            // Add drop shadow
+            //background-image: linear-gradient(90deg, rgba(black, 0) calc(100% - 10px), rgba(black, 0.1) calc(100% - 2px), rgba(black, 0.2) 100%);
+
             [class*="collapse-button"] {
                 // For mobile, collapse button becomes menu icon
                 height: $mobileMenuIconD;
@@ -65,6 +72,7 @@
                 transform: translateX(100%);
 
                 &:before {
+                    color: $colorKey;
                     content: $glyph-icon-menu-hamburger;
                     font-size: 1.4em;
                 }
@@ -77,17 +85,11 @@
         }
 
         @include phonePortrait() {
-            border: 1px solid red;
-
             &__pane-tree {
-               // @include test(orange);
                 width: calc(100% - #{$mobileMenuIconD});
-                [class*="collapse-button"] {
-                   // transform: translateX(0);
-                }
 
                 + .l-pane {
-                    // Hide the next pane over when this pane is expanded
+                    // Hide pane-main over when this pane is expanded
                     opacity: 0;
                     pointer-events: none;
                 }
@@ -95,16 +97,9 @@
                 &[class*="--collapsed"] + .l-pane {
                     opacity: 1;
                     pointer-events: inherit;
+                    transition: opacity 500ms ease 250ms;
                 }
             }
-
-            &__pane-main {
-                //transform: translateX(calc(100% - #{$mobileMenuIconD}));
-                /*width: 100%;*/
-            }
-
-            > .l-pane__contents {
-            }
         }
 
         /********** MAIN AREA */
@@ -152,11 +147,6 @@
             }
         }
 
-        &__pane-tree {
-            background: $colorTreeBg;
-            padding: $m;
-        }
-
         &__pane-main {
             flex: 1 1 auto;
         }

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

@@ -10,6 +10,8 @@
 <style lang="scss">
     @import "~styles/sass-base";
 
+    // TODO: make sure hit area encompasses all of the tree item; currently is just the text
+
     .c-tree {
         overflow-x: hidden;
         overflow-y: auto;

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

@@ -23,6 +23,8 @@
 </template>
 
 <script>
+    // TODO: make sure hit area encompasses all of the tree item; currently is just the text
+
     import viewControl from '../controls/viewControl.vue'
     export default {
         name: 'tree-item',