[Frontend] Refactoring to use Victorizr instead of media queries

open #639
open #683
open #169
open #494
Replaced MQ around mobile/_tree.scss ul.tree;
Removed MQ desktop around hover in mixin btnBase;
Reversed orientation of mobile tree arrows for #494;

platform/commonUI/general/res/sass/_mixins.scss

@@ -303,16 +303,14 @@
 	.icon {
 		color: $ic;
 	}
-	@include desktop {
-		@if $bgHov != none {
-			&:not(.disabled):hover {
-				@include background-image($bgHov);
-				>.icon {
-					color: lighten($ic, $ltGamma);
-				}
-			}
-		}
-	}
+    @if $bgHov != none {
+        &:not(.disabled):hover {
+            @include background-image($bgHov);
+            >.icon {
+                color: lighten($ic, $ltGamma);
+            }
+        }
+    }
 }
 
 @mixin input-base($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {

platform/commonUI/general/res/sass/mobile/_item.scss

@@ -24,11 +24,21 @@
 // representation. Instead of a grid,
 // a list is used.
 
+
+// Refactored to use Victorizr
 .items-holder {
     .item {
         &.grid-item {
             $titleH: 30px;
-            @include phoneandtablet {
+        }
+    }
+}
+
+body.phone,
+body.tablet {
+    .items-holder {
+        .item {
+            &.grid-item {
                 width: 100%;
                 >.contents {
                     top: 0px; right: $interiorMarginLg; bottom: 0px; left: $interiorMarginLg;
@@ -36,7 +46,6 @@
                 .bar {
                     &.top-bar {
                         // Becomes the right side of the item
-                        //@include test(blue);
                         bottom: 0 !important; left: auto !important; right: 20px !important;
                         width: 40px !important; height: auto !important;
                         text-align: right;
@@ -46,7 +55,7 @@
                         left: $mobileListIconSize + $interiorMarginLg;
                         right: 60px;
                     }
-                    
+
                 }
                 .item-main {
                     .item-type,
@@ -63,8 +72,14 @@
                     }
                 }
             }
+        }
+    }
+}
 
-            @include phone {
+body.phone {
+    .items-holder {
+        .item {
+            &.grid-item {
                 $dHei: $phoneItemH;
                 height: $dHei;
                 .bar {
@@ -85,8 +100,14 @@
                     }
                 }
             }
-            
-            @include tablet {
+        }
+    }
+}
+
+body.tablet {
+    .items-holder {
+        .item {
+            &.grid-item {
                 $dHei: $tabletItemH;
                 height: $dHei;
                 .bar {

platform/commonUI/general/res/sass/mobile/_tree.scss

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-@include phoneandtablet {
+body.touch {
     ul.tree {
         // Sets the margin on the left, which causes the
         // running indentation after each folder is made
@@ -42,10 +42,10 @@
                 &:before {
                     content: "\7d";
                     left: 50%;
-                    @include transform(translateX(-50%) rotate(90deg));
+                    @include transform(translateX(-50%) rotate(270deg));
                 }
                 &.expanded:before {
-                    @include transform(translateX(-50%) rotate(270deg));
+                    @include transform(translateX(-50%) rotate(90deg));
                 }
             }
 		}