[Frontend] Refactor CSS to not use 'desktop' media query

open #639
Refactored all usage of @include desktop to use CSS selector body.desktop
instead; Still to-do: deal with desktopandtablet usage with hover bubbles
and mixins btnBase;

platform/commonUI/general/res/sass/controls/_buttons.scss

@@ -111,156 +111,138 @@ $pad: $interiorMargin * $baseRatio;
     // Color and styling additionally in _controls.scss
 }
 
-.mini-tab {
+body.desktop.mini-tab {
     // Meant to be used as pane hide/show control elements in concert with mct-splitter
-    //@extend .ui-symbol;
+    $iconH: $uePaneMiniTabH;
-    @include desktop {
+    $iconW: $uePaneMiniTabW;
-        //@include test(green);
+    $iconInnerLR: 0;
-        $iconH: $uePaneMiniTabH;
+    $arwD: 9px;
-        $iconW: $uePaneMiniTabW;
+    $arwOffsetX: 0px;
-        $iconInnerLR: 0;
+    $arwAnimOffsetX: 2px + $iconInnerLR;
-        $arwD: 9px;
+    $cBg: pullForward($colorBodyBg, 15%);
-        $arwOffsetX: 0px;
+    $cFg: $cBg;
-        $arwAnimOffsetX: 2px + $iconInnerLR;
-        $cBg: pullForward($colorBodyBg, 15%);
-        $cFg: $cBg;
 
+    @include border-radius($basicCr);
+    @include box-sizing(border-box);
+    @include trans-prop-nice((color, background-color), 100ms);
+    color: $cFg;
+    cursor: pointer;
+    font-family: symbolsfont;
+    font-size: $arwD;
+    display: block;
+    position: absolute;
+    line-height: $iconH;
+    height: $iconH; width: $iconW;
+    text-align: center;
 
-        @include border-radius($basicCr);
+    &:hover {
-        //@include boxShdw($shdwBtns);
+        color: $colorKey;
-        @include box-sizing(border-box);
+    }
-        @include trans-prop-nice((color, background-color), 100ms);
-        color: $cFg;
-        cursor: pointer;
-        font-family: symbolsfont;
-        font-size: $arwD;
-        display: block;
-        position: absolute;
-        line-height: $iconH;
-        height: $iconH; width: $iconW;
-        text-align: center;
 
+    &.collapsed {
+        // State when the pane this element controls has been collapsed
+        @include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
+        &:before { opacity: 0; }
+        &:after { opacity: 1; }
         &:hover {
-            //background-color: $cBg;
+            &:before { opacity: 1; }
-            color: $colorKey; //pullForward($cFg, $ltGamma);
+            &:after { opacity: 0; }
         }
 
-        &.collapsed {
+    }
-            // State when the pane this element controls has been collapsed
-            @include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
-            &:before { opacity: 0; }
-            &:after { opacity: 1; }
-            &:hover {
-                &:before { opacity: 1; }
-                &:after { opacity: 0; }
-            }
 
-        }
+    &:before,
+    &:after {
+        @include trans-prop-nice((left, right, opacity), 250ms);
+        display: block;
+        height: 100%;
+        position: absolute;
+    }
 
-        &:before,
+    &:before {
-        &:after {
+        // Always the arrow icon
-            //@include test();
+        width: $arwD;
-            @include trans-prop-nice((left, right, opacity), 250ms);
+    }
-            display: block;
+    &:after {
-            height: 100%;
+        // Always icon; content is set in _layout.scss
-            position: absolute;
+        width: 100%;
-        }
+        text-align: center;
+        opacity: 0;
+    }
 
+    &.anchor-left {
+        // |<
+        text-align: right;
         &:before {
-            // Always the arrow icon
+            content:'\3c'; // Collapse left icon e613
-            //@include test(green);
+            right: $iconInnerLR;
-            //font-size: $arwD;
-            width: $arwD;
         }
-        &:after {
+        &.collapsed {
-            // Always icon; content is set in _layout.scss
+            @include border-left-radius(0);
-            width: 100%;
-            text-align: center;
-            opacity: 0;
-        }
-
-        &.anchor-left {
-            // |<
-            text-align: right;
-            &:before {
-                content:'\3c'; // Collapse left icon e613
-                right: $iconInnerLR;
-            }
-            //&:hover:before { right: $arwAnimOffsetX; }
-            &.collapsed {
-                @include border-left-radius(0);
-                text-align: left;
-                &:before {
-                    content:'\3e';
-                    left: $iconInnerLR;
-                }
-                &:hover:before { left: $arwAnimOffsetX; }
-            }
-        }
-        &.anchor-right {
-            // >|
             text-align: left;
             &:before {
-                content:'\3e'; // Collapse right icon e614
+                content:'\3e';
                 left: $iconInnerLR;
             }
-            //&:hover:before { left: $arwAnimOffsetX; }
+            &:hover:before { left: $arwAnimOffsetX; }
-            &.collapsed {
+        }
-                @include border-right-radius(0);
+    }
-                &:before {
+    &.anchor-right {
-                    text-align: right;
+        // >|
-                    content:'\3c';
+        text-align: left;
-                    right: $iconInnerLR;
+        &:before {
-                }
+            content:'\3e'; // Collapse right icon e614
-                &:hover:before { right: $arwAnimOffsetX; }
+            left: $iconInnerLR;
+        }
+        &.collapsed {
+            @include border-right-radius(0);
+            &:before {
+                text-align: right;
+                content:'\3c';
+                right: $iconInnerLR;
             }
+            &:hover:before { right: $arwAnimOffsetX; }
         }
     }
 }
 
-.mini-tab-icon {
+body.desktop.mini-tab-icon {
     // Meant to be used as pane hide/show control elements in concert with mct-splitter
-    //@extend .ui-symbol;
+    $d: $uePaneMiniTabW;
-    @include desktop {
+    color: pullForward($colorBodyBg, 15%);
-        $d: $uePaneMiniTabW;
+    cursor: pointer;
-        //@include trans-prop-nice(transform, 150ms);
+    display: block;
-        color: pullForward($colorBodyBg, 15%);
+    font-family: symbolsfont;
-        cursor: pointer;
+    font-size: $d;
-        display: block;
+    position: absolute;
-        font-family: symbolsfont;
+    height: $d; width: $d;
-        font-size: $d;
+    line-height: $d;
+    overflow: hidden;
+    word-break: break-all;
+
+    &.collapsed {
+        $d: $uePaneMiniTabCollapsedW;
+        width: $d; font-size: $d;
+    }
+
+    &:before,
+    &:after {
         position: absolute;
-        height: $d; width: $d;
+        display: inherit;
-        line-height: $d;
+    }
-        overflow: hidden;
-        word-break: break-all;
 
-        &.collapsed {
+    &:before {
-            $d: $uePaneMiniTabCollapsedW;
+        content: '\78'; // X icon
-            width: $d; font-size: $d;
+    }
-        }
 
-        &:before,
+    &:hover {
-        &:after {
+        color: $colorKey;
-            position: absolute;
-            display: inherit;
-        }
-
-        &:before {
-            content: '\78'; // X icon
-        }
-
-        &:hover {
-            color: $colorKey;
-            //@include transform(scale(1.2));
-        }
     }
 }
 
 .l-btn-set {
     // Buttons that have a very tight conceptual grouping - no internal space between them.
     // Structure: .btn-set > mct-representation class=first|last > .s-btn
-    //@include test(red);
     font-size: 0; // Remove space between s-btn elements due to white space in markup
 
     .s-btn {

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -235,16 +235,16 @@ label.checkbox.custom {
         font-size: 0.7em;
         @include webkitProp(flex, '0 0 1');
     }
+}
 
-    @include desktop {
+body.desktop .object-header {
+    .context-available {
+        @include trans-prop-nice(opacity, 0.25s);
+        opacity: 0;
+    }
+    &:hover {
         .context-available {
-            @include trans-prop-nice(opacity, 0.25s);
+            opacity: 1;
-            opacity: 0;
-        }
-        &:hover {
-            .context-available {
-                opacity: 1;
-            }
         }
     }
 }

platform/commonUI/general/res/sass/controls/_messages.scss

@@ -275,17 +275,17 @@
 // Message as singleton
 .t-message-single {
     @include messageBlock(80px);
+}
 
-    @include desktop {
+body.desktop .t-message-single {
-        .l-message,
+    .l-message,
-        .bottom-bar {
+    .bottom-bar {
-            @include absPosDefault();
+        @include absPosDefault();
-        }
+    }
 
-        .bottom-bar {
+    .bottom-bar {
-            top: auto;
+        top: auto;
-            height: $ovrFooterH;
+        height: $ovrFooterH;
-        }
     }
 }
 
@@ -295,7 +295,6 @@
 
     .message-contents {
         .l-message {
-            //border-bottom: 1px solid pullForward($colorOvrBg, 20%);
             @include border-radius($controlCr);
             background: rgba($colorOvrFg, 0.1);
             margin-bottom: $interiorMargin;
@@ -303,7 +302,6 @@
 
             .message-contents,
             .bottom-bar {
-                //@include test(green);
                 position: relative;
             }
 
@@ -320,8 +318,8 @@
             }
         }
     }
+}
 
-    @include desktop {
+body.desktop .t-message-list {
-        .message-contents .l-message { margin-right: $interiorMarginLg; }
+    .message-contents .l-message { margin-right: $interiorMarginLg; }
-    }
 }

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

@@ -156,7 +156,7 @@
     }
 }
 
-@include desktop {
+body.desktop {
     .desktop-hide {
         display: none;
     }

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

@@ -78,6 +78,8 @@
 
 // Desktop monitors in any orientation
 @mixin desktopandtablet {
+    // Keeping only for legacy - should not be used moving forward
+    // Use body.desktop, body.tablet instead.
     @media #{$tabletPortrait},
            #{$tabletLandscape},
            #{$desktop} {
@@ -87,6 +89,8 @@
 
 // Desktop monitors in any orientation
 @mixin desktop {
+    // Keeping only for legacy - should not be used moving forward
+    // Use body.desktop instead.
     @media #{$desktop} {
         @content
     }

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

@@ -63,11 +63,6 @@ ul.tree {
                 @include transform(rotate(90deg));
             }
         }
-		@include desktop {
-			&:hover {
-				color: $colorItemTreeVCHover !important;
-			}
-		}
 	}
 
 	.t-object-label {
@@ -94,18 +89,6 @@ ul.tree {
 		}
 	}
 
-	&:not(.selected) {
-		@include desktop {
-			&:hover {
-				background: $colorItemTreeHoverBg;
-				color: $colorItemTreeHoverFg;
-				.t-item-icon {
-					color: $colorItemTreeIconHover;
-				}
-			}
-		}
-	}
-
 	&:not(.loading) {
 		cursor: pointer;
 	}
@@ -123,6 +106,26 @@ ul.tree {
 	}
 }
 
+body.desktop {
+    .tree-item,
+    .search-result-item {
+        .view-control {
+            &:hover {
+                color: $colorItemTreeVCHover !important;
+            }
+        }
+        &:not(.selected) {
+            &:hover {
+                background: $colorItemTreeHoverBg;
+                color: $colorItemTreeHoverFg;
+                .t-item-icon {
+                    color: $colorItemTreeIconHover;
+                }
+            }
+        }
+    }
+}
+
 mct-representation {
     &.s-status-pending {
         .t-object-label {

platform/commonUI/general/res/sass/user-environ/_frame.scss

@@ -66,17 +66,6 @@
 		.view-switcher {
 			z-index: 10;
 		}
-		// Hide the view switcher by default when it's in an element that's in a frame context
-		// Frame template is used because we need to target the lowest nested frame
-		@include desktop {
-			.view-switcher {
-				opacity: 0;
-			}
-			&:hover .view-switcher {
-				// Show the view switcher on frame hover
-				opacity: 1;
-			}
-		}
 	}
 	.view-switcher {
 		// Hide the name when the view switcher is in a frame context
@@ -85,3 +74,14 @@
 		}
 	}
 }
+ body.desktop .frame.frame-template {
+     // Hide the view switcher by default when it's in an element that's in a frame context
+     // Frame template is used because we need to target the lowest nested frame
+     .view-switcher {
+         opacity: 0;
+     }
+     &:hover .view-switcher {
+         // Show the view switcher on frame hover
+         opacity: 1;
+     }
+ }

platform/commonUI/general/res/sass/user-environ/_layout.scss

@@ -137,48 +137,6 @@
 
     .mini-tab-icon.toggle-pane {
         z-index: 5;
-        @include desktop {
-            $d: $uePaneMiniTabH;
-            $paneExpandedOffset: $splitterD + $uePaneMiniTabW;
-            top: $bodyMargin;
-            height: $d;
-            line-height: $d;
-            &:after {
-                // Always the icon that shows when the pane is collapsed
-                opacity: 0;
-            }
-            &.collapsed {
-                &:before {
-                    opacity: 0;
-                }
-                &:after {
-                    opacity: 1;
-                }
-            }
-            &.toggle-tree.anchor-left {
-                left: 0;
-                @include transform(translateX(-1 * $paneExpandedOffset));
-                &:after {
-                    content: '\6d'; // Menu 'hamburger' icon
-                }
-                &.collapsed {
-                    left: 0;
-                    @include transform(translateX((-1 * $ueCollapsedPaneEdgeM) + $interiorMargin));
-                }
-                &:not(.collapsed):before {
-                    @include trans-prop-nice(opacity, 200ms, 200ms);
-                }
-            }
-            &.toggle-inspect.anchor-right {
-                right: $bodyMargin;
-                &:after {
-                    content: '\e615'; // Eye icon
-                }
-                &.collapsed {
-                    right: $interiorMargin;
-                }
-            }
-        }
     }
     &.items {
         .object-browse-bar {
@@ -190,6 +148,49 @@
     }
 }
 
+body.desktop .pane .mini-tab-icon.toggle-pane {
+    $d: $uePaneMiniTabH;
+    $paneExpandedOffset: $splitterD + $uePaneMiniTabW;
+    top: $bodyMargin;
+    height: $d;
+    line-height: $d;
+    &:after {
+        // Always the icon that shows when the pane is collapsed
+        opacity: 0;
+    }
+    &.collapsed {
+        &:before {
+            opacity: 0;
+        }
+        &:after {
+            opacity: 1;
+        }
+    }
+    &.toggle-tree.anchor-left {
+        left: 0;
+        @include transform(translateX(-1 * $paneExpandedOffset));
+        &:after {
+            content: '\6d'; // Menu 'hamburger' icon
+        }
+        &.collapsed {
+            left: 0;
+            @include transform(translateX((-1 * $ueCollapsedPaneEdgeM) + $interiorMargin));
+        }
+        &:not(.collapsed):before {
+            @include trans-prop-nice(opacity, 200ms, 200ms);
+        }
+    }
+    &.toggle-inspect.anchor-right {
+        right: $bodyMargin;
+        &:after {
+            content: '\e615'; // Eye icon
+        }
+        &.collapsed {
+            right: $interiorMargin;
+        }
+    }
+}
+
 .split-layout {
     // Specific elements margins
     .holder.holder-treeview-elements {
@@ -339,7 +340,7 @@
     }
 }
 
-@include desktop {
+body.desktop {
     .holder-all {
         min-width: $ueDesktopMinW;
     }